امروزه یکی از حالت‏های پرطرفدار در طراحی رابط کاربری (Ui) حالت دارک مود یا همان حالت شب است. احتمالا شما در محصولاتی همچون تویتر، اینستاگرام، یوتیوب و… این حالت را دیده‏اید. دارک مود حالت ویژه ی از صفحه نمایش است که برای موقعیت های با نور کم و یا استفاده در شب طراحی می‏ ‏شود. در این حالت متن با رنگ روشن و پس زمینه در رنگ تیره قرار می گیرد. در باب این مود پرطرفدار شایعات و تناقض‏های زیادی وجود دارد. برخی معتقدند که حالت دارک نه تنها باعث افزایش طول عمر باتری دستگاه می ‏شود، بلکه فشار وارد به چشم را کاهش می ‏دهد. از طرف دیگر برخی افراد معتقدند که حالت شب موجب آسیب چشم می شود. حال مسئله این است: مود تاریک یا روشن؟!

دارک مود یا لایت مود

برای یافتن پاسخ این سوال در ابتدا بهتر است، نگاهی به تحقیقات بیندازیم. یک موسسه در دوسلدورف (Düsseldorf) آزمایشی انجام داد، که شرکت ‏کنندگان باید شکافها را در یک اپتوتایپ Landolt C تشخیص می دادند. در واقع به آنها نماد “C” را در جهات مختلف نمایش می دادند، سپس از آنها می خواستند تا جهت c را شناسایی کنند. نتیجه نشان داد با تفاوت ناچیز افراد در حالت روشن بهتر عمل می کنند.

از طرفی تیمی در دانشگاه مینی سوتا (Minnesota) دریافتند که مود شب برای افرادی با بیماری آب مروارید و اختلالات مرتبط بهتر است. علاوه بر این مطالعه طولانی در حالت روز باعث نزدیک بینی نیز می شود.
تیم تحقیقاتی دیگری در Agelab MIT بر تاثیر مود شب بر contrast sensitivity مطالعه ی انجام داد. آنها حساسیت کنتراست یا همان contrast sensitivity میزان قدرت چشم را روی یک زمینه بررسی کردند. در ابتدا باید این نکته را بدانید که هرچقدر کنتراست رنگی بین زمینه و طرح کمتر باشد، تشخیص طرح نیز کمتر می شود. در این تحقیق شرکت ‏کنندگان باید کارکترهای نوشتاری را در دو حالت روشن و تاریک در سایزهای متفاوت و در دو زمان روز و شب تشخیص می دادند. نتیجه نشان داد، در روز حساسیت کنتراست در هردو حالت یکسان، ولی در شب، مود روز مناسب‏تر است.

حال  وقت آن رسیده به این سوال که “بین حالت روشن یا شب  کدام بهتر است؟” پاسخ دهیم. همانطور که می بینید تحقیقات مشخصی مبنی بر برتری این دو مود نسبت به هم وجود ندارد. درنتیجه شاید بهترین روش این باشد تا به کاربرتان این امکان را بدهید، بین دو حالت روشن و تاریک سوئیچ کند.

نکاتی برای طراحی اصولی حالت شب که باید بدانید

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

کاهش مصرف باتری در حالت شب

حالت تاریک جدا از ظاهر شیک، در مصرف باتری دستگاه های با صفحه نمایش OLED صرفه جویی می کند. زیرا آنها برای هر پیکسل به طور جداگانه نور تولید می کنند و پیکسل های سیاه هیچ انرژی مصرف نمی کنند. البته این تکنولوژی بیشتر در گوشی های هوشمند کاربرد دارد.
اما در صفحه نمایش ‏های LCD این جریان تفاوتی ندارد. زیرا در این صفحات یک پنل پشت صفحه نمایش است که نور سفید تولید می کند. بنابراین اگر صفحه با مود تاریک هم باشد، میزان نور ساطع شده یکسان است و تفاوتی ندارد.

از وارونگی مستقیم حالت روشن به تاریک خودداری کنید

