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

هدف تفکر طراحی (DESIGN THINKING)
2019-01-16

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

قبل از اینکه شروع کنیم، هنگام انتخاب رنگ یک سری اصول طراحی را در ذهنتان داشته باشید:

کاربر چه کسانی هستند؟ طبع، عادات، اولویت هایشان چیست؟

رنگ های اصلی

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

در کنار رنگ اصلی و بر اساس نیاز طراح میتواند مجموعه ای از رنگ های فرعی را نیز استفاده کند.

رنگ های تاکید

برای تاکید روی فعالیت ها یا اطلاعات استفاده میشود: buttonها، FAB که در متریال دیزاین استفاده میشود، نوار پیشرفت (Progress bar)، کنترل های انتخاب، اسلایدر ها، لینک ها و …

رنگ های تاکید با استفاده از چرخه رنگ و بر اساس رنگ های اصلی استخراج میشود: رنگ های مشابه (analogous)، مونوکروم، مکمل، سه گانه و …

رنگ تاکید باید حداکثر ۱۰ درصد رنگ محصول را در بگیرد. مدل ایده آل ترکیب رنگ به صورت ۶۰-۳۰-۱۰ میباشد. ۶۰ درصد رنگ اصلی، ۳۰ درصد پرده های رنگ اصلی و ۱۰ درصد رنگ تاکید.

رنگ های معنادار

خطا، موفقیت، هشدار، اطلاعات. رنگ های این مفاهیم اغلب موارد بر اساس تحقیقات روانشناسی ای که صورت گرفته انتخاب میشوند:

قرمز برای خطا، خطر و اشتباه

سبز برای موفقیت، امنیت و درستی

زرد برای اخطار، احتیاط و هشدار

آبی برای اطلاعات

رنگ های خنثی

سفید، سیاه و سایه های خاکستری.

این رنگ ها معمولا برای متن و بکراند استفاده میشوند. برای این کار متریال دیزاین راهنمای خوبی داده. بجای استفاده از کد رنگ برای هر رنگ، انها از درصد تاری (opacity) رنگ مشکی استفاده میکنند؛ مثلا لازم نیست از کد رنگی رنگ های خاکستری استفاده کنین، کافیست که از درصدهای مختلف opacity رنگ مشکی استفاده کنین.

نکته اصلی ایجاد کنتراست بین آبجکت های روی صفحه و بکراند هست.


نمودار و اطلاعات بصری

مهندسی اطلاعات برای راحت تر رساندن پیام خود از مجموعه های ۱۰ تا ۲۰ تایی از رنگ استفاده میکنند. این مجموعه رنگ برای انواع مختلفی از نمودار استفاده میشود (نمودار میله ای، نمودار خطی و…).

دسته بندی: رنگ های مختلف را در کنار هم قرار دهید (نه اشباع (saturation) های مختلف از یک رنگ). بدلیل اینکه شما میخواهید کاربر متوجه تضاد و تفاوت بین رنگ های استفاده شده در یک نمودار شود، شما میخواهید بیننده­ی نمودار متوجه تفاوت بین خط آبی و سبز بشود، نه تفاوت بین خط آبی با یک خط آبی دیگر، درسته؟به این نکته توجه کنید که رنگ سبز و قرمز به طور کلی با معنی هستند(سبز بالا، قرمز پایین،…) از اینها هوشمندانه استفاده کنین.

ترتیبی: ثابت، تغییرات افزایشی(نقشه گرمایی، نمودار درختی و..). تضاد رو از روشن به تاریک ایجاد کنین.

دو قطبی سازی: برای نشان دادن دو انتهای بازه­ی اطلاعات (معمولا در نقشه های گرما که سردترین آبی و گرم ترین قرمز). نکته: هیچوقت از گرادینت بین دو رنگ متضاد استفاده نکنین، در عوض دو رنگ متضاد را بصورت پله ای به هم برسانید.

حالت خاصی از اطلاعات: عدم وجود اطلاعات، اطلاعات غلط/null/ نادرست. معمولا از خاکستری برای اطلاعات نادرست و از سفید برای عدم وجود اطلاعات استفاده میشود.

المان های خاص: معمولا خاکستری استفاده میشود. راهنمای ابزار، عنوان نمودار، نقاط عطف اطلاعات، محور های نمودار، خطوط، مقادیر و..

Leave a Reply

Your email address will not be published. Required fields are marked *