در سال‌های اخیر، حالت تاریک یا همان Dark Mode از یک ویژگی فانتزی به یک ضرورت در طراحی رابط کاربری (UI) تبدیل شده است. بسیاری از کاربران به دلیل خستگی چشم یا صرفه‌جویی در مصرف باتری، ترجیح می‌دهند از این حالت استفاده کنند. اما طراحی یک Dark Mode استاندارد در نرم‌افزاری مثل Adobe XD، فقط سیاه کردن پس‌زمینه نیست! اگر اصول حرفه‌ای را رعایت نکنید، نه تنها به سلامت چشم کمک نکرده‌اید، بلکه تجربه کاربری (UX) را هم نابود خواهید کرد.

مبانی نظری و سلامت چشم

طبق تعریف منابع تخصصی، حالت تاریک به رابط کاربری‌ گفته می‌شود که از سطوح تیره با متن‌های روشن استفاده می‌کند. این حالت به ویژه در محیط‌های کم‌نور، فشار وارد بر چشم (Digital Eye Strain) را به شدت کاهش می‌دهد.

وینسنت فلورنتینو (طراح ارشد گوگل) می‌گوید: «طراحی حالت تاریک سفری است میان کنتراست و خوانایی؛ ما نباید از سیاه مطلق استفاده کنیم، بلکه باید از طیف‌های خاکستری تیره برای ایجاد عمق استفاده کرد.»

 

۱. قانون طلایی: از سیاه مطلق (#000000) دوری کنید!

در Adobe XD، اولین وسوسه طراح این است که پس‌زمینه را روی کد رنگی 000 قرار دهد. اما جالب است بدانید که تضاد شدید متن سفید روی پس‌زمینه کاملاً سیاه، باعث پدیده‌ای به نام "Halation" می‌شود که برای چشم آزاردهنده است.

  • نکته مدرس: همیشه از خاکستری‌های بسیار تیره (مانند #121212) استفاده کنید تا لرزش بصری متن کاهش یابد.

۲. مدیریت رنگ‌های برند در حالت تاریک

رنگ‌هایی که در حالت روشن (Light Mode) عالی به نظر می‌رسند، ممکن است در حالت تاریک بیش از حد اشباع (Saturated) و جیغ به نظر برسند.

  • در Adobe XD، با استفاده از بخش Assets، نسخه‌های کم‌رنگ‌تر (Desaturated) از رنگ برند خود را برای حالت تاریک تعریف کنید تا خوانایی متن روی پس‌زمینه تیره حفظ شود.

آموزش ایکس دی

۳. ایجاد عمق با استفاده از سطوح (Elevation)

در طراحی روشن، ما با سایه‌ها (Shadows) عمق ایجاد می‌کنیم. اما در Dark Mode، سایه‌ها دیده نمی‌شوند!

  • راهکار: هرچه یک المان به کاربر نزدیک‌تر است (مثلاً یک پنجره بازشو یا کارت)، باید رنگ خاکستری روشن‌تری داشته باشد. این کار در Adobe XD با تنظیم لایه‌ها و تغییر Opacity لایه‌های رویی به سادگی انجام می‌شود.

۴. خوانایی متن و استانداردهای WCAG

سلامت چشم مستقیماً با کنتراست در ارتباط است. طبق استانداردهای دسترسی‌پذیری (WCAG)، نسبت کنتراست متن به پس‌زمینه باید حداقل 4.5:1 باشد.

  • می‌توانید از پلاگین‌های بررسی کنتراست در Adobe XD استفاده کنید تا مطمئن شوید متن‌های شما چشم کاربر را خسته نمی‌کنند.