إرشادات تصميم إعدادات Android

يسلط هذا المستند الضوء على المبادئ والإرشادات لأي شخص يقوم بتصميم إعدادات نظام 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. رأس الكيان

سيتم تمرير جزء الرمز والعنوان (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. نتيجة البحث