تئوری رنگ - مبانی انتخاب رنگ برای یک رابط کاربری - قسمت دوم

از تابلوی ایده (معادل واژه Mood board) برای پیدا کردن رنگ استفاده کنید

مود بُرد (Mood board) تابلويی است كه طراحان با جمع آوری مجموعه ای از عكس ها، الگوها، رنگها، نوشته ها و هر المان بصری كه قبل از شروع يك پروژه طراحی، الهامبخش است و به آنها ایده میدهد ایجاد میکنند. تابلویی که منابع بصری را برای پروژه های مختلف طراحی اعم از معماری، طراحی داخلی، گرافیک، مد و … جمع میکند. هدف آن بیان تفکرات، نوع احساس و سلیقه فردی از طریق اشیا، نمونه های متریال و تصاویر است. تابلوی ایده مجموعه ای از الهامات بصری هستند.  این تابلو می تواند برای انتخاب تقریباً هر تصمیم طراحی بصری، از جمله رنگ، بسیار مفید باشند. اگر تصویر یا عکسی را پیدا کردید که حال و هوا و ترکیب رنگی آن رادوست داشتید، می توانید از ابزاهایی مانند Coolors برای دریافت ترکیب رنگ  آن استفاده کنید. این ابزار آنلاین، ابزاری پر قدرت برای ارایه انواع پالتهای رنگی می باشد. همچنین وب سایتهایی مانند پینترست یا دریبل با امکان ایجاد بورد ابزارهایی مناسب برای ایجاد مود بردهای مختلف اند.

ایجاد نقاط کانونی با استفاده از رنگ

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

تصمیم بگیرید که چه زمانی و چگونه از رنگ های زنده و ملایم استفاده کنید بیشتر رنگ ها میتوان به یکی از این دو دسته تقسیم کرد می شوند: تند و تیز یا ملایم.و ملیح که بسته به ماهیت پروژه خود، می توانید از گروه اول یا دوم استفاده کنید رنگ‌های تند رنگ‌هایی هستند که کاملا از پس‌زمینه متمایز می‌شوند و میزان انرژی زیادی را منتقل میکنند این رنگها میزان اشباع شدگی یا غلظت رنگ (معادل Saturation) بالایی دارند دارند. این رنگ ها برای انتقال حس پرانرژی عالی هستند و برای شرکت هایی که می خواهند خود را با شیوه ای به روز و پرهیاهو معرفی کنند، انتخاب خوبی است. این رنگها برای شرکتهای مرتبط با خودرو و خودرو سازی، موتورسازی، ارایه کننده محصولات ورزشی، محصولات خوراکی صنعتی و غیره… مناسب است.

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

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

دسترس پذیری را فراموش نکنید:

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

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

در اینجا دو نکته برای طراحی با رنگ وجود دارد: هرگز از رنگ به تنهایی برای انتقال معنا و مفهوم استفاده نکنیدو همواره در کنار رنگ از نشانه بصری برای برقراری ارتباط مخاطب با محصول طراحی شده استفاده کنید. به عنوان مثال، هنگامی که یک پیام خطا نشان می‌دهید، از رنگ قرمز در کنار متنی که می‌گوید «این فیلدها الزامی قرمز هستند» استفاده نکنید. در عوض، میتوانید یک علامت قابل مشاهده (مانند یک ستاره *) اضافه کنید و توضیحی اضافه کنید که: “فیلدهای الزامی به رنگ قرمز هستند و با * مشخص شده اند.”

از طراحی متن با کنتراست پایین دوری کنید

در نظر گرفتن رنگ فونتی با کنتراست  کم نسبت به رنگ زمینه چه در یک پارگراف باشد یا بک دگمه، می تواند خواندن متن را بسیار دشوار کند. دستورالعمل های دسترسی به محتوای وب (WCAG) توصیه می کند که نسبت کنتراست پس زمینه به متن حداقل 4.5:1 باشد.

وقتی صحبت از دسترس‌پذیری می‌شود، توصیه می‌کنیم از Color Contrast Checker و شبیه‌ساز دید NoCoffee برای Chrome استفاده کنید. ابزار اول به شما کمک می‌کند ترکیب رنگ‌های خود را مطابق دستورالعمل‌های WCAG بررسی کنید، در حالی که ابزار دوم به شما این امکان را می‌دهد که خودتان هنگام طراحی، کوررنگی را تجربه کنید! مانند تصویر زیر؛

جمع بندی

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

این یک مقاله از وب سایت مانایید است