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

البريد الأساسي

1. اللون الأساسي
2. On-Primary

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

Primary-Dim

1. Primary-Dim
2. On-Primary

تُستخدَم الأدوار الخافتة عادةً للعناصر التي يجب أن تكون مميزة بصريًا عن الإجراء الأساسي ولكنّها لا تتطلّب اهتمامًا أو تفاعلاً فوريًا من المستخدم.

Primary-Container

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

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

ثانوي

1. اللون الثانوي
2. On-Secondary

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

Secondary-Dim

1. Secondary-Dim
2. اللون الثانوي

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

Secondary-Container

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

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

التعليم العالي

1. اللون التكميلي
2. On-Tertiary

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

Tertiary-Dim

1. Tertiary-Dim
2. اللون التكميلي

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

Tertiary-Container

1. Tertiary-Container
2. On-Tertiary-Container

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

خطأ

1. خطأ
2. On-Error

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

Error-Dim

1. Error-Dim
2. On-Error

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

Error-Container

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

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

Surface-Container-Low

1. Surface-Container-Low
2. On-Surface
3. On-Surface-Variant

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

Surface-Container

1. Surface-Container
2. On-Surface
3. On-Surface-Variant

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

Surface-Container-High

1. Surface-Container-High
2. On-Surface
3. On-Surface-Variant

مثالية للمكوّنات التي تتطلّب تركيزًا عاليًا والتي يجب أن تظهر في الأعلى أو مع Surface-Container. يساعد هذا اللون في التركيز على المناطق المهمة في واجهة المستخدم وتحديد التسلسل الهرمي لها.