اصول طراحی حالت تاریک (Dark Mode)؛ از رنگ تا خوانایی
حالت تاریک فقط سیاه‌کردن صفحه نیست؛ آموزش سطح‌بندی خاکستری‌ها، تنظیم رنگ برند، متن و کنتراست و جزئیاتی که همه فراموش می‌کنند.
چرا حالت تاریک فقط «سیاه‌کردن» نیست؟
اشتباه کلاسیک طراحی حالت تاریک: پس‌زمینه را مشکی کنید، متن‌ها را سفید و رنگ‌ها را همان‌طور نگه دارید. نتیجه، صفحه‌ای است که چشم را می‌زند: متن‌های سفیدِ درخشان روی مشکی مطلق مثل نگاه‌کردن به چراغ‌های جلو در تاریکی است و رنگ‌های برندِ اشباع‌شده، روی زمینهٔ تیره جیغ می‌زنند. حالت تاریک یک طراحیِ جداگانه با منطق رنگی خودش است، نه فیلتر معکوس؛ این هم دلیلی است که در روندهای طراحی ۲۰۲۶ حالت تاریک به‌عنوان مهارت مستقل دیده می‌شود.
دو انگیزهٔ واقعی کاربر هم بدانید تا طراحی‌تان هدفمند شود: اول، راحتی چشم در محیط‌های کم‌نور و شبانه که بیشترین استفاده از حالت تاریک همین است؛ دوم، مصرف باتری در نمایشگرهای OLED که پیکسل‌های سیاهِ واقعی، تقریباً هیچ انرژی نمی‌گیرند. یعنی حالت تاریکِ خوب، هر دو را بهینه می‌کند: راحت‌تر برای چشم و سبک‌تر برای باتری.
سطح‌بندی رنگ‌ها به‌جای سیاه مطلق
اولین قاعدهٔ فنی: در حالت تاریک، از مشکی خالص (#000000) برای پس‌زمینهٔ اصلی استفاده نکنید. به‌جایش، خاکستری‌های بسیار تیره با ته‌مایهٔ رنگ برند بگذارید. یک سیستم نمونهٔ استاندارد که می‌توانید عیناً استفاده کنید: پس‌زمینهٔ اصلی صفحه #0F172A (آبی-خاکستری خیلی تیره)، سطح کارت‌ها #1E293B، سطح بالاتر مثل مودال و منو #334155 و حاشیه‌ها #334155 با شفافیت کمتر. منطق ساده اما حیاتی: در حالت روشن، عمق با سایه ساخته می‌شود اما در حالت تاریک، عناصر بالاتر باید روشن‌تر باشند؛ صفحه که تیره‌ترین است، کارت روشن‌تر و مودال روشن‌تر از همه.
این چهار سطح را همان‌طور که در ساخت پالت رنگ از یک رنگ پایه برای حالت روشن ساختید، برای حالت تاریک هم مستند کنید؛ اگر از متغیرهای فیگما استفاده می‌کنید، هر رنگ دو مقدار دارد (light و dark) و تعویض تم، فقط عوض‌کردن مجموعهٔ متغیرهاست. نکتهٔ ظریف: حاشیه‌ها در حالت تاریک به‌جای مشکی، روشن‌تر از پس‌زمینه‌اند (مثلاً سفید با شفافیت ۱۰٪) چون لبهٔ تیره روی زمینهٔ تیره، اصلاً دیده نمی‌شود.
رنگ‌های برند در تاریکی: کم‌اشباع و روشن‌تر
رنگ اصلی برند شما برای پس‌زمینهٔ روشن تنظیم شده؛ همان رنگ در تیرگی، یا محو می‌شود یا آزاردهنده می‌شود. قاعدهٔ تنظیم: اشباع را کم کنید و روشنایی را بیشتر. مثال عددی: آبی برند #2563EB در حالت روشن، در حالت تاریک باید به چیزی مثل #60A5FA تبدیل شود؛ همان فام، اما روشن‌تر و ملایم‌تر. قرمز برند #DC2626 به #F87171 و سبز #16A34A به #4ADE80. برای متن‌ها و دکمه‌ها روی سطح تیره، این نسخه‌های روشن را استفاده کنید چون چشم در تاریکی، رنگ‌های اشباع را قوی‌تر و خشن‌تر می‌بیند.
یک تست سریع هم برای هر رنگ تأکید: آن را در کوچک‌ترین سطح استفاده (یک بج، یک آیکون) روی هر چهار سطح تیره بگذارید؛ اگر در سطح #0F172A خوب دیده می‌شود اما روی #334155 گم می‌شود، یک پله روشن‌ترش کنید. و مراقب رنگ‌های معنایی باشید: سبز موفقیت و قرمز خطا باید در حالت تاریک هم قابل تفکیک باشند، نه فقط با ابزار؛ منطق کامل انتخاب در اصول ترکیب رنگ برای محتوای دیجیتال آمده است.
متن، کنتراست و معیارهای عددی
متن اصلی در حالت تاریک، سفید مطلق نباشد؛ خاکستری بسیار روشن مثل #F1F5F9 یا سفید با شفافیت ۸۷٪ استاندارد رایج است. متن ثانویه #94A3B8 و متن غیرفعال پایین‌تر از آن. دلیل این «سفیدِ نصفه»، پدیدهٔ هاله (Halation) است: متن سفید خالص روی مشکی، برای چشم لرزش نوری ایجاد می‌کند و خوانایی پایین می‌آید. نسبت کنتراست متن اصلی باید حداقل ۴.۵ به ۱ باشد و متن درشت ۳ به ۱؛ همان معیارهای WCAG که در طراحی در دسترس با کنتراست مناسب کامل توضیح داده شده‌اند — با این تفاوت مهم که در حالت تاریک، معیار «بیشتر بودن کنتراست» همیشه بهتر نیست؛ کنتراست ۱۵ به ۱ (سفید روی مشکی) از نظر خوانایی و راحتی، بدتر از ۱۲ به ۱ است.
قاعدهٔ مهم دوم که در پروژه‌های واقعی فراموش می‌شود: اجزای تعاملی (دکمه، لینک، ورودی فرم) باید در هر دو حالت واضحاً تعاملی به‌نظر برسند. دکمهٔ اصلی در حالت روشن، پس‌زمینهٔ رنگ برند با متن روشن دارد؛ در حالت تاریک، همان دکمه با نسخهٔ روشن‌ترِ رنگ برند کار می‌کند اما اگر برند شما خودش تیره است (مثل سرمه‌ای)، در حالت تاریک باید استراتژی معکوس شود: پس‌زمینهٔ روشن و متن تیره. این تصمیم را یک بار بگیرید و در سیستم رنگ پروژه مستندش کنید.
تصاویر، سایه‌ها و جزئیات فراموش‌شده
سه جزئیات که اکثر طراحی‌های تاریکِ تازه‌کار را لو می‌دهند: سایه‌ها در تیرگی تقریباً نامرئی‌اند؛ به‌جایش از حاشیهٔ روشنِ کم‌شفاف یا هالهٔ نور (Glow) با رنگ برند استفاده کنید. تصاویر و اسکرین‌شات‌های روشن در صفحهٔ تاریک مثل چراغ‌اغازی می‌درخشند؛ به آن‌ها فیلتر روشنایی بدهید (مثلاً brightness حدود ۸۰٪) یا پس‌زمینهٔ روشن با گوشهٔ گرد بدهید تا نرم شود. نمودارها و نقشه‌ها هم باید نسخهٔ تاریک داشته باشند؛ نمودار با پس‌زمینهٔ سفید وسط داشبورد تیره، مصداق کامل بی‌توجهی است.
جزئیات ریزتر برای نهایی‌کارها: حالت هوور روی آیتم‌های لیست در تاریکی باید روشن‌تر از زمینه باشد نه تیره‌تر؛ تصویر خالی (Empty State) با شکل‌های تیره روی زمینهٔ تیره، هیچی نیست؛ و رنگ لینک‌ها باید از متن معمولی متمایز بماند. هرکدام از این‌ها کوچک است اما کنار هم، تفاوت «حالت تاریک واقعی» و «پرسش‌های بعدی کاربران» را می‌سازند.
پیاده‌سازی و تست نهایی
در فیگما، دو مجموعهٔ کامل صفحه نسازید که با هر تغییر، دوبار کار کنید؛ با متغیرهای رنگ (Variables) و مود تاریک، یک فایل و دو تم داشته باشید. هر رنگ به‌عنوان متغیر تعریف شده با دو مقدار light/dark و تعویض تم از پنل، یک ثانیه طول می‌کشد. برای تست هم سه سناریوی واقعی را چک کنید: صفحه را شب در اتاق تاریک ببینید (لکه‌های روشن و متن‌های ناخوانا بیرون می‌آیند)، در روز با صفحه‌نمایش روشن مقایسه کنید (سلسله‌مراتب نباید عوض شده باشد) و هر دو حالت را روی موبایل امتحان کنید چون کاربر واقعی حالت تاریک را بیشتر روی موبایل و شب استفاده می‌کند.
چک‌لیست نهایی: پس‌زمینهٔ اصلی تیره اما نه مشکی مطلق؛ سه سطح ارتفاع رنگی مشخص؛ رنگ‌های برند کم‌اشباع و روشن‌تر؛ متن اصلی ۸۷٪ روشنی و کنتراست بین ۴.۵ تا ۱۲؛ سایه‌ها با حاشیه یا هاله جایگزین شده؛ تصاویر روشن تعدیل شده؛ و همهٔ اجزای تعاملی در هر دو حالت واضح. اگر این هفت مورد تیک بخورد، حالت تاریک شما نه یک ترند، که یک لطف واقعی به چشم‌های شب‌بیدار کاربرانتان است — و همین حس مراقبت، همان چیزی است که طراحی خوب را از طراحی زیبا جدا می‌کند.
مطالب مرتبط
برای عمیق‌تر شدن در این موضوع، پیشنهاد می‌کنیم این مطالب را هم بخوانید:
این مطلب برایتان مفید بود؟
با پسندیدن، به ما کمک می‌کنید مطالب بهتری منتشر کنیم.
