قاعدة 60-30-10 معطّلة: أنظمة الألوان الحديثة التي تعمل فعلاً
قاعدة 60-30-10 اختصار لتصميم الديكور الداخلي. أنظمة ألوان المنتج الحديثة تستخدم توكنات مبنية على الأدوار. هذا هو النموذج الذي يتوسع.
قاعدة 60-30-10 هي أول شيء يتعلمه معظم المصممين عن اللون، وهي أول شيء تتخلى عنه فرق المنتجات الجادّة بهدوء في اللحظة التي تُطلق فيها واجهة حقيقية. ستون بالمئة مهيمن، ثلاثون بالمئة ثانوي، عشرة بالمئة لوني مُميز.
نظيفة. قابلة للاقتباس. غير قابلة للتطبيق تمامًا بمجرد أن تصبح العلامة التجارية تضم أزرارًا وحالات معطّلة وإشعارات ومخططات ووضعًا داكنًا وموقعًا للتوثيق.
القاعدة ليست خاطئة. هي فقط مبنية لمشكلة مختلفة. ما تستخدمه أفضل أنظمة التصميم المُنفّذة بدلاً من ذلك ليس نسبة، بل هو نظام توكن مبني على الأدوار. تشرح هذه المقالة لماذا تفشل قاعدة 60-30-10، وما الذي حلّ محلها، وخمسة أنظمة تصميم حقيقية تطبّق هذا البديل على نطاق واسع.
من أين جاءت قاعدة 60-30-10
قاعدة 60-30-10 هي اختصار لتصميم الديكور الداخلي من منتصف القرن العشرين، تم تطبيقها على التصميم الرقمي من قبل أشخاص كانوا يحتاجون إلى قاعدة للاستشهاد بها.
أصلها هو التصميم السكني. تحتوي الغرفة على لون مهيمن (الجدران)، ولون ثانوي (التنجيد، الستائر)، ولون مُميز (الوسائد، اللوحات). ستون، ثلاثون، عشرة. تعمل هذه القاعدة في الغرف لأن الغرف أسطح فردية ثابتة يراها شخص واحد في كل مرة، وتظل بنفس اللون حتى يُعيد أحدهم طلاءها.
لا يصمد أي من هذه الافتراضات عند الاحتكاك بتصميم المنتجات. المنتج الرقمي ليس سطحًا ثابتًا. إنه مئات الأسطح، لكل منها حالاته وسِماته وسياقاته الخاصة. لم تُصمَّم القاعدة أبدًا لذلك العالم وهذا واضح.
لماذا تنهار في تصميم المنتج
تفترض قاعدة 60-30-10 وجود سطح واحد ثابت ومشاهد واحد، وهذا بالضبط عكس كيفية عمل تصميم المنتج.
الواجهات الحقيقية فيها أزرار معطّلة، وحالات hover، وحلقات تركيز، ولافتات أخطاء، وإشعارات نجاح، وسلاسل بيانات الرسوم البيانية، وحالات فارغة، وهياكل تحميل، وألوان دلالية للإجراءات المدمّرة. لا يتطابق أي من هذا بسلاسة مع "60 أو 30 أو 10 بالمئة من اللوحة". هذه ليست لوحة. هذا سلوك.
كما تنهار القاعدة لحظة إضافة الوضع الداكن. يجب الآن تحويل 60 بالمئة من المحايد الفاتح إلى 60 بالمئة من المحايد الداكن، ويجب أن يتغير نغمة 30 بالمئة الثانوي للحفاظ على التسلسل الهرمي، وعادة ما يجب أن يفتح 10 بالمئة اللون المُميز أو يغير درجته تمامًا ليظل قابلاً للوصول. هذه ليست مشكلة نسبة. هذه مشكلة نظام.
إمكانية الوصول هي المسمار الأخير. نسب التباين في WCAG لا تهتم بما نسبة صفحتك الزرقاء. تهتم بما إذا كان الأزرق المحدد على الزر المحدد يملك تباينًا كافيًا ضد الخلفية المحددة خلفه. لا يمكنك حل هذه المشكلة بنسب المساحة على الشاشة.
ما الذي تستخدمه أنظمة الألوان الحديثة بدلاً من ذلك
الأنظمة التي تُشغّل أفضل الواجهات المنفّذة تستبدل قواعد النسبة بطبقات توكن مبنية على الأدوار تصف ما يفعله اللون، لا كم يوجد منه.
| الطبقة | ماذا تفعل | أمثلة على التوكن |
|---|---|---|
| Surface (السطح) | طبقات الخلفية والارتفاعات | bg-default, bg-subtle, bg-raised, bg-overlay |
| Content (المحتوى) | النصوص والأيقونات على الأسطح | text-default, text-muted, text-on-accent |
| Accent (المُميز) | ألوان العلامة التجارية والإجراء الأساسي | accent-primary, accent-primary-hover, accent-secondary |
| State (الحالة) | الحالات التفاعلية وحالات الاستجابة | state-hover, state-focus, state-disabled |
| Semantic (دلالي) | الإشارات المحمّلة بالمعنى | success, warning, critical, info |
يصف كل توكن دورًا. "هذا اللون هو السطح خلف بطاقة." "هذا اللون هو النص فوق المُميز."
لا يختار المصمم أبدًا بين "ثانوي أو مُميز بنسبة 30 بالمئة". يختار بين الأدوار التي حدّدها النظام بالفعل.
الفائدة تتراكم. تصبح إضافة الوضع الداكن مسألة تعيين نفس التوكن لقيم خام مختلفة، لا إعادة طلاء الواجهة. تصبح إضافة سِمة علامة تجارية جديدة تبديل توكن واحد في طبقة المُميز. يتم فرض إمكانية الوصول على مستوى التوكن، لا يتم فحصها صفحة بصفحة.
خمسة أنظمة تصميم تنفّذ الأمر بالشكل الصحيح
هذه الأنظمة تعمل على نطاق واسع بلوحات مبنية على الأدوار تصمد عبر الوضع الفاتح والوضع الداكن وكل سطح يلمسه المستخدم.
Material Design 3
شاهده مباشرة على m3.material.io
Material 3 هو الأكثر صراحة بشأن هذا التحول. يحدد النظام أدوار الألوان مثل "primary" و"on-primary" و"surface" و"on-surface" و"inverse-primary"، مع كل دور مُقترن مسبقًا للتباين. لا يختار المصممون الألوان. يختارون الأدوار، وتحلّ التوكنات إلى القيم الصحيحة للسِمة النشطة.
ما الذي تسرقه: اصطلاح تسمية "-on". on-primary للنصوص والأيقونات التي تجلس فوق سطح primary يُرمّز إمكانية الوصول مباشرة في اسم التوكن.
Radix Colors
تقدم Radix Colors مقاييس من 12 درجة لكل درجة لون، مع تخصيص كل درجة مسبقًا لدور (خلفية التطبيق، خلفية دقيقة، عنصر واجهة، hover، focus، active، صلب، نص، نص عالي التباين). لا يوجد منطق نسبة. كل درجة هي دور.
ما الذي تسرقه: المقياس المرقّم مع تعليقات الأدوار. يعطي المصممين مفردات مشتركة تزيل 90 بالمئة من نقاش "أي رمادي أستخدم".
Shopify Polaris
شاهده مباشرة على polaris.shopify.com
ينظم Polaris اللون حسب دور المكوّن: bg (سطح)، text (محتوى)، icon، border، وinteractive. لكل منها أدوار فرعية لـ hover وpressed وdisabled وselected. يجعل النظام من الصعب هيكليًا على المصمم أن يمد يده خارج التوكنات المحددة.
ما الذي تسرقه: تجميع الأدوار. فصل توكنات "border" عن توكنات "surface" يفرض استخدامًا متعمّدًا للون على مستوى المكوّن.
علامتان تُشغّلان النظام في الإنتاج الفعلي
توثيق أنظمة التصميم أعلاه هو المرجع. هاتان العلامتان هما الدليل. Stripe وLinear تُشغّلان الألوان المبنية على الأدوار في طبقة المنتج كل يوم، وكلاهما يثبت أن النمط يصمد تحت الاستخدام الحقيقي.
Stripe
تُشغّل Stripe علامة تجارية منفذة، لا مجرد توثيق نظام تصميم. يُظهر الموقع العام كيف يبدو اللون المبني على الأدوار في الإنتاج.
كل شيء تقريبًا أسطح محايدة ومحتوى محايد. البنفسجي هو طبقة المُميز ويظهر بالضبط حيث تعيش الإجراءات والروابط وإشارات العلامة التجارية. لا منطق نسبة. منطق دور.
ما الذي تسرقه: انضباط إبقاء طبقة المُميز رفيعة. يُستخدم لون التركيز في Stripe باعتدال لأن دوره محجوز. إذا استخدمت ألوان المُميز للزخرفة، تفقد القدرة على استخدامها للعمل.
Linear
تعتمد Linear على الألوان المحايدة أكثر من أي شخص آخر تقريبًا يعمل على نطاق واسع. المنتج بأكمله طبقات من توكنات الأسطح الداكنة مع درجة لون مُميزة واحدة (بنفسجي) تقوم بكل عمل الإجراءات. لا يمكن لأي قاعدة نسبة أن تنتج هذا. إنه نظام مبني على الأدوار بالكامل، حيث طبقة "المُميز" هي لون واحد يُستخدم بضبط، وطبقة "السطح" هي مكدس ارتفاع كامل.
ما الذي تسرقه: الثقة بالسماح لطبقة المُميز أن تكون لونًا واحدًا. كثير من أنظمة التصميم الجديدة تُخصص ألوان مُميز بإفراط. تثبت Linear أن لونًا مُميزًا واحدًا جيد الاختيار، يُستخدم باتساق، يبني تمييزًا أقوى من ثلاثة ألوان مُميز بالنسبة.
كيف تبني لوحة مبنية على الأدوار
بناء لوحة بهذه الطريقة يستغرق وقتًا أطول من اختيار ثلاثة ألوان وتعيين نسب، ويَعُود ثمنه في المرة الأولى التي يضيف فيها مصمم الوضع الداكن.
تسير العملية عكس ما تعلّمه معظم المصممين. بدلاً من اختيار الألوان أولاً وإيجاد أدوار لها، تختار الأدوار أولاً وتجد ألوانًا لها.
- حدّد طبقات الأدوار. ابدأ بـ surface وcontent وaccent وstate وsemantic. معظم المنتجات تحتاج هذه الخمسة بالضبط. بعضها يحتاج سادسًا لتصور البيانات.
- اكتب التوكنات قبل اختيار قيم hex. يجب أن يصف كل توكن دورًا (
surface-subtle,content-muted,accent-primary-hover). إذا كان اسم التوكن يصف لونًا ("light-blue")، أعد تسميته. - املأ المقياس المحايد أولاً. معظم أي واجهة حقيقية هو ألوان محايدة. ابنِ مقياسًا كاملاً (تستخدم Radix 12 درجة لسبب) قبل أن تلمس لون العلامة التجارية.
- أضف طبقة المُميز أخيرًا. لون المُميز عادة ما يكون المكان الوحيد الذي تعيش فيه هوية العلامة التجارية بنشاط. ضبط النفس هنا هو اللعبة كلها.
- عيّن الوضع الداكن بإعادة حل التوكنات، لا بإعادة التصميم. إذا كان نظامك مبنيًا على الأدوار، فالوضع الداكن هو تبديل قيمة توكن، لا إصلاح لوني.
- افرض إمكانية الوصول في طبقة التوكن. يجب أن يجتاز كل توكن
on-surfaceنسبة 4.5:1 ضد سطحه المُقترن. اجعل الفحص مدمجًا.
الاختصار المغري هو تعريف ثلاثة أدوار (primary وsecondary وaccent)، إعلان النصر، والنشر. هذه قاعدة 60-30-10 ترتدي زي التوكن. تنهار في نفس النقطة بالضبط: أول مكوّن حقيقي.
للإطار الأوسع حول كيفية قراءة المستخدمين لقرارات الألوان قبل أن يهم أي عمل على التوكنات، تغطي نفسية اللون في التصميم طبقة المعنى. لكيفية انسجام أنظمة الألوان داخل سياق النظام الأكبر، تحتوي دليل أنظمة التصميم على الصورة الكاملة.
الأسئلة الشائعة
هل قاعدة 60-30-10 مفيدة على الإطلاق؟
نعم. تصميم السطح الواحد لا يزال يستفيد منها. الملصقات والمنشورات الاجتماعية وأقسام hero التسويقية والتغليف والتخطيطات التحريرية. في أي مكان يكون المُنتَج لوحة واحدة تُشاهد مرة واحدة، تعطي القاعدة اختصار نسبة سريع. تصميم المنتج ليس ذلك العالم.
كم عدد الألوان التي يجب أن يحتوي عليها نظام التصميم؟
قيم hex خام أقل مما تظن، منظّمة في توكنات أكثر مما تظن. معظم الأنظمة قيد التشغيل تحتوي على 8 إلى 12 درجة محايدة، و8 إلى 12 درجة مُميز، و3 إلى 5 عائلات دلالية، كلها مُحلولة في توكنات مبنية على الأدوار. عدد الألوان الخام صغير. عدد الأدوار كبير.
ما الفرق بين لوحة ألوان ونظام ألوان؟
لوحة الألوان هي مجموعة من الألوان. نظام الألوان هو مجموعة من الأدوار، ومجموعة من القواعد حول كيفية تفاعل هذه الأدوار، وتعيين من الأدوار إلى الألوان يمكن أن يتغير حسب السِمة. تجيب اللوحة "ما الألوان الموجودة في العلامة التجارية". يجيب النظام "ما لون هذا العنصر في هذه الحالة في هذه السِمة".
توقف عن قياس اللون بالنسب المئوية
قاعدة 60-30-10 ليست شريرة. هي فقط خارج النطاق.
تصميم المنتج ليس غرفة. إنه نظام من الأسطح والحالات والأدوار يتغير مع تحرك المستخدم خلاله.
قياس اللون بالنسب المئوية لا معنى له بقدر قياس الطباعة بنسبة مئوية من الصفحة. لا تقول "30 بالمئة من النص عناوين". تقول "العناوين دور له نمط محدد". اللون يجب أن يعمل بنفس الطريقة.
العلامات التجارية التي تُطلق أفضل أعمال الهوية البصرية الأكثر قابلية للتوسع، Material وRadix وPolaris وStripe وLinear، فهمت هذا وبنت حوله. نسخ نسبها يفقد النقطة. نسخ بنية أدوارها هي كل النقطة.
إذا كانت لوحتك الحالية ثلاثة ألوان وقاعدة تخصيص غامضة، فأنت لا تملك نظام ألوان. تملك تفضيل ألوان. ابنِ الطبقات، سمِّ الأدوار، ودع قيم hex تكون آخر شيء تتجادل بشأنه.
Need a color system built to scale, not just to swatch? Brainy builds palettes with token tiers, dark mode, and accessibility baked in.
Get Started
