color theoryApril 7, 20268 min read

روانشناسی رنگ در طراحی

هر رنگ واقعاً چه چیزی در طراحی منتقل می‌کند. سه قانون برای پالت‌ها.

By Boone
XLinkedIn
Voxel paint swatch dipping into color rings

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

این چیزی است که روانشناسی رنگ واقعاً وقتی با تصمیمات طراحی واقعی روبرو می‌شود به نظر می‌رسد.

رنگ‌ها تزیینی نیستند

رنگ اولین چیزی است که مغز هنگام مواجهه با یک بصری پردازش می‌کند. قبل از اینکه چشم تیتری بخواند یا لوگویی را بشناسد، قبلاً به رنگ واکنش نشان داده. آن واکنش احساسی، فوری و عمدتاً ناخودآگاه است.

این عرفان نیست. علم اعصاب است. رنگ تداعی‌هایی را فعال می‌کند که از فرهنگ، تجربه و زمینه ساخته شده‌اند. قرمز به طور جهانی به معنای "خطر" نیست. بسته به جایی که ظاهر می‌شود و چه چیزی اطرافش است، معنای فوریت، انرژی، اشتیاق، اشتها یا هشدار می‌دهد.

چرخ رنگ وکسلی که نشان می‌دهد رنگ‌های مختلف چگونه به هم متصل و متضاد هستند
چرخ رنگ وکسلی که نشان می‌دهد رنگ‌های مختلف چگونه به هم متصل و متضاد هستند

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

هر رنگ واقعاً چه چیزی را منتقل می‌کند

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

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

آبی رنگ مورد علاقه اینترنت به دلیلی است. اعتماد، ثبات و شایستگی را نشان می‌دهد. PayPal، LinkedIn و Calm همه به آبی تکیه می‌کنند تا بگویند "اینجا امن هستید."

سبز دو کار انجام می‌دهد. در برندهای سلامت (Whole Foods) به معنای طبیعی خوانده می‌شود. در فین‌تک (Robinhood) به معنای پول و رشد. Spotify قالب را شکست و سبز را برای موسیقی استفاده کرد.

زرد خوش‌بینی و گرمای خالص است، اما سخت‌ترین رنگ برای استفاده درست. زیاد زرد غرق می‌کند. کم زرد ناپدید می‌شود.

بنفش سیگنال ممتاز و غیرمتعارف می‌دهد. Figma، Twitch و Cadbury از آن استفاده می‌کنند تا از اکثریت آبی-سبز متمایز شوند.

نارنجی زمین میانی دوستانه بین فوریت قرمز و گرمای زرد است. Headspace، HubSpot و Fanta از آن استفاده می‌کنند.

مشکی اقتدار و لوکس بودن را منتقل می‌کند. اپل، شنل و نیویورک تایمز از آن استفاده می‌کنند تا بگویند "ما به رنگ نیاز نداریم تا جالب باشیم."

زمینه از تئوری مهم‌تر است

Spotify سبز است. Whole Foods هم سبز است. یکی موسیقی استریم می‌فروشد. دیگری مواد غذایی ارگانیک. همان رنگ، تداعی‌های کاملاً متفاوت.

صحنه تقسیم وکسلی: دو مکعب سبز یکسان در محیط‌های مختلف
صحنه تقسیم وکسلی: دو مکعب سبز یکسان در محیط‌های مختلف

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

اشباع و مقدار. صورتی غبارآلود ملایم چیزی کاملاً متفاوت از صورتی نئون داغ منتقل می‌کند.

رنگ‌های همسایه. دکمه قرمز روی صفحه سفید خوانده می‌شود. همان دکمه قرمز روی صفحه نارنجی نویز خوانده می‌شود.

زمینه فرهنگی. سفید در طراحی غربی به معنای خلوص است. در بخش‌هایی از شرق آسیا به معنای عزاداری.

سه قانون برای پالت‌هایی که تبدیل ایجاد می‌کنند

قانون ۱: کنتراست عمل را هدایت می‌کند. مهم‌ترین تصمیم رنگی در هر رابط این نیست که چه رنگی برای CTA انتخاب کنید. این است که چقدر کنتراست بین عمل و بقیه صفحه ایجاد می‌کنید.

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

قانون ۳: دسترسی‌پذیری اختیاری نیست. ۸٪ مردان و ۰.۵٪ زنان نوعی نقص بینایی رنگ دارند. همیشه رنگ را با متن، آیکون یا الگو جفت کنید.

نمودار دسترسی‌پذیری وکسلی
نمودار دسترسی‌پذیری وکسلی

چگونه پالتتان را آزمایش کنید

چهار آزمون. پنج دقیقه. بدون اجرای هر چهار ارسال نکنید.

  1. آزمون چشم‌بندی. چشم‌بندی کنید تا همه چیز محو شود. آیا هنوز می‌توانید عمل اصلی را ببینید؟
  2. آزمون خاکستری. طراحی را به خاکستری تبدیل کنید. آیا سلسله‌مراتب حفظ می‌شود؟
  3. آزمون زمینه. پالت را به پنج نفر بدون زمینه طراحی نشان دهید. بپرسید متعلق به چه نوع شرکتی است.
  4. ممیزی دسترسی‌پذیری. ترکیبات رنگی را از بررسی‌کننده کنتراست WCAG عبور دهید.

سؤالات متداول

آیا روانشناسی رنگ واقعاً روی تبدیل تأثیر می‌گذارد؟

بله، اما نه به شکلی که اکثر مقالات ادعا می‌کنند. تغییر دکمه از سبز به قرمز تبدیل‌ها را ۲۱٪ افزایش نمی‌دهد. آنچه مهم است کنتراست و زمینه است.

بهترین رنگ برای دکمه فراخوان چیست؟

هر رنگی که بالاترین کنتراست را با بقیه صفحه دارد. پاسخ جهانی وجود ندارد. تنها انتخاب غلط CTA است که ترکیب می‌شود.

یک پالت برند چند رنگ باید داشته باشد؟

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

Need a palette that actually converts? Brainy builds color systems for brands across every industry.

Get Started