أدوار الرموز الملونة

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

أساسي

1. Primary
2. المرحلة الابتدائية

استخدِم الدور "أساسي" للإجراءات الأكثر أهمية في واجهة المستخدم، مثل buttons أو عبارات الحثّ على اتخاذ إجراء الأساسيين. يجب أن يكون هذا اللون بارزًا وقابلاً للتمّييز على الفور لتوجيه المستخدِم نحو التفاعلات الرئيسية.

Primary-Dim

1. Primary-Dim
2. المرحلة الابتدائية

يتم استخدام الأدوار المموّهة عادةً للعناصر التي يجب أن تكون مختلفة بشكلٍ مرئي عن الإجراء الأساسي، ولكنّها لا تتطلّب انتباه المستخدم أو تفاعله الفوري.

Primary-Container

1. Primary-Container
2. On-Primary-Container

يمكنك تطبيق "الحاوية الأساسية" على عناصر الخلفية، مثل البطاقات أو النوافذ المنبثقة، لشدّد الضوء على الأقسام أو الحالات المحدّدة. ويساعد ذلك في جذب الانتباه إلى المحتوى العميق أو الأنشطة الجارية ضمن واجهة المستخدم.

ثانوي

1. ثانوي
2. مرحلة التعليم الثانوي

استخدِم الدور الثانوي لدعم الإجراءات في المناطق التي تتضمّن واجهة مستخدم كثيفة، مثل الأزرار الثانوية أو الإجراءات التكميلية. ويحافظ على مستوى الرؤية بدون تسليط الضوء على العناصر الأساسية في التنسيقات المعقّدة.

Secondary-Dim

1. السمة الثانوية
2. ثانوي

يقدّم دور "الإضاءة الثانوية" تباينًا منخفضًا للعناصر غير النشطة في مناطق كثيفة. ويكمل اللون الثانوي مع إضافة عمق خفيف، ما يحافظ على اتّساق واجهة المستخدِم ويساعد المستخدمين في التنقّل.

الحاوية الثانوية

1. Secondary-Container
2. On-Secondary-Container

طبِّق Secondary-Container لتنظيم العناصر الثانوية في التنسيقات الكثيفة. ويؤدي ذلك إلى إنشاء بنية وفصل، ما يضمن تمييز المحتوى الثانوي ولكنه لا يضمن أن يكون مهيمنًا.

المستوى الثالث

1. Tertiary
2. On-Tertiary

يُستخدَم الدور الثانوي للفت الانتباه إلى العناصر الرئيسية. تكون الأدوار الثانوية فعّالة بشكل خاص للمكونات التي يجب أن تبرز، مثل الشارات أو الملصقات أو عناصر الإجراءات الخاصة.

Tertiary-Dim

1. Tertiary-Dim
2. Tertiary

استخدِم دور "التعتيم الثانوي" للزرّات أو الإجراءات المرتبطة بإجراءات ثانوية، ولكنّها لا تتطلّب التركيز الفوري.

الحاوية الثانوية

1. حاوية تابعة
2. On-Tertiary-Container

طبِّق العنصر "حاوية ثانوية" على الخلفيات التي تُجمِّع المحتوى الثانوي، مثل مجموعات الشارات أو الملصقات. ويُبرز العناصر الثانوية مع الحفاظ على التوازن والبنية في واجهة المستخدم.

خطأ

1. خطأ
2. عند حدوث خطأ

لون أحمر دلالي، مع تلوّن طفيف بالموضوع، يشير إلى إجراءات الإزالة أو الحذف أو الإغلاق أو الإغلاق، مثل التمرير السريع للكشف. تمت إضافته كبديل للحاويات وهو أقل قلقًا وأقل إلحاحًا من اللون المنخفض لدرجة الخطأ.

Error-Dim

1. Error-Dim
2. عند حدوث خطأ

لون أحمر دلالي، مع تلوّن طفيف بالموضوع، يشير إلى الأخطاء ذات الأولوية العالية أو إجراءات الطوارئ، مثل تنبيهات السلامة أو نوافذ الحوار التي تشير إلى تعذُّر إكمال الإجراءات أو أزرار التوقف

Error-Container

1. Error-Container
2. On-Error-Container

لون حاوية أقل بروزًا للمكوّنات التي تستخدم حالة الخطأ يمكن أن يشير أيضًا إلى حالة خطأ نشطة تبدو أقل تفاعلية من الحالة الممتلئة، مثل زر أو بطاقة مشاركة حالة الطوارئ النشطة، أو في مربّع حوار شاشة مثبّتة تعذّر عرضها.

Surface-Container-Low

1. سطح الحاوية - منخفض
2. على السطح
3. On-Surface-Variant

مثالية لحاوية موسّعة يجب أن تكون أسفل الحاوية المعروضة، مثل بطاقة موسّعة في الإشعار. يمكن أيضًا استخدامها في البطاقات غير التفاعلية، حيث يظل المحتوى يستفيد من الحصر.

الحاوية السطحية

1. سطح الحاوية
2. على السطح
3. On-Surface-Variant

لون الحاوية التلقائي لمعظم العناصر. يوفّر هذا المظهر مرتفعًا معتدلاً ومتوسطًا، ما يجعله مناسبًا لمكونات واجهة المستخدم العامة.

Surface-Container-High

1. سطح الحاوية-عالي
2. على السطح
3. On-Surface-Variant

مثالية للمكونات التي تُركّز على العناصر التي يجب وضعها فوق "حاوية السطح" أو معًا معها. يساعد هذا اللون في التركيز على المناطق المهمة في واجهة المستخدم وتحديد تسلسلها الهرمي.