في دائرة الضوء: مبادئ تصميم واجهة المستخدم المظلمة

تُرى تصميمات واجهة المستخدم المظلمة على نطاق واسع ، من شاشات الهواتف المحمولة إلى أجهزة التلفزيون الضخمة. يمكن للنسق الداكن أن يعبر عن القوة والرفاهية والرقي والأناقة. ومع ذلك ، فإن تصميم واجهات المستخدم المظلمة يمثل تحديات متعددة ولن يلبي التوقعات إذا تم تنفيذه بشكل سيئ. قبل الغوص في "الجانب المظلم" ، يجب على المصممين أن ينظروا قبل أن يقفزوا.

يقول الفيزيائيون إن الأسود ليس لونًا في الحقيقة ؛ إنه غياب الضوء . في تجاربه التي تسليط ضوء الشمس من خلال المناشير ، لم يدرجها السير إسحاق نيوتن حتى في طيف الألوان.

في علم نفس الألوان ، تمثل معظم الألوان أشياء مختلفة لأشخاص مختلفين. في الثقافات الغربية ، غالبًا ما يرتبط اللون الأسود بالموت والغموض والشر. غالبًا ما يرتبط اللون الأخضر بالنمو بسبب الطبيعة. يعتبر اللون الأزرق مهدئًا عالميًا تقريبًا لأنه مرتبط بالسماء والماء. اللون عاطفي.

الآثار الأخرى ثقافية. على سبيل المثال ، لا يزال اللون الأرجواني مرتبطًا بالرفاهية لأنه في العديد من الثقافات القديمة ، كانت الصبغة الأرجواني باهظة الثمن ونادرة - فقط الملوك هم الذين يمكنهم تحمل تكاليفها. لقد كان جزءًا مهمًا من روح العصر الثقافي لفترة طويلة بما يكفي لتصبح جزءًا من نفسية الإنسان .

تمثل المنتجات الرقمية ذات واجهات المستخدم المظلمة - المرتبطة بالقوة والأناقة والغموض - اتجاهًا هائلاً. بينما يُقال غالبًا أن الوضع المظلم يمكن أن يقلل إجهاد العين ، لا يوجد دليل على صحة ذلك. في ظل ظروف معينة ، من المفترض أيضًا أن يوفر عمر البطارية. لا تزال المظاهر المظلمة ، في أغلب الأحيان ، خيارًا جماليًا.

واجهة مستخدم مظلمة مقابل واجهة مستخدم فاتحة

ليست كل الواجهات مناسبة لموضوع داكن. يجب على المصممين النظر في ملاءمة العلامة التجارية والملاءمة الثقافية وعلم نفس اللون والتفكير في التأثير العاطفي قبل اختيار أحدهما. إنه عمل موازنة صعب.

في حين أن التطبيق المالي الذي يستهدف جيل الألفية قد يحقق عاملًا رائعًا مع مظهر مظلم ، فقد يكون غير مناسب لموقع ويب بنك كبير يستهدف عموم السكان. قد يصبح الثراء الشديد والظلام الشديد والأناقة أكثر إحباطًا عندما يكون كل ما يريده الناس هو التحقق من أرصدتهم ودفع الفاتورة.

من المعروف أن واجهات المستخدم المظلمة لتطبيق B2B SaaS صعبة التصميم. يمكن أن تبدو مكونات واجهة مستخدم الويب القياسية مثل جداول البيانات والأدوات والنماذج والقوائم المنسدلة غريبة على واجهة مستخدم مظلمة. نظرًا لأن العديد من أنظمة الألوان لا تعمل بشكل جيد مع واجهات المستخدم المظلمة ، فإن بعض العلامات التجارية والمنتجات - اعتمادًا على النوع والسياق والعوامل البيئية - ليست مناسبة تمامًا وقد تثبت أنها تمثل تحديًا لا يمكن التغلب عليه.

