رنگ یکی از عناصر اصلی در طراحی رابط کاربری (UI Design) و انتخاب رنگ های مناسب و استفاده صحیح از اونها در جای مناسب، یکی از تکنیک های خیلی مهم در طراحی رابط کاربریه. رنگ میتونه در اولین برخورد افراد با طرح شما، حسی عالی یا بر عکس حس بدی رو القا کنه. رنگها به اندازه زبان در انتقال مفاهیم قدرتمند هستن و می تونن کاربرها رو به سایت یا اپلیکیشن شما جذب کنن.
میتونی انتخاب رنگ رو تو اپلیکیشن بانک پاسارگاد با یه اپ خارجی مقایسه کنی.
رنگ حالت، لحن، مفهوم و هدف برند یا محصول رو تعیین می کنه. پس باید درنظر داشته باشیم که نباید برای لوگو، طرح، محصول و … رنگ ها رو از روی هوس و علاقه شخصی انتخاب کنیم. تو که طراح هستی باید بدونی که هر رنگ چه معنی داره، چه حسی رو انتقال میده و از اون به درستی استفاده کنی.
رنگ ها در طراحی رابط کاربری
قبل از اینکه شروع کنیم ازت یه سوال دارم. میتونی حدس بزنی که هر کدام از این رنگ ها برای کدام یک از برندهای معروف دنیاست؟
اینم از جواب:
چندتا رو درست حدس زدی؟ امیدوارم که خیلی برات سخت نبوده باشه.
اینها همه برندهای معروفی هستن که بر اساس رنگشون سریع میتونیم به یاد بیاریمشون. نیاز نیست که اسمشون رو بدونی، چه کاری می کنن یا اینکه آدرس سایتشون رو بلد باشی. میتونیم بر اساس رنگشون هم اونها رو تشخیص بدیم . اینه که نشون میده رنگ چقدر قدرتمنده.
هر کدوم از این رنگ ها معنایی پشتشه. میتونم بهت اطمینان بدم که مدیران و موسسان این شرکت ها رنگ سازمانی شون رو بر اساس علایق شخصیشون انتخاب نکردن. مدیر نگفته : ” وای! من عاشق این رنگم. همین رنگ رو اسفاده کنیم. “
قطعا اطلاعات و هدفی پشت انتخاب رنگ سازمانیشون هست. می خوام بهت بگم که چطور رنگی رو انتخاب کنی که زیبا باشه در کنار اینکه هدف کسب و کاری رو که براش طراحی انجام میدی انتقال بده.
اصطلاحات دنیای رنگ ها
نمیتونیم در مورد رنگ ها صحبت کنیم اگر در مورد اصطلاحات شون چیزی ندونیم. در ادامه چندتا از مهمترین اصطلاحات دنیای رنگ ها رو بهت توضیح میدم.
هیو – Hue
کلمه ی دیگه که میتونی هم معنای کلمه رنگ در نظر بگیریش
همه این ها رنگهای متفاوتی هستن – هیوهای متفاوتی دارن.
سچوریشن – Saturation
سچوریشن بازه ای از رنگ کامل (۱۰۰%) تا خاکستری (۰%)
همه این رنگ ها هیو یکسان دارن اما سچوریشن متفاوتی دارن. اولین رنگ از سمت راست سچوریشن صفره پس خاکستری کامل میشه.
لایتنس – Lightness
لایتنس مقدار روشنایی رنگ رو مشخص می کنه. از سیاه (تاریکی) تا سفید (روشنایی) رو مشخص میکنه
همه این رنگ ها هیو و سچوریشن برابر دارن اما لایتنس متفاوتی دارن.
شِید – Shade
شید رنگیه که وقتی رنگ سیاه به هیو (رنگ) اضافه میشه به وجود میاد
راحت ترین راه درست کردن شید از یه رنگ، کم کردن لایتنس رنگه.
تینت – Tint
تینت رنگیه که وقتی رنگ سفید به هیو (رنگ) اضافه میشه به وجود میاد. دقیقا بر خلاف شید
راحت ترین راه درست کردن شید از یه رنگ، زیاد کردن لایتنس رنگه.
مهمترین رنگ ها
قبل از ادامه بحث باید در مورد دو تا از مهمترین رنگها صحبت کنم. سیاه و سفید. در حقیقت نه دقیقا سیاه و سفید بلکه تینت و شیدهاشون.
سیاه خالص ( با کد رنگ #۰۰۰۰۰۰) به ندرت در طراحی رابط کاربری استفاده میشه چون که کنتراستش خیلی بالاست. به همین علت برای چشمها اصلن خوب نیست.
به هرحال سیاه و سفید رنگ هایی هستن که در آینده، بسیار زیاد از اونها در طراحی رابط کاربری استفاده خواهی کرد. که معمولاً رنگ سیاه برای متن ها و نوشته ها و سفید برای بک گراند یا پس زمینه استفاده میشه. شاید این رنگ ها خیلی هیجان انگیز به نظر نیان ولی استفاده از اونها در جای درست بسیار تاثیرگذار و مهمه.
سیاهِ خالص، تیره ترین رنگه. میتونه باعث کنتراست زیاد بین خودش و بک گراند بشه. به همین علت اصلا نباید در طراحی رابط کاربری استفاده بشه.
قبل از اینکه از بقیه رنگ ها استفاده کنی، با سیاه و سفید شروع کن !
تا حالا در مورد وایرفریم شنیدی؟
تکنیکی که قبل از طراحی رابط کاربری اصلی میتونیم باهاش وب سایت یا اپلیکیشن رو تو ساختار اصلی طراحی ببینیم و همیشه باید قبل از طراحی رابط کاربری اصلی انجامش بدی. (یا حداقل اینطور باید باشه)
تو عکس بالا یه مثال از طراحی وایرفریم اینستاگرام رو می بینی. اگر دقت کنی هیچ رنگی بجز سفید، طیفی از خاکستری و سیاه نیست. این دقیقا همون کاری که باید قبل از طراحی رابط کاربری اصلی و اعمال کردن رنگها انجام بدی.
اول از سیاه و سفید شروع و بعد از اون رنگ ها رو اعمال می کنیم!
خب یه سکشن رو با استفاده از رنگ سیاه و سفید طراحی کردم. همانطور که میبینی، مشکل این طرح اینه که هیچ رنگی نداره. تو مطلب بعدی و در ادامه این بحث در مورد فلسفه رنگ ها، چرخه رنگ، شش تا از رنگ های پر کاربرد و ترکیب های رنگی صحبت می کنم. تا نهایتا بتونی تو طرح هایی که میزنی رنگ های درستی رو انتخاب کنی که هم زیبا و هم دارای مفهوم باشن.
به امید موفقیت تو و همه مون در زندگی و کار ❤️🌹
خوشحال میشم اگر سوالی داشته باشی، جواب بدم. 😊
