منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۲ دقیقه

هماهنگی رنگ (Color Harmony) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

اگر تا حالا یک طرح رنگی مکمل را از چرخ رنگ برداشته‌اید و روی یک رابط پیاده کرده‌اید، احتمالاً همان اتفاقی افتاده که برای من می‌افتاد: روی کاغذ زیبا بود و در محصول کار نکرد.

دلیلش این نیست که چرخ رنگ اشتباه است. دلیلش این است که چرخ رنگ برای نقاشی ساخته شده، نه برای رابط — و این مقاله هم آن را می‌گوید و هم نشان می‌دهد بقیه‌اش را از کجا باید آورد.

تعریف و ریشه

هماهنگی رنگ یعنی تعامل متعادل و از نظر زیبایی‌شناختی خوشایند رنگ‌ها — چیزی که طراحان از آن برای اثرگذاری بر تجربه، ساختن هویت برند و بهبود دسترس‌پذیری استفاده می‌کنند.

ریشه‌اش قدیمی است: Isaac Newton چرخ رنگ را در ۱۶۶۶ ساخت، و Michel Eugène Chevreul در ۱۸۵۴ کار کلاسیک هماهنگی و کنتراست رنگ‌ها را منتشر کرد. بعدتر Johannes Itten و Josef Albers این سنت را ادامه دادند.

و یک عدد که نشان می‌دهد چرا این بحث اهمیت تجاری دارد: منبع می‌گوید بیش از ۶۰ درصد آدم‌ها محصولی تازه را بر پایهٔ رنگ می‌پذیرند یا رد می‌کنند.

هفت طرح رنگی

• - تک‌فام: نسخه‌های مختلف یک رنگ. ظاهری یکدست و باوقار می‌سازد و در طراحی مینیمال به‌کار می‌رود — اما توان نمایش اطلاعات را محدود می‌کند.
• - هم‌جوار: سه رنگ کنار هم روی چرخ. در طبیعت زیاد دیده می‌شود و هماهنگی‌ای شبیه نقاشی امپرسیونیستی می‌سازد، با اثری درخشان و محو.
• - مکمل: دو رنگ روبه‌روی هم که با ترکیب خنثی می‌شوند. بیشترین کنتراست را می‌دهد؛ جفت‌های امروزی‌ترش قرمز/فیروزه‌ای، سبز/سرخابی و آبی/زرد است.
• - سه‌گانه: سه رنگ با فاصلهٔ برابر (۱۲۰ درجه). حتی با فام‌های کم‌اشباع هم پرجنب‌وجوش و چشمگیر است.
• - مکمل شکافته: ترکیب اصول مکمل و هم‌جوار — یک رنگ مکمل به‌همراه همسایه‌هایش. تندی طرح مکمل خالص را تعدیل می‌کند.
• - چهارگانه: دو جفت مکمل. بصرِ پرانرژی می‌دهد اما متعادل‌کردنش دشوار است و حتماً به یک رنگ غالب نیاز دارد تا بقیه را مهار کند.
• - مربعی: چهار رنگ با فاصلهٔ ۹۰ درجه. پالتی متوازن است و وقتی بهترین نتیجه را می‌دهد که هر چهار رنگ به‌طور یکنواخت به‌کار روند.

قاعدهٔ ۶۰-۳۰-۱۰

ساده‌ترین و پرکاربردترین قاعدهٔ تناسب: ۶۰ درصد رنگ غالب، ۳۰ درصد رنگ ثانویه، ۱۰ درصد رنگ تأکید.

ارزش واقعی این قاعده به‌نظر من در عدد ۱۰ است، نه در ۶۰: رنگ تأکید فقط تا وقتی تأکید است که کم باشد. رایج‌ترین شکست پالت‌های رابط این است که رنگ برند در همه‌جا استفاده می‌شود و بعد کسی تعجب می‌کند که چرا دکمهٔ اصلی دیده نمی‌شود.

در رابط کاربری

• - توجه را جلب می‌کند و کاربر را درگیر می‌کند
• - کاربردپذیری را با ساختن کنتراست میان انواع محتوا بالا می‌برد
• - خوانایی را با کنتراست کافی متن و پس‌زمینه بهتر می‌کند
• - ادراک برند و تداعی‌های احساسی را می‌سازد

و اشتباه‌های رایجی که منبع فهرست می‌کند: طرح رنگی بیش‌ازحد پیچیده، نادیده‌گرفتن الزامات کنتراست، بی‌توجهی به دلالت‌های فرهنگی، نادیده‌گرفتن اثر احساسی و روانی، و از قلم‌انداختن نیازهای کوررنگی.

