تصویر نویسنده

۲۰ شهریور ۱۳۹۹

0

نحوه انتخاب رنگ های صحیح برای طراحی رابط کاربری (UI)

مقاله
عکس پیر بونار
پیر بونار – نقاش فرانسوی

“رنگ یک کیفیت مطبوع به طراحی نمی بخشد – آن را تقویت می کند.”


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

هر طراحی وب یا برنامه ای به منظور ایجاد یک محصول زیبا است که تمام نیازهای کاربران را برآورده کند (یا مشکلات آنها را برطرف کند).

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

وقتی پالت رنگی مناسب با متن خوانا و گرافیک زیبا ترکیب شود، کار شما به موفقیت می رسد.

در این مقاله، می خواهیم به شما بگوییم که چگونه رنگ های UI را برای طراحی انتخاب کنید تا محصول شما در سایه نماند و نظر کاربران را جلب کند.

همچنین می توانید نحوه استفاده از رنگ های UI برای دکمه ها را در مطلب “طراحی دکمه ها در رابط کاربری” مشاهده کنید.

انواع رنگ UI

ابتدا، بگذارید کمی در مورد ترکیب رنگ هایی که داریم، صحبت کنیم.

  • رنگ های اصلی : سه رنگ اصلی – زرد ، قرمز و آبی. تمام رنگهای دیگر از ترکیب این سه رنگ اصلی بدست می آیند. این سه رنگ را نمی توان با ترکیب رنگ دیگری پذیرفت.
  • رنگ های فرعی : این رنگ ها از مخلوط کردن دو رنگ اصلی به دست می آیند.

زرد + قرمز = نارنجی
زرد + آبی = سبز
قرمز + آبی = بنفش

  • رنگ های برجسته: اینها رنگ هایی هستند که جزئیات خاص را برجسته می کنند. در طراحی وب یا برنامه، رنگ برجسته اغلب برای فراخوان استفاده می شود. اقدام به تغییر کاری است که شما می خواهید بازدید کنندگان شما انجام دهند، بنابراین آنها را مجبور به انجام این کار می کنید. عناصر CTA باید در نگاه اول قابل مشاهده باشند و با رنگ های برجسته می توان به آنها دست یافت.
  • رنگ های خنثی: سیاه ، سفید و خاکستری. بیشتر اوقات، در طراحی وب UI یا طراحی اپ، از آن برای ایجاد پس زمینه استفاده می شود.
  • رنگ های معنایی: این یک نسخه روشن یا تیره از رنگ اصلی انتخاب شده است. این رنگ ها به تأکید یا برجسته سازی محصول شما کمک می کنند.

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

نکات مهم در مورد نحوه انتخاب رنگ مناسب برای UI محصولتان

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

۱) روانشناسی رنگها را یاد بگیرید

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

نمونه ای از وب سایت یک فروشگاه مد
روانشناسی رنگ رابط کاربری

مارک جیکوبز کاملاً سیاه و سفید است، با یک CTA مشکی که دلیل خاصی دارد. همه رنگ ها معنی خاصی دارند:

  • قرمز: اشتیاق ، عشق ، خطر
  • آبی: آرامش ، مسئولیت ، ایمنی
  • سیاه: رمز و راز ، ظرافت ، شر
  • سفید: تمیزی ، سکوت ، آراستگی
  • سبز: تازگی ، طراوت ، طبیعت
  • نارنجی: انرژی ، احساس هیجان
  • زرد: شادی ، نور خورشید ، شادی و گرما

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

۲) هماهنگی رنگ را حفظ کنید

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

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

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

هماهنگی رنگها در رابط کاربری

توصیه می شود فقط به رنگ های گرم یا سرد بپردازید، زیرا دما نیز به طور قابل توجهی بر هماهنگی تأثیر می گذارد.

همچنین می توانید میزان اشباع و روشنایی رنگ های مشابه را برای عمق رنگ آزمایش کنید. همه اینها به تأثیری که می خواهید ایجاد کنید و محتوایی که UI نمایش می دهد بستگی دارد.

۳) قانون ۶۰-۳۰-۱۰ را دنبال کنید

۶۰٪ رنگ غالب شما است، ۳۰٪ رنگ ثانویه و ۱۰٪ رنگ برجسته شماست.

این قانون طراحی به شما کمک می کند تا به سرعت یک طرح رنگی ایجاد کنید. نسبت ۶۰٪ + ۳۰٪ + ۱۰٪ تعادل رنگها را نشان می دهد. این فرمول به این دلیل جواب می دهد که حس تعادل ایجاد می کند و اجازه می دهد تا چشم ها از یک نقطه به نقطه دیگر راحت حرکت کنند. همچنین استفاده از آن ساده است.

رنگ های رابط کاربری با قانون 60-30-10

۴) تفاوت های فرهنگی را به یاد داشته باشید

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

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

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

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

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

رابط کاربری رنگ تفاوت فرهنگی

۵) کنتراست را متعادل کنید

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

با استفاده از عناصر رنگی اضافی، می توانید کنتراست و پویایی به طراحی خود بدهید.

از جمله مزایای رنگهای متضاد می توان به تأثیر انرژی و حرکت و بهبود یک نکته مهم اشاره کرد که می خواهیم توجه کاربر را به آن جلب کنیم.

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

تعادل رنگ در رابط کاربری

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

۶) ابتدا بر روی مقیاس خاکستری تمرکز کنید

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

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

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

استفاده اولیه از مقیاس خاکستری در رابط کاربری

۷) از طبیعت الهام بگیرید

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

فقط باید اطرافتان را بگردید تا الهام بگیرید.

الهام بخشی طبیعت در رابط کاربری

جمع بندی

طراحی UI به دلایل زیادی مهم است. اول، جذابیت بصری، کار با رابط کاری را آسان تر می کند و زمان آموزش را کاهش می دهد.

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

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

منبع : gapsystudio

۰ ۰ vote
Article Rating