قد يجد المصممون الذين لم يعملوا مع تصميم واجهة المستخدم المظلمة من قبل ويقررون القفز بكلتا القدمين أنفسهم في مياه قاسية ومجهولة. في محيطات واجهات المستخدم المظلمة ، تكون المعايير عازمة ، والقواعد تتغير ، والمزالق كثيرة.

ومع ذلك ، هناك العديد من الأسباب الوجيهة لاستخدام واجهات المستخدم المظلمة:

• عندما يكون التصميم متناثرًا وبسيطًا مع أنواع قليلة فقط من المحتوى
• عندما يكون مناسبًا للسياق والاستخدام ، مثل تطبيقات الترفيه الليلي
• لخلق مظهر مثير ومذهل

وهناك سيناريوهات لا ينصح بها:

• عندما يكون هناك قدر كبير من النص (يصعب القراءة على خلفية داكنة)
• عندما يكون هناك الكثير من أنواع المحتوى المختلطة
• عندما يستدعي التصميم مجموعة واسعة من الألوان

التباين في تصميم واجهة المستخدم المظلمة

النسق الداكن ليس موضوعًا أسود. من الأفضل اعتباره موضوعًا "منخفض الإضاءة". يتمثل أحد الاهتمامات الرئيسية لواجهات المستخدم المظلمة في تحقيق تباين كافٍ بحيث يكون للعناصر المرئية فصل ويكون النص مقروءًا. يعتقد معظم المصممين أن استخدام اللون الأسود سيكون الأمثل لتحقيق تباين قوي. ومع ذلك ، من الأفضل عدم استخدام اللون الأسود الحقيقي (# 000000) للخلفيات أو ألوان السطح . من الأفضل حجز اللون الأسود لعناصر واجهة المستخدم الأخرى واستخدامه بشكل مقتصد. على سبيل المثال ، يمكن استخدام اللون الأسود الحقيقي لعناصر واجهة المستخدم الصغيرة أو الإطار المحيط.

يوصي المظهر الداكن لتصميم المواد من Google باستخدام اللون الرمادي الداكن (# 121212) كلون سطح ذو مظهر داكن "للتعبير عن الارتفاع والمساحة في بيئة ذات نطاق أوسع من العمق". بالإضافة إلى ذلك ، يوصي العديد من المصممين بإضافة صبغة زرقاء داكنة خفية إلى الرمادي الداكن عند تحديد نظام الألوان. تميل إلى إنشاء نغمة داكنة أفضل للشاشات الرقمية ولوحة ألوان داكنة أكثر إرضاءً لواجهة المستخدم.

تتمثل إحدى ميزات استخدام مجموعة من الألوان الرمادية في أنها تمنح المصممين مجالًا واسعًا لأنه يمكن التعبير عن نطاق أوسع من الألوان. تساعد اللوحة الرمادية أيضًا في تكوين العمق لأن الظلال المسقطة يمكن رؤيتها بسهولة أكبر مقابل الرمادي مقابل الأسود.

يجب إيلاء اهتمام خاص لتباين النص في واجهات المستخدم المظلمة.

تدعو إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) إلى "أن يكون للعرض المرئي للنص نسبة تباين لا تقل عن 4.5: 1 " ، باستثناء النص واسع النطاق ، والذي يجب أن يكون بنسبة تباين لا تقل عن 3: 1 . لذلك ، يحتاج المصممون إلى ضمان بقاء المحتوى مقروءًا بشكل مريح في الوضع المظلم.

من الجيد أيضًا اختبار التباين المناسب بين عناصر واجهة المستخدم الأخرى ، مثل البطاقات والأزرار والحقول والأيقونات على شاشات وأجهزة مختلفة. إذا كان هناك فصل غير محسوس بين عناصر واجهة المستخدم ، فإن التصميم يمتزج كثيرًا ويخاطر بأن يصبح باهتًا.

تركيز الانتباه: اللون

يبرز اللون في واجهات المستخدم المظلمة. من الأفضل استخدام المخططات ذات الألوان الفاتحة غير المشبعة. تجنب استخدام الألوان المشبعة في واجهات المستخدم الداكنة ، حيث يمكن أن تهتز بصريًا على الأسطح المظلمة. ما هو أكثر من ذلك ، كأفضل ممارسة ، تحتاج الألوان إلى اجتياز معيار AA الخاص بـ WCAG والذي يبلغ 4.5: 1 على الأقل عند استخدامها مع النص.

عند تحديد مخطط ألوان لواجهة مستخدم داكنة ، توصي Google بعدد محدود من لهجات الألوان للحفاظ على معظم المساحة المتاحة للأسطح المظلمة. يمكن أن يساعد استخدام الألوان التكميلية المنقسمة. يحتوي النظام على لون واحد مهيمن ولونان متجاوران مع تكملة اللون السائد. يؤدي القيام بذلك إلى توفير التباين المطلوب دون توتر نظام الألوان التكميلي.

يمكن أن يساعد نظام الألوان الصحيح في إنشاء تباين جيد. Colorable هي أداة مفيدة لتحديد مجموعات ألوان النص وألوان الخلفية المتوافقة مع إمكانية الوصول.

يجب أن يفي النص والعناصر الأساسية ، مثل الأزرار والرموز ، بمعايير الوضوح عند الظهور على خلفيات داكنة. كما هو موضح في تطبيق Jabra Sound + أعلاه ، يمكن استخدام ألوان أخرى غير الأبيض للنصوص والرموز.

يحتوي موقع تصميم المواد في Google على منشئ مفيد للوحة الألوان (ضمن "أدوات انتقاء الألوان") يمكن للمصممين من خلاله إنشاء لوحات ألوان وتطبيقها على واجهة المستخدم. يمكن أيضًا قياس مستوى إمكانية الوصول إلى مجموعات الألوان باستخدام أداة الألوان المصاحبة.

"استخدم ألوانًا شديدة التباين لتحسين إمكانية القراءة. تؤثر العديد من العوامل على إدراك اللون ، بما في ذلك حجم الخط ووزنه وسطوع اللون ودقة الشاشة وظروف الإضاءة. " إرشادات واجهة Apple البشرية

الأقل هو الأكثر: الاستفادة من المساحة السلبية

أحد العناصر الأساسية لتصميم واجهة المستخدم المظلمة الناجح هو الاستخدام الماهر للمساحة السلبية. إذا تم تصميمها بشكل سيئ ، فإن واجهات المستخدم المظلمة يمكن أن تجعل المنتجات الرقمية تبدو ثقيلة ومتعجرفة. لتحقيق التوازن ، يمكن للمصممين جعل واجهات المستخدم المظلمة أكثر خفة من خلال الاستفادة من المساحة السلبية ضمن تصميمات متفرقة وبسيطة. التصميم البسيط يتعلق بما ليس موجودًا بقدر ما هو موجود. عند استخدامها بمهارة ، ستجعل المساحة السلبية واجهة المستخدم المظلمة أكثر قابلية للفحص وتسمح للأشخاص باستيعاب المعلومات بسهولة أكبر.

قال الملحن الفرنسي كلود ديبوسي ذات مرة ، " الموسيقى هي المسافة بين النغمات ." نفس الشعور ينطبق على قابلية المسح - المسافة السلبية بين العناصر هي ما يجعل التخطيط يعمل. مقدار كبير من المساحة السلبية حول عناصر واجهة المستخدم هو ما يمنحها تعريفًا. إنه يركز على المحتوى المهم ويوفر مساحة التنفس اللازمة لضمان أن التصميم لا يشعر بالكثافة والفوضى. بدون مساحة للتنفس ، يكون الدماغ البشري أقل عرضة لمسح النقاط المهمة وأكثر عرضة للتجول.

واجهات مكتظة بالعديد من العناصر والنصوص هي لعنة تصميم واجهة المستخدم المظلمة عالية الجودة. من خلال التفكير بعناية في التسلسل الهرمي المرئي في واجهات المستخدم المظلمة ، يمكن للمصممين جعل إبداعاتهم أكثر سهولة في الفحص ، وبالتالي تحسين تجربة المستخدم.

كلمات التصميم: الطباعة

يتطلب كل جزء من النص في واجهات مستخدم مظلمة تمحيصًا. القلق ذو شقين: الوضوح والتباين. أولاً ، يتعلق الأمر بالحجم. يجب أن يكون النص كبيرًا بما يكفي لوضوح جيد (يصعب قراءة النص الصغير على الخلفيات الداكنة). ثانيًا ، يجب أن يكون هناك تباين كافٍ بين النص والخلفية.

يجعل توفر آلاف الخطوط الرقمية من السهل عرض الرسائل ذات التأثير للرؤوس والرسائل الرئيسية. يمكن للمصممين التخفيف من مشكلات قابلية القراءة عن طريق زيادة التباين وضبط حجم الخط وتباعد الأحرف وارتفاع السطر لنص أصغر.

توصية W3C AAA للنص ذي الحجم العادي (أقل من 18 نقطة إن لم يكن غامقًا) هي الحصول على نسبة تباين لا تقل عن 7: 1 . ينطبق هذا أيضًا على عناصر واجهة المستخدم الأخرى: الرموز ، وصور النص ، والتسميات النصية ، مثل تسميات الأزرار. يتعين على المصممين التأكد من أن جميع المنتجات الرقمية في متناول الجميع. إنه لا يحسن قابلية الاستخدام فحسب ، وبالتالي UX ، فهو القانون في معظم البلدان.

هناك عدد لا يحصى من الخيارات المتاحة للمصممين للحصول على خطوط ممتازة تعمل بشكل جيد في واجهات المستخدم المظلمة. تعد Google Fonts و Font Library و Adobe Typekit عددًا قليلاً من الخطوط التي توفر تكاملاً سهلاً مع التطبيق أو الموقع ومجموعة واسعة من الخيارات.

عمق الاتصال: الارتفاع

المظهر الداكن لا يعني أنه مسطح. باستخدام السمات الفاتحة ، تخلق الإضاءة والتظليل والظلال إحساسًا بالعمق. مع واجهات المستخدم المظلمة ، يكون الأمر أكثر صعوبة لأنها تحتوي على أسطح مظلمة في الغالب مع لمسات لونية متفرقة. ومع ذلك ، يمكن للمصممين استخدام ثلاثة أو أربعة مستويات من الارتفاع مع أنظمة الألوان المقابلة للنص لنقل العمق.

لماذا العمق؟ تستخدم معظم أنظمة التصميم الحديثة نظام مستويات الارتفاع لتوصيل العمق. إحساس بالعمق يتوافق مع العالم الطبيعي. رؤيتنا لها إدراك عميق ، ونحن نعيش في عالم ثلاثي الأبعاد. يساعد العمق في التأكيد على التسلسل الهرمي المرئي للواجهة. العناصر الموجودة في المقدمة ، على سبيل المثال ، تلفت الانتباه إلى نفسها ، مثل مربع حوار تحذير.

يتم إضاءة الأسطح بشكل مختلف للدلالة على مستويات الارتفاع المختلفة. كلما ارتفع موضع السطح في مجموعة الارتفاع (أقرب إلى مصدر الضوء الضمني) ، كان السطح أفتح. يسهل السطح الأكثر إشراقًا تمييز الارتفاع بين المكونات ، كما يساعد على رؤية الظلال ، مما يجعل حواف كل سطح أكثر وضوحًا.

يتطلب تصميم لون سطح كل مستوى عناية. من الأفضل ألا يكون لديك أكثر من أربعة أو خمسة مستويات. يحتاج المصممون إلى مراعاة تباين النص حيث ترتفع الأسطح في المكدس وتصبح أخف وزناً. إذا لم يكن لون الخلفية داكنًا بدرجة كافية لتلبية مستوى تباين لا يقل عن 15.8: 1 بين النص الأبيض والسطح ، فلن يجتاز النص الموجود على السطح المرتفع الأعلى (والأخف) معيار 4.5: 1. في بعض الحالات ، قد يكون من الأفضل تحديد لون نص العنصر على أنه أسود حقيقي (# 000000) في نظام التصميم لتحقيق تباين جيد على خلفية رمادية فاتحة.

إلهام تصميم واجهة المستخدم المظلمة

بالنظر إلى المبادئ الموضحة أعلاه ، إليك بعض الأمثلة الممتازة لتصميم واجهة المستخدم المظلمة:

يستفيد Atom Finance من المظهر الداكن للحصول على مظهر متطور ويحد من ألوانه المميزة بثلاثة ألوان. يستخدم التصميم مساحة سلبية وتصميم بسيط ومتناثر لموقع مالي معقد. يستخدم الموقع تظليلًا دقيقًا جيدًا للإشارة إلى ارتفاعات مختلفة للمكونات في واجهة المستخدم.

يستخدم كل من مواقع الويب ذات السمات المظلمة المبسطة هذه طباعة جريئة. يتم استخدام التظليل الدقيق بلون لهجة واحدة بالتوافق مع أفضل ممارسات تصميم واجهة المستخدم الداكنة.

على الرغم من تحديات العمل مع السمات المظلمة لتطبيقات SaaS ، تعد لوحة بيانات تصور البيانات لشركة IBM مثالية. يتم الاحتفاظ بعدد ألوان التمييز إلى الحد الأدنى ، ويستخدم الموقع تظليلًا دقيقًا لإظهار ارتفاعات مختلفة لواجهة المستخدم.

تلاحظ تطبيقات الأجهزة المحمولة هذه أفضل ممارسات تصميم واجهة المستخدم الداكنة باستخدام اللون الأسود الحقيقي للحواف فقط ، والتظليل المناسب للعناصر لمستويات الارتفاع المختلفة ، وعدد محدود من ألوان التمييز.

ملخص

يجب التعامل مع قرار استخدام تصميم واجهة مستخدم مظلمة على التصميم التقليدي بحذر. لا ينبغي أن يتم اختياره لأسباب خاطئة - أن يكون وركًا ، أو مختلفًا ، أو يقلد تصميم شخص آخر. يجب أن يكون لدى المصممين سبب منطقي قوي لاختيارهم وأن يأخذوا في الاعتبار المحتوى وسياق الاستخدام والجهاز الذي سيظهر عليه التصميم.

تعد السمات المظلمة مناسبة لبعض المنتجات الرقمية ولكنها تواجه صراعًا حقيقيًا لتطبيقها على منتجات أخرى. البساطة هي المفتاح. إنها رائعة لتقديم محتوى مبسط ، وتصورات البيانات ، ومواقع الوسائط ، ومنصات الترفيه. إنها غير مناسبة لأنظمة B2B المعقدة والمليئة بالبيانات والصفحات ذات النصوص الثقيلة والكثير من المحتوى المتنوع.

للمصممين الشجعان المستعدين لعبور حدود أسلوبية جديدة واستكشاف واجهات مستخدم مظلمة من خلال عدسة جمالية وعاطفية ، فإنهم يقدمون ملعبًا مثيرًا للإمكانيات اللانهائية - على "الجانب المظلم".

اسمحوا لنا أن نعرف ما هو رأيك! يرجى ترك أفكارك وتعليقاتك وملاحظاتك أدناه.

• • •

مزيد من القراءة على مدونة Toptal Design:

• واجهات مستخدم مظلمة. الجيد والسيئ. ما يجب فعله و ما لا يجب فعله.
• مبادئ التصميم وأهميتها
• استكشاف مبادئ تصميم الجشطالت
• الإجبار والمتحرك - دليل لمبادئ تصميم الحركة
• عزز تجربة المستخدم الخاصة بك مع مبادئ تصميم التفاعل الناجح هذه