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