علی آجودانیان
علی آجودانیان
خواندن ۶ دقیقه·۷ سال پیش

انتخاب رنگ مناسب در طراحی

یکی از مشکلاتی که در اکثر سایت‌ها و موبایل اپلیکیشن‌های ایرانی دیده می‌شود انتخاب رنگ‌های نامناسب در طراحی است.

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

سعی دارم در ۲ و نهایتا ۳ مطلب به صورت کامل بحث انتخاب رنگ و همه آن چیزی که در پروسه طراحی حول محور رنگ‌ها میگردد را بیان کند.


در پایین به صورت تیتروار موضوعاتی که در این سری مطالب عنوان می‌کنم را ذکر می‌کنم (امکان آپدیت در آینده)

  • انتخاب و ساخت خانواده رنگ
  • ارتباط بین رنگ‌های انتخابی با هدف سایت / اپلیکیشن
  • قانون‌های میزان استفاده از هر رنگ در پروژه
  • چه رنگ‌های استفاده نکنیم؟
  • کانتراست مناسب بین رنگ‌ها و المان‌ها
  • بیماری‌های چشم

انتخاب و ساخت خانواده رنگ

انتخاب رنگ سخت‌ترین قسمت این چندگانه است. دلیل آن هم ساده است؛ به خاطر اینکه شما به بی‌نهایت قدرت انتخاب طرف هستید و همیشه انسان وقتی قدرت انتخاب بین ۲ - یا بیشتر - آیتم را داشته باشد (منظورم در همه چیز است نه فقط رنگ) انتخاب برایش سخت می‌شود.

فرض کنید برای خرید موبایل به یک فروشگاه بروید. اگر فن بوی (دلباخته) یک برند خاص نباشید انتخاب بین برند و نوع خیلی سخت است.


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

به عنوان مثال در همین ویرگول بنابر دلایل مختلف ما از ۲ رنگ استفاده می‌کنیم. «آبی» و «طوسی تیره».


در مورد اینکه چرا رنگ دوم «طوسی تیره» است و هیچ‌جا اثری از سیاهِ مطلق 000000# نمی بینید در «چه رنگ‌های استفاده نکنیم؟» توضیح می‌دهم.


سرویس‌های کمکی برای انتخاب رنگ

برای انتخاب رنگ چندین استاندارد وجود داره که میتونه به شما کمک کنه. سرویس آنلاین Adobe Color CC همه این استاندارد‌ها را داره که می‌تونید ازش استفاده کنید. اگه به دلیل تحریم نمی‌تونید سایت ادوبی را باز کنید می‌تونید از colorschemedesigner.com استفاده کنید.

به کمک این سرویس‌ها کار شما برای انتخاب رنگ ساده‌تر می‌شود و با انتخاب رنگی اصلی، بهترین رنگ‌های مکمل آن به صورت اتوماتیک به شما معرفی می‌شوند.

پیشنهاد می‌کنم همزمان با خواندن ادامه متن یکی از ۲ سایت بالا را باز کنید و با آن کار کنید.


استاندارد Analogous

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

رنگ‌های مکمل برای کد رنگی 107ABE# (رنگ برند ویرگول)
رنگ‌های مکمل برای کد رنگی 107ABE# (رنگ برند ویرگول)


معروف‌ترین نمونه استفاده از این استاندارد رنگ، اپلیکیشن Clear هست که دوستان آیفونی مطمئنا باهاش آشنایی دارند.


اپلیکیشن Clear و استفاده از استاندارد Analogous
اپلیکیشن Clear و استفاده از استاندارد Analogous


نمونه دیگر از طراحی با Analogous - منبع
نمونه دیگر از طراحی با Analogous - منبع




استاندارد Monochromatic

این استاندارد، ساده‌ترین ساختار رنگ ممکن است. شما در این استاندارد تنها با ۱ رنگ سروکار دارید. وقتی شما رنگی را به عنوان رنگ اصلی انتخاب کنید رنگ‌های کمکی براساس همان رنگ و تنها با تغیراتی در شدت Shade (سایه)، Tints (ته رنگ) و Tones ساخته می‌شود. معمولا از این استاندارد در طراحی‌های مینیمال یا در قسمتی از طراحی که می‌خواهند بدون حس شلوغی بین المان‌های مختلف تمایز ایجاد کنند استفاده می‌کنند.

