مدتی پیش تصمیم گرفته در یک مجموعه مقاله، نکاتی در مورد انتخاب رنگ در پروژه‌های طراحی رابط کاربری ذکر کنم. تا امروز ۲ قسمت از این سری مقالات را منتشر کرده‌ام و امروز می‌توانید سومین و آخرین قسمت را مطالعه کنید.
اگر قسمت‌های قبلی را مطالعه نکرده‌اید می‌تونید از از قسمت اول شروع کنید:
به سراغ بحث کانتراست میریم. یکی از بزرگترین مشکلات طراحی‌ها
در این متن، هرجایی که کلمه «کانتراست» را استفاده کردم منظورم تفاوت روشنی و تیرگی رنگ ۲ المان مختلف هست. حالا این تفاوت می‌تونه بین رنگ بک‌گراند و رنگ متن یا رنگ ۲ باکس مختلف باشه.
فرض کنید شما می‌خواهید یک باکس طوسی روی بک‌گراند سفید بندازید. هرچقدر کانتراست بین این‌ها بیشتر باشه (= تفاوت رنگ بیشتر) باعث میشه اون جدا بودن این باکس بیشتر به چشم بیاد.
زمانی که شما بخواهید یک المان را در طرح متمایز کنید باید بین اون المان و بخش‌های کناریش کانتراست بالایی بسازید. برای همین معمولا برای Call to Actionها طراحان از رنگی با کانتراست بالا استفاده می‌کنند چون آنجا شریان اصلی سیستم است و حتما نیاز داریم که کاربر روی دکمه کلیک کند.
برای نمونه به دکمه دایره ای که گوگل در زبان طراحی متریال استفاده می‌کند دقت کنید.
جایی که این کانتراست خیلی اهمیت پیدا میکنه قسمت‌هایی است که ما با نوشته سر و کار داریم. درست مثل همین حالا که شما دارید این چند خط را می‌خونید.
به عکس زیر نگاه کنید. زمانی که ما کانتراست بین متن و بک‌گراند را کم می‌کنیم (خط دوم) خواندن متن هم سخت‌تر می‌شود. حالا به این فکر کنید که قرار است شما یک مطلب طولانی را بخوانید. اگر میزان کانتراست کم باشد چقدر خواندن سخت خواهد بود.
یکی از مشکلات خیلی از طراحان در انتخاب کانتراست، کیفیت بالای مانیتورهایمان است. اکثر طراحان از مانیتورهای با کیفیت استفاده می‌کنند اما از آن طرف کاربران در زمان خرید لپ‌تاپ یا کامپیوتر اکثرا به کیفیت مانیتور دقت نمی‌کنند. برای همین این نکته خیلی مهم است که در زمان طراحی حتما به طیف گسترده صفحات نمایش دقت کنید و تنها از روی چیزی که در مانیتور با کیفیت خود میبیند رنگ‌هایتان را انتخاب نکنید.
اهمیت این مورد زمانی که در بخش بعدی در مورد بیماری کور رنگی صحبت کنیم بیشتر هم خواهد شد.
همیشه نسبت کانتراست رنگ‌های اصلی سایت و اپلیکیشنتان را چک کنید. W3C یک استاندارد برای این موضوع دارد. هر رنگ در این استاندارد دارای یک عدد است. هرچقدر که این ۲ عدد تفاوتشان بیشتر باشد در نهایت کانتراست بهتری می‌سازند.
سرویس‌های آنلاینی برای این تست وجود دارند که WebAIM یکی از آن‌هاست. تنها کافی است که کد رنگ‌های خود را به سرویس بدهید و سرویس نسبت کانتراست آن‌ها را در جواب به شما خواهد گفت.
طبق استاندارد W3C:
این عدد در ویرگول ۶.۸ به ۱ است. برای همین است که خوانایی متن‌ها در ویرگول بسیار بالاست.
اگر من بخواهم موضوع کانتراست را کامل توضیح دهم خودش چند مقاله طول خواهد کشید. برای همین این بحث را همینجا تمام می‌کنم تا شاید در آینده روزی مطالب بیشتری در این مورد بنویسم.
متاسفانه یکی از مواردی که با وجود اهمیت بسیار بالا خیلی از طراحان اطلاعات کافی در مورد آن ندارند بیماری‌های چشم است که در قدرتِ دیدن افراد تاثیر دارد.
یکی از بیماری‌های چشم مرسوم در ایران و جهان بیماری کور رنگی است. کوررنگی یک بیماری ارثی است که در آن فرد قادر به تشخیص یک یا برخی از رنگ‌ها نمی‌باشد. طبق گزارشات ۸٪ از مردان و ۰.۵٪ از زنان در جهان (آمار رسمی از تعداد مبتلایان در ایران پیدا نکردم) با این بیماری مواجه هستند. این یعنی انتخاب رنگ‌های اشتباه می‌تواند بر روی استفاده ۵٪ از کاربران و مشتریان شما تاثیر گذار باشد.
کور رنگی انواع مختلف دارد. که شایع‌ترینش Deuteranomalia است که فرد همه چیز را به صورت رنگ پریده می‌بینند. تاثیرات هر نوع در بینایی را می‌توانید در عکس زیر مشاهده کنید:
شاید برایتان جالب باشد بدانید که طبق گزارش New Yorker مارک زاکربرگ، موسس فیسبوک هم دچار کور رنگی است و در دیدن رنگ‌های سبز و قرمز مشکل دارد. برای همین است که رنگ سایت فیسبوک از ابتدا آبی انتخاب شده است.
مهم است که در زمان طراحی، طرحتان را در حالت‌های مختلف کور رنگی تست کنید. برای این کار اگر از Photoshop استفاده می‌کنید می‌توانید از آدرس View >> Proof طرحتان را در حالت کور رنگی نیز ببینید.
اما اگر مثل من از Sketch استفاده می‌کنید باید بدونید که این برنامه به صورت پیش فرض چنین قابلیتی نداره اما شما می‌توانید با نصب این پلاگین طرحتان را در حالت‌های مختلف کور رنگی ببینید.
برای تفریح هم می‌توانید این اکستنشن NoCoffee را بر روی مرورگر گوگل کروم خود نصب کنید و ببینید بیماران کور رنگی سایت‌های مختلف را به چه شکل می‌بینند.
قاعدتا حالا متوجه شده‌اید که چرا در فروشگاه‌های اینترنتی - که درست طراحی شده‌اند - زمانی که شما می‌خواهید رنگ محصول مورد نظرتان را انتخاب کنید حتما اسم رنگ به صورت متنی هم نوشته می‌شود.
شما به سادگی می‌توانید این موضوع را تست کنید که آیا شما به کور رنگی مبتلا هستید یا خیر. برای این کار می‌تونید به سایت enchroma بروید و بر روی دکمه Start Test کلیک کنید. در صفحه ای که باز می‌شود دایره‌هایی رنگی به شما نشان داده می‌شود که در وسط هر کدام یک عدد وجود دارد. شما باید این عدد را به سایت بگویید.
در نهایت با توجه به انتخاب‌های شما سایت به شما گزارش می‌دهد که آیا شما به این بیماری مبتلا هستید یا نه.
مطالبی که قصد داشتم در مورد انتخاب رنگ در پروژه‌های طراحی رابط کاربری بگویم در اینجا تمام شد. در این ۳ مقاله، ۶ موضوع مختلف را بررسی کردیم. اگر قصد به بررسی کامل باشد هر کدام از این موضوعات نیاز به یک یا چند مقاله جداگانه دارد اما مهمترین موضوعاتی که در مورد هر کدام در ذهن داشتم را عنوان کردم.
اگر در این موضوع مبحثی هست که به نظرتان به آن پرداخته نشده می‌توانید در قسمت کامنت‌ها اعلام کنید.
امیدوارم این مطلب در عمل به کارتون اومده باشه.