منبع نمونهٔ تاریخی خوبی هم برای مورد سوم می‌آورد: پپسی در دههٔ ۱۹۵۰ رنگ دستگاه‌های فروش خودکارش را در جنوب شرق آسیا از آبی سیر به آبی روشن تغییر داد، بی‌آنکه بداند آبی روشن در آن منطقه با مرگ و عزا پیوند دارد — و فروش به‌طور محسوسی افت کرد. (بحث مفصلش در نمادگرایی رنگ آمد.)

چرا چرخ رنگ برای رابط کافی نیست

این بخش افزودهٔ مترجم است. همهٔ هفت طرح بالا از سنتی می‌آیند که موضوعش یک سطح است که یک‌جا ساخته می‌شود — یک بوم، یک پوستر، یک جلد. و در آن سنت، طراح همهٔ رنگ‌ها را هم‌زمان می‌بیند و نسبتشان را تنظیم می‌کند.

پالت رابط سه کار دیگر باید انجام دهد که چرخ رنگ دربارهٔ هیچ‌کدامشان حرفی ندارد:

• - باید تجزیه شود. یک پالت رابط هرگز یک‌جا دیده نمی‌شود؛ به هزاران ترکیب کوچک و مستقل خرد می‌شود — این متن روی آن پس‌زمینه، آن نشان روی این کارت. طرحی که در نمونهٔ کنار هم زیباست، هیچ تضمینی نمی‌دهد که هر جفتِ ممکن از اجزایش هم کار کند.
• - باید حالت حمل کند. خطا، موفقیت، هشدار، اطلاع. این‌ها نقش‌اند نه فام، و از چرخ رنگ بیرون نمی‌آیند. (چرا باید با نقش نام‌گذاری شوند را در نمادگرایی رنگ نوشتم.)
• - و عمدتاً خاکستری است. این مهم‌ترین نکته است و کمتر از همه گفته می‌شود: در یک رابط واقعی، بخش عمدهٔ سطح را خنثی‌ها می‌پوشانند — پس‌زمینه، متن، مرز، سایه. چرخ رنگ دربارهٔ خاکستری هیچ نمی‌گوید، در حالی که ۸۰ درصد پالت شما همان است.

نتیجه‌ای که می‌گیرم: طرح رنگی نقطهٔ شروع است، نه خروجی. از چرخ رنگ یک یا دو فام انتخاب می‌کنید؛ بقیهٔ کار جای دیگری انجام می‌شود.

از طرح رنگ به مقیاس رنگ

این بخش هم افزودهٔ مترجم است و همان «جای دیگر» را توضیح می‌دهد. آنچه یک رابط واقعاً لازم دارد، سه چیز است:

• - یک مقیاس روشنایی برای هر فام. به‌جای «آبی»، ده پلهٔ آبی از بسیار روشن تا بسیار تیره. تقریباً هر تصمیم رنگی در یک رابط، انتخاب یک پله است نه انتخاب یک فام — و اگر پله‌ها را از قبل نساخته باشید، هر بار یکی از هوا می‌سازید و پالت به‌مرور از هم می‌پاشد.
• - یک مقیاس خنثی جداگانه، که معمولاً باید کمی به فام برند متمایل باشد تا خاکستری‌ها با پالت بیگانه نباشند.
• - نگاشت نقش‌ها به پله‌ها. «پس‌زمینهٔ کارت = خنثی ۵۰»، «متن اصلی = خنثی ۹۰۰»، «دکمهٔ اصلی = آبی ۶۰۰». از این‌جا به بعد دیگر دربارهٔ رنگ تصمیم نمی‌گیرید؛ دربارهٔ نقش تصمیم می‌گیرید.

و دو قاعده که این ساختار را سالم نگه می‌دارند:

• - پله‌ها را بر پایهٔ روشنایی بسازید، نه با کم‌وزیادکردن دلخواه. اگر فاصلهٔ روشنایی پله‌ها یکنواخت باشد، می‌توانید از قبل بگویید کدام جفت‌ها کنتراست کافی دارند — و همان‌طور که در کوررنگی نوشتم، روشنایی تنها کانالی است که همه می‌بینند.
• - هر جفت مجاز را یک‌بار فهرست کنید. به‌جای اینکه امیدوار باشید ترکیب‌ها جواب می‌دهند، بنویسید کدام متن روی کدام پس‌زمینه مجاز است. این کار یک بعدازظهر وقت می‌برد و برای همیشه جلوی نصف ایرادهای کنتراست را می‌گیرد.

