قانون ۶۰-۳۰-۱۰ شکسته است: سیستمهای رنگ مدرن که واقعاً کار میکنند
قانون ۶۰-۳۰-۱۰ یک میانبر دکوراسیون داخلی است. سیستمهای رنگ محصولات مدرن از توکنهای مبتنی بر نقش استفاده میکنند. این مدلی است که مقیاس میپذیرد.
قانون ۶۰-۳۰-۱۰ اولین چیزی است که بیشتر طراحان دربارهٔ رنگ میآموزند، و اولین چیزی است که تیمهای محصولِ جدی لحظهای که یک رابط واقعی را روانه میکنند در سکوت کنار میگذارند. شصت درصد غالب، سی درصد ثانویه، ده درصد برجسته.
تمیز. قابل نقل قول. کاملاً غیرعملی وقتی یک برند دارای دکمهها، حالتهای غیرفعال، اعلانها، نمودارها، حالت تاریک و یک سایت مستندات است.
قانون غلط نیست. فقط برای مسئلهٔ متفاوتی ساخته شده است. آنچه بهترین سیستمهای طراحیِ اجراشده بهجای آن استفاده میکنند یک نسبت نیست، بلکه یک سیستم توکن مبتنی بر نقش است. این مقاله توضیح میدهد چرا ۶۰-۳۰-۱۰ شکسته است، چه چیزی جایگزین آن شده، و پنج سیستم طراحیِ واقعی که این جایگزینی را در مقیاس انجام میدهند.
قانون ۶۰-۳۰-۱۰ از کجا آمد
قانون ۶۰-۳۰-۱۰ یک میانبر دکوراسیون داخلی از اواسط قرن بیستم است که توسط کسانی که به قانونی برای استناد نیاز داشتند روی طراحی دیجیتال چسبانده شده است.
منشأ آن طراحی مسکونی است. یک اتاق دارای یک رنگ غالب (دیوارها)، یک رنگ ثانویه (رومبلی، پرده) و یک رنگ برجسته (کوسنها، تابلو) است. شصت، سی، ده. برای اتاقها کار میکند چون اتاقها سطوح تکی و ثابتی هستند که توسط یک انسان در یک زمان دیده میشوند و تا زمانی که کسی دوباره آنها را رنگ نکند همان رنگ را نگه میدارند.
هیچکدام از این فرضیات در برخورد با طراحی محصول دوام نمیآورند. یک محصول دیجیتال یک سطح ثابت نیست. صدها سطح است، هر یک با حالتها، تمها و زمینههای خودش. این قانون هرگز برای آن دنیا طراحی نشده بود و این مشخص است.
چرا در طراحی محصول از هم میپاشد
قانون ۶۰-۳۰-۱۰ فرض میکند یک سطح تنها و ثابت و یک بیننده وجود دارد، که دقیقاً برعکس نحوهٔ کار طراحی محصول است.
رابطهای واقعی دارای دکمههای غیرفعال، حالتهای هاور، حلقههای فوکوس، بنرهای خطا، توستهای موفقیت، سریهای دادهٔ نمودار، حالتهای خالی، اسکلتونهای بارگذاری و رنگهای معنایی برای اقدامات مخرب هستند. هیچکدام از اینها تمیزْ روی «۶۰، ۳۰ یا ۱۰ درصد از بوم» نگاشته نمیشوند. اینها بوم نیستند. اینها رفتارند.
قانون همچنین لحظهای که حالت تاریک اضافه میکنی فرو میریزد. ۶۰ درصد خنثای روشن تو حالا باید به ۶۰ درصد خنثای تاریک تبدیل شود، ۳۰ درصد ثانویهٔ تو باید برای حفظ سلسلهمراتب تغییر تن دهد، و ۱۰ درصد برجستهٔ تو معمولاً باید روشنتر شود یا بهکلی تغییر فام دهد تا دسترسپذیر باقی بماند. این یک مسئلهٔ نسبت نیست. یک مسئلهٔ سیستم است.
دسترسپذیری میخ آخر است. نسبتهای کنتراست 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 |
هر توکن یک نقش را توصیف میکند. «این رنگ سطحِ پشتِ یک کارت است.» «این رنگ متنِ روی برجسته است.»
طراح هرگز بین «ثانویه یا برجسته با ۳۰ درصد» انتخاب نمیکند. او بین نقشهایی که سیستم از قبل تعریف کرده انتخاب میکند.
مزیت آن انباشته میشود. افزودن حالت تاریک تبدیل میشود به نگاشت همان توکنها به مقادیر خامِ متفاوت، نه دوبارهرنگکردن رابط. افزودن یک تم برند جدید به تعویض یک توکن در سطح برجسته تبدیل میشود. دسترسپذیری در سطح توکن اعمال میشود، نه صفحه به صفحه بررسی میشود.
پنج سیستم طراحی که این کار را درست انجام میدهند
اینها در مقیاس با پالتهای مبتنی بر نقش کار میکنند که در حالت روشن، حالت تاریک و هر سطحی که کاربر لمس میکند دوام میآورند.
Material Design 3
مشاهدهٔ زنده در m3.material.io
Material 3 دربارهٔ این جابهجایی صریحترین است. این سیستم نقشهای رنگی مانند "primary"، "on-primary"، "surface"، "on-surface"، "inverse-primary" را تعریف میکند، با هر نقش از پیش برای کنتراست جفت شده. طراحان رنگ انتخاب نمیکنند. نقش انتخاب میکنند، و توکنها به مقادیر درستِ تم فعال حل میشوند.
چه چیزی قرض بگیری: قرارداد نامگذاری "on-". on-primary برای متن/آیکونی که روی یک سطح primary قرار میگیرد دسترسپذیری را مستقیماً در نام توکن رمزگذاری میکند.
Radix Colors
Radix Colors مقیاسهای ۱۲ پلهای در هر فام ارائه میدهد، با هر پله که از پیش به یک نقش اختصاص یافته است (پسزمینهٔ اپ، پسزمینهٔ ظریف، عنصر UI، هاور، فوکوس، فعال، توپر، متن، متن با کنتراست بالا). هیچ منطق نسبتی وجود ندارد. هر پله یک نقش است.
چه چیزی قرض بگیری: مقیاس شمارهگذاریشده با حاشیهنویسی نقش. به طراحان یک واژگان مشترک میدهد که ۹۰ درصد از بحث «کدام خاکستری را استفاده کنم» را حذف میکند.
Shopify Polaris
مشاهدهٔ زنده در polaris.shopify.com
Polaris رنگ را بر اساس نقش کامپوننت سازماندهی میکند: bg (سطح)، text (محتوا)، icon، border و interactive. هر یک دارای زیرنقشهایی برای هاور، 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 به دلیلی ۱۲ پله استفاده میکند) قبل از اینکه رنگ برند را لمس کنی.
- سطح برجسته را آخر اضافه کن. رنگ برجسته معمولاً تنها جایی است که هویت برند فعالانه زندگی میکند. خویشتنداری اینجا تمام بازی است.
- حالت تاریک را با حل دوبارهٔ توکنها نگاشت کن، نه با بازطراحی. اگر سیستم تو مبتنی بر نقش است، حالت تاریک یک تعویض مقدار توکن است، نه یک بازسازی رنگی.
- دسترسپذیری را در لایهٔ توکن اعمال کن. هر توکن
on-surfaceباید ۴.۵:۱ در برابر سطح جفتشدهٔ خود را پاس کند. بررسی را درونسازی کن.
میانبر وسوسهانگیز تعریف سه نقش (primary، secondary، accent)، اعلام پیروزی و انتشار است. این همان قانون ۶۰-۳۰-۱۰ در لباس توکن است. دقیقاً در همان نقطه از هم میپاشد: اولین کامپوننت واقعی.
برای چارچوب گستردهتر دربارهٔ اینکه تصمیمات رنگی چگونه توسط کاربران خوانده میشوند پیش از آنکه هر کار توکنی مهم شود، روانشناسی رنگ در طراحی لایهٔ معنا را پوشش میدهد. برای اینکه چگونه سیستمهای رنگ درون زمینهٔ سیستم بزرگتر قرار میگیرند، راهنمای سیستمهای طراحی تصویر کامل را دارد.
سؤالات متداول
آیا قانون ۶۰-۳۰-۱۰ هرگز مفید است؟
بله. طراحی تکسطحی هنوز از آن بهره میبرد. پوسترها، پستهای اجتماعی، بخشهای hero بازاریابی، بستهبندی، صفحهآراییهای تحریریه. هر جا که خروجی یک بوم تنها است که یک بار دیده میشود، قانون یک میانبر نسبت سریع میدهد. طراحی محصول آن دنیا نیست.
یک سیستم طراحی چند رنگ باید داشته باشد؟
مقادیر hex خام کمتری از آنچه فکر میکنی، سازماندهیشده در توکنهای بیشتری از آنچه فکر میکنی. بیشتر سیستمهای در حال اجرا ۸ تا ۱۲ پلهٔ خنثی، ۸ تا ۱۲ پلهٔ برجسته و ۳ تا ۵ خانوادهٔ معنایی دارند، همه در توکنهای مبتنی بر نقش حل میشوند. شمار رنگ خام کوچک است. شمار نقش بزرگ است.
تفاوت بین یک پالت رنگ و یک سیستم رنگ چیست؟
یک پالت رنگ مجموعهای از رنگهاست. یک سیستم رنگ مجموعهای از نقشها، مجموعهای از قوانین دربارهٔ چگونگی تعامل این نقشها، و نگاشتی از نقش به رنگ است که میتواند بر اساس تم تغییر کند. یک پالت به «چه رنگهایی در برند هستند» پاسخ میدهد. یک سیستم به «این عنصر در این حالت در این تم چه رنگی است» پاسخ میدهد.
اندازهگیری رنگ به درصد را متوقف کن
قانون ۶۰-۳۰-۱۰ بد نیست. فقط خارج از محدوده است.
طراحی محصول یک اتاق نیست. یک سیستم از سطوح، حالتها و نقشهاست که با حرکت کاربر در آن تغییر میکند.
اندازهگیری رنگ به درصد به همان اندازه معنا دارد که اندازهگیری تایپوگرافی بر اساس درصد صفحه. نمیگویی «۳۰ درصد متن تیترها هستند». میگویی «تیترها یک نقش با سبک تعریفشده هستند». رنگ باید به همان شیوه کار کند.
برندهایی که بهترین کار هویت بصری را در مقیاس عرضه میکنند، 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
