يوضح هذا المستند المبادئ والإرشادات لأي شخص إما يصمم إعدادات نظام Android الأساسي أو إعدادات GMS الأساسية (إعدادات Google) أو أي مطوري يصممون إعدادات لتطبيق Android الخاص بهم.
مبادئ التصميم
تقديم نظرة عامة جيدة
يجب أن يكون المستخدمون قادرين على إلقاء نظرة خاطفة على شاشات الإعدادات وفهم جميع الإعدادات الفردية وقيمها.
الشكل 1. يتم عرض الإعدادات وقيمها الحالية على شاشة المستوى الأعلى
تنظيم السلع بسهولة
ضع الإعدادات المستخدمة كثيرًا في أعلى الشاشة. حدد عدد الإعدادات على شاشة واحدة. قد يكون عرض أكثر من 10 إلى 15 عنصرًا أمرًا مربكًا. يمكنك إنشاء قوائم بسيطة من خلال نقل بعض الإعدادات إلى شاشة منفصلة.
الشكل 2. تظهر الإعدادات الشائعة في أعلى الشاشة
تسهيل العثور على الإعدادات
في بعض الحالات، قد يكون من المفيد تكرار إعداد فردي على شاشتين مختلفتين. يمكن أن تؤدي المواقف المختلفة إلى تغيير المستخدمين لإعداد ما، لذا فإن تضمين الإعداد في أماكن متعددة سيساعد المستخدمين في العثور على هذا العنصر.
بالنسبة إلى الإعدادات المكررة، أنشئ شاشة منفصلة للإعداد واحصل على نقاط دخول من أماكن مختلفة.
 |
 |