هرگز رنگ ‏ها را یکباره معکوس نکنید، زیرا ممکن است کنتراست بین پس زمینه (بک گراند) و متن را خیلی زیاد یا کم کند. این مورد نه تنها باعث کم شدن خوانش متن می شود، بلکه ممکن است به رنگ های سازمانی (هویت برند) نیز آسیب وارد کند.
ترفند:
بهتر است ابتدا از کنتراست اصلاح شده براساس رنگ های برند استفاده کنید. برای اینکار از رنگ های اصلی شروع کنید، و سپس براساس رنگهای اصلی، رنگ‏های سطح و پس زمینه و اجزای صفحه را انتخاب کنید. فراموش نکنید که نسبت کنتراست (Contrast Ratio) متن با پس زمینه 4.5:1 باشد.

نکته: نسبت کنتراست در واقع نسبت روشن‏ترین رنگ به تیره ‏ترین رنگ است. این عدد می تواند تا 21:1 باشد. عدد اول شماره رنگ روشن تر، و دومی برای رنگ تیره تر است.

از رنگهای غیر اشباع (desaturated colors) استفاده کنید

اشباع، خلوص و شدت رنگ را توصیف می کند. رنگ‏ های اشباع متراکم و پر جنب ‏وجوش هستند و هیچ خاکستری ندارند. خبر بد اینکه این رنگ‏ها در آزمون نسبت کنتراست رنگ WCAG (Web Content Accessibility Guidelines) به سختی نمره قبولی می‏گیرند. چرا که بدلیل کنتراست رنگی زیاد باعث آزار چشم خواهند شد.

ترفند:
خبر خوب اینکه رنگ‏های غیراشباع با استاندارد نسبت کنتراست 4.5:1 بین متن و پس زمینه تطابق بیشتری دارند. همچنین حواستان به رنگ متن و نسبت کنتراست آن با پس زمینه باشد. برای اینکه متوجه شوید که نسبت کنتراست رنگ های انتخابی شما مناسب است یا خیر؟ می توانید از دو سایت WebAIM و Coolors استفاده کنید.

هویت برند را حفظ کنید

در اینجا ممکن است برای شما این سوال مطرح شود، اگر در طرح متریال برند شما (مثال لوگو) از رنگ های اشباع استفاده شده باشد، آیا باید رنگ لوگو را تغییرداد؟

نه! شما برای حفظ هویت برند، باید رنگ ها را حفظ کنید.

ترفند:
برای اینکار شما می توانید از رنگ‏های سازمانی با رعایت سلسله مراتب و اصول برای برجسته کردن مثلا یک دکمه یا لوگو استفاده کنید، اما مراقب باشید در اینکار زیاده ‏روی نکنید.

استفاده از رنگ مشکی یا سفید خالص ممنوع

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

ترفند:
پیشنهاد بهتر استفاده از خاکستری تیره(مثال #121212) به عنوان رنگ پس زمینه است. همچنین در رنگ سفید سعی کنید، کمی هم رنگ مشکی داشته باشید(مثال # f2f2f2). در مورد سایه عناصر نیز بهتر است از سیاه خالص استفاده نکنید. در عوض با استفاده از خاکستری می توانید حس عمق بهتری به عناصر بدهید.

کنتراست رنگی پیغام ها و عناصر مهم را تنظیم کنید

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

در هر دو مود تاریک و لایت، دکمه‏ ها (bottom)، پیغام ها و نوشتارهای داخل input state در فرم ها باید کاملا قابل تشخیص باشد. همچنین حتما مطمئن شوید که رنگ های انتخابی شما استاندارد کنتراست سطح AA را پاس می کند.

نتیجه گیری

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

تیم تولید محتوای مدرسه طراحی سایت پرنیان

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

منابع

https://www.nngroup.com/articles/dark-mode/

https://app.uxcel.com/weekly-challenge/dark-mode-uncovered-558

https://material.io/design/color/dark-theme.html/