أو ما يجب مراعاته عند تطوير الوضع المظلم لتطبيق أو موقع ويب
أظهر عام 2018 أن الأوضاع المظلمة في الطريق. والآن بعد أن وصلنا إلى منتصف عام 2019، يمكننا أن نقول بكل ثقة: إنهم هنا، وهم في كل مكان.
لنبدأ بحقيقة أن الوضع المظلم ليس مفهومًا جديدًا على الإطلاق. لقد تم استخدامه لفترة طويلة. وفي يوم من الأيام، في الواقع، لفترة طويلة، كان هذا هو الشيء الوحيد الذي استخدموه: كانت الشاشات من النوع "الأخضر على الأسود"، ولكن فقط لأن الطلاء المضيء بالداخل ينبعث وهجًا أخضر عند تعرضه للإشعاع .
ولكن حتى بعد إدخال الشاشات الملونة، استمر الوضع المظلم في الوجود. لماذا هو كذلك؟
هناك دافعان رئيسيان يفسران سبب استعجال كل شخص ثانٍ اليوم لإضافة سمة داكنة إلى تطبيقه. بادئ ذي بدء: أجهزة الكمبيوتر في كل مكان. في كل مكان ننظر إليه هناك نوع من الشاشة. نستخدم أجهزتنا المحمولة من الصباح حتى وقت متأخر من الليل. يؤدي وجود الوضع المظلم إلى تقليل إجهاد العين عندما تكون في السرير قبل الذهاب إلى السرير "لآخر مرة" تقوم فيها بالتمرير عبر خلاصتك الاجتماعية. الشبكات. (إذا كنت مثلي، فقد تعني عبارة "آخر مرة" تمريرًا مدته 3 ساعات . الوضع المظلم؟ نعم من فضلك! )
سبب آخر هو تقنيات إنتاج العرض الجديدة. تم تجهيز جميع النماذج الرائدة للشركات الكبيرة - Apple، Google، Samsung، Huawei - بشاشات OLED، والتي، على عكس شاشات الكريستال السائل، لا تتطلب الإضاءة الخلفية. وهذه أخبار جيدة حقًا لبطاريتك. تخيل أنك تشاهد صورة مربع أسود على هاتفك؛ مع شاشة LCD، ستضيء الإضاءة الخلفية الشاشة بأكملها على الرغم من أن معظمها أسود. ولكن عند عرض نفس الصورة على شاشة OLED، يتم ببساطة إيقاف تشغيل وحدات البكسل التي يتكون منها المربع الأسود. وهذا يعني أنهم لا يستهلكون الطاقة على الإطلاق.
هذه الأنواع من شاشات العرض تجعل الأوضاع المظلمة أكثر إثارة للاهتمام. باستخدام واجهة مظلمة، يمكنك إطالة عمر بطارية جهازك بشكل كبير. . تسير الأوضاع المظلمة بالطبع جنبًا إلى جنب مع تغييرات واجهة المستخدم، لذا دعونا نحسن معرفتنا!
الأوضاع المظلمة 101
بادئ ذي بدء: "الظلام" ليس مثل "الأسود". لا تحاول استبدال الخلفية البيضاء بأخرى سوداء، لأن هذا سيجعل من المستحيل استخدام الظلال. سيكون تصميم مثل هذا مسطحًا للغاية (بطريقة سيئة).
من المهم أن تضع في اعتبارك المبادئ الأساسية للتظليل/الإضاءة. يجب أن تكون الكائنات الأكثر ارتفاعًا أخف في الظل، ومحاكاة الإضاءة والتظليل الواقعيين. وهذا يجعل من السهل التمييز بين المكونات المختلفة وتسلسلها الهرمي.
مربعان رماديان متطابقان لهما ظل، أحدهما على خلفية سوداء بنسبة 100%، والآخر على #121212. ومع ارتفاع الجسم، يصبح لونه أفتح من اللون الرمادي.
في المظهر الداكن، لا يزال بإمكانك العمل باستخدام اللون الأساسي العادي طالما أن التباين جيد. دعونا نشرح مع مثال.
في هذه الواجهة، الإجراء الرئيسي هو الزر الأزرق الكبير في الشريط السفلي. لا توجد مشكلة من حيث التباين عند التبديل بين الوضع الفاتح أو الداكن، فلا يزال الزر ملفتًا للنظر، والأيقونة واضحة، وبشكل عام كل شيء على ما يرام.
عند استخدام نفس اللون بطرق مختلفة، على سبيل المثال في النص، ستكون هناك مشاكل. حاول استخدام ظل أقل تشبعًا (كثيرًا) من اللون الرئيسي، أو ابحث عن طرق أخرى لدمج ألوان العلامة التجارية في الواجهة.
اليسار: اللون الأحمر على الأسود يبدو سيئًا. الحق: تقليل التشبع وكل شيء يبدو جيدا. — تقريبًا. ترجمة
وينطبق الشيء نفسه على أي ألوان قوية أخرى قد تكون استخدمتها، مثل ألوان التحذير أو الخطأ. تستخدم Google طبقة بيضاء بنسبة 40% فوق لون الخطأ الافتراضي في ملفاتها عند التبديل إلى الوضع المظلم. تعد هذه نقطة انطلاق جيدة جدًا لأنها ستعمل على تحسين مستويات التباين لتتوافق مع معايير AA. يمكنك، بالطبع، تغيير الإعدادات دائمًا كما تراه مناسبًا، ولكن تأكد من التحقق من مستويات التباين. بالمناسبة، هناك أداة مفيدة لهذا الغرض وهي البرنامج المساعد Sketch - ، مما يوضح بالضبط مقدار التباين الموجود بين الطبقتين.
ماذا عن النص؟
كل شيء بسيط هنا: لا ينبغي أن يكون أي شيء أسود 100% وأبيض 100% والعكس صحيح. يعكس اللون الأبيض موجات الضوء بجميع أطواله الموجية، أما اللون الأسود فيمتصه. إذا قمت بوضع نص أبيض بنسبة 100% على خلفية سوداء بنسبة 100%، فسوف تعكس الحروف الضوء وتتشوه وتصبح أقل وضوحًا، مما سيؤثر سلبًا على إمكانية القراءة.
وينطبق الشيء نفسه على الخلفية البيضاء بنسبة 100%، والتي تعكس قدرًا كبيرًا من الضوء بحيث لا يمكن التركيز بشكل كامل على الكلمات. حاول تنعيم اللون الأبيض قليلاً، واستخدم اللون الرمادي الفاتح للخلفيات والنص على الخلفيات السوداء. وهذا سوف يقلل من إجهاد العين، ويمنع
الوضع المظلم موجود هنا ولن يختفي
إن مقدار الوقت الذي نقضيه أمام الشاشات في تزايد مستمر، وكل يوم جديد تظهر شاشات جديدة في حياتنا، منذ لحظة استيقاظنا وحتى نومنا. وهذه ظاهرة جديدة إلى حد ما؛ فأعيننا ليست معتادة بعد على هذه الزيادة في وقت الشاشة في وقت متأخر من المساء. هذا هو المكان الذي يلعب فيه الوضع المظلم. مع تقديم هذه الميزة في macOS وMaterial Design (وعلى الأرجح في iOS)، نعتقد أنها ستصبح عاجلاً أم آجلاً هي الميزة الافتراضية في جميع التطبيقات، سواء المحمولة أو سطح المكتب. ومن الأفضل أن تكون مستعدًا لذلك!
السبب الوحيد لعدم تطبيق الوضع المظلم هو عندما تكون متأكدًا تمامًا بنسبة 100% من أن التطبيق الخاص بك يُستخدم حصريًا في ضوء النهار الساطع. ولكن هذا لا يحدث في كثير من الأحيان.
تجدر الإشارة إلى بعض الأشياء التي ستتطلب اهتمامًا خاصًا عند تطبيق الوضع المظلم، بما يتجاوز المبادئ الأساسية التي تم تلخيصها سابقًا.
فيما يتعلق بإمكانية الوصول، فإن الوضع المظلم ليس هو الأكثر ملاءمة، نظرًا لأن التباين أقل عمومًا، وهذا بدوره لا يحسن إمكانية القراءة على الإطلاق.
لكن تخيل أنك تستعد للنوم، وترغب حقًا في النوم، ولكن قبل أن تغفو مباشرة، تتذكر أنك بحاجة إلى إرسال رسالة مهمة للغاية إلى شخص ما والتي لا يمكنها الانتظار حتى لليلة واحدة. أمسك بهاتفك، وقم بتشغيله واااه... الخلفية المضيئة لـ iMessage الخاص بك ستبقيك مستيقظًا لمدة 3 ساعات أخرى. على الرغم من أن النص الفاتح على خلفية داكنة لا يعتبر الأكثر سهولة للوصول، إلا أن الحصول على وضع مظلم في هذه الثانية سيكون من شأنه زيادة الراحة بمقدار مليون. كل هذا يتوقف على الوضع الذي يكون فيه المستخدم في الوقت الحالي.
لهذا السبب نعتقد الوضع المظلم التلقائي هذه فكرة رائعة. يتم تشغيله في المساء وينطفئ في الصباح. لا يحتاج المستخدم حتى إلى التفكير في الأمر، وهو أمر مريح للغاية. لقد قام تويتر بعمل رائع من خلال إعدادات الوضع المظلم. بالإضافة إلى ذلك، لديهم فقط وضع مظلم ووضع أكثر قتامة لجميع شاشات OLED هذه، مما يوفر البطارية وكل ما يتعلق بها. من المهم أن نلاحظ هنا: امنح المستخدم الفرصة للتبديل يدويًا وقتما يريد: ليس هناك ما هو أسوأ من تغيير الواجهة تلقائيًا دون القدرة على التبديل مرة أخرى.
يحتوي تويتر على وضع مظلم تلقائي يتم تشغيله في المساء وإيقافه في الصباح.
أيضًا، عند تطوير موضوع ما، يجدر بنا أن نأخذ في الاعتبار أن بعض الأشياء ببساطة لا يمكن جعلها مظلمة.
خذ محرر نصوص مثل الصفحات. يمكنك جعل الواجهة داكنة، لكن الورقة نفسها ستكون بيضاء دائمًا، لمحاكاة ورقة حقيقية.
الصفحات التي تم تمكين الوضع المظلم فيها
وينطبق الشيء نفسه على جميع أنواع برامج تحرير إنشاء المحتوى، مثل Sketch أو Illustrator. على الرغم من إمكانية جعل الواجهة داكنة، إلا أن اللوحة الفنية التي تعمل بها ستكون دائمًا باللون الأبيض بشكل افتراضي.
قم بالرسم في الوضع المظلم ولا يزال لديك لوح رسم أبيض ساطع.
لذلك، بغض النظر عن التطبيق، نعتقد أن الأوضاع المظلمة ستكون موجودة في نظام التشغيل الذي تستخدمه، مما يعني أنه من الأفضل الاستعداد للمستقبل. سيكون الظلام.
إذا كنت تريد معرفة المزيد حول تطوير واجهات المستخدم المظلمة، فتأكد من مراجعة الإرشادات ، كان هذا مصدرنا الرئيسي للمعلومات لهذه المقالة.
المصدر: www.habr.com