و اگر بخواهم کل این بخش را در یک جمله بگویم: چرخ رنگ به شما می‌گوید کدام فام‌ها کنار هم خوش‌اند؛ مقیاس رنگ به شما می‌گوید هزار ترکیب بعدی چه می‌شود. اولی یک تصمیم است و دومی یک سیستم — و رابط بدون دومی ساخته نمی‌شود.

حالت تاریک: آزمون واقعی مقیاس رنگ

این بخش هم افزودهٔ مترجم است، و بهترین محک برای اینکه ببینید پالتتان «طرح» است یا «سیستم». چرخ رنگ دربارهٔ حالت تاریک هیچ نمی‌گوید، چون در نقاشی چنین چیزی وجود ندارد.

اولین چیزی که باید کنار گذاشته شود این تصور است که حالت تاریک یعنی وارونه‌کردن. اگر یک پالت روشن را وارونه کنید، نتیجه‌اش رنگ‌های گل‌آلود و متن‌های خیره‌کننده است. اما اگر مقیاس روشنایی داشته باشید، حالت تاریک اصلاً پالت جدیدی نیست — فقط نگاشت دوبارهی همان نقش‌ها به پله‌های دیگر است: پس‌زمینه به‌جای خنثی ۵۰ می‌شود خنثی ۹۰۰، و متن اصلی به‌جای خنثی ۹۰۰ می‌شود خنثی ۵۰.

و چهار چیزی که در این نگاشت باید حواستان باشد:

• - فام‌های اشباع را روی زمینهٔ تیره کم‌اشباع کنید. رنگ پرمایه‌ای که روی سفید درست به‌نظر می‌رسید، روی مشکی می‌لرزد و چشم را اذیت می‌کند.
• - مشکی خالص نگذارید. متن روشن روی مشکی مطلق هاله می‌سازد و خواندنش خسته‌کننده است؛ یک نزدیک‌به‌مشکی بگذارید.
• - ارتفاع در حالت تاریک با روشن‌ترشدن نشان داده می‌شود، نه با سایه. این دقیقاً وارونهٔ حالت روشن است — و همان بحث طراحی تخت است: سایه یک نشانه بود، و اینجا آن نشانه باید با چیز دیگری جایگزین شود.
• - کنتراست را دوباره بسنجید، حدس نزنید. جفتی که در حالت روشن قبول می‌شد، در نگاشت تاریک لزوماً قبول نمی‌شود — و اگر فهرست جفت‌های مجاز را نوشته باشید، این کار یک بار انجام می‌شود و تمام.

و اگر پالتتان از پله‌های منظم ساخته نشده باشد، هیچ‌کدام از این‌ها ممکن نیست و حالت تاریک به یک پروژهٔ طراحی دوباره تبدیل می‌شود — که دقیقاً همان چیزی است که تیم‌ها معمولاً کشفش می‌کنند، دیر.

جمع‌بندی

• - هماهنگی رنگ یعنی تعامل متعادل و خوشایند رنگ‌ها؛ ریشه‌اش به چرخ رنگ نیوتن در ۱۶۶۶ و کار شورول در ۱۸۵۴ برمی‌گردد.
• - هفت طرح اصلی: تک‌فام، هم‌جوار، مکمل، سه‌گانه، مکمل شکافته، چهارگانه و مربعی.
• - قاعدهٔ ۶۰-۳۰-۱۰ تناسب را تنظیم می‌کند، و ارزش واقعی‌اش در عدد ۱۰ است: رنگ تأکید فقط تا وقتی تأکید است که کم باشد.
• - اشتباه‌های رایج: طرح بیش‌ازحد پیچیده، نادیده‌گرفتن کنتراست، بی‌توجهی به دلالت فرهنگی و به کوررنگی — و نمونهٔ پپسی نشان می‌دهد هزینهٔ مورد سوم چقدر است.
• - اما چرخ رنگ برای سطحی ساخته شده که یک‌جا دیده می‌شود. پالت رابط باید تجزیه شود، حالت حمل کند، و عمدتاً خاکستری است — و چرخ دربارهٔ هیچ‌کدام حرفی ندارد.
• - آنچه لازم است: یک مقیاس روشنایی برای هر فام، یک مقیاس خنثی جداگانه، و نگاشت نقش‌ها به پله‌ها.
• - حالت تاریک بهترین محک است: با مقیاس روشنایی فقط نگاشت دوبارهٔ نقش‌هاست، نه پالت جدید — با کم‌اشباع‌کردن فام‌ها، پرهیز از مشکی خالص، نشان‌دادن ارتفاع با روشن‌ترشدن، و سنجش دوبارهٔ کنتراست.
• - و دو قاعدهٔ نگه‌دارنده: پله‌ها را بر پایهٔ روشنایی بسازید، و فهرست جفت‌های مجاز را یک‌بار بنویسید.