1. نظرة عامة
في مؤتمر Google I/O لعام 2019، قدّمت التصميم المتعدد الأبعاد إرشادات حول تصميم مظهر داكن يكمّل مظهر Material الحالي لمنتجك. في حين أنّ المظاهر الفاتحة مناسبة للقراءة المطوّلة وتوفّر تباينًا أكثر وضوحًا، يوفّر المظهر الداكن سطوعًا أقل، ما يجعله مناسبًا للاستخدام في البيئات المظلمة ويقلّل من إجهاد العينين.
في Material، تم تصميم المظاهر الداكنة لاستخدامها كوضع تكميلي لمظهر فاتح تلقائي، مع الحفاظ على الهوية الفريدة لتطبيقك (بما في ذلك أنماط الألوان والأشكال والأنواع والارتفاع) من خلال عرض دقيق ومناسب للاستخدام في الليل.
في هذا المختبر التصميمي، سنشرح الخطوات المطلوبة لإنشاء مظهر داكن استنادًا إلى مظهر Material حالي، وذلك باستخدام إحدى "دراسات Material".
سنعمل مع Reply، وهو تطبيق للبريد الإلكتروني مصمَّم ليكون واضحًا وسهل القراءة وبديهيًا وسهل الاستخدام. سنتعرّف على هوية تطبيق Reply وسنتّخذ قرارات مدروسة للاحتفاظ باللحظات التي تحمل علامة تجارية في التطبيق مع تصميم مظهر مريح في الوضع الداكن.
سنعمل أيضًا على تطوير التصميم والتعاون مع مصمّمي ألوان مخصّصة تتجاوز المظهر الداكن الأساسي لإعادة التأكيد على الطابع الفريد لتطبيق "ردّ".
المواد المطلوبة:
2. جمع الملفات المطلوبة
قبل البدء، عليك تنزيل ملف Figma الأوّلي. يتضمّن هذا الملف كل ما تحتاج إليه في Designlab.
- تنزيل DarkTheme DesignLab Kit.fig (7.6 ميغابايت)
3- إعداد البيئة
بعد ذلك، عليك إعداد بيئة التصميم.
أولاً، سجِّل الدخول إلى Figma أو أنشئ حسابًا.
بعد تسجيل الدخول، استورِد الملف الذي نزّلته في الخطوة السابقة. لإجراء ذلك، ما عليك سوى العثور على رمز "استيراد ملف" في أعلى يمين شاشة ملفات Figma والعثور على الملف في مجلد "عمليات التنزيل".
يُرجى تخصيص بعض الوقت لاستكشاف الملف. يحتوي على مظهر فاتح ولوحة ألوان مُعدّة مسبقًا استنادًا إلى العلامة التجارية للتطبيق، ونسخة من المظهر الداكن النهائي الذي سنصمّمه.
- في علامة تبويب أخرى، افتح إرشادات التصميم المتعدد الأبعاد للمظاهر الداكنة. سنشير إلى هذه الإرشادات في جميع أنحاء Designlab.
4. فهم هوية المنتج
قبل البدء في تصميم المظهر الداكن لتطبيق Reply، علينا فهم بعض الخصائص المتعلقة بالعلامة التجارية للتطبيق. سيساعدنا ذلك في اتّخاذ خيارات مدروسة بشأن المظهر، ما يضمن التعبير عن هوية تطبيق "الرد الذكي" وعلامته التجارية بشكلٍ متّسق في كل من المظهر الفاتح والداكن.
تؤكّد علامة Reply التجارية على أهمية التواصل. يعطي التطبيق الأولوية للجودة الوظيفية، ويفضّل سهولة الاستخدام على عناصر التصميم التي ليس لها غرض وظيفي.
بالنسبة إلى أغراضنا في هذا التصميم، فإنّ أهم عناصر التعبير عن العلامة التجارية في تطبيق "ردّ" هي اللون والنوع والشكل.
اللون
يستخدم نسق ألوان Reply لونًا أساسيًا أزرق داكنًا مائلًا إلى الرمادي مع لون ثانوي أصفر مائل إلى البرتقالي.
بما أنّ اللون الثانوي نادرًا ما يُستخدَم، تكون واجهة مستخدم تطبيق "الرد الذكي" غالبًا أحادية اللون، وتستخدِم درجات مختلفة من اللون الأساسي. يتيح نسق الألوان الرقيق هذا قراءة المحتوى بسهولة بدون تشتيت الانتباه، كما يتيح رؤية الصور الرمزية بسهولة.
وبالتالي، فإنّ اللون الثانوي في تطبيق Reply له تأثير كبير أينما تم استخدامه، فهو يؤكّد على الإجراءات المهمة ويبرز اللحظات المرتبطة بالعلامة التجارية في جميع أنحاء التطبيق.
النوع
بما أنّ تطبيق Reply يركّز بشكل كبير على المحتوى المستند إلى النصوص والكفاءة، فإنّ نوع الخط وأسلوب الكتابة يشكّلان عنصرًا أساسيًا في التعبير عن هوية التطبيق. يعتمد التطبيق على خط Work Sans في مقياس الكتابة الكامل، ويستخدم مجموعة متنوعة من الأنماط التي تتضمّن ستة أوزان من خط Work Sans: Light وRegular وMedium وSemiBold وBold.
يمنح إنشاء مقياس الكتابة بالكامل من Work Sans تطبيق Reply أسلوب كتابة متسقًا ويمكن توقّعه، ولكنه طبيعي وسهل القراءة.
وفقًا لمصمّم خط Work Sans، "وي هوانغ"، تم تحسين عائلة الخطوط هذه للاستخدام على الشاشة. وهذا يجعلها رائعة لقراءة مقاطع نصية بكفاءة في الرسائل الإلكترونية أو المحتوى الآخر. يمنحها أساسها الفضفاض في أشكال Grotesques المبكرة جمالية أكثر ودية وإنسانية، بينما يتيح التباعد الأوسع بين الأحرف قراءة أكثر سلاسة.
الشكل
يتميّز الردّ بتصميم دقيق، حيث يجمع بين عناصر مستديرة وحادة بطرق تعزّز كفاءة قائمة عناوين البريد الإلكتروني وطبيعتها الوظيفية، مع إضفاء لمسة أكثر نعومة على الإجراءات الرئيسية والعناصر الأكبر.
- المكوّنات الصغيرة
- مكوّنات المستوى المتوسط
- المكوّنات الكبيرة
المكوّنات الصغيرة، مثل الأزرار وزر الإجراء العائم، تكون مستديرة تمامًا، بينما تكون المكوّنات المتوسطة، مثل بطاقات البريد الإلكتروني وشريط التطبيق السفلي، مربّعة تمامًا. تحتوي المكوّنات الكبيرة، مثل أداة تبديل الحسابات والورقة السفلية، على زوايا مستديرة قليلاً.
تتكامل هذه الأشكال لتعزيز فهم المستخدم لمكان وجوده في التطبيق وكيفية تصميم كل مكوّن، بالإضافة إلى كيفية ارتباطه ببقية الواجهة.
5- التعامل مع الألوان
بمعرفة كيفية ارتباط اللون بالتعبير عن العلامة التجارية في المظهر الفاتح التلقائي لتطبيق Reply، يمكننا إجراء تعديلات مدروسة على لوحة الألوان للحصول على مظهر داكن قابل للاستخدام ومعبّر.
في Material، تستند أنظمة الألوان إلى لوحات الألوان الدرجات اللونية، وتستخدم هذه اللوحات ألوان علامتك التجارية لإنشاء مجموعة من الخيارات المتناسقة التي تتكامل في نظام ألوان شامل يتم تطبيقه على مستوى تطبيقك، ما يضمن الأناقة والوضوح.
في ملف Figma، يمكنك الاطّلاع على لوحات الألوان الأساسية والثانوية في Reply. تشير الأسهم الفاتحة فوق كل لوحة ألوان إلى القيم المستخدَمة في المظهر الفاتح لتطبيق Reply، بينما تشير الأسهم الداكنة إلى الألوان المتغيرة التي سنستخدمها في المظهر الداكن.
عند تصميم مظهر داكن باستخدام Material، يتم اختيار ألوان أفتح حتى يظل نظام الألوان معبّرًا ويحافظ على التباين المناسب بدون التسبب في إجهاد العين. تميل الألوان الأكثر تشبّعًا إلى "الاهتزاز" بصريًا على الخلفيات الداكنة، ما يجعل قراءتها أكثر صعوبة. توفّر الدرجات الفاتحة أيضًا مرونة أكبر في تغيير لون الأسطح المرتفعة، وسنتناول ذلك قريبًا.
6. تعديل ألوان السطح
بعد أن أصبح لدينا إلمام بلوحات الألوان في Reply والألوان التي سنستخدمها في المظهر الداكن، حان الوقت لبدء تعديل قيم الألوان في النموذج التجريبي.
في المظاهر الداكنة في Material Design، تكون الطبقة السفلية من واجهة المستخدم عادةً رمادية داكنة بقيمة سداسية عشرية #121212.
- في ملف Figma، ابحث عن اللوحة الفنية المسماة Reply Starter واختَر الطبقة المسماة Background.
- ضمن التعبئة في لوحة "الفحص" على يسار الشاشة، اضبط قيمة اللون على 121212 واضغط على Return.
- يجب أن تبدو لوحة العرض على النحو التالي:
في عرض البريد الوارد الأحادي اللون في Reply، تكون بطاقات الرسائل الإلكترونية بلون أفتح قليلاً من الخلفية، لذا يجب أن نطبّق المعالجة نفسها على البطاقات في المظهر الداكن للحفاظ على التدرّج الهرمي المرئي للبريد الوارد.
- في لوحة التصميم نفسها، وسِّع المجموعة المسماة "بطاقات البريد الإلكتروني" واختَر جميع الطبقات المسماة "بطاقة البريد الإلكتروني".
- كما في السابق، اختَر القيمة تعبئة في لوحة "الفحص". اضبط القيمة على 121212 واضغط على Return.
- الآن، اختَر الطبقات التي تحمل الاسم "تراكب بطاقة البريد الإلكتروني" فقط. ستسمح لنا هذه الطبقات بإنشاء تراكب يميز بطاقات البريد الإلكتروني عن خلفيتها.
- امنح الطبقات تعبئة واضبطها على FFFFFF بدرجة تعتيم 2%.
بعد أن تم تعتيم بطاقات البريد الإلكتروني، أصبح النص غير قابل للقراءة. سنتناول ألوان النص في الخطوة التالية.
7. تعديل ألوان النص
لفهم ألوان النصوص في المظاهر الداكنة، من المهم معرفة كيفية تطبيق الألوان على النصوص في نظام التصميم المتعدد الأبعاد بشكل عام.
تحدّد Material Components مفهوم الألوان "الظاهرة"، وهي ألوان تظهر "فوق" المكوّنات والمساحات الرئيسية التي تستخدم الألوان الأساسية أو الثانوية أو ألوان المساحة أو الخلفية أو الخطأ. تُستخدَم ألوان "على" بشكل أساسي للنص، وذلك لضمان بقائه قابلاً للقراءة على هذه الأسطح.
ألوان "مفعّل" التلقائية في Material هي الأبيض (#FFFFFF) والأسود (#000000). بما أنّ اللون الأسود أو الداكن "للتشغيل" لن يكون مناسبًا مع المساحات الداكنة، سنستخدم اللون الأبيض.
نظام تحديد التسلسل الهرمي للنصوص باستخدام هذا اللون "النشط" بسيط. يتم تطبيق النص ذي الأهمية العالية بمستوى عتامة %87، بينما يتم تطبيق النص ذي الأهمية المتوسطة بمستوى عتامة %60، ويتم تطبيق النص غير المفعّل بمستوى عتامة %38.
النص ذو الأولوية العالية ليس أبيض ناصعًا لأنّ اللون #FFFFFF، وهو لون ساطع، سيظهر بشكل "مهتز" بصريًا على خلفياتنا الداكنة، كما ذكرنا في الخطوة 5. بالإضافة إلى ذلك، يمكن أن يؤدي استخدام نص باللون الأبيض الخالص (#FFFFFF) على خلفية داكنة إلى إضعاف إمكانية القراءة لأنّ الضوء المنبعث من هذا النص يبدو وكأنّه يتلاشى أو يصبح غير واضح على الخلفية الداكنة.
بعد معرفة كل ذلك، لنصلح ألوان النص في المظهر الداكن.
- يتم تجميع كل النص في التصميم الأساسي لتسهيل الوصول إليه. ابحث عن المجموعة المسماة نص البريد الوارد ووسّعها للاطّلاع على جميع الطبقات المكوّنة لها.
- اختَر جميع الطبقات التي تبدأ بـ "Hi -". هذه هي جميع أجزاء النص التي تتضمّن تركيزًا عاليًا في التصميم.
- في لوحة "الفحص"، اضبط التعبئة على FFFFFF مع تعتيم بنسبة 87%.
- بالعودة إلى مجموعة نص البريد الوارد (Inbox text)، حدِّد جميع الطبقات التي تبدأ بـ "Med -"
- في لوحة "الفحص"، اضبط التعبئة على FFFFFF مع مستوى عتامة يبلغ 60%.
8. ضبط ألوان المكوّنات
في المظاهر الداكنة التي تم إنشاؤها باستخدام Material، يتم تلوين المساحات والمكوّنات البارزة باستخدام تراكبات. وكلما ارتفع السطح، أصبح التراكب أقوى وأكثر سطوعًا. هذه طريقة لتوضيح الارتفاع والتسلسل الهرمي عندما تكون الخلفية داكنة جدًا بحيث لا يمكن عرض الظلال الداكنة بشكل موثوق.
شريط التطبيق السفلي
بالنسبة إلى شريط التطبيق السفلي في Reply، والذي يظهر أعلى بقية واجهة مستخدم البريد الوارد، سنطبّق تراكبًا خفيفًا.
- ابحث عن المجموعة المسماة شريط التطبيق السفلي في قائمة الطبقات ووسِّعها لتتمكّن من رؤية الطبقات المكوّنة لها.
- ابحث عن الطبقة المسماة السطح داخل تلك المجموعة، واضبط قيمة التعبئة على 121212.
- ابحث عن الطبقة التي تعلوها باسم Surface overlay وأدخِل قيمة Fill FFFFFF مع مستوى عتامة يبلغ 12%.
زر الإجراء الرئيسي
بعد ذلك، سنطبّق لونًا جديدًا على زر الإجراء الرئيسي (FAB). لإجراء ذلك، ارجع إلى لوحات الألوان التي اطّلعنا عليها سابقًا واحصل على القيمة 700 للون الثانوي في تطبيق Reply.
يمكنك اختياريًا اختيار لون أكثر تشبّعًا قليلاً للعناصر الصغيرة ولكن ذات التأثير الكبير في تطبيقك، طالما أنّه يحتفظ بالتباين المناسب مع الألوان الأساسية. سنتعرّف على هذا الخيار في خطوة لاحقة.
- ابحث عن المجموعة المسماة FAB في قائمة الطبقات ووسِّعها للاطّلاع على الأجزاء المكوّنة لها.
- ابحث عن طبقة السطح وانقر عليها. اضبط التعبئة على FCC13B.
البطاقات المحدّدة
قد تلاحظ أنّ لون البرتقالي المائل إلى الأصفر نفسه يظهر أيضًا في زاوية بطاقات الرسائل الإلكترونية المحدّدة في البريد الوارد الخاص بميزة "الرد الذكي". هذه لحظة أخرى تحمل علامة تجارية قوية ولكنّها لا تتناسب بشكل واضح مع المكوّنات أو المساحات أو النصوص.
في حالات مثل هذه، من الأفضل البدء بلون البديل الثانوي (في هذه الحالة #FFFBE6) والرجوع إلى الخلف للعثور على لون معبّر بشكل مناسب بدون أن يشتّت الانتباه عن المظهر الوظيفي لميزة "الرد الذكي". بالنسبة إلى "الردّ"، يمكننا استخدام خيارنا الثانوي العادي.
- اختَر الطبقة المسماة Earmark واضبط Fill على FFF5A0.
9- الذهاب إلى أبعد من ذلك: مساحات عرض مخصّصة
كما تعلّمنا سابقًا، فإنّ زر الإجراء الرئيسي (FAB) في تطبيق Reply هو عنصر بارز للغاية يمثّل أيضًا لحظة مميّزة في التطبيق. لهذا السبب، قد نقرّر الحفاظ على تعبير اللون في المظهر الداكن لتطبيق Reply باستخدام اللون الثانوي الأصلي لتطبيق Reply.
- ابحث عن المجموعة المسماة FAB في قائمة الطبقات ووسِّعها للاطّلاع على الأجزاء المكوّنة لها.
- ابحث عن طبقة السطح وانقر عليها. اضبط لون التعبئة على F9AA33.
قد نرغب أيضًا في إعادة استخدام اللون الأساسي في ميزة "الرد الذكي" كلون مخصّص لسطح شريط التطبيق السفلي وبطاقات البريد الإلكتروني. لإجراء ذلك، ما علينا سوى تغيير التراكب لاستخدام اللون الأساسي الداكن الموضّح في لوحة الألوان التي أشرنا إليها.
- ابحث عن المجموعة المسماة شريط التطبيق السفلي في قائمة الطبقات ووسِّعها لتتمكّن من رؤية الطبقات المكوّنة لها.
- ابحث عن الطبقة المسماة Surface overlay وأدخِل لها قيمة تعبئة جديدة هي 344955 مع مستوى عتامة يبلغ 48%. سيمنح ذلك الزر لونًا أقوى للعلامة التجارية مع الحفاظ على التباين المناسب.
- ابحث عن الطبقات التي تحمل الاسم تراكب بطاقة البريد الإلكتروني في قائمة الطبقات واختَرها كلها.
- اضبط التعبئة على ADC0CB مع مستوى عتامة يبلغ 4%.
10. Wrapup
في Material، تشكّل التصاميم الداكنة امتدادًا مدروسًا ومقصودًا للهوية الفريدة لمنتجك كما تظهر في التصميم الفاتح. من خلال إجراء تعديلات بسيطة على اللون وطريقة عرض الارتفاع، تمكّنت للتو من إنشاء أول مظهر داكن لك في Material. تهانينا!
اعتبِر الخطوات الواردة في مختبر التصميم هذا إطارًا لفهم وتحديد المظهر الداكن لمنتجك، وضَع دائمًا خصائص وأهداف علامتك التجارية ومنتجك في الاعتبار.
للحصول على مزيد من الإرشادات حول المظهر الداكن، يمكنك الاطّلاع على مواصفات التصميم المتعدد الأبعاد للمظاهر الداكنة.
إذا كانت لديك أي أسئلة، يمكنك طرحها علينا في أي وقت باستخدام @MaterialDesign على Twitter.
يمكنك متابعة المزيد من المحتوى التعليمي حول التصميم على قناة Google Design على YouTube.