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