قانون 60-30-10 شکسته است: سیستمهای رنگی مدرنی که واقعاً کار میکنند
قانون 60-30-10 یک میانبر طراحی داخلی است که طراحان به اشتباه به کار محصول تحمیل میکنند. سیستمهای رنگی مدرن به جای آن چه میکنند.
قانون 60-30-10 اولین چیزی است که اکثر طراحان درباره رنگ یاد میگیرند، و اولین چیزی است که اکثر تیمهای جدی محصول آرامآرام کنار میگذارند به محض اینکه یک رابط کاربری واقعی عرضه میکنند. شصت درصد غالب، سی درصد ثانویه، ده درصد تأکیدی.
تمیز. قابل نقلقول. کاملاً غیرعملی به محض اینکه یک برند دارای دکمه، حالتهای غیرفعال، اعلانها، نمودارها، حالت تاریک و یک سایت مستندات باشد.
قانون اشتباه نیست. فقط برای مسئلهای دیگر ساخته شده است. آنچه بهترین سیستمهای طراحی عرضهشده به جای آن استفاده میکنند یک نسبت نیست، بلکه یک سیستم توکن مبتنی بر نقش است. این مقاله توضیح میدهد که چرا 60-30-10 شکست میخورد، چه چیزی جایگزین آن شده، و پنج سیستم طراحی واقعی که این جایگزینی را در مقیاس انجام میدهند.
ریشه قانون 60-30-10
قانون 60-30-10 یک میانبر تزئین داخلی از اواسط قرن بیستم است که توسط افرادی که نیاز به قانونی قابل استناد داشتند به طراحی دیجیتال منتقل شد.
ریشه آن در طراحی مسکونی است. یک اتاق دارای یک رنگ غالب (دیوارها)، یک رنگ ثانویه (مبلمان، پردهها) و یک تأکید (کوسنها، هنر) است. شصت، سی، ده. برای اتاقها کار میکند چون اتاقها سطوح ثابت تکی هستند که توسط یک انسان در یک زمان دیده میشوند و تا زمانی که کسی دوباره رنگ نزند همان رنگ باقی میمانند.
هیچکدام از این فرضها با طراحی محصول دوام نمیآورند. یک محصول دیجیتال یک سطح ثابت نیست. صدها سطح است، هر کدام با حالتها، تمها و زمینههای خاص خود. این قانون هرگز برای آن دنیا طراحی نشده بود و این کاملاً مشخص است.
چرا در طراحی محصول از هم میپاشد
قانون 60-30-10 یک سطح ثابت و یک بیننده را فرض میکند، که دقیقاً هیچ ربطی به نحوه کار طراحی محصول ندارد.
رابطهای کاربری واقعی دارای دکمههای غیرفعال، حالتهای hover، حلقههای focus، بنرهای خطا، نوتیفیکیشنهای موفقیت، سری دادههای نمودار، حالتهای خالی، اسکلتهای بارگذاری و رنگهای معنایی برای اقدامات مخرب هستند. هیچکدام از اینها به تمیزی به "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
Material 3 بیشترین صراحت را درباره این تغییر دارد. این سیستم نقشهای رنگی مانند "primary"، "on-primary"، "surface"، "on-surface"، "inverse-primary" را تعریف میکند، با هر نقشی که از پیش برای کنتراست جفت شده است. طراحان رنگ انتخاب نمیکنند. نقش انتخاب میکنند، و توکنها به مقادیر صحیح برای تم فعال تبدیل میشوند.
چه چیزی بدزدید: قرارداد نامگذاری "on-". on-primary برای متن و آیکونهای نشسته روی یک سطح primary، دسترسی را مستقیماً در نام توکن رمزگذاری میکند.
Radix Colors
Radix Colors مقیاسهای 12 مرحلهای به ازای هر رنگ ارائه میدهد، با هر مرحلهای که از پیش به یک نقش اختصاص داده شده (پسزمینه برنامه، پسزمینه ظریف، عنصر UI، hover، focus، فعال، جامد، متن، متن با کنتراست بالا). هیچ منطق نسبتی وجود ندارد. هر مرحله یک نقش است.
چه چیزی بدزدید: مقیاس عددی با حاشیهنویسی نقش. این به طراحان یک واژگان مشترک میدهد که 90 درصد بحث "از کدام خاکستری استفاده کنم" را حذف میکند.
Shopify Polaris
مشاهده زنده در polaris.shopify.com
Polaris رنگ را بر اساس نقش کامپوننت سازماندهی میکند: bg (surface)، text (content)، icon، border و interactive. هر کدام دارای زیرنقشهایی برای hover، فشرده شده، غیرفعال و انتخاب شده هستند. این سیستم از نظر ساختاری دستیابی طراح به خارج از توکنهای تعریفشده را دشوار میکند.
چه چیزی بدزدید: گروهبندی نقش. جدا کردن توکنهای "border" از توکنهای "surface" استفاده رنگ عمدی را در سطح کامپوننت اجبار میکند.
دو برند که آن را در محصول واقعی اجرا میکنند
مستندات سیستم طراحی بالا مرجع هستند. این دو برند اثبات آن هستند. Stripe و Linear هر روز رنگ مبتنی بر نقش را در لایه محصول اجرا میکنند، و هر دو ثابت میکنند که این الگو در برابر استفاده واقعی مقاوم است.
Stripe
Stripe یک برند عرضهشده ارائه میدهد، نه فقط یک سند سیستم طراحی. سایت عمومی نشان میدهد که رنگ مبتنی بر نقش در محصول واقعی چه شکلی دارد.
تقریباً همه چیز سطوح خنثا و محتوای خنثا است. بنفش لایه تأکید است و دقیقاً در جایی ظاهر میشود که اقدامات، لینکها و سیگنالهای برند زندگی میکنند. هیچ منطق نسبتی وجود ندارد. منطق نقش وجود دارد.
چه چیزی بدزدید: انضباط نگه داشتن لایه تأکید نازک. رنگ تأکید Stripe به خاطر نقش محفوظ آن با صرفهجویی استفاده میشود. اگر از رنگهای تأکید برای تزئین استفاده کنید، توانایی استفاده از آنها برای اقدام را از دست میدهید.
Linear
Linear بیشتر از تقریباً هر کسی که در این مقیاس عرضه میکند روی خنثاها تکیه میکند. کل محصول لایههایی از توکنهای surface تاریک با یک رنگ تأکید واحد (بنفش) است که تمام کار اقدام را انجام میدهد. هیچ قانون نسبتی نمیتوانست این را تولید کند. این یک سیستم خالص مبتنی بر نقش است که در آن لایه "accent" یک رنگ است که با خویشتنداری استفاده میشود، و لایه "surface" یک پشته ارتفاع کامل است.
چه چیزی بدزدید: اعتماد به نفس برای اینکه بگذارید لایه تأکید یک رنگ باشد. بسیاری از سیستمهای طراحی جدید رنگهای تأکید را بیش از حد اختصاص میدهند. Linear ثابت میکند که یک تأکید خوب انتخابشده که به طور مداوم استفاده میشود، شناخت قویتری نسبت به سه تأکید در نسبت ایجاد میکند.
نحوه ساخت یک پالت مبتنی بر نقش
ساختن یک پالت به این روش بیشتر از انتخاب سه رنگ و اختصاص درصد طول میکشد، و اولین باری که طراح حالت تاریک اضافه میکند خودش را جبران میکند.
این فرآیند برعکس نحوه یادگیری اکثر طراحان اجرا میشود. به جای اینکه ابتدا رنگها را انتخاب کنید و برای آنها نقش پیدا کنید، ابتدا نقشها را انتخاب میکنید و برای آنها رنگ پیدا میکنید.
- لایههای نقش را تعریف کنید. با surface، content، accent، state، semantic شروع کنید. اکثر محصولات دقیقاً به این پنج تا نیاز دارند. برخی به یک ششمی برای تجسم داده نیاز دارند.
- توکنها را قبل از انتخاب مقادیر hex بنویسید. هر توکن باید یک نقش توصیف کند (
surface-subtle،content-muted،accent-primary-hover). اگر نام یک توکن یک رنگ توصیف میکند ("light-blue")، آن را تغییر نام دهید. - ابتدا مقیاس خنثا را پر کنید. اکثر یک رابط واقعی خنثاها هستند. قبل از اینکه به رنگ برند دست بزنید، یک مقیاس کامل بسازید (Radix به دلیل خوبی از 12 مرحله استفاده میکند).
- لایه تأکید را آخر اضافه کنید. رنگ تأکید معمولاً تنها جایی است که هویت برند به طور فعال زندگی میکند. خویشتنداری اینجا کل بازی است.
- حالت تاریک را با تفسیر مجدد توکنها نگاشت کنید، نه با طراحی مجدد. اگر سیستم شما مبتنی بر نقش است، حالت تاریک یک تعویض مقدار توکن است، نه یک بازنگری رنگ.
- دسترسی را در لایه توکن اعمال کنید. هر توکن
on-surfaceباید 4.5:1 را در برابر surface جفتشده خود بگذراند. بررسی را داخل سیستم قرار دهید.
میانبر وسوسهانگیز این است که سه نقش (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