رنگ‌های مکمل برای کد رنگ 107ABE# (رنگ برند ویرگول)
رنگ‌های مکمل برای کد رنگ 107ABE# (رنگ برند ویرگول)


طراحی سایت 42Anglels طبق استاندارد رنگ Monochromatic
طراحی سایت 42Anglels طبق استاندارد رنگ Monochromatic


استفاده از Monochromatic در هدر اپلیکیشن فیسبوک
استفاده از Monochromatic در هدر اپلیکیشن فیسبوک




استاندارد Complementary

در این استاندارد با ۲ رنگ سر و کار داریم. با انتخاب رنگ اصلی، رنگ دوم با بیشترین کنتراست ممکن ساخته می‌شود. این انتخاب رنگ باعث جلب توجه کاربر می‌شود.

به عنوان مثال زمانی که قصد دارید توجه کاربران را به یک المان داخل طرحتان جذب کنید (به عنوان مثال عدد تعداد ناتیفیکشن یا یک دکمه Call to Action) استفاده از این ساختار رنگ به شما کمک خواهد کرد.

رنگ‌های مکمل برای کد رنگی 107ABE# (رنگ برند ویرگول)
رنگ‌های مکمل برای کد رنگی 107ABE# (رنگ برند ویرگول)


یک نمونه از استفاده Complementary در طراحی
یک نمونه از استفاده Complementary در طراحی


ارتباط بین رنگ‌های انتخابی با هدف سایت / اپلیکیشن

تا اینجا در مورد انتخاب رنگ‌های مکمل صحبت کردیم. اما نکته‌ای که هست اینکه ما هنوز رنگ اصلی خود را انتخاب نکرده‌ایم که بتونیم به کمک اون رنگ‌های مکمل را انتخاب کنیم.

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

رنگ یا رنگ‌هایی که به عنوان رنگ برند خود انتخاب می‌کنید - اگر هوشمندانه باشند - در ناخودآگاه ذهن کاربرانتان باقی می‌ماند. گواه این نکته عکس پایین است.

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



روانشناسی رنگ‌ها

موضوع مهمی که در فرآیند انتخاب رنگ باید به آن توجه کنیم هدف و موضوع سرویسمان است. هر رنگ برای خود معنی منحصر به فردی دارد. یک رنگ می‌تواند به شما آرامش دهد و رنگ دیگر می‌تواند در درون شما انرژی ایجاد کند؛ از آن طرف یک رنگ به شما حس اعتماد می‌دهد و رنگ دیگر حس شادی.

در بحث انتخاب رنگ ما باید به «روانشناسی رنگ‌ها» توجه کنیم تا معنی ذاتی آن رنگ با هدف و مسیر برندمان هم جهت باشد.


دسته اول

  • قرمز به معنی قدرتمند، پر انرژی و مهم.
  • نارنجی به معنی پر انرژی، جذاب، ارزان و به صرفه
  • زرد به معنی شادی، حس دوستانه، تحریک کننده و جلب توجه

دسته دوم

  • سبز به معنی تازه، طبیعی و ایمن
  • آبی به معنی آرامش بخش، قابل اعتماد و اطمینان
  • بنفش به معنی لوکس و عاشقانه

دسته سوم

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


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

یا اینکه چرا ایرانسل برند خود را از کنار هم قرار دادن «حس اعتماد و اطمینان» با «حس دوستی» ساخته است. اگر علاقه به مطالعه بیشتر در مورد روانشناسی رنگ‌ها دارید مبحث Color Psychology را در اینترنت دنبال کنید.

البته این نکته هم لازم به ذکر است که بعضی اوقات این موضوعات بین افراد مختلف بنابر دلایل تاریخی، فرهنگی و... متفاوت است.



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


اگر این مطلب را دوست داشتید آن‌را با دوستانتان به اشتراک بگذارید.




قسمت دوم این مقاله را از اینجا می‌تونید مشاهده کنید.

رنگروانشناسی رنگطراحیطراحی رابط کاربریux
طراح رابط کاربری سابق؛ مدیرعامل فعلی ویرگول
شاید از این پست‌ها خوشتان بیاید