انتخاب رنگ در طراحی رابط کاربری و اهمیت آن بر رشد سایت

طراحی رابط کاربری یا User Interface Design که به اختصار آن را UI Design می‌نامند، در حقیقت بخشی از وب‌سایت یا اپلیکیشن است که کاربر به طور مستقیم با آن ارتباط دارد. دو واژه کاربر و ارتباط مستقیم وی با اپ یا سایت بسیار حائز اهمیت است؛ چون دلیل رونق گرفتن نرخ بازدید یک وب‌سایت یا افزایش تعداد کاربرانی که از خدمات یک اپلیکیشن استفاده می‌کنند، تا حد زیادی به همین امر یعنی UI Design وابسته است. در این مطلب می‌خواهیم یکی از مهم‌ترین ویژگی‌های UI یعنی رنگ‌ها را بررسی کنیم. به نظر شما اهمیت انتخاب رنگ در طراحی ui چگونه است؟

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

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

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

انتخاب از بین رنگ های هماهنگ و هم خانواده

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

قانون ۶۰-۳۰-۱۰

برای رعایت اصل اهمیت رنگ ها در طراحی رابط کاربری، پیشنهاد می‌کنیم از قانون ۶۰-۳۰-۱۰ غافل نشوید. براساس این قانون، باید نسبت رنگ غالب، ۶۰ درصد و رنگ ثانویه ۳۰ درصد باشد. ۱۰ درصد نهایی مربوط به رنگ‌های مکمل است. به این ترتیب، تعادل و هماهنگی خوبی در طراحی رابط کاربری سایت یا اپلیکیشن ایجاد می‌شود که از نگاه کاربر هم پنهان نیست.

توجه به بیماری‌های چشمی در کاربران

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

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

نوعی از این بیماری که اتفاقا شایع‌ترین نمونه شناخته شده آن هم می‌باشد، دوتروانومالی   Deuteranomalia))  است که در آن فرد نمی‌تواند به درستی رنگ‎های سبز و قرمز را تشخیص دهد و جالب است بدانید که مارک زاکربرگ نیز طبق گزارش New Yorker، دچار همین نوع کوررنگی است. از این رو، زاکربرگ از همان ابتدا رنگ آبی را برای سایت فیسبوک انتخاب کرده بود.

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

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

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

View >> Proof

• اما اگر از Sketch برای طراحی کارهای خود استفاده می‌کنید، بهتر است بدانید که این برنامه مانند فتوشاپ چنین پیش فرضی را ندارد و به همین دلیل با نصب پلاگین sketch-color-blindness  می‌توانید طرح خود را در حالت‎های مختلف این بیماری چشمی مشاهده کنید.

توجه به معنی رنگ ها

رنگ‌ها روی انسان اثر خاصی دارند؛ برای مثال رنگ قرمز نشانه خطر است و در تابلوهای راهنمایی و رانندگی به وفور از این رنگ هشدارآمیز استفاده می‌شود. برای رعایت اصل اهمیت رنگ ها در طراحی رابط کاربری باید به معنای هر یک از آن‌ها و اثرات فیزیولوژیکشان روی ذهن انسان مطلع باشید. برای مثال معنی تعدادی از رنگ‌ها عبارتند از:

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

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

1. Colorcombos.com: این وبسایت به شما پیشنهاد های مختلفی را پیرامون یک رنگ خاص به شما ارائه می دهد، فقط کافیست تا رنگ مورد نظر خود را انتخاب کنید.
2. Colorschemer.com: بیش از ۶۰۰۰ ترکیب رنگ مختلف در موضوع های متفاوت از ویژگی های این ابزار است. از امکانات این ابزار می توان به انتخاب ترکیب رنگ برای نمایشگرها یا چاپ، انتخاب رنگ از تصویر، ترکیب رنگ ها و گرادینت نام برد.
3. Adobe Color: سایتی از شرکت معروف ادوبی که تمامی طراح ها نام آن را شنیده اند. در این سایت به راحتی می توانید پلت رنگی های جذاب و هماهنگی را پیدا کنید.