الأزرار هي المؤشر المرئي الأساسي لإجراءات المستخدم.
المبادئ
موجّهة نحو اتّخاذ إجراء: يجب أن توضّح الأزرار أنّها تؤدي إلى اتّخاذ إجراء.
تقديم ملاحظات واضحة: يجب أن يتغيّر مظهر الزر بشكلٍ واضح في حالات التفاعل المختلفة (التمرير فوق الزر، والضغط عليه، والتركيز عليه) لتقديم ملاحظات فورية.
التناسق: يجب أن تتشارك جميع الأزرار في لغة مرئية أساسية لتكون قابلة للتمييز على الفور.
المرونة: يجب أن يستوعب مكوّن الزرّ الاختلافات الشائعة، مثل تضمين الرموز والأحجام المختلفة، بدون التأثير في الاتساق.
الاستخدام وموضع الإعلان
يجب وضع الزر بالقرب من المحتوى ذي الصلة. يمكن وضعها بمفردها أو مع مكوّنات أخرى، مثل البطاقات والقوائم.
الإجراءات التي يُنصح بها
الإجراءات غير المُوصى بها
الإجراءات التي يُنصح بها
الإجراءات غير المُوصى بها
علم التشريح
تلقائي
1. مفعَّل: الحالة التلقائية
2. Hover
3. نقر
كبير
1. مفعَّل: الحالة التلقائية
2. Hover
3. نقر
التخصيص
تحتوي الأزرار على خيارَين تلقائي وكبير، بالإضافة إلى حالات تلقائية وحالات التركيز والضغط لكل منهما. يمكن استخدام الرموز لإبراز الزر وتوضيحه والتعرّف عليه بشكل أفضل. يمكن أن يساعد حجم الزر في التأكيد على أهميته.
تلقائي
| الخصائص | التخصيص | الإعدادات التلقائية |
|---|---|---|
| الشكل | نعم | كبير، دائرة |
| مساحة متروكة | نعم | 16 وحدة بكسل مستقلة الكثافة، و8 وحدات بكسل مستقلة الكثافة |
| الحدود | نعم | 2 dp، #606460 |
| نص | نعم | Body Small |
| الرمز السابق | نعم | 40 وحدة بكسل مستقلة الكثافة |
| الرمز اللاحق | نعم | 40 وحدة بكسل مستقلة الكثافة |
| الحجم | نعم | الحد الأدنى للارتفاع هو 56 وحدة بكسل مستقلة الكثافة |
| العمق | نعم | 0 |
كبير
| الخصائص | التخصيص | الإعدادات التلقائية |
|---|---|---|
| الشكل | نعم | كبير، دائرة |
| مساحة متروكة | نعم | 20 وحدة بكسل مستقلة عن الكثافة، و8 وحدات بكسل مستقلة عن الكثافة |
| الحدود | نعم | 2 dp، #606460 |
| نص | نعم | Body Small |
| الرمز السابق | نعم | 56 dp |
| الرمز اللاحق | نعم | 56 dp |
| الحجم | نعم | الحد الأدنى للارتفاع هو 72 وحدة بكسل مستقلة الكثافة |
| العمق | نعم | 0 |
| مساحة العرض | لا |