رنگ‌ها در طراحی، بی‌شک عناصر مهمی هستند که باید در استفاده از آن‌ها دقت ویژه‌ای به عمل آورد. این دقت باید تا حدی زیاد باشد که هر زمان شما به طرح خود نگاه کردید، حس خوبی به شما منتقل شود. دقت، ملایمت و ظرافت در انتخاب طرح‌ها، نکته‌ای بسیار مهم می‌باشد. تعادل استفاده در رنگ‌ها، چیزی است که به پروژه شما ماهیت می‌بخشد. امروز در همند ، راهنمای کاربردی استفاده از رنگ ها در طراحی UI ، به صورت کامل در اختیار شما قرار خواهد گرفت.
انتخاب و ترکیب رنگ در طراحی UI
برای این که بتوانید برای کار خود ماهیت و زمینه ایجاد کنید، در نخستین قدم، یک پالت رنگ انتخاب کنید که در آن، رنگ‌های هدف شما قرار دارند. اگر مدت‌ها پس از تشکیل این پالت حس کردید که نیاز به اضافه نمودن یا تغییر رنگ دارید، می‌توانید خیلی محطاتانه از طیف های متفاوت (تیره‌تر و روشن‌تر) همان رنگ، در پالت رنگ خود استفاده نمایید.
قانون مهم 60-30-10
یکی از روش‌های زیباسازی فضای داخلی، قانون ۶۰-۳۰-۱۰ می‌باشد، معنای این اعداد، در کنار درصد به درستی به تصویر کشیده می‌شوند. این فرمول، طیف‌های مختلف رنگ را به آسانی در کنار هم قرار می‌دهد. اصل این فرمول بر پایه تعادل میان رنگ‌ها است. به‌کارگیری این فرمول بسیار ساده‌تر از آن چیزی است که می‌پندارید. همچنین این روش استفاده از رنگ که در چیدمان منزل و محل کار نیز به‌کار می‌رود، باعث گردش چشم در تصویر و محیط نیز می‌شود که این دقیقاً همان موضوعی است که می‌خواهیم.
معنای رنگ ها
رنگ‌ها، روانشناسی رنگ‌ها و معنای هر رنگ، مسئله‌ای است که سال‌ها دانشمندان و صاحب نظران بسیاری بر روی آن مطالعه به عمل آورده‌اند. تاثیر رنگ‌ها تنها در مباحث زیبایی و زیبایی شناسی خلاصه نمی‌گردد بلکه شما ردپای رنگ‌ها را در شکل‌گیری احساسات و عواطف نیز به وضوح مشاهده می‌نمایید. هر رنگ و طرح در فرهنگ‌های متفاوت دارای معانی متفاوت است. معنای برخی از رنگ‌ها را در لیست زیر مشاهده می‌کنید:
- قرمز: خطر، شور و اشتیاق، عشق
- زرد: امید، شادی درونی
- سفید: پاکی، خلوص
- آبی: اعتماد، هوش، زیرکی
- سیاه: جسور، قدرتمند
- سبز: تازگی، طبیعت، استواری
- نارنجی: جوانی، جنب و جوش، خلاقیت
- بنفش: لوکس، سلطنتی، رمزآلود
اولویت تک رنگ (Monochromatic)
بازی با رنگ‌ها کار بسیار جذابی است اما این کار بسیار جذاب، نباید شما را از مسیر اصلی کارتان منحرف سازد. مبحث انتخاب رنگ نباید به طوری انجام شود که شما و مخاطبتان را خسته کند. طراحی‌های تک رنگ، که به Monochromatic مشهور است، به شما پیشنهاد می‌کند که از طیف‌های مختلف یک رنگ استفاده نمایید و بیشتر تمرکز خود را، روی گسترش المان‌ها و قابلیت‌ها قرار دهید. در واقع چیدمان عناصر، تاثیر بی‌نظیری روی طراحی UI شما خواهد داشت.
رنگ های متشابه (Analogous)
برای آن که بتوان هماهنگی را ایجاد کرد، می‌توان از رنگ‌های متشابه استفاده نمود. برای این کار، می‌بایست از رنگ‌هایی استفاده کنید که در گردونه رنگ در کنار هم قرار گرفته‌اند. این نوع رنگ‌بندی برای پس زمینه صفحات وب و یا آگهی‌ها مناسب است و مورد استفاده قرار می‌گیرد.
رنگ های مکمل (Complementary)
برای استفاده از رنگ‌های مکمل، می‌بایست از رنگ‌هایی استفاده کنید که در گردونه، دقیقاً در مقابل هم قرار گرفته‌اند. در این شیوه، کاملاً برعکس طرح متشابه و تک رنگ عمل می‌کنیم. چرا که هدف ما ایجاد کنتراست بالا است. خوب است بدانید که این نوع سیستم در طراحی UI کاربرد فراوانی دارد.
متساوی الساقین (Split-Complementary)
این طرح بی‌شباهت به طرح قبلی نیست اما در سیستم متساوی‌الساقین، ما از رنگ‌های بیشتری استفاده می‌کنیم. در متساوی‌الساقین، رنگ مقابل را با دو رنگ طرفین آن درنظر می‌گیریم و از آن‌ها استفاده می‌کنیم. دست شما برای استفاده از رنگ‌ها در اینجا بازتر است اما کنتراست کمتری نسبت به استفاده از رنگ‌های مکمل (مورد قبلی) در این شیوه دارید.
انواع رنگ ها در طراحی UI
رنگ‌های مختلف را می‌توان در UI به روش‌های مختلفی کدگذاری نمود که در ادامه به رایج‌ترین آن‌ها یعنی RGB ،Pantone ،CMYK و HEX می‌پردازیم. همچنین گفتنی است که تنها از RGB و HEX در طراحی صفحه نمایش استفاده می‌شود که باید حتماً تفاوت بین این دو را بدانید.
Pantone برای پرینت
این شیوه که کاربردی جهانی دارد، ترکیبی دقیق از جوهرهای رنگی می‌باشد.
CMYK برای پرینت
CMYK به ترتیب ترکیبی از چهار رنگ فیروزه‌ای، سرخابی، زرد و مشکی (کلیدی) است که پایه تمامی رنگ‌های چاپی دیگر می‌باشند. این چهاررنگ را می‌توانید در چاپخانه‌ها و پرینتر و چاپگرهای خانگی بیابید.
RGB و RGBA برای طراحی UI
کلمه RGB، حروف اول قرمز،سبز و آبی می‌باشند. اسکرین‌ها و مانیتورهای دیجیتال، فقط این سه رنگ را به نمایش می‌گذارند. طیف رنگی نور بسیار بزرگ‌تر از چاپ می‌باشد. با در نظر گرفتن سیستم‌های گوناگون، رنگ‌های چاپ و صفحه نمایش هیچ‌گاه به صورت ۱۰۰٪ مطابقت ندارند. تا زمانی که پالت‌ها در درون خودشان هماهنگ باشند، مشکلی به‌وجود نخواهد آمد. مبحث RGBA، همان RGB است که A اضافه در آن، به معنای یک کانال آلفای اضافی می‌باشد.
Hex برای طراحی UI
HEX تنها یک شکل کوتاه از RGB می‌باشد و معمولاً همان رنگ مشابه آن را به نمایش می‌گذارد. تفاوتی که در HEX با RGB قرار دارد، به دلیل وجود فرمت رشته‌ای، کنترل، چسباندن، کپی و اشتراک‌گذاری آن کمی ساده‌تر خواهد بود. HEX از ۶ رقم ساخته شده است که در جلوی یک هش قرار دارند. دو رقم نخست برای R، دو رقم دوم برای G و دو رقم سوم برای B می‌باشد. به این دلیل گفته شد که HEX و RGB همسان هستند.
سایت های پیشنهاد رنگ
برای راحت‌تر شدن کار انتخاب پالت رنگ، می‌توان از ابزار‌هایی استفاده کرد که باعث می‌شوند در استفاده از زمان صرفه‌جویی کنید. این ابزارها شامل Coolors.co ،Kuler و پالتون می‌باشند. علاوه بر این سایت‌ها، تعداد زیادی از سایت‌‌های دیگر در اینترنت موجود است که می‌توانند به شما کمک ویژه‌ای بکنند.
در نهایت…
انتخاب مناسب رنگ‌ها، ظرافت و زیرکی شما را نشان می‌دهند به خصوص در عصر تکنولوژی و عصر دیجیتال. نکاتی که پیش‌تر ذکر کردیم، شما را برای انتخاب رنگ‌بندی صحیح، راهنمایی می‌کند. یادگیری این هنر با تکرار و تمرین فراوان میسر می‌شود و شما را می‌تواند به یک متخصص خبره تبدیل نماید. یکی از بهترین رنگ‌بندی و طراحی UI را می‌توانید در اپلیکیشن ۱۳۷ مشاهده نمایید.