الوضع الداكن
طريقة لعرض شاشات الموقع أو التطبيق بخلفية داكنة ونصوص فاتحة، تريح العين في الإضاءة المنخفضة، وتقلل استهلاك البطارية في كثير من الهواتف الحديثة.
يُعرف أيضًا بـ الوضع الليلي الوضع المظلم المظهر الداكن الثيم الداكن الواجهة الداكنة Dark Mode Dark Theme
التعريف
ما هو الوضع الداكن؟
تفتح هاتفك في السرير قبل النوم، والغرفة مطفأة الأنوار، فتضيء الشاشة البيضاء في وجهك كأنها مصباح. هذا الموقف بالضبط هو سبب وجود الوضع الداكن.
الوضع الداكن (Dark Mode) طريقة لعرض شاشات الموقع أو التطبيق بخلفية داكنة ونصوص وأيقونات فاتحة، بدل النص الأسود على الخلفية البيضاء المعتادة. المحتوى يبقى كما هو: نفس الأزرار ونفس القوائم ونفس الكلمات. الذي يتغير هو الألوان فقط، حتى تكون الشاشة هادئة على العين حين يكون الضوء حولك خافتا.
يسمى أحيانا الوضع الليلي أو المظهر الداكن. وصار اليوم موجودا في أنظمة الهواتف والحواسيب، وفي أغلب التطبيقات التي نستخدمها كل يوم، لذلك ينتظره الناس من أي موقع أو تطبيق جديد.
كيف يعمل الوضع الداكن؟
في الهاتف والحاسوب إعداد عام يختار فيه المستخدم بين المظهر الفاتح والمظهر الداكن، وبعض الأجهزة تبدل بينهما تلقائيا عند غروب الشمس. الموقع أو التطبيق المصمم جيدا يقرأ هذا الإعداد ويفتح بالألوان المناسبة من أول لحظة.
وهناك طريقة ثانية: زر صغير داخل الموقع أو التطبيق، غالبا على شكل شمس وهلال، يضغطه المستخدم ليبدل بين الوضعين بنفسه. وبعد ذلك يتذكر النظام اختياره، فلا يعود إلى الوضع الفاتح في كل زيارة.
من الداخل، يجهز المصمم مجموعتين من الألوان لكل شيء في الواجهة: لون الخلفية، ولون النص، ولون الأزرار، ولون الحدود والجداول. ثم يختار النظام المجموعة المناسبة حسب الوضع. تشبه الفكرة غرفة لها إضاءتان، واحدة للنهار وواحدة للمساء، والأثاث في مكانه لا يتحرك.
لماذا يهمك الوضع الداكن؟
إذا كنت صاحب موقع أو تطبيق، فزوارك يفتحونه في أوقات مختلفة من اليوم. كثير منهم يتصفح في الليل. والوضع الداكن يغير تجربتهم في هذه الساعات بشكل واضح:
- راحة العين في الإضاءة المنخفضة: الشاشة الداكنة لا تبهر النظر في غرفة مظلمة، فيستطيع القارئ أن يكمل المقال أو يتصفح المنتجات مدة أطول دون انزعاج.
- توفير بطارية الهاتف: في الهواتف ذات شاشات OLED، كل نقطة سوداء تقريبا مطفأة ولا تستهلك طاقة. لذلك يقل استهلاك البطارية عند استخدام الوضع الداكن على هذه الشاشات.
- تعب أقل لمن يعمل ساعات طويلة: الموظف الذي يقضي يومه أمام لوحة تحكم أو نظام إدارة يشعر بالفرق في آخر النهار، خاصة في المناوبات الليلية.
- احترام اختيار المستخدم: من اختار المظهر الداكن في هاتفه ثم فتح موقعك فوجده أبيض ساطعا، سيشعر أن الموقع لا ينتبه إليه.
هل يعني هذا أن الوضع الداكن أفضل دائما؟ لا. في ضوء الشمس أو في مكتب مضاء جيدا، يقرأ كثير من الناس النص الأسود على الأبيض بسهولة أكبر. الهدف أن يكون الاختيار بيد المستخدم.
الفرق بين الوضع الفاتح والوضع الداكن
| الجانب | الوضع الفاتح | الوضع الداكن |
|---|---|---|
| الخلفية | بيضاء أو فاتحة | رمادية داكنة أو كحلية |
| النص | أسود أو داكن | أبيض مائل إلى الرمادي |
| أنسب وقت | النهار والأماكن المضاءة | الليل والغرف قليلة الإضاءة |
| البطارية | استهلاك عادي | استهلاك أقل في شاشات OLED |
| قراءة النصوص الطويلة | أسهل لأغلب الناس في الضوء | أريح في الظلام |
كيف يصمم وضع داكن مريح للعين؟
قلب الألوان فقط يعطي نتيجة سيئة في الغالب. الوضع الداكن الذي يرتاح له الناس يحتاج قرارات صغيرة كثيرة:
- رمادي داكن بدل الأسود الكامل: الأسود التام مع الأبيض الناصع يصنع تباينا حادا يتعب العين. الخلفية الرمادية الداكنة أو الكحلية أهدأ.
- نص فاتح غير ناصع: الأبيض المائل قليلا إلى الرمادي أريح في القراءة من الأبيض الصافي.
- تباين كاف: التباين هو الفرق بين لون النص ولون الخلفية. إذا قل كثيرا صعبت القراءة، خاصة على كبار السن وضعاف النظر. معيار WCAG للوصول يضع حدا أدنى لهذا الفرق.
- ألوان العلامة التجارية بدرجة أخف: اللون الأزرق أو الأحمر القوي يبدو صارخا على الخلفية الداكنة، فيحتاج درجة أهدأ قليلا.
- شعار وصور تناسب الخلفيتين: الشعار الأسود يختفي على خلفية داكنة، لذلك يحتاج نسخة فاتحة. والصور الساطعة جدا قد تحتاج تخفيفا بسيطا.
- الجداول والرسوم البيانية: في لوحات التحكم يجب مراجعة ألوان الأعمدة والخطوط حتى تبقى مفهومة في الوضعين.
أخطاء شائعة عند إضافة الوضع الداكن
- تفعيل الوضع الداكن على الصفحة الرئيسية ونسيان صفحات أخرى، مثل صفحة الدفع أو نافذة تسجيل الدخول، فتظهر بيضاء فجأة.
- نصوص رمادية باهتة على خلفية داكنة لا يكاد أحد يقرؤها.
- عدم حفظ اختيار المستخدم، فيعود الموقع إلى الوضع الفاتح في كل مرة.
- تجاهل إعداد الجهاز، وإجبار الجميع على وضع واحد.
- عدم تجربة الوضع الداكن على هواتف حقيقية قبل الإطلاق، مع أن الألوان تبدو مختلفة من شاشة إلى أخرى.
- إضافته في آخر المشروع بعد اكتمال التصميم، فيتحول إلى ترقيع بدل أن يكون جزءا من الواجهة.
الوضع الداكن في المواقع والتطبيقات التي نبنيها
في Linkysoft نخطط للوضع الداكن من أول يوم في التصميم، لا بعد الانتهاء منه. كل موقع نبنيه ضمن خدمة تصميم وتطوير المواقع يأتي بوضع داكن مدمج، مع دعم العربية والكتابة من اليمين إلى اليسار ومعيار WCAG 2.2 للوصول، ونختبره على هواتف حقيقية قبل الإطلاق.
وفي تطوير تطبيقات الهاتف نصمم التطبيق من الصفر بوضعين فاتح وداكن وشاشات سهلة الوصول، لتطبيقات iPhone وAndroid، ثم ننشره على App Store وGoogle Play ونتابع تحديثه.
أما إذا كان مشروعك نظام إدارة يعمل عليه فريقك طوال اليوم، مثل نظام مبيعات أو مخزون أو موارد بشرية، فنبنيه ضمن خدمة تطبيقات الويب وأنظمة الإدارة حول طريقة عمل شركتك، ويعمل على كل الأجهزة. وهنا تستحق راحة العين أن تكون جزءا من الخطة، لأن الشاشة نفسها تبقى مفتوحة أمام الموظف ثماني ساعات أو أكثر.
هل تفكر في موقع أو تطبيق جديد؟ ابدأ باستشارة مجانية معنا، ونحدد معا ما يحتاجه مستخدموك في النهار والليل.
أسئلة حول الوضع الداكن
ما الفرق بين الوضع الداكن والوضع الفاتح؟
هل الوضع الداكن يوفر بطارية الهاتف فعلا؟
هل الوضع الداكن أفضل لصحة العين؟
كيف يعرف الموقع أن المستخدم يفضل الوضع الداكن؟
هل يكفي أن أعكس ألوان موقعي لأحصل على وضع داكن؟
هل أحتاج الوضع الداكن في نظام إدارة أو لوحة تحكم؟
هل يمكن إضافة الوضع الداكن إلى موقع أو تطبيق قائم؟
ما زلت غير متأكد كيف ينطبق هذا على مشروعك؟
أخبرنا بما تبنيه وسنجيبك بلغة واضحة.