همه چیز درباره تم تاریک یا Dark mode

احتمالا برای همه ما پیش آمده که خواب باشیم و فردی چراغ اتاق را (از قصد!) روشن کند. پس از آن چه اتفاقی برای ما افتاد؟ سردرد گرفتیم!
این موضوع دقیقا درمورد افرادی که اواخر شب یا اوایل صبح به صفحه رایانه یا تلفن همراه خود خیره می‌شوند نیز کاملا صدق می‌کندشاید برایتان پیش آمده باشد که با ورود به محیط های تاریک و کم نور، گوشی هوشمندتان نور صفحه را اتوماتیک کم کرده باشد و به شما پیشنهاد Dark mode  را بدهد. با حالت دارک مود می توانید نور ها را کم کنید، به چشمانتان استراحت داده و در مصرف انرژی دستگاه خود صرفه جویی کنید.

Dark mode یا حالت تاریک امروزه به عنوان یک ترند جدید و جذاب در حوزه طراحی سایت و طراحی اپلیکیشن مورد توجه بسیاری از برنامه نویسان و شرکت های پیشرو در حوزه تکنولوژی مثل تلگرام، فیسبوک، گوگل، اپل و … قرار گرفته است. ما نیز در ادامه این مطلب قصد داریم درباره Dark mode  و اصول طراحی آن بیشتر صحبت کنیم.

پیشنهاد می کنیم مطالعه کنید:

interaction design چیست ؟ راهنمای کامل

اصول اولیه طراحی محصول

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

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

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

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

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

با این تفاسیر، چرا امروزه صحبت از Dark mode برای طراحی محصولات است؟

رابط کاربری تاریک در مقابل رابط کاربری روشن

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

• جلوگیری از خستگی بصری

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

• بهبود دید در نور کم

. Dark mode با کاهش نور شدید، دیدن تصاویر و مطالعه مطالب را بدون سردرد برای شما به ارمغان می‌آورد.

• عمر باطری شما را افزایش می دهد.

برخی وسایل دیجیتال که از صفحه نمایش OLED استفاده می‌کنند می‌‌توانند پیکسل های سیاه را در صورت عدم استفاده خاموش کنند. Dark mode به صورت کلی از تعداد بیشتری پیکسل سیاه استفاده می‌کند و بدین طریق دستگاه را مجبور می‌کند تا انرژی کمتری مصرف کند.

• تمرکز شما را هنگام کار افزایش می‌دهد.

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

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

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

بایدها و نبایدهای استفاده از Dark mode

توصیه می شود که در موارد زیر، از Dark mode بهره بگیرید:

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

بیشتر بخوانید:

قوانین طلایی و اصول کلیدی طراحی رابط کاربری زیبا، موثر و ساده

و اما توصیه می شود در موارد زیر، تا حد امکان از Dark mode  دوری کنید و به سراغ سایر طراحی ها بروید:

• وقتی متن زیادی وجود دارد (خواندن در پس زمینه تاریک دشوار است)
• زمانی که محتوای ترکیبی زیادی روی صفحه نمایش وجود دارد
• در مورد برنامه های کاربردی B2B با تعداد زیادی فرم، مؤلفه و ویجت
• زمانی که طراحی به طیف وسیعی از رنگ ها نیاز دارد

کنتراست در طراحی رابط کاربری تاریک

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

طرح زمینه تیره Google’s Material Design استفاده از خاکستری تیره (#121212) را به عنوان رنگ سطح تم تیره توصیه می‌کند «برای بیان ارتفاع و فضا در محیطی با دامنه وسیع‌تر از عمق». علاوه بر این، بسیاری از طراحان توصیه می کنند هنگام تعیین طرح رنگ، یک رنگ آبی تیره ظریف به خاکستری تیره اضافه کنید. تمایل به ایجاد رنگ تیره بهتر برای صفحه نمایش های دیجیتال و پالت رنگی UI تیره دلپذیرتر دارد.

جمع بندی

در پایان، تصمیم به استفاده از یک رابط کاربری تاریک باید با دقت انجام شود. طراحان نباید این کار را به دلایل نادرست انجام دهند. بسیار مهم است که یک طراح زمینه، محتوا (کنتراست و خوانایی)، دستگاه و مورد استفاده را در نظر بگیرد و دلیل خوبی برای انتخاب خود داشته باشد. استفاده از Dark mode در کنار مزایای فراوانی که دارد، اگر به صورت نادرست و اشتباه استفاده شود می تواند مخرب باشد. برای طراحی دارک مود وبسایت خود با اصول اولیه طراحی می توانید از خدمات طراحی UI تاس بهره بگیرید.