تئوری رنگ برای طراحان: سیستم پشت هر پالت خوب
تئوری رنگ برای طراحان فعال. چرخ، هارمونیها، ادراک، روانشناسی، دسترسپذیری و چگونگی تبدیل آن به محصول توسط سیستمهای طراحی مدرن.
تئوری رنگ مانند یک دورهٔ تاریخ هنر آموخته میشود و مانند مهندسی ساختمان تمرین میشود. چرخها، هارمونیها، مکملها. گرم و سرد.
«قرمز یعنی اشتیاق.» اینها مصنوعاتی هستند که بیشتر طراحان در مدرسه دریافت میکنند، و تقریباً هیچکدام از آنها در برخورد با یک رابط محصول واقعی دوام نمیآورند.
آنچه طراحان فعال واقعاً نیاز دارند یک استک است. یک سیستم لایهای که از نحوهٔ درک رنگ توسط چشم آغاز میشود، از چرخ و هارمونیهای آن عبور میکند، به کنتراست و سلسلهمراتب میرسد، از روانشناسی و فرهنگ عبور میکند، به ساخت پالت صعود میکند و در نهایت به توکنها و سیستمهای طراحی که کار را ارسال میکنند میرسد. یک لایه را رد کنی، پالت در Figma خوب به نظر میرسد و در محصول نهایی از هم میپاشد.
این مقاله کل استک است. هر لایه مقالهٔ Brainy جداگانهای برای عمق بیشتر دارد. اینجا آنها را متصل میکنیم.
تئوری رنگ واقعاً از تو میخواهد چه مسئلهای را حل کنی
تئوری رنگ مجموعهای از قوانین زیباییشناختی نیست، بلکه یک استک از بینایی، ادراک و تفکر سیستماتیک است که باید همه با هم کار کنند تا یک پالت ارسال شود.
نسخهٔ کوتاه: بینایی انسان عجیب است، رنگ فیزیکی است، و طراحان باید خروجیهایی تولید کنند که برای میلیونها نفر روی صدها دستگاه در دهها زمینه کار کند. تئوری واژگانی است که ما برای استدلال دربارهٔ آن مسئله استفاده میکنیم. مجموعهای از احکام نیست. مجموعهای از مفاهیم مشترک است که به تو اجازه میدهد از «این احساس بدی دارد» به «رنگ برجسته با پسزمینه رقابت میکند و کنتراست در ۱۴pt شکست میخورد» برسی.
استک از روی هدف لایهای است. هر لایه پاسخ به یک سؤال متفاوت میدهد.
| لایه | سؤالی که پاسخ میدهد |
|---|---|
| ادراک | چشم واقعاً این رنگ را در زمینه چگونه میبیند؟ |
| چرخ | رابطهٔ فام بین این رنگها چیست؟ |
| هارمونی | آیا این رنگها مرتبط احساس میشوند یا متضاد؟ |
| کنتراست | آیا میتوان این را خواند، دید، کلیک کرد؟ |
| پالت | این برند یا محصول چه رنگهایی را مالک است؟ |
| سیستم | این رنگها چگونه در مقیاس به طور مداوم اعمال میشوند؟ |
| دسترسپذیری | آیا هر جفت در سیستم برای هر کاربر کار میکند؟ |
هر لایه بار-بردار است. پالتی که بدون تفکر ادراکی طراحی شود در زمینه شکست میخورد. سیستمی که بدون دسترسپذیری ساخته شود در ممیزی شکست میخورد.
هارمونیای که بدون منطق پالت انتخاب شود در مقیاس شکست میخورد. لایهها جمع میشوند، به همین دلیل است که درست انجام دادن رنگ سود مرکب میپردازد.
چرخ، هارمونیها و اینکه واقعاً برای چه هستند
چرخ رنگ مدلی از روابط فام است، و هارمونیها میانبرهایی برای انتخاب جفتها و گروههایی هستند که چشم آنها را مرتبط میخواند.
بیشتر طراحان چرخ را به صورت مثلثهای اولیه-ثانویه-ثالثیه یاد میگیرند و دیگر هرگز از آن استفاده نمیکنند. این یک اتلاف است. چرخ سریعترین راه برای استدلال دربارهٔ این است که کدام رنگها با هم تعلق دارند و کدامها درگیر میشوند، که هر بار که یک رنگ جدید به پالت، نمودار یا نشانی اضافه میکنی اهمیت دارد.
چهار هارمونی در کار محصول و برند جای خود را کسب میکنند.
مکمل
رنگهای روبرو بر روی چرخ. آبی و نارنجی، قرمز و سبز، بنفش و زرد. مکملها حداکثر تنش بصری ممکن بین دو فام را ایجاد میکنند.
این برای تأثیر تکلحظهای عالی است (یک پوستر، یک تصویر hero، یک لباس ورزشی) و برای استفادهٔ طولانی رابط وحشتناک است، به همین دلیل تقریباً هرگز پالتهای محصول با مکمل خالص نمیبینی. در UI، مکملها ملایم میشوند: یک فام غلبه دارد، دیگری به عنوان یک برجستهٔ مهارشده ظاهر میشود.
همجوار
رنگهای مجاور در چرخ. آبی آسمانی، آبی، آبی-بنفش. پالتهای همجوار منسجم و آرام احساس میشوند.
آنها پایهٔ بیشتر سیستمهای برند مدرن هستند. خطر این است که اگر کنتراست ارزش کافی بین فامها نباشد ممکن است یکنواخت خوانده شوند. همجوار زمانی کار میکند که پالت رنگ را به عنوان یک خانواده رفتار کنی، نه مجموعهای از رقبا.
سهتایی و اسپلیت-مکمل: جفت کماستفاده
مکمل و همجوار بیشتر توجه را در مدرسهٔ طراحی دریافت میکنند. دو هارمونی بعدی کمتر بحث میشوند و، برای طراحان فعال، اغلب مفیدترند.
سهتایی
سه فام که به طور مساوی در اطراف چرخ قرار گرفتهاند. قرمز-زرد-آبی. نارنجی-سبز-بنفش. پالتهای سهتایی بازیگوش و پرانرژی احساس میشوند، به همین دلیل در برندهای کودکانه، ورزشی و سرگرمی ظاهر میشوند.
در طراحی محصول، سهتایی خالص نادر است چون متعادل کردن آن سخت است. پالتهای الهامگرفته از سهتایی (یک فام غالب، دو فام دیگر خاموش) همهجا هستند.
اسپلیت-مکمل
یک فام به علاوهٔ دو فام مجاور با مکمل آن. آبی به علاوهٔ زرد-نارنجی و قرمز-نارنجی. اسپلیت-مکمل بیشتر کنتراست مکمل را با تنش کمتر حفظ میکند. این هارمونی کمارزش است که در بسیاری از سیستمهای برند که خوب اجرا شدهاند ظاهر میشود اگر به دنبالش بگردی.
هارمونیها ابزار هستند، نه پاسخ. تو یک پالت برند را با گفتن «بیایید سهتایی انجام دهیم» انتخاب نمیکنی. از هارمونیها برای استدلال دربارهٔ ترکیبهای پیشنهادی استفاده میکنی و آنهایی را که از قبل کار میکنند شناسایی میکنی.
ادراک همیشه از تئوری شکستناپذیرتر است
همان قرمز روی همان دکمه به عنوان فوری بر روی صفحهٔ خنثی، پرسر و صدا بر روی صفحهٔ نارنجی، و نامرئی بر روی صفحهٔ قرمز تیره خوانده میشود، و هیچ یک از اینها توسط چرخ توضیح داده نمیشود.
زمینه ضریب قدرت در رنگ است. یک رنگ معنای ثابت، روشنایی ثابت یا خوانایی ثابت ندارد. رابطهای دارد با آنچه در کنارش است، آنچه یک ثانیه قبل روی صفحه بود، چه نمایشگری که کاربر به آن نگاه میکند، و چه نوری که به آن نمایشگر برخورد میکند. تئوری بدون ادراک تئوری در خلأ است.
سه اثر ادراکی ارزش شناختن به نام دارند.
کنتراست همزمان. همان خاکستری در کنار سیاه روشنتر و در کنار سفید تیرهتر به نظر میرسد. پیامد این است: یک رنگ برند که در برابر پسزمینهٔ استودیو سفید انتخاب میکنی کاملاً متفاوت احساس خواهد شد وقتی در یک hero تاریک قرار داده شود. باید رنگها را در زمینهٔ تولید آنها آزمایش کنی، نه در انزوا.
سازگاری رنگی. چشم در ۵۰۰ms یا کمتر با رنگ محیط سازگار میشود. صفحهای که پنج ثانیه بر روی یک hero نارنجی گرم صرف کرد قبل از اسکرول به یک ناحیهٔ محتوای خنثی، احساس سردتری نسبت به آنچه واقعاً آن ناحیهٔ محتوا است خواهد داشت. ادراک کاربر بدون اینکه متوجه شود جابهجا شده است.
گروهبندی ارزش. چشم آیتمهایی با روشنایی مشابه را مرتبط و آیتمهایی با تاریکی مشابه را جدا گروهبندی میکند. سلسلهمراتب اینگونه کار میکند. یک طراحی قوی از کنتراست ارزش بیشتر از کنتراست فام بهره میبرد چون ارزش چیزی است که سیستم بصری اول پردازش میکند.
روانشناسی رنگ: شواهد در برابر خرافات
روانشناسی رنگ واقعی است اما بیشتر آنچه روانشناسی رنگ نامیده میشود افسانههای بازیافتی هستند، به همین دلیل طراحان باید شواهد را از فولکلور جدا کنند.
تحقیقات واقعی وجود دارد دربارهٔ مطالعهٔ شناسایی برند Loyola (رنگ تا ۸۰% از شناسایی برند را میراند)، دربارهٔ اثرات اشباع بر فوریت ادراکشده، دربارهٔ ترجیحات حالت تاریک و دربارهٔ ارتباطات رنگی فرهنگی. این مفید است. همچنین سیلی از پستهای وبلاگ وجود دارد که ادعا میکنند «قرمز تبدیل را ۲۱% افزایش میدهد» که با کمترین بررسی از هم میپاشند. این مفید نیست.
آزمون سریع: هر ادعای روانشناسی رنگ که شامل زمینه، فرهنگ یا مخاطب نیست خرافات است. معنای رنگ همیشه زمینهای است. سبز در فینتک آمریکا به عنوان پول خوانده میشود و در سلامت به عنوان طبیعت، و هر دو در زمینهشان درستند.
برای توضیح کامل اینکه چه چیزی واقعی است، چه چیزی بازیافتی است و چگونه واقعاً روانشناسی رنگ را در کار برند و محصول اعمال کنی، مقالهٔ روانشناسی رنگ در طراحی چارچوب مبتنی بر شواهد را دارد.
چرا قوانین نسبت در مقیاس محصول شکستند
قانون ۶۰-۳۰-۱۰ و عموزادههای آن یک مسئلهٔ تک-سطحی را حل کردند، و طراحی محصول یک سطح واحد نیست.
طراحی داخلی ۶۰-۳۰-۱۰ را برای پاسخ به «چقدر از هر رنگ روی دیوارها، مبلمان و لهجهها قرار میگیرد» اختراع کرد. این به خوبی به یک اتاق نگاشت میشود. این به یک محصول دیجیتال که صدها سطح، دهها حالت، حالت روشن و تاریک و کاربرانی در طیفی از دستگاهها دارد نگاشت نمیشود.
رنگ محصول مدرن نسبت را برای نقشها رها کرد. سطح، محتوا، برجسته، حالت، معنایی. هر نقش یک توکن طراحی دریافت میکند که به مقدار خام متفاوتی در هر تم حل میشود. این جایگزین ۶۰-۳۰-۱۰ است، و تنها چیزی است که مقیاس میپذیرد.
توضیح کامل در مورد اینکه چرا نسبت شکست و سیستمهای توکن مبتنی بر نقش در عمل چگونه به نظر میرسند در مقالهٔ قانون ۶۰-۳۰-۱۰ شکسته است آمده است.
دسترسپذیری اکنون بخشی از تئوری رنگ است
WCAG و APCA دسترسپذیری را از «چیزی که QA در انتها بررسی میکند» به ویژگی خود سیستم رنگ منتقل کردند.
برای مدت طولانی، دسترسپذیری یک گفتگوی جداگانه بود. طراحان یک پالت را برای زیباییشناسی انتخاب میکردند، QA نسبتها را در انتها بررسی میکرد، چیزی تغییر میکرد، همه جلو میرفتند. این جریان کاری مقیاس نمیپذیرد. هر سیستم طراحی ارسالشده اکنون دسترسپذیری را در لایهٔ توکن رمزگذاری میکند، یعنی خود پالت باید در برابر نسبت کنتراست و آستانههای ادراکی از ابتدا طراحی شود.
نسخهٔ کوتاه: WCAG 2.2 AA کف تطبیق است (۴.۵:۱ بدنه، ۳:۱ متن بزرگ و UI غیرمتنی). APCA الگوریتم ادراکی است که با خوانایی واقعی همبستگی بهتری دارد و برای WCAG 3 پیشنهاد شده است. محصولات واقعی هر دو را هدف قرار میدهند.
برای نگاه کامل یک طراح فعال به نسبتهای WCAG، APCA و چگونگی توکنی کردن کنتراست در سیستمهای طراحی، مقالهٔ کنتراست رنگ دسترسپذیر آن را از ابتدا تا انتها پوشش میدهد.
ساختن یک پالت: استک طراح فعال
پالتی که ارسال میشود و مقیاس میپذیرد لایه به لایه ساخته میشود، نه در یک نشست انتخاب.
فرآیندی که کار میکند در یک ترتیب عمدی اجرا میشود. هر لایه بعدی را محدود میکند، که چگونگی حفظ انسجام پالت به جای رفتن به سمت مجموعهای از انتخابهای رنگی تکمصرف است.
-
با یک مقیاس خنثی شروع کن. ۸ تا ۱۲ پلهٔ خاکستری (یا تقریباً خاکستری، اغلب کمی به سمت دمای برند متمایل) بساز. بیشتر یک رابط واقعی خنثی است. این پایهای است که هر لایهٔ دیگر روی آن مینشیند.
-
برجستهٔ برند را انتخاب کن. یک رنگ لنگر، تنها چیزی که یک خواننده اگر آن را به تنهایی ببیند با برند ارتباط میدهد. خویشتنداری اینجا تمام بازی است. سطح برجسته را برای لحظات برند، اقدامات اصلی و عناصر با سیگنال بالا رزرو کن.
-
رنگهای معنایی را اضافه کن. موفقیت، هشدار، بحرانی، اطلاعاتی. اینها کاربردی هستند، نه تزئینی، و باید در حالت روشن و تاریک بدون حمل شخصیت برند کار کنند. با آنها به عنوان ابزار رفتار کن، نه طعم.
-
به یک سطح حالت گسترش بده. هاور، فوکوس، pressed، disabled، selected. معمولاً از سطوح دیگر مشتق میشوند (یک برجستهٔ تیرهتر برای هاور، یک خنثای خاموش برای disabled) اما توکنهای خودشان هستند.
-
همه چیز را توکنی کن. هر جفتی که ارسال میشود به یک نام نقش نیاز دارد.
text-on-accent،bg-subtle،border-default. اگر یک طراح بتواند بدون توکن به یک رنگ خام دست دراز کند، پالت از قبل در حال نشت است. -
در برابر ادراک آزمون کن، نه فقط ریاضیات. نسبتهای WCAG اول، نمرات APCA دوم، سپس آزمونهای دنیای واقعی: حالت خاکستری، squint test، پیشنمایش کمنور، واکنشهای پنج ثانیهای از افرادی که روی برند کار نمیکنند.
-
حالت تاریک را به عنوان مجموعهای موازی از توکنها ارسال کن. نه فیلتر. نه معکوس. یک پالت موازی مناسب که همان توکنها را به مقادیر متفاوت حل میکند.
در ترتیب بساز، نه در یک نشست
ترتیب مهم است چون خنثیها کار سنگین را روی هر صفحه انجام میدهند، و طراحانی که با رنگ برجسته شروع میکنند در نهایت بقیهٔ پالت را حول یک تصمیم میسازند که ممکن است دوام نیاورد. با لایهٔ آرام شروع کن. لایهٔ پرسروصدا را در آخر اضافه کن.
سیستمهای طراحی به عنوان تئوری رنگ کاربردی
بهترین مطالب مرجع برای تئوری رنگ امروز یک کتاب درسی نیست، مستندات عمومی سیستم طراحی برندهایی است که در مقیاس ارسال میکنند.
این سیستمها هر لایهٔ استک را در پیشفرضها پختهاند. همچنین رایگان، باز و توسط افرادی که هر روز رنگ محصول ارسال میکنند نگهداری میشوند.
Material Design 3
مشاهدهٔ زنده در m3.material.io
Material 3 دربارهٔ تئوری رنگ به عنوان سیستم کاربردی صریحترین است. هر نقش دارای یک همتای on- جفتشده است (متن/آیکنهایی که روی آن نقش مینشینند)، مقیاسها از فام-کروما-تن به جای HSL مشتق میشوند، و کل سیستم برای تمبندی پویا از یک رنگ منبع واحد ساخته شده است.
چه چیزی از آن بردار: الگوی on-. وقتی یک طراح primary را برای یک دکمه انتخاب میکند، سیستم از قبل میداند رنگ متن روی آن دکمه چه باید باشد. دسترسپذیری و تئوری کنتراست در نامگذاری پخته شدهاند.
Radix Colors
Radix مقیاسهای ۱۲ پلهای را در هر فام با هر پله که به یک نقش خاص نگاشت شده (پسزمینهٔ اپلیکیشن، پسزمینهٔ ظریف، عنصر UI، هاور، فوکوس، active، توپر، متن، متن کنتراست بالا) ارسال میکند. این به طور مؤثر یک مرجع هارمونی رنگ است که روی یک نردبان کنتراست منگنه شده است. طراحان به پلهٔ ۱۱ وقتی به متن کنتراست بالا نیاز دارند دست دراز میکنند و میدانند که AA را در برابر پلههای پایینتر پاس خواهد کرد.
چه چیزی از آن بردار: نردبان شمارهدار. دادن نقش به هر پلهٔ یک مقیاس بحث «کدام خاکستری را استفاده کنم» را از هر بازبینی طراحی حذف میکند.
Adobe Spectrum: یکنواختی ادراکی در مقیاس
Material و Radix رنگ را در لایهٔ نقش حل میکنند. Adobe عمیقتر میرود، خود مقیاسها را بر مدلهای ادراکی میسازد به طوری که روابط کنتراست وقتی فامها میچرخند حفظ میشوند.
مشاهدهٔ زنده در spectrum.adobe.com
Spectrum از مقیاسهای یکنواخت ادراکی استفاده میکند تا دو توکن با همان شمارهٔ پله همان وزن بصری را در هر فام داشته باشند. این یعنی یک تم میتواند از آبی به نارنجی بچرخد بدون شکستن کنتراست، چون روابط ادراکی در سطح مقیاس قفل شدهاند.
چه چیزی از آن بردار: یکنواختی ادراکی. اگر مقیاس تو بر مدلهای ادراکی مانند OKLCH یا HSLuv ساخته شده باشد، دسترسپذیری به جای چیزی که باید با هر رنگ جدید مجدداً تأیید شود، بین تمهای برند قابل حمل میشود.
سؤالات متداول
چگونه واقعاً تئوری رنگ را به عنوان یک طراح یاد بگیرم؟
استک را از بالا به پایین بخوان (ادراک، چرخ، هارمونی، کنتراست، پالت، سیستم)، سپس آن را در ترتیب روی یک پروژهٔ واقعی اعمال کن. تئوری بدون کاربرد در یک هفته محو میشود. تئوری اعمالشده روی یک پالت ارسالشده میچسبد چون بازخورد فوری است. با خواندن Interaction of Color از Josef Albers برای ادراک شروع کن، یک بعدازظهر را به مستندات Radix Colors برای نردبانهای کنتراست کاربردی اختصاص بده، و یک پالت واقعی با استفاده از استک بالا بساز.
آیا باید علم را بدانم یا فقط میتوانم از ابزارها استفاده کنم؟
میتوانی بدون دانستن فیزیک نور یا زیستشناسی سلولهای مخروطی ارسال کنی. نمیتوانی بدون دانستن ادراک، کنتراست و تفکر سیستماتیک مبتنی بر نقش ارسال کنی.
ابزارها ریاضی را مدیریت میکنند. طراح قضاوت را مدیریت میکند. یک طراح که کاملاً به ابزارها تکیه میکند طراحی است که نمیتواند بگوید چه زمانی ابزارها اشتباه هستند (که مکرر است، به خصوص برای ریاضیات WCAG 2).
بزرگترین اشتباهی که طراحان جدید با رنگ میکنند چیست؟
اول انتخاب کردن برجسته. برجسته پرسروصداترین رنگ در پالت است، و ساختن بقیهٔ پالت حول یک تصمیم پرسروصدا تقریباً همیشه یک پالت پرسروصدا تولید میکند.
با خنثیها شروع کن. بگذار برجسته آخرین چیزی باشد که قفل میکنی. همیشه میتوانی برجسته را بعداً عوض کنی اگر بقیهٔ استک سالم باشد.
تئوری رنگ اختیاری نیست، محیطی است
تئوری رنگ بخشی از طراحی است که هیچکس دربارهٔ آن بحث نمیکند و همه اعمال میکنند، چه بدانند چه نه.
طراحی که انتخاب میکند «آن مرجانی، احساس خوبی دارد» در حال اعمال تئوری رنگ است. یک product manager که میپرسد «میتوانیم دکمه را بیشتر برجسته کنیم» یک سؤال تئوری رنگ میپرسد. کاربری که میگوید «این صفحه شلوغ احساس میشود» یک شکست کنتراست ارزش را گزارش میدهد.
تئوری از قبل در اتاق است. سؤال این است که آیا به طور آگاهانه روی آن کار میکنی یا بعد از واقعیت به آن واکنش نشان میدهی.
کار کردن با استک نامرئی را مرئی میکند. دست از انتخاب رنگها برمیداری و شروع به طراحی پالتها میکنی. دست از انتخاب فامها برمیداری و شروع به طراحی سیستمها میکنی. دست از حدس زدن دسترسپذیری برمیداری و شروع به ارسال آن میکنی.
پاداش جمع میشود. پالتی که از طریق استک طراحی شده به تمیزی نامگذاری مجدد میشود، به تمیزی تاریک میشود، به تمیزی مقیاس میپذیرد و به تمیزی ممیزیها را پاس میکند. پالتی که بر اساس احساس انتخاب شده هیچیک از این کارها را انجام نمیدهد و هر بار که یکی از آنها مهم باشد به تیم زمان هزینه میدهد.
استک را بیاموز. روی استک کار کن. استک را ارسال کن.
Want a color system that actually works end to end? Brainy builds palettes from perception to tokens with accessibility baked in.
Get Started
