اخیرا پروژه ای داشتم که کارفرما بعد از اتمام طراحی، میخواست اپلیکیشن حالت دارک هم داشته باشه و من بار اولی بود که وارد فضای دارک مود می شدم و طبیعتا چالش هایی رو هم پشت سر گذاشتم. که توی این مقاله میخوام با شما درمیون بذارم.
شاید فکر کنید که دارک مود طراحی کردن کار راحتی هست و میشه با تیره کردن بک گراند و رعایت وزن و رنگ فونت ها اجراش کرد؛ اما خب همه چیز به این دو ختم نمیشه. برای اینکه قوانین اولیه رو بدونین خوندن متریال دیزاین رو بهتون پیشنهاد میکنم.
بریم سراغ اصل ماجرا!
خب من همه قواعد رو رعایت کردم اما باز طرحم از لحاظ بصری مشکل داشت و خودم بعد از دو سه دقیقه نگاه کردن به طرح خسته میشدم. تمامی قوانین که رعایت شده پس مشکل کجا بود؟
اولین موضوع این هست که دیزاین سیستم دارک و لایت مود با هم کاملا متفاوته، اون چیزی که ما یاد گرفتیم اینه که رنگ ها تعدیل میشن اما در اصل ظاهر هر دکمه و عنصر هم در دارک مود کاملا متفاوته و باید توجه به کارکرد اپلیکیشن داشته باشیم؛ کاربر امکان داره در چه شرایطی از اپ استفاده کنه، توی نور زیاد، توی نور کم و محیطی که تمرکز لازم رو کاری که داره انجام میده نداره و ... .
حالت دکمه ها از مهمترین چالش هایی بود که من پشت سر گذاشتم. همونطور که وزن فونت در دارک و لایت مود با هم متفاوته وزن بصری دکمه ها هم همین طوره. برای اینکه در ساختن دیزاین سیستم برای طراحی انواع دکمه ها به مشکل بر نخوریم باید چهار طیف دکمه رو دسته بندی کنیم.
این دسته بندی ها بیشتر به ما برای انتخاب رنگ دکمه و حالتش کمک میکنه که چقدر برامون اهمیت داره.
دکمه های غیرفعال (Disable) رو هم بهتره با رنگ خاکستری طراحی نکنیم و حالت تیره تر رنگ اصلی رو در نظر بگیریم.
از لحاظ رنگ هم باید دقت داشته باشین که لزومی نداره همه دکمه های اخطار قرمز رنگ باشن، میشه از رنگ متضاد رنگ اصلی پروژه استفاده کرد. به عنوان مثال رنگ های پروژه من نارنجی، زرد، فیروزه ای و آبی تیره بود. برای رنگ دکمه های اصلی از نارنجی و زرد و برای رنگ مکمل و حالت اخطار از رنگ آبی تیره و فیروزه ای استفاده کردم که در چرخه رنگ هم این رنگ ها متضاد همدیگه هستند.
یه نکته رو اینجا توضیح بدم؛ چون کارفرما اصرار داشت هم رنگ نارنجی و هم زرد رنگ های برندشون هست منم این دو رو رنگ اصلی قرار دادم. اما توی لایت مود از زرد و آبی تیره و در دارک مود از نارنجی و فیروزه ای استفاده کردم به این خاطر که توانایی تشخیص و تفکیک از هم ساده تر باشه.
چندتا نکته جانبی هم درباره طراحی دارک مود بگم:
این مقاله همینجا به پایان میرسه اما در ادامه دو لینک درباره اهمیت دارک مود براتون میذارم اگر دوست داشتید مطالعه کنین.
Dark Mode vs. Light Mode: Which Is Better?
امیدوارم که این مقاله براتون مفید بوده باشه، نظرتون رو برام کامنت کنین و من رو در شبکه های اجتماعی دیگه از طریق این لینک دنبال کنین.
