قاعدة 60-30-10 مكسورة: أنظمة الألوان الحديثة التي تعمل فعلاً
قاعدة 60-30-10 اختصار من تصميم الديكور الداخلي يُصرّ المصممون على تطبيقه على تصميم المنتجات. إليك ما تفعله أنظمة الألوان الحديثة بدلاً من ذلك.
قاعدة 60-30-10 هي أول شيء يتعلمه معظم المصممين عن الألوان، وأول شيء تتخلى عنه بهدوء معظم فرق المنتجات الجادة فور شحن واجهة حقيقية. ستون بالمئة سائد، ثلاثون بالمئة ثانوي، عشرة بالمئة مُميِّز.
نظيف. قابل للاستشهاد به. غير قابل للتطبيق تماماً حين تمتلك العلامة التجارية أزرار، وحالات معطّلة، وإشعارات، ورسوم بيانية، ووضع ليلي، وموقع توثيق.
القاعدة ليست خاطئة. لكنها بُنيت لحل مشكلة مختلفة. ما تستخدمه أفضل أنظمة التصميم المُشحونة ليس نسبة مئوية، بل نظام token قائم على الأدوار. تستعرض هذه الورقة سبب انهيار قاعدة 60-30-10، وما حل محلها، وخمسة أنظمة تصميم حقيقية تطبق البديل على نطاق واسع.
من أين جاءت قاعدة 60-30-10
قاعدة 60-30-10 اختصار من الديكور الداخلي يعود إلى منتصف القرن العشرين، أُعيد تركيبه على التصميم الرقمي من قِبَل أشخاص احتاجوا إلى قاعدة يستشهدون بها.
أصلها تصميم المساكن. للغرفة لون سائد (الجدران)، ولون ثانوي (المفروشات والستائر)، ولون مُميِّز (الوسائد والفن). ستون، ثلاثون، عشرة. يصلح للغرف لأن الغرف أسطح ثابتة مفردة يراها إنسان واحد في المرة الواحدة، وتبقى بنفس اللون حتى يعيد أحدهم الطلاء.
لا تصمد أي من هذه الافتراضات أمام تصميم المنتجات. المنتج الرقمي ليس سطحاً ثابتاً. إنه مئات الأسطح، لكل منها حالاته وسماته وسياقاته الخاصة. لم تُصمَّم القاعدة قط لذلك العالم والأمر يظهر جلياً.
لماذا تنهار في تصميم المنتجات
تفترض قاعدة 60-30-10 سطحاً ثابتاً مفرداً ومشاهداً واحداً، وهذا لا علاقة له بطريقة عمل تصميم المنتجات.
الواجهات الحقيقية تحتوي على أزرار معطّلة، وحالات hover، وحلقات focus، وشارات الخطأ، وإشعارات النجاح، وسلاسل بيانات الرسوم البيانية، والحالات الفارغة، والهياكل الوهمية أثناء التحميل، والألوان الدلالية للإجراءات التدميرية. لا يندرج أي من هذا بسلاسة تحت "60 أو 30 أو 10 بالمئة من الشاشة". فهذه ليست شاشة. إنها سلوك.
تنهار القاعدة أيضاً فور إضافة الوضع الليلي. الرمادي الفاتح الذي يمثل 60% يجب أن يصبح رمادياً داكناً بنسبة 60%، والثانوي بنسبة 30% يجب أن يتغير في درجته للحفاظ على التسلسل الهرمي، والمُميِّز بنسبة 10% عادةً ما يحتاج إلى تفتيح أو تغيير تدريجي للبقاء متاحاً. هذه ليست مشكلة نسب. إنها مشكلة نظام.
إمكانية الوصول هي المسمار الأخير في النعش. نسب التباين في WCAG contrast ratios لا تهتم بالنسبة المئوية من صفحتك الزرقاء. ما يهمها هو ما إذا كان الأزرق المحدد على الزر المحدد يحظى بتباين كافٍ مع الخلفية المحددة خلفه. لا يمكنك حل هذه المشكلة بنسب المساحات.
ما تستخدمه أنظمة الألوان الحديثة بدلاً من ذلك
الأنظمة التي تُشغِّل أفضل الواجهات المُشحونة تستبدل قواعد النسب بطبقات token قائمة على الأدوار تصف ما يفعله اللون لا مقدار وجوده.
| الطبقة | ما تفعله | أمثلة على tokens |
|---|---|---|
| السطح | طبقات الخلفية والارتفاعات | bg-default، bg-subtle، bg-raised، bg-overlay |
| المحتوى | النص والأيقونات على الأسطح | text-default، text-muted، text-on-accent |
| المُميِّز | ألوان العلامة التجارية والإجراءات الأساسية | accent-primary، accent-primary-hover، accent-secondary |
| الحالة | الحالات التفاعلية والاستجابية | state-hover، state-focus، state-disabled |
| الدلالي | إشارات محملة بالمعنى | success، warning، critical، info |
كل token تصف دوراً. "هذا اللون هو السطح خلف البطاقة." "هذا اللون هو النص فوق المُميِّز."
المصمم لا يختار أبداً بين "ثانوي أم مُميِّز بنسبة 30%". يختار بين الأدوار التي يحددها النظام مسبقاً.
الفائدة تتراكم. إضافة الوضع الليلي تصبح مسألة تعيين نفس tokens لقيم مختلفة، لا إعادة طلاء الواجهة. إضافة سمة علامة تجارية جديدة تصبح تبادل token واحد على مستوى طبقة المُميِّز. إمكانية الوصول تُطبَّق على مستوى token، لا تُفحص صفحة بصفحة.
خمسة أنظمة تصميم تفعلها بشكل صحيح
هذه أنظمة تعمل على نطاق واسع بلوحات قائمة على الأدوار تصمد عبر الوضع الفاتح والليلي وكل سطح يلمسه المستخدم.
Material Design 3
شاهده مباشرة على m3.material.io
Material 3 هو الأكثر صراحة في ما يتعلق بهذا التحول. يحدد النظام أدوار ألوان مثل "primary" و"on-primary" و"surface" و"on-surface" و"inverse-primary"، مع إقران مسبق لكل دور للتباين. المصممون لا يختارون ألواناً. يختارون أدواراً، وتُحلَّل tokens إلى القيم الصحيحة للسمة النشطة.
ما يمكن استعارته: اصطلاح التسمية "on-". on-primary للنص والأيقونات الجالسة فوق سطح primary يُدمج إمكانية الوصول مباشرةً في اسم token.
Radix Colors
Radix Colors يُشحن بمقاييس من 12 خطوة لكل درجة لونية، مع تعيين مسبق لكل خطوة لدور (خلفية التطبيق، خلفية خفيفة، عنصر UI، hover، focus، active، solid، نص، نص عالي التباين). لا منطق نسب. كل خطوة دور.
ما يمكن استعارته: المقياس المرقم مع تعليقات الأدوار. يمنح المصممين مفرداً مشتركاً يُزيل 90% من نقاش "أي رمادي أستخدم".
Shopify Polaris
شاهده مباشرة على polaris.shopify.com
Polaris ينظم الألوان حسب دور المكوّن: bg (السطح)، text (المحتوى)، icon، border، وinteractive. لكل منها أدوار فرعية لـhover وpressed وdisabled وselected. النظام يجعل من الصعب هيكلياً على المصمم الوصول خارج tokens المحددة.
ما يمكن استعارته: تجميع الأدوار. فصل tokens "border" عن tokens "surface" يُجبر على استخدام الألوان بقصد على مستوى المكوّن.
علامتان تجاريتان تُشحنانه في الإنتاج
توثيق أنظمة التصميم أعلاه هو المرجع. هاتان العلامتان هما الدليل. Stripe وLinear تُشغِّلان الألوان القائمة على الأدوار على مستوى المنتج يومياً، وكلاهما يُثبت أن النمط يصمد تحت الاستخدام الحقيقي.
Stripe
Stripe تُشحن علامة تجارية مُنجزة، ليس مجرد وثيقة نظام تصميم. الموقع العام يُظهر كيف تبدو الألوان القائمة على الأدوار في الإنتاج.
تقريباً كل شيء أسطح محايدة ومحتوى محايد. البنفسجي هو طبقة المُميِّز ويظهر تحديداً حيث تعيش الإجراءات والروابط وإشارات العلامة التجارية. لا منطق نسب. منطق أدوار.
ما يمكن استعارته: انضباط إبقاء طبقة المُميِّز نحيلة. لون المُميِّز في Stripe يُستخدم باعتدال لأن دوره محجوز. إذا استخدمت ألوان مُميِّزة للزينة، تفقد القدرة على استخدامها للإجراء.
Linear
Linear تستند إلى الألوان المحايدة أكثر من أي شخص آخر يُشحن على نطاق واسع. المنتج بأكمله عبارة عن طبقات من tokens سطح داكنة مع درجة مُميِّز واحدة (بنفسجي) تقوم بكل عمل الإجراءات. لا قاعدة نسب يمكنها إنتاج هذا. إنه نظام قائم على الأدوار البحتة حيث طبقة "المُميِّز" لون واحد يُستخدم بتحفظ، وطبقة "السطح" هي مجموعة ارتفاعات كاملة.
ما يمكن استعارته: الثقة في السماح لطبقة المُميِّز بأن تكون لوناً واحداً. كثير من أنظمة التصميم الجديدة تُخصص ألوان مُميِّزة بإفراط. Linear يُثبت أن مُميِّزاً واحداً مختاراً جيداً، يُستخدم باتساق، يبني تعرفاً أقوى من ثلاثة مُميِّزات بنسب.
كيف تبني لوحة قائمة على الأدوار
بناء لوحة بهذه الطريقة يستغرق وقتاً أطول من اختيار ثلاثة ألوان وتعيين نسب لها، ويُسدد تكلفته أول مرة يُضيف مصمم الوضع الليلي.
العملية تسير بالعكس من طريقة تعلم معظم المصممين. بدلاً من اختيار الألوان أولاً وإيجاد أدوار لها، تختار الأدوار أولاً وتجد ألواناً لها.
- حدد طبقات الأدوار. ابدأ بالسطح والمحتوى والمُميِّز والحالة والدلالي. معظم المنتجات تحتاج تحديداً هذه الخمسة. بعضها يحتاج سادساً للتصور البياني للبيانات.
- اكتب tokens قبل اختيار قيم hex. كل token يجب أن تصف دوراً (
surface-subtle،content-muted،accent-primary-hover). إذا كان اسم token يصف لوناً ("light-blue")، أعِد تسميته. - أملأ المقياس المحايد أولاً. معظم الواجهة الحقيقية ألوان محايدة. ابنِ مقياساً كاملاً (Radix يستخدم 12 خطوة لسبب) قبل أن تلمس لون العلامة التجارية.
- أضف طبقة المُميِّز أخيراً. لون المُميِّز عادةً المكان الوحيد الذي تعيش فيه هوية العلامة التجارية بنشاط. التحفظ هنا هو كل اللعبة.
- عيِّن الوضع الليلي بإعادة حل tokens، لا بإعادة التصميم. إذا كان نظامك قائماً على الأدوار، الوضع الليلي هو تبادل قيم token، لا مراجعة ألوان شاملة.
- طبِّق إمكانية الوصول على مستوى طبقة token. كل token
on-surfaceيجب أن يجتاز 4.5:1 مقابل سطحه المقترن. أدمِج الفحص في النظام.
الاختصار المُغري هو تحديد ثلاثة أدوار (primary وsecondary وaccent)، الإعلان عن الانتهاء، والشحن. هذه قاعدة 60-30-10 ترتدي زياً من tokens. تنهار عند نفس النقطة تحديداً: المكوّن الحقيقي الأول.
للإطار الأوسع حول كيفية قراءة قرارات الألوان من قِبَل المستخدمين قبل أن يُهم أي من هذا العمل على tokens، علم نفس الألوان في التصميم يغطي طبقة المعنى. لكيفية جلوس أنظمة الألوان داخل السياق الأكبر للنظام، دليل أنظمة التصميم يحتوي الصورة الكاملة.
الأسئلة الشائعة
هل قاعدة 60-30-10 مفيدة في أي وقت؟
نعم. تصميم السطح المفرد لا يزال يستفيد منها. الملصقات، المنشورات الاجتماعية، أقسام hero التسويقية، التغليف، الانتشار التحريري. في أي مكان يكون فيه المُنتَج شاشة واحدة تُرى مرة واحدة، تمنح القاعدة اختصار نسب سريعاً. تصميم المنتجات ليس ذلك العالم.
كم لوناً يجب أن يحتوي نظام التصميم؟
قيم hex خام أقل مما تظن، منظمة في tokens أكثر مما تظن. معظم الأنظمة المُشحونة لديها 8 إلى 12 خطوة محايدة، و8 إلى 12 خطوة مُميِّزة، و3 إلى 5 عائلات دلالية، كلها مُحلَّلة في tokens قائمة على الأدوار. عدد الألوان الخام صغير. عدد الأدوار كبير.
ما الفرق بين لوحة الألوان ونظام الألوان؟
لوحة الألوان هي مجموعة ألوان. نظام الألوان هو مجموعة أدوار، ومجموعة قواعد حول كيفية تفاعل تلك الأدوار، وتعيين من الأدوار إلى الألوان يمكن تغييره لكل سمة. اللوحة تجيب على "ما هي ألوان العلامة التجارية". النظام يجيب على "ما هو لون هذا العنصر في هذه الحالة في هذه السمة".
أوقف قياس الألوان بالنسب المئوية
قاعدة 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
