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