مدرسه دیزاین ملینا
بازگشت به مقالاتآموزش UI

رنگ در رابط کاربری، فراتر از سلیقه

انتخاب رنگ توی محصول یک تصمیم کارکردیه نه ذوقی. بیاید ببینیم یک پالت درست چطور ساخته می‌شه.

۱۴۰۵/۰۲/۱۰6 دقیقه مطالعهمجتبا یزدانپناه

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

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

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

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

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

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

ColorUI DesignAccessibility

سوالی برات پیش اومد؟

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