Home-theater-designers
اكتسبت واجهات المستخدم المظلمة شعبية ، وتوفر العديد من التطبيقات الآن خيار التبديل بين الوضع الفاتح والداكن. ومع ذلك ، يمكن أن يكون تنفيذ واجهة مستخدم مظلمة مهمة صعبة تتطلب اهتمامًا دقيقًا بالألوان والخطوط والصور والتباعد المستخدم.
يمكن أن تؤدي أي أخطاء في هذه العناصر إلى تجربة مستخدم سيئة. يجب أن تساعدك النصائح التالية عند تصميم أول واجهة مستخدم مظلمة.
اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى
1. لا تستخدم Pure Black
عند تصميم واجهة مستخدم داكنة ، تجنب استخدام الخلفيات السوداء النقية. من الأفضل استخدام ظل رمادي غامق. على سبيل المثال، موضوع التصميم متعدد الأبعاد من Google توصي باللون # 121212.
يمكن أن تحتوي الخلفية السوداء المقترنة بنص أبيض على قدر كبير من التباين وتتسبب في إجهاد العين. بدلاً من ذلك ، يمكن للظلال الداكنة من الرمادي إظهار الظلال والعمق والارتفاع بسهولة.
2. تأكد من إرشادات WCAG 2.0 تلبية تباين النص
اختر مجموعة ألوان تقدم مستوى مناسبًا من التباين ، بحيث يكون النص مقروءًا. تنص إرشادات WCAG 2.0 على أن النص أو الصور الخاصة بالنص يجب أن يكون لها نسبة تباين لا تقل عن 4.5: 1 مع نص كبير (على الأقل 18 نقطة أو 14 نقطة غامق) يجب أن يكون لها نسبة تباين لا تقل عن 3: 1.
هناك العديد من الأدوات للتحقق من تباين الألوان ، بما في ذلك موجة امتداد Chrome الذي يتحقق أيضًا من مدى إمكانية الوصول إلى الألوان.
3. اختر نمط الخط الصحيح
يجب عليك أيضًا مراعاة أنماط خط النص بما في ذلك الحجم والوزن وارتفاع السطر. إذا كنت تبحث عن خيارات الخطوط ، فلا تنسَ وجودها الكثير من المواقع التي تقدم خطوطًا مجانية . بالنسبة لحجم الخط ، استخدم القيم الكافية للتأكد من أن النص واضح ومرئي على خلفية داكنة.
ضع في اعتبارك الأنماط التالية لصفحة الويب:
body {
font-family: "Courier New", monospace;
font-size: 12px;
font-weight: 200;
line-height: 1;
color: #333333;
}
من الصعب قراءة مجموعة الخطوط وحجم الخط صغير جدًا ووزن الخط خفيف جدًا. تجعل هذه الأنماط من الصعب قراءة الصفحة كما ترى من لقطة الشاشة أدناه.
فيما يلي بعض الأنماط المناسبة التي يمكنك استخدامها بدلاً من ذلك.
body {
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
background-color: #121212;
}
وها هي الصفحة الناتجة:
4. تجنب الألوان المشبعة
يمكن أن تكون الألوان المشبعة مشرقة جدًا وضبابية على الخلفيات الداكنة. بدلاً من ذلك ، استخدم ألوانًا أقل كثافة وأقل كتمًا. بهذه الطريقة تقوم بإنشاء واجهة مستخدم تحتوي على نص مرئي.
للتوضيح ، ضع في اعتبارك هذين النمطين من الأزرار:
/* Saturated blue */
.btn-saturated-blue {
background-color: #121212;
color: #0e0bf6;
}
/* Muted blue */
.btn-muted-blue {
background-color: #121212;
color: #4c5ab3;
}
قد يكون اللون الأزرق المشبع ساطعًا جدًا ويصعب قراءته على خلفية داكنة ، بينما يوفر اللون الأزرق الصامت تباينًا جيدًا ويسهل قراءته.
أداة مثل قابل للتلوين مفيد في إنشاء مجموعات ألوان تتبع إرشادات إمكانية الوصول.
5. استخدم مسافة سلبية لمنع إنشاء واجهة مستخدم ثقيلة
يمكن أن تجعل لوحة الألوان الداكنة واجهة المستخدم تبدو ثقيلة للمستخدمين. عند استخدامها بشكل صحيح ، يمكن أن تساعدك المساحة السلبية في إبراز عناصر واجهة المستخدم المهمة وتسهيل مسح النص ضوئيًا. يمكن أن تجعل التباعد الكافي التصميم أكثر نظافة وحداثة.
خذ على سبيل المثال، الصفحة المقصودة لشركة Apple . تجعل المسافة بين العناصر الصفحة تبدو حديثة جدًا ومثيرة للاهتمام بصريًا ، مما يسمح للعناصر المهمة بالظهور.
6. استخدم ظلال ألوان مختلفة لإضافة عمق إلى واجهة المستخدم
عند تصميم واجهات مستخدم خفيفة ، يمكنك استخدام الظلال لإضافة عمق وارتفاع للعناصر. ومع ذلك ، بسبب الخلفيات المظلمة ، يصعب أحيانًا رؤية الظلال في واجهات المستخدم المظلمة.
يمكنك تحقيق العمق في واجهة مستخدم داكنة باستخدام ظلال متعددة من الألوان الداكنة. على سبيل المثال ، بدلاً من مجرد خلفية داكنة واحدة ، يمكنك إضافة ظلال أفتح من نفس اللون إلى عناصر مختلفة مثل الأزرار والشروط.
كيفية تحويل ملف pdf إلى Word على نظام التشغيل mac
7. تأكد من تطابق واجهة المستخدم المظلمة
لا تحتاج إلى استخدام نفس الصور في الوضع الفاتح والوضع الداكن. يمكنك استخدام الوضع المظلم استعلامات وسائط CSS لتبديل الصور التي تتطابق مع واجهة المستخدم المظلمة عندما يقوم المستخدم بالتبديل إلى الوضع المظلم.
على سبيل المثال ، لتطبيق نمط خلفية معين على أقسام من صفحتك في الوضع المظلم ، يمكنك استخدام اسم فئة .bgpattern وإضافة الكود التالي إلى ورقة الأنماط الخاصة بك.
@media (prefers-color-scheme: dark) {
/* Apply this style in dark mode only */
.bgpattern {
background-image: url("/dark.jpg");
}
}
يضمن استعلام الوسائط هذا عرض صورة الخلفية المشار إليها فقط عندما يكون نظام الألوان المفضل للمستخدم داكنًا.
متى تستخدم واجهة مستخدم مظلمة
تعد تصميمات واجهة المستخدم المظلمة طريقة رائعة لإضفاء جمالية حديثة على موقع الويب أو التطبيق الخاص بك. يمكنهم أيضًا تقليل إجهاد العين والحفاظ على عمر البطارية. ومع ذلك ، فإن واجهات المستخدم المظلمة ليست مناسبة لكل تطبيق ، ويجب عليك دائمًا مراعاة العلامة التجارية وقاعدة المستخدمين.
بشكل عام ، تعد واجهات المستخدم المظلمة هي الأنسب للعلامات التجارية التي تعطي الأولوية للفخامة أو المكانة أو البساطة أو الغموض. يمكن أن تكون أيضًا خيارًا رائعًا للوحات المعلومات وأدوات التصور.