الشكلان 3 و4: يظهر "صوت الإشعار الافتراضي" على كل من شاشتى "الإشعار" و "الصوت"
استخدام عنوان وحالة واضحَين
اجعل عناوين الإعدادات موجزة وذات مغزى. تجنب استخدام العناوين الغامضة مثل "الإعدادات العامة". اعرض الحالة أسفل العنوان لتمييز قيمة الإعداد. اعرض التفاصيل المحددة بدلاً من وصف العنوان فقط.
عند اختيار عنوان:
- ضع النص الأكثر أهمية في التصنيف أولاً.
- أعِد صياغة الكلمات السلبية مثل "لا" أو "مطلقًا" إلى عبارات محايدة مثل "حظر".
- استخدم التصنيفات غير الشخصية مثل "الإشعارات" بدلاً من "إرسال إشعار إليّ". استثناء: إذا كانت الإشارة إلى المستخدم أمرًا ضروريًا لفهم الإعداد، فاستخدم الشخص الثاني ("أنت") بدلاً من الشخص الأول ("I").
يجب تجنُّب ما يلي في العناوين:
- العبارات العامة، مثل التحديد أو التغيير أو التعديل أو التعديل أو الإدارة أو الاستخدام أو الاختيار أو الاختيار.
- تكرار الكلمات من مُقسّم القسم أو عنوان الشاشة الفرعية.
- المصطلحات التقنية.
أنواع الصفحات
قائمة الإعدادات
هذا هو النوع الأكثر شيوعًا من الشاشات. حيث يسمح بوضع إعدادات متعددة معًا. يمكن أن تكون قوائم الإعدادات مزيجًا من عناصر التحكم، مثل مفاتيح التبديل والقوائم وأشرطة التمرير.
إذا كان هناك العديد من الإعدادات في فئة واحدة، فيمكن تجميعها معًا. راجِع التجميع والفواصل لمزيد من التفاصيل.
الشكل 5. مثال على قائمة الإعدادات
العرض على شكل قائمة
تُستخدم طريقة عرض القائمة لإظهار قائمة عناصر مثل التطبيقات والحسابات والأجهزة وغيرها. يمكن إضافة عناصر التحكّم في الفلترة أو الترتيب إلى الشاشة.
الشكل 6. مثال على طريقة العرض على شكل قائمة
شاشة العنصر
تُستخدم شاشة الكيان لعرض إعدادات عنصر مميز مثل تطبيق أو حساب أو جهاز أو شبكة Wi-Fi أو غير ذلك.
مرئيًا، يظهر الكيان في الجزء العلوي مع رمز وعنوان وعنوان فرعي. يجب أن تكون جميع الإعدادات في هذه الشاشة مرتبطة بهذا الكيان.
الشكل 7. مثال على شاشة الكيان المستخدَمة في "معلومات التطبيق"
الشكل 8. مثال على شاشة "الكيان" المستخدَمة في مساحة التخزين
الإعداد الرئيسي
يُستخدم الإعداد الرئيسي بشكل أفضل عند تفعيل ميزة كاملة أو إيقافها، مثل Wi-Fi أو البلوتوث. باستخدام مفتاح تحويل أعلى الشاشة، يمكن للمستخدم التحكم في هذه الميزة. يؤدي استخدام الإعداد الرئيسي لإيقاف الميزة إلى إيقاف جميع الإعدادات الأخرى ذات الصلة.
إذا كانت إحدى الميزات تحتاج إلى وصف نصي أطول، يمكن استخدام الإعداد الرئيسي لأنّ نوع الشاشة هذا يسمح بنص تذييل أطول.
وإذا كانت هناك حاجة إلى تكرار أحد الإعدادات أو ربطها من شاشات متعددة، استخدِم الإعداد الرئيسي. نظرًا لأن الإعداد الرئيسي عبارة عن شاشة منفصلة، فستتجنب وجود مفاتيح تبديل متعددة في أماكن مختلفة لنفس الإعداد.
الشكل 9. مثال على الإعداد الرئيسي المستخدم في شاشة إشعارات التطبيق؛ يؤدي إيقاف مفتاح التبديل الرئيسي إلى إيقاف الميزة بأكملها لهذا التطبيق
الشكل 10. مثال على الإعداد الرئيسي المستخدم في شاشة "إشعارات التطبيق" مع زر الإيقاف/التفعيل الرئيسي
شاشة تحديد زر الاختيار
تُستخدم هذه الشاشة عندما يحتاج المستخدم إلى تحديد أحد الإعدادات. يمكن عرض أزرار الاختيار في مربع حوار أو على شاشة منفصلة. لا ينبغي استخدام أزرار الاختيار إلى جانب أشرطة التمرير أو القوائم أو مفاتيح التبديل.
يمكن أن تحتوي شاشة زر الاختيار على صورة في الجزء العلوي ونص التذييل في الجزء السفلي. يمكن أن تحتوي أزرار الاختيار الفردية على نص فرعي مع العنوان.
الشكل 11. يجب عدم استخدام أزرار الاختيار في قائمة الإعدادات.
الشكل 12. هذه هي طريقة استخدام أزرار الاختيار بشكل صحيح في الإعدادات
المكوّنات
العنوان
بدءًا من الإصدار Android 8.0، يعرض شريط أدوات الإجراءات البحث والمساعدة إلى جانب الإجراءات الأخرى ذات الصلة. لا يُنصح بقوائم القائمة الكاملة لأن المستخدمين قد لا يكتشفون الإجراءات المخفية في هذه القوائم.
لأشرطة الأدوات التي لا تتضمن إجراءات خاصة بشاشة: عرض إجراءات البحث والمساعدة
الشكل 13. شريط أدوات يحتوي على إجراءات البحث والمساعدة
بالنسبة إلى أشرطة الأدوات التي تحتوي على إجراء واحد: اعرض الإجراء قبل البحث.
الشكل 14. شريط الأدوات يحتوي على إجراء واحد قبل إجراء البحث والمساعدة
بالنسبة إلى أشرطة الأدوات التي تحتوي على أكثر من إجراء واحد: يمكنك وضع الإجراء الأساسي قبل البحث، مع وضع الإجراءات المتقدمة في القائمة الكاملة.
إذا كانت جميع الإجراءات متقدمة أو مفيدة فقط لمجموعة صغيرة من المستخدمين، ففكر في وضع جميع الإجراءات في القائمة الكاملة.
الشكل 15. شريط أدوات مزود بقائمة كاملة للإجراءات
عنوان العنصر
يمكن أن يعرض عنوان الكيان عنوانًا فقط، أو عنوانًا يحتوي على نص فرعي (يُسمح باستخدام عدة أسطر للنص الفرعي). الإجراء أدناه اختياري. يمكنك تحديد إجراءين بحدّ أقصى
الشكل 16. عنوان العنصر
سيتم تمرير الرمز وجزء العنوان (App1) أسفل العنوان (معلومات التطبيق).
الشكل 17. يعد عنوان معلومات التطبيق هنا جزءًا من شريط الأدوات، بينما سيتم تمرير بقية الشاشة تحته
رابط القائمة
العنوان إلزامي. يجب عليك أيضًا إظهار نص فرعي يسلط الضوء على حالة الإعداد. ويعتبر استخدام أحد الرموز أمرًا اختياريًا.
حاول جعل نص العنوان موجزًا. إذا كانت العناوين طويلة، فيمكن أن تستمر في السطر التالي بدلاً من اقتطاعها. لا تمكّن القوائم أو الإجراءات بالضغط المطوّل.
أمثلة:
الشكل 18. رابط قائمة يحتوي على رمز وعنوان ونص فرعي
الشكل 19. رابط قائمة مع عنوان ونص فرعي
الشكل 20. رابط قائمة مع العنوان فقط
رابط قائمة يحتوي على رمز وعنوان ونص فرعي وهدف نتيجة منفصل على اليسار
ويجب أن تستخدم أهداف النقر الأخرى لون المظهر.
الشكل 21. مثال على قائمة النقر مرّتين
رابط قائمة يحتوي على رمز وعنوان ونص فرعي وإحصاءات/رقم/رمز تنبيه
يمكن عرض القيم العددية مثل النسبة المئوية والوقت على اليمين إلى جانب النص الفرعي، بينما يمكن إظهار الرسم البياني الشريطي أدناه.
عادةً، يتم تقديم القيم الرقمية على اليمين حتى يتمكن المستخدمون من نظرة سريعة عليها ومقارنتها بسهولة.
الشكل 22. مثال على قائمة تتضمّن رمزًا وعنوانًا وإحصائيات ورسمًا
التجميع والفواصل
إذا كانت الشاشة تحتوي على العديد من الإعدادات، فيمكن تجميعها وفصلها بمُقسّم. على عكس إصدارات Android القديمة، يتم الآن استخدام الفواصل لتجميع الإعدادات في مجموعة، بدلاً من فصل الإعدادات الفردية.
إذا كانت الإعدادات في مجموعة ذات صلة وثيقة، يمكنك إضافة عنوان للمجموعة. إذا كنت تستخدم عنوان مجموعة، فيجب عليك دائمًا تضمين مُقسّم.
الشكل 23. الإعدادات المجمّعة مع الفواصل
تبديل
التبديل باستخدام الرمز والعنوان والنص الفرعي
الشكل 24. التبديل باستخدام الرمز والعنوان والنص الفرعي
التبديل بين العنوان والنص الفرعي
الشكل 25. التبديل باستخدام العنوان والنص الفرعي
التبديل باستخدام العنوان فقط
يمكن أن تكون العناوين مصحوبة برمز على اليسار.
الشكل 26. التبديل مع العنوان فقط
عنصر قائمة مع مفتاح تحكّم
يمكنك الجمع بين عنصر قائمة مع مفتاح تحكُّم. يعمل النقر على الجانب الأيسر من الخط العمودي كرابط وينقل المستخدم إلى الشاشة التالية. يعمل الجانب الأيمن كمفتاح تبديل قياسي.
بالنسبة إلى عنصر القائمة على الجانب الأيمن، يكون العنوان إلزاميًا. الأيقونة والنص الفرعي اختياريان.
الشكل 27. عنصر قائمة ومفتاح تحكّم
شريط التمرير
إنّ الرمز اختياري في شريط التمرير.
الشكل 28. شريط التمرير
الزر الذي يظهر على الشاشة
تستخدم الإجراءات الإيجابية لون المظهر، بينما تكون الإجراءات السلبية باللون الرمادي. قد تتضمن الإجراءات الإيجابية فتح تطبيق وتثبيت تطبيق وإضافة عنصر جديد وما إلى ذلك. تتضمن الإجراءات السلبية محو البيانات وإلغاء تثبيت التطبيق وحذف العناصر وما إلى ذلك.
الشكل 29. أزرار رمادية لـ "إلغاء التثبيت" و "فرض الإيقاف"
الشكل 30. زر أزرق لـ "التفعيل الآن"
الإفصاح التدريجي (متقدّم)
ويجب إخفاء الإعدادات غير المستخدمة بشكل متكرّر. لا تستخدم "إعدادات متقدمة" إلا عندما يكون هناك 3 عناصر على الأقل لإخفائها.
يعرض النص الفرعي هنا عناوين الإعدادات المخفية. يجب أن يكون النص الفرعي سطرًا واحدًا فقط. ويتم اقتطاع النص الإضافي بعلامة الحذف.
الشكل 31. الإعدادات المتقدمة المستخدمة على شاشة "الشاشة"
القائمة المنسدلة
القوائم المنسدلة متاحة، ولكن من الأفضل أن تستخدم مربع حوار أو شاشة تحديد لزر الاختيار بدلاً من ذلك. يوصى بذلك لتبسيط الإعدادات، نظرًا لوجود ثلاثة أنماط مختلفة لتحديد واحد.
إذا لزم الأمر، يمكن استخدام القوائم المنسدلة في الحالات التي يحتوي فيها الإعداد على خيارات بسيطة.
الشكل 32. القائمة المنسدلة
مربّع اختيار
استخدِم مفاتيح التبديل فوق مربّعات الاختيار متى أمكن.
يمكن استخدام مربعات الاختيار:
- الإجراءات السلبية مثل حظر التطبيقات أو حظر خدمة
- لتجنُّب ظهور الكثير من مفاتيح التبديل على الشاشة.
الشكل 33. يتم استخدام مربعات الاختيار لتقليل عدد مفاتيح المفاتيح على هذه الشاشة
الروابط
ولا يُنصح باستخدام الروابط في الإعدادات. ولا تستخدم الروابط إلا عند الضرورة القصوى. يجب أن تستخدم الروابط لون تمييز بدون تسطير.
الشكل 34. الرابط المستخدَم في الإعدادات
التذييل
يمكن استخدام نص التذييل لإضافة محتوى توضيحي. يجب أن يحتوي التذييل دائمًا على مُقسّم في الجزء العلوي. يظهر التذييل في أسفل الشاشة. يمكن أن تحتوي التذييلات على روابط، إذا لزم الأمر.
الشكل 35. نص التذييل
الأنماط
البيانات
يمكن عرض البيانات المهمة في رسم بياني مثل المخطط الشريطي أو الدائري. يمكن عرض هذه البيانات في عنوان الكيان. وتشمل الأمثلة بيانات الجوّال ومساحة التخزين.
يمكن تقديم بيانات أخرى أقل أهمية باستخدام طريقة عرض عادية على شكل قائمة.
الشكل 36. مثال يعرض مساحة التخزين
الشكل 37. مثال يعرض الشبكة
تعليم المستخدم
قد تحتاج بعض الميزات إلى توضيح أو تعلّم المستخدم. يمكنك استخدام رسوم متحركة أو صورة مع النص. يجب تقديم الرسوم المتحركة أو الصورة أعلى الشاشة، بينما يمكن استخدام نص التذييل لإضافة تفسير.
الشكل 38. الإعداد باستخدام نص الرسوم المتحركة والتذييل
النماذج
إذا كان النموذج يحتوي على حقل إدخال واحد، يمكنك استخدام مربع حوار عادي. يوفر هذا طريقة سهلة للمستخدمين لإدخال إدخال واحد.
ومع ذلك، إذا كان النموذج يحتوي على عدة حقول، يمكنك استخدام مربّع حوار بملء الشاشة. يوفر هذا مساحة أكبر على الشاشة لترتيب الحقول بنمط واضح.
الشكل 39. نموذج يحتوي على مربع حوار عادي
نتائج البحث
وتعرض نتائج البحث العنوان والنص الفرعي (إذا كان متاحًا) وموقع شريط التنقّل للإعدادات.
الشكل 40. نتيجة البحث