الأزرار هي المؤشر المرئي الأساسي لإجراءات المستخدم.
المبادئ
موجّه نحو اتّخاذ إجراء: يجب أن توضّح الأزرار أنّها تؤدي إلى اتّخاذ إجراء.
محو الملاحظات: يجب أن يتغيّر مظهر الزر بشكل واضح في حالات التفاعل المختلفة (التمرير فوق الزر، والضغط عليه، والتركيز عليه) لتقديم ملاحظات فورية.
التناسق: يجب أن تتشارك جميع الأزرار في لغة مرئية أساسية لتكون قابلة للتمييز على الفور.
مرن: يجب أن يستوعب مكوّن الزرّ أشكال الاستخدام الشائعة، مثل تضمين الرموز والأحجام المختلفة، بدون التأثير في الاتساق.
الاستخدام وموضع الإعلان
يجب وضع الزر بالقرب من المحتوى ذي الصلة. ويمكن وضعها بشكل منفرد أو مع مكوّنات أخرى، مثل البطاقات والقوائم.
الإجراءات التي يُنصح بها
الإجراءات غير المُوصى بها
الإجراءات التي يُنصح بها
الإجراءات غير المُوصى بها
علم التشريح
تلقائي
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 وحدة بكسل مستقلة الكثافة |
| الرمز اللاحق | نعم | 56 وحدة بكسل مستقلة الكثافة |
| الحجم | نعم | الحد الأدنى للارتفاع هو 72 وحدة بكسل مستقلة عن الكثافة |
| العمق | نعم | 0 |
| مساحة العرض | لا |