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

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

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

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

برای افزایش سرعت‌تان، بیایید به برخی از رایج ترین یافته‌های رنگی در زیر نگاهی بی‌اندازیم:

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

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

تضاد رنگ‌ها (Contrast)

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

پایبندی به قراردادهای UI

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

برخی از قراردادهای رایج رنگ در طراحی UI عبارت‌اند از:

  • استفاده از رنگ تیره در متن‌ها برای اطمینان از خوانایی آن
  • نگه‌داری رنگ‌های روشن برای پس زمینه
  • استفاده از رنگ‌های متضاد برای رنگ‌های ثانویه (همانطور که در بالا ذکر شد)
  • پایبند بودن به رنگ‌های کلاسیک در دکمه‌های فراخوان (CTA یا Call To Action) مانند رنگ قرمز برای علامت اخطار

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

استفاده از قانون 60-30-10 

این ترفند محبوب طراحیِ داخلی (Interior Design)، یک راه عالی برای حفظ تعادل در رابط کاربری شما است. این فرمول حکم می‌کند که 60٪ از وبسایت شما باید از رنگ اصلی (Primary) شما باشد، 30٪ باید رنگ ثانویه (Secondary) شما باشد و 10٪ باقیمانده باید رنگ تاکیدی (Accent) شما باشد. پایبندی به این فرمول باعث می‌شود چشم به راحتی از یک نقطه‌ای به نقطه‌ی دیگر حرکت کند.

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