چک لیست طراحی حالت شب (Dark Mode)

دارک تم (Dark theme)، یکی از آخرین ترندها در طراحی UI است و در حال حاضر به یکی از پرطرفدارترین شکل‌های UI تبدیل شده است که اگر به درستی طراحی شود می‌تواند استفاده از محصول را راحت‌تر و دلپذیرتر کند. دارک تم، که یک تم تکمیلی برای تم اصلی است، با استفاده از سطوح بزرگ تیره، نوری که از صفحه نمایش منتشر می‌شود را کم می‌کند، میزان روشنایی را تنظیم کرده، استفاده از صفحه نمایش را در محیط‌های کم نور و تاریک تسهیل می‌کند و درنتیجه فشار و خستگی چشم را کاهش می‌دهد. همچنین در بعضی از دستگاه‌ها، به طور مثال دستگاه‌های دارای صفحه اولد(OLED) یا (AMOLED)، باعث صرفه‌جویی در مصرف باتری می‌شود (در حالت روشنایی کامل(Full Brightness) بین 5.6% تا 44.7% و در حالت 38% روشنایی بین 1.8% تا 23.5% صرفه‌جویی).

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

در ادامه به چند نکته کلیدی که باید هنگام طراحی دارک تم به آن‌ها توجه کنید اشاره می کنیم:

- از رنگ سیاه خالص استفاده نکنید.

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

انتخاب خاکستری تیره به جای سیاه خالص به عنوان رنگ اصلی پس‌زمینۀ اجزا(components) انتخاب مطمئن و ‌بهتری است. نوشته با رنگ روشن بر روی زمینه خاکستری تیره، دارای کنتراست کمتری از زمینه سیاه خالص است. علاوه بر آن چون سایه‌ها بر روی رنگ خاکستری راحت‌تر از سیاه دیده می‌شوند، می‌توانیم سطوحی با طیف وسیع‌تری از تونالیته‎های خاکستری داشته باشیم که این امر در طراحی، کار ما را در نشان دادن عمق و ترتیب قرارگیری اجزاء راحت‌تر می‌کند.

"متریال دیزاین"، رنگ 121212# را به عنوان رنگ زمینه برای دارک تم توصیه می‌کند.

- از رنگ‌های با خلوص بالا (Saturated Colors) در دارک تم استفاده نکنید.

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

از تونالیته‌های روشن‌تر ( بین 50-200 ) به این دلیل که راحت‌تر خوانده می‌شوند استفاده کنید. این رنگ‌های روشن‌ نه تنها تاثیرپذیری UI را کمتر نمی‌کنند بلکه به شما این امکان را می‌دهند که کنتراست لازم را بدون اذیت کردن چشم به وجود بیاورید.

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

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

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

- استفاده از سیستم رنگی (Color System)

یکی از راه‌هایی که تصمیم‌گیری درباره رنگ را آسان‌تر می‌کند، استفاده از یک سیستم رنگی (Color system) به جای پالت رنگ است.

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

تونالیته‌های رنگی را شماره گذاری کنید. در قسمت تیره، تیره‌ترین رنگ را شماره 1 و در قسمت روشن روشن، روشن‌ترین رنگ شماره 1 نام‌گذاری کنید. این کار باعث می‌شود که انتخاب رنگ‌ها با تونالیته‌های یکسان در هر دو طرف راحت‌تر باشد: خاکستری شماره 3 در قسمت روشن با خاکستری شماره 3 در قسمت تیره و ....

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

- استانداردهای کنتراست در دسترسی‌پذیری رنگی را رعایت کنید.

مورد دیگری که باید توجه کنید این است که اطمینان حاصل کنید محتوای شما در دارک تم به خوبی قابل خواندن است. تیرگی زمینه در دارک تم باید به اندازه‌ای باشد که نوشته‌های روشن به راحتی بر روی آن نمایش داده شود. متریال دیزاین گوگل نسبت 15.8:1 را بین زمینه و متن پیشنهاد می‌دهد.

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

برای تست نسبت کنتراست از ابزارهای کنتراست رنگ استفاده کنید.

- از "On colors"برای متن‌ها استفاده کنید.

در متریال دیزاین، مجموعه ای از قوانین و دستورالعمل ها برای متن و آیکون‌ها در دارک تم وجود دارند که به آن "پالت پایه دارک تم" (Dark Theme Baseline Palette) گفته می شود که می‌توانید در material.io مطالعه کنید.

به رنگ‌های سمت راست، “On Colors” گفته می‌شود که عمدتا برای نوشته‌ها استفاده می‌شود. همانطور که در تصویر می‌بینید برای نوشته‌ای که بر روی رنگ اصلی، رنگ ثانویه، و ارور (Error) قرار می‌گیرد ، 000000# در نظر گرفته شده و برای رنگی که بر روی بک‌گراند و سطوح استفاده می‌شود، FFFFFFF# .

رنگ روشن پیش‌فرض برای دارک تم سفید خالص است. (FFFFFF#)

البته باید توجه داشت که این رنگ سفید (FFFFFF#) در برابر زمینه تیره دارای کنتراست بالایی است و چشم را هنگام خواندن متن اذیت می‌کند؛ به همین علت گوگل متریال دیزاین توصیه می‌کند که از رنگ سفید با اپسیتی‌های (Opacity) متفاوت استفاده کنید:

• در متن‌ها با اهمیت بالا از (Opacity)شفافیت 87% استفاده کنید.
• در متن‌ها با اهمیت متوسط از (Opacity)شفافیت 60 % استفاده کنید.
• در نوشته‌هایی که غیر فعال هستند از (Opacity)شفافیت 38% استفاده کنید.

نکته:

نوشته‌های روشن بر روی زمینه‌های تیره، ضخیم‌تر از نوشته‌های تیره بر روی زمینه روشن به نظر می‌رسند.

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

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

در هنگام طراحی UI برای دارک تم ، مانند طراحی برای تم روشن، رعایت سلسله مراتب و تاکید بر روی عناصر مهم و اصلی، ضروری است. (خواندن مقاله کوتاه در مورد Heuristic Evaluation به درک این موضوع کمک می‌کند)

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

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

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

- وجه حسی طراحی خود را در نظر بگیرید.

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

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

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

- انتخاب بین تم تاریک و تم روشن را به خود کاربران واگذار کنید.

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

این دلیل محکمی است برای اینکه از فعال کردن خودکار دارک مود (Dark Mood) در محصولتان خودداری کنید. به کاربر اجازه دهید تا بین دارک مود و لایت مود انتخاب کند. کاربرها باید قادر باشند بر اساس نیاز بین این دو تم یکی را انتخاب کنند؛ و شما باید تنها با طراحی دکمه تغییر مود این امکان را فراهم کنید.

و نکته آخر اینکه: دیزاین را در دو حالت تیره و روشن تست کنید.

محصول را در تاریکی بعد از غروب در زیر نور لامپ امتحان کنید. طراحی خود را در هر دو حالت ببینید و تغییراتی که مطابق با هر کدام از حالت‌ها لازم است انجام دهید.

منابع:

https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6

https://blog.superhuman.com/how-to-design-delightful-dark-themes-7b3da644ff1f

https://medium.com/snapp-mobile/design-for-the-dark-theme-9a2185bbb1d5

https://blog.prototypr.io/8-tips-for-perfect-dark-theme-ui-5aa34784784e