مقالات طراحی رابط کاربری 24 آبان 1399 29 دقیقه مطالعه علی سخا

چطور از Dark Mode در طراحی رابط کاربری استفاده کنم؟ + (مزایا و معایب رابط کاربری دارک)

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

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

حالت تاریک یا dark mode چیست؟

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

اولین حالت تاریک نسل جدید!

بعد از حدود سه دهه از جایگزینی لایت مود با دارک مود کلاسیک، این مایکروسافت بود که در سال ۲۰۱۰ با ارائه ویندوز ۷ رابط کاربری تیره را نیز به فیچرهای ویندوز اضافه کرد و چندسال بعد گوگل نیز تایید کرد که این ویژگی، به شکل قابل توجهی در کاهش مصرف انرژی نقش دارد برای همین گوگل و اپل در سال ۲۰۱۸ این رابط کاربری کلاسیک را ارتقا داده و در سیستم عامل های خود پیاده سازی کردند.

مقالات زیر را در حوزه طراحی UI مطالعه بفرمایید:طراحی رابط کاربری یا UI چیست؟چک لیست بهبود رابط کاربری محصولات شما

مزایای استفاده از حالت Dark mode

جلوگیری از سندرم بینایی رایانه ای!

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

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

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

رابط کاربری تیره

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

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

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

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

نکات منفی در استفاده از Dark mode

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

کاهش ارتباط عاطفی با کاربر

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

فضا را کوچک می‌‌کند

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

خواندن متون با کنتراست کمی سخت است

اگر هنگام طراحی سایت یا اپلیکیشن خود به این موضوع دقت نکنید و محتوای خود را با کنتراست رنگی مناسب به کاربر نمایش ندهید کاربر شما (مخصوصا در استفاده بلند مدت) به دردسر خواهد افتاد. پس حتما در طراحی خود این موضوع را مدنظر داشته باشید.

چطور از dark mode در طراحی سایت و اپلیکیشن استفاده کنیم؟

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

طراحی رابط کاربری dark mode برای اپلیکیشن

رنگ برند خود را در نظر داشته باشید

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

کاربر کاربر کاربر!

اگر کسب و کار و جامعه هدف شما خواهان این تغییر رابط کاربری نیست به هیچ وجه برای دارک مود برنامه ریزی نکنید. این کار نه تنها هزینه زیادی برای شما به همراه دارد بلکه مخاطبان شما را نیز از شما دور خواهد کرد.

کسب و کار خود را بشناسید!

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

تجمل و زیبایی

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

۳ نکته ای که در طراحی dark mode باید به آن توجه کنید +(چند نکته اضافی!)

شما باید هنگام استفاده از این رابط کاربری به این ۳ نکته توجه کنید. اگر نمی‌‌خواهید با این تغییر استراتژی کسب و کار خود را سرنگون کنید با ادامه این مقاله همراه باشید:

۱) خیلی تاریک نباشید

اگر دقت کرده باشید حتی ناشران کتاب نیز هنگام استفاده از صفحه سفید از جوهر مشکی استفاده نمی‌کنند. به چه دلیل؟زیرا این کنتراست زیاد موجب فشار بر روی چشم، خستگی و در نهایت کاهش تمرکز خواننده خواهد شد. این موضوع در دستگاه های دیجیتال نیز کاملا صدق می‌کند پس سعی کنید تم کار شما کاملا سیاه نباشد ولی تیرگی منحصر به فرد خود را حفظ کند.نکته۱: طبق پیشنهاد google material design استفاده از سطح کنتراست متن به پس زمینه 1:15:8 ایده آل ترین کنتراست رنگی است که شما می‌توانید در پروژه های خود از آن استفاده کنید.نکته۲: از رنگ های تیره در پس زمینه تیره اجتناب کنید و سعی کنید در صورت نیاز از رنگ هایی که سایه های خاکستری و سفید به آن ها اضافه شده است استفاده کنید.نکته۳: رنگ برند خود را فراموش نکنید و حتما قبل از هرتغییری به فکر رنگ مکمل برای طراحی لوگوی خود در پس زمینه تیره باشید.نکته ۴: از سفید خالص (#FFFFFF) به هیچ عنوان استفاده نکنید. (به دلیل کنتراست بسیار بالا)

۲) رنگ ها را معکوس نکنید

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

۳) آزادی؛ بهترین حسی که می‌توانید به کاربر هدیه کنید

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

جمع بندی

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