تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يُنشئ مظهر Material 3 Expressive لنظام التشغيل Wear OS تسلسلاً هرميًا مرئيًا من خلال منح قيم مختلفة للتدرّج اللوني ودرجة التشبّع ودرجة اللون لوظائف الألوان، ما يؤدي إلى تمييز الألوان المميزة الجريئة عن ألوان السطح المحايدة بفعالية. إنّ تضمين النظام لدور الألوان الأساسية والثانوية والثالثية لا يعزّز فقط
الإمكانيات التعبيرية، بل يوفّر أيضًا إمكانية التحكّم بدقة أكبر في التسلسل الهرمي المرئي من خلال خيارات ألوان متميزة. يضمن هذا الاستخدام المقصود للألوان
مظهرًا متسقًا ومتماسكًا في واجهة مستخدم الساعة، حتى مع استخدام المظاهر.
مثال على تنسيقات ومكوّنات وواجهات مستخدم مختلفة في مظاهر مختلفة، مع
الحفاظ على تباين ألوان كافٍ
إقران الألوان وطبقاتها
للحفاظ على إمكانية الوصول البصري، لا تطبِّق الألوان إلا في أزواج الرموز المخصّصة للألوان. قد يؤدي دمج الألوان بشكل غير صحيح إلى إزالة التباين الضروري لتوفير إمكانية استخدام مرئية، لا سيما عند تعديل الألوان من خلال اللون الديناميكي.
اختيار الألوان وتنسيقها بشكل صحيح
لضمان ملاءمة العناصر المرئية وسهولة الاستخدام، تأكَّد من ربط
الرمز المميّز الصحيح بموقعه الصحيح. يمكن أن يؤدي ربط الألوان بشكل غير صحيح إلى استخدام مواد مرئية
غير مقصودة وتعطيل أدوات تسهيل الاستخدام.
check_circle
الإجراءات التي يُنصح بها
اربط أدوار الألوان وطبقها بشكل صحيح لضمان ملاءمة
العناصر المرئية وتسهيل الاستخدام.
في هذا المثال، تظل الأزرار التي تحتوي على (2)
on-primary في (1) primary أو (4) on-primary-container
في (3) primary-container قابلة للقراءة عند تغيُّر مستوى التباين
وتحصل على تقييم AAA بنسبة تباين 7:1 أو أكثر.
cancel
الإجراءات غير المُوصى بها
يمكن أن تؤدي عمليات ربط الألوان غير الصحيحة إلى ظهور صور مرئية غير مقصودة
وتعذُّر استخدام المحتوى.
في هذا المثال، تصبح الأزرار التي تحتوي على (2)
primary-container في (1) primary أو (4) primary-dim في
(3) primary-container غير مقروءة بسبب تغيُّر مستويات التباين وعدم اتّباع الحدّ الأدنى لنسبة التباين 7:1 للنص العادي. تنطبق مستويات التباين
هذه على الأدوار الأساسية والثانوية والثالثية.
مجموعات الألوان المقترَحة
السمة الأساسية + السمة الأساسية للعنصر
استخدِم Primary للإجراءات الرئيسية، وPrimary-Dim للعناصر التكميلية. ويؤدي ذلك إلى
إضفاء عمق مع ضمان بروز الإجراء الأساسي.
السمة الأساسية + السمة الثانوية
استخدِم Primary-Dim لإبراز العناصر المهمة، واستخدِم Tertiary لتقديم ملاحظات ملفتة، مثل ردود النقر.
الحاويات الأساسية والثانوية
استخدِم Secondary-Container للمحتوى الأقل بروزًا، بينما يتم تطبيق Primary على
العناصر الرئيسية لضمان تميّزها وجذب الانتباه.
Primary + Primary-Container
استخدِم Primary للإجراءات الرئيسية، وPrimary-Container للعناصر التكميلية أو
الثانوية. ويؤدي ذلك إلى إضفاء عمق مع ضمان تميّز الإجراء الأساسي.
السمة الأساسية + السمة الثانوية
استخدِم السمة الأساسية لإبراز العناصر المهمة والسمة الثانوية لتقديم ملاحظات مهمة، مثل تحقيق هدف معيّن.
الحاويات الثانوية والأساسية والثالثية
عندما لا يكون الإجراء الرئيسي واضحًا، استخدِم مجموعة من العناصر الثانوية والأساسية للإجراءات الرئيسية وSecondary-Container للإجراءات التكميلية.
الحاويات الثانوية والحاويات الأساسية
استخدِم Primary-Dim وSecondary عندما تريد عرض خيارَين أو حاويتَين مهمتَين بالتساوي، ولكن مع الحفاظ على التباين بينهما.
الحاويات الأساسية والثالثية والحاويات الأساسية
عندما لا يكون الإجراء الرئيسي واضحًا، استخدِم مجموعة من العناصر الثانوية و
الأساسية للإجراءات الرئيسية و"الحاوية الأساسية" للإجراءات التكميلية.
السمة الأساسية + السمة الثانوية
استخدِم السمة الأساسية للإجراءات الرئيسية والسمة الأساسية للعناصر التكميلية. ويؤدي ذلك
إلى إضافة عمق إلى المحتوى مع المساعدة في إبراز الإجراء الأساسي.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Apply color\n\nMaterial 3 Expressive for Wear OS establishes visual hierarchy by assigning\ndifferent hue, chroma, and tone values to its color roles, effectively\ndistinguishing bold accent colors from neutral surface colors. The system's\ninclusion of primary, secondary, and tertiary accent roles not only enhances\nexpressive possibilities but also offers more granular control over visual\nhierarchy through distinct color choices. This intentional use of color ensures\na consistent and cohesive feel within the Watch UI, even with theming.\nExample of different layouts, components and UIs in various themes, but\nstill maintaining adequate color contrast.\n\nPair and layer colors\n---------------------\n\nTo maintain visual accessibility, apply colors only in the intended pairs color\ntokens. Combining colors improperly may break contrast necessary for visual\naccessibility, particularly when colors are adjusted through dynamic color.\n\n### Pair and layer colors correctly\n\nIn order to ensure proper visuals and accessibility, make sure you are mapping\nthe correct token to its correct position. An improper color mapping can lead to\nunintended visuals and break accessibility. \ncheck_circle\n\n### Do\n\n**Pair and layer color roles correctly to ensure proper\nvisuals and accessibility.**\n\nIn this example, buttons with (2)\n**on-primary** on (1) **primary** or (4) **on-primary** -container\non (3) **primary-container** stay legible as the contrast level changes\nand have an AAA rating with a contrast ratio of 7:1 or more. \ncancel\n\n### Don't\n\n**Improper color mappings can lead to unintended visuals\nand break accessibility.**\n\nIn this example, buttons with (2)\n**primary-container** on (1) **primary** or (4) **primary-dim** on\n(3) **primary-container** become illegible as contrast levels shift and\ndon't follow the 7:1 contrast ratio minimum for normal text. These contrast\nlevels apply to primary, secondary and tertiary roles.\n\n### Recommended color pairings\n\n\n**Primary + Primary Dim**\n\nUse Primary for main actions, and Primary-Dim for complementary items. This\ncreates depth while ensuring the primary action stands out. \n\n**Primary-Dim + Tertiary**\n\nUse Primary-Dim to highlight important elements and Tertiary to provide standout\nfeedback, such as tap responses. \n\n**Primary + Secondary-Container**\n\nUse Secondary-Container for less prominent content, while Primary is applied to\nkey elements to ensure they stand out and grab attention.\n\n\u003cbr /\u003e\n\n\n**Primary + Primary-Container**\n\nUse Primary for main actions, and Primary-Container for complementary or\nsecondary items. This creates depth while ensuring the primary action stands\nout. \n\n**Primary-Dim + Tertiary-Dim**\n\nUse Primary-Dim to highlight important elements and Tertiary-Dim to provide\nstandout feedback, such as a goal being met. \n\n**Tertiary + Primary + Secondary-Container**\n\nWhen it's not clear what the main action is, use a combination of Tertiary and\nPrimary for a main actions and Secondary-Container for a complementary actions.\n\n\u003cbr /\u003e\n\n\n**Secondary + Primary-Container**\n\nUse Primary-Dim and Secondary when you want to show two equally as important\noptions or containers, but still have contrast between the two. \n\n**Primary + Tertiary + Primary-Container**\n\nWhen it's not clear what the main action is, use a combination of Tertiary and\nPrimary for a main actions and Primary-Container for a complementary actions. \n\n**Primary + Tertiary-Dim**\n\nUse Primary for main actions and Primary Dim for complementary items. This\ncreates depth while helping the primary action to stand out.\n\n\u003cbr /\u003e"]]
