مزایا و معایب استفاده از رنگ‌های روشن در طراحی UI

ترجمه و تالیف : علیرضا داداشی
تاریخ انتشار : 02 مهر 99
خواندن در 5 دقیقه
دسته بندی ها : رابط کاربری

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

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

مزایای رنگ های روشن در UI

افزایش خوانایی و وضوح

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

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

تقویت ناوبری و تعامل بصری

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

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

قابل تشخیص

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

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

ایجاد روحیه و جو

طراحان باید از این واقعیت مطلع باشند که رنگ ها می‌توانند بر روحیه و رفتار ما تاثیر بگذارند. با دانستن این موضوع آن‌ها می‌توانند سبک و پیام مناسب را به کاربران انتقال داده و اقدامات آن‌ها را پیش‌بینی کنند. ما معمولاً متوجه این موضوع نمی‌شویم اما ذهن ما به رنگ ها واکنش نشان می‌دهد.

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

سبک و ظاهری به روز

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

مشکلات استفاده از رنگ‌های روشن در UI

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

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

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

- تک رنگ: هارمونی رنگ براساس یک رنگ با حالات مختلف و سایه‌ها بنا شده است.

- آنالوگ: این طرح رنگ‌هایی که در چرخه رنگ کنار یکدیگر قرار دارند را مشخص می‌کند.

- مکمل: این ترکیبی از رنگ‌هایی است که در چرخه رنگ روبروی یکدیگر هستند و هدف آن‌ها تولید کنتراست بالا است.

- تقسیم مکمل: کارکرد این مورد مشابه مورد قبلی است؛ با این تفاوت که در این ترکیب از رنگ‌های بیشتری استفاده می‌شود. به عنوان مثال اگر رنگ آبی را انتخاب کنید، باید دو رنگ که در مجاورت رنگ متضاد آن (زرد و قرمز) است را انتخاب کنید.

- سه گانه: این مورد بر پایه ۳ رنگ جداگانه بنا شده که در چرخه رنگ برابر می‌باشند. متخصصان توصیه می‌کنند که از یک رنگ به عنوان رنگ غالب و از سایر موارد به عنوان زینت دادن به کار استفاده کنید.

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

از دست دادن accent

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

به همین خاطر است که به طراحان توصیه می‌شود از نسبت ۶۰٪-۳۰٪-۱۰٪ استفاده کنند. تصور می‌شود که چنین نسبتی برای چشمان انسان خوشایند باشد، زیرا این امکان را به ما می‌دهد تا به تدریج تمام عناصر بصری را درک کنیم.

نکته: ACCENT COLOR به رنگی گفتی می‌شود که برای برجسته کردن قسمت‌های اصلی UI، مثل تب‌های فعال،متن‌های ورودی که تمرکز بیشتری بر آن‌هاست، چک باکس‌ها و ... استفاده می‌شود؛ یا به عبارتی رنگی متفاوت نسبت به رنگ اصلی و پس‌زمینه، که به عنوان زینت کار استفاده می‌شود.

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

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

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

شاید رنگ های پر جنب و جوش در موبایل بسیار متناقص به نظر برسند

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

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

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

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید