تساعد الأزرار المستخدمين في بدء الإجراءات أو الخطوات. اختَر من بين أنواع مختلفة من الأزرار للتأكيد على المحتوى.
المراجع
| النوع | رابط | الحالة |
|---|---|---|
| التصميم | مصدر التصميم (Figma) | متاح |
| التنفيذ | Jetpack Compose | متاح |
أهم التفاصيل
- اختَر نوع الزر استنادًا إلى أهمية الإجراء. وكلما كان الإجراء أكثر أهمية، زاد التركيز على الزر.
- يجب أن تحتوي الأزرار على تصنيفات واضحة للإشارة إلى الإجراء الذي تنفّذه.
- ضَع الأزرار بشكل منطقي على الشاشة، في المكان الذي يتوقع المستخدمون العثور عليه.
- لا تكثر من استخدام الأزرار. يؤدي ظهور عدد كبير جدًا من الأزرار على الشاشة إلى تعطيل التدرّج الهرمي المرئي.
المتغيرات
هناك ستة أنواع من الأزرار:
- زرّ مُعبّأ
- زر محدَّد الجوانب
- زر الرمز
- زر رمز محدَّد الجوانب
- زر طويل
- زر الصورة
اختَر نوع الزر استنادًا إلى أهمية الإجراء. وكلما زادت أهمية الإجراء، يجب أن يحظى الزر الذي يؤدي إليه بمزيد من التركيز.
زر معبأ وزر محدَّد الجوانب
تُحدث الأزرار الملونة أكبر تأثير مرئي، ويجب استخدامها للإجراءات المهمة والنهائية التي تُكمِل عملية معيّنة، مثل "حفظ" أو "الانضمام الآن" أو "تأكيد" أو "تنزيل".
الأزرار المحدَّدة الجوانب هي أزرار ذات أهمية متوسطة. وهي تحتوي على إجراءات مهمة، ولكنها ليست الإجراء الأساسي في التطبيق. تتناسب الأزرار المموّهة بشكلٍ جيد مع الأزرار الملونة للإشارة إلى إجراء ثانوي بديل.
علم التشريح
- الحاوية
- نص التصنيف
- الرمز (اختياري)
الولايات
تمثيل مرئي لحالة مكوّن
- تلقائي
- التركيز
- مفعَّلة
المواصفات
زر الرمز والرمز المخطَّط
استخدِم أزرار الرموز لعرض الإجراءات في تنسيق مكثّف. يمكن أن تمثل أزرار الرموز إجراءات الفتح، مثل فتح قائمة منسدلة أو البحث، أو تمثل إجراءات ثنائية يمكن تفعيلها أو إيقافها، مثل المحتوى المفضّل أو المرجع المميّز. وتُستخدَم أيضًا لتشغيل الوسائط أو إيقافها مؤقتًا.
يمكن تحديد أزرار الرموز بثلاثة أحجام: صغير ومتوسط وكبير.
علم التشريح
- الحاوية
- رمز
الولايات
- تلقائي
- التركيز
- مفعَّلة
الحالات هي تمثيلات مرئية تُستخدَم للإشارة إلى حالة مكوّن أو عنصر تفاعلي.
المواصفات
زر عريض
يتم استخدام الأزرار الواسعة لإبرازها أكثر من الأزرار العادية. تحتوي على إجراءات مهمة. يتم تجميع الأزرار التي تمثّل خيارات مرتبطة معًا. يجب أن تشترك المجموعة في مساحة عرض مشتركة.
علم التشريح
- الحاوية
- الرمز السابق
- العنوان
- العنوان الفرعي
الولايات
- تلقائي
- التركيز
- مفعَّلة
الحالات هي تمثيلات مرئية تُستخدَم للإشارة إلى حالة مكوّن أو عنصر تفاعلي.
المواصفات
زر الصورة
تُستخدَم أزرار الصور عادةً لعرض الصور المصغّرة للمحتوى الذي يكون متاحًا في المستوى التالي من التنقّل. ويتم عادةً تجميعها مع الإجراءات ذات الصلة، ويجب أن تشترك المجموعة في مساحة عرض مشتركة.
علم التشريح
- الحاوية
- الرمز السابق
- العنوان
- العنوان الفرعي
- طبقة الصورة التي تتألف من:
- تمويه (عنصر مركّب يشير إلى الحالة)
- متدرّج (استنادًا إلى لون السطح)
- صورة
الولايات
- تلقائي
- التركيز
- مفعَّلة
الحالات هي تمثيلات مرئية تُستخدَم للإشارة إلى حالة مكوّن أو عنصر تفاعلي.
المواصفات
الاستخدام
تُستخدَم الأزرار بشكل عام للإشارة إلى الإجراءات التي يمكن للمستخدم اتّخاذها. وتظهر هذه العناصر غالبًا في عناصر واجهة المستخدم، مثل مربّعات الحوار والنوافذ المشروطة والنماذج والبطاقات وأشرطة الأدوات.
الأزرار هي خيار واحد فقط لتمثيل الإجراءات في واجهة المستخدم. تجنَّب استخدامها بشكل مفرط. يؤدي وجود عدد كبير جدًا من الأزرار على الشاشة إلى تعطيل التسلسل الهرمي المرئي.
- الحاوية
- رمز
- نص التصنيف
- العنوان
- العنوان الفرعي
- صورة
الحاوية
تعرِض الأزرار حاوية حول المحتوى. يتم تكبير الحاوية بمقدار 1.1 مرة عند التركيز عليها، مع الحفاظ على الحشو الداخلي. في ما يلي بعض النقاط التي يجب مراعاتها في الحاوية:
- اضبط عرض الحاوية استنادًا إلى المحتوى مع إضافة مسافة بادئة متّسقة.
- اضبط الموضع النسبي للحاوية في شبكة التنسيق السريع الاستجابة.
- استخدِم حاويات بلون واحد للأزرار الملونة.
- استخدِم لونَي الخطوط والتعبئة عند التركيز على الأزرار التي لها حدود. عند التركيز، يحصل الحاوي على لون تعبئة مع مخطط.
- بالنسبة إلى الأزرار الواسعة والأزرار التي تعرض صورًا، يتم ضبط عرض الحاوية وفقًا لشبكة التنسيق.
- يمكن أن يتغيّر حجم الحاوية وموضعها ومحاذاتها عند تغيير حجم الحاوية الرئيسية.
تحتوي حاويات أزرار النصوص والرموز على زوايا مستديرة بالكامل. تحتوي حاويات أزرار الصور الواسعة على حاويات مستديرة بحجم 12dp.
الإجراءات التي يُنصح بها
تنبيه
رمز
تُوضّح الرموز الإجراء الذي يؤدي إليه الزر وتساعد في جذب الانتباه. ويجب وضعها على الجانب الأمامي من الزر. يتم توسط الأيقونات عموديًا دائمًا داخل الحاوية.
الإجراءات التي يُنصح بها
الإجراءات غير المُوصى بها
تنبيه
نص التصنيف
نص التصنيف هو أهم عنصر في الزر. ويصف الإجراء الذي يحدث إذا نقر المستخدم على زر.
استخدِم حالة أحرف الجملة لنص تصنيف الزر، واكتب الحرف الأول من الكلمة الأولى والأسماء الخاصة بأحرف كبيرة. تجنَّب لف النص. لضمان سهولة القراءة إلى أقصى حد، يجب أن يبقى نص التصنيف في سطر واحد.
الإجراءات التي يُنصح بها
تنبيه
صورة
تحتوي أزرار الصور دائمًا على تراكب متدرّج وشاشة تمويهية فوق الصورة في الخلفية. يتم ضبط التمويه المتدرّج وفقًا للون الحاوية. يتغيّر الشاشة المصغّرة وفقًا للحالة.
مجموعات الأزرار
تظهر الأزرار معًا في صف أو عمود للحفاظ على اتساق التنقل بين الإجراءات. توضّح الأقسام التالية النقاط التي يجب مراعاتها.
التسلسل الهرمي في Inform
يجب أن تتضمّن كل شاشة إجراءً أساسيًا واحدًا يتم تمثيله من خلال زر بارز، ويكون عادةً عريضًا. يجب أن يكون الزر أسهل في الرؤية والفهم. يجب أن تكون الأزرار الأخرى أقل بروزًا وألا تشتت انتباه المستخدمين عن الإجراء الأساسي.
يعمل الزر الأول في المجموعة كإجراء أساسي لأنّ التركيز يقع عليه أولاً.
الحفاظ على التنسيق غير القابل للتقديم أو الإيقاف
- تنسيق الصفوف
- تنسيق الأعمدة
استخدام الأسعار المتغيرة بشكل منطقي
في تنسيق الأعمدة، يجب الاحتفاظ بنُسخ الأزرار الفردية. في تنسيق الصفوف، يمكن تجميع الأسعار المتغيرة المختلفة معًا في مجموعة أزرار، ولكن يجب أن يكون المنطق واضحًا. يمكن استخدام الأزرار الملونة والمخطّطة في المجموعة نفسها، ولكن تأكَّد من تسلسل هرمي واضح للإجراءات.
الإجراءات التي يُنصح بها
الإجراءات غير المُوصى بها
تنبيه
