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

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

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

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

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

اگر دقت کرده باشن نیمه سمت چپ همه پالت ها چه زرد چه قرمز و چه آبی به رنگ سفید، طوسی و مشکی ختم میشه تا حالا به این فکر کردین که چرا؟

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

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

با کنار هم گذاشتن توضیح از ساخت شدن رنگ طوسی از پالت های رنگ و توضیح فام به این تصویر زیر میرسیم که چند رنگ طوسی با فام های مختلف رو میشه ساخت که من سه تای اون ها رو کنار هم گذاشتم:

این طوسی ها هرکدام کاربرد خودشون رو دارن برای مثال در طراحی هایی که رنگ سازمانی قرمز یکی از رنگ های پر کاربرد طرح هست و میخواین از رنگ طوسی هم استفاده کنین بنا به طرح و توازن رنگ میتونین از طوسی با فام قرمز (طوسی با حس گرم) یا آبی (طوسی با حس سرد) استفاده کنین.

خب حالا که با طوسی های مختلف آشنا شدیم بذارین یه نکته دیگه از تاثیر رنگ ها رو بر هم دیگه هم توضیح بدم یه نکته خیلی مهم که شاید اکثر طراح های رابط کاربری ما بهش توجه نمیکنن و شاید خیلی نکته ریز ولی کلیدی در انتخاب رنگ محسوب میشه. به این تصویر نگاه کنین:

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

همونطور که در تصویر میبنین هرکدام از این نوشته ها وقتی روی طوسی هم خانواده خودشون قرار میگیرن رنگ اون رو تشدید میکنن و بیشتر به چشم شما کمک میکنن که بتونین ته رنگ یا همون فام رو تشخیص بدین و وقتی روی طوسی که دقیقا در خانواده متضاد قرار میگرند باعث میشن رنگ خنثی بشه و فام کمتر به چشم بیاد و لمس بشه.

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

موفق و پیروز باشید