1. مقدمة
تاريخ آخر تعديل: 18/04/2022
يمكن أن تتضمّن التطبيقات مجموعة من الألوان من أنظمة الألوان الأساسية أو الألوان الديناميكية التي ينشئها المستخدم أو ألوان العلامة التجارية.
استكشف مختبر ألوان Material You السابق كيفية عرض الألوان الديناميكية في نماذج التصميم، ولكن يمكنك أيضًا استخدام ميزة "تصميم Material" لتخصيص تطبيقك باستخدام ألوان علامتك التجارية. سيؤدي استخدام نظام الألوان الجديد مع ألوان علامتك التجارية إلى إنشاء نظام ألوان يسهل الوصول إليه ويمكن أن يتضمّن المزيد من الميزات الديناميكية.
أهداف الدورة التعليمية
- كيفية إنشاء مظهر مخصّص باستخدام أداة إنشاء التصميم المتعدد الأبعاد
- تطبيق مظهر مخصّص على نماذج التصميم
- إمكانية الجمع بين الألوان الديناميكية والمخصّصة
المتطلبات الأساسية
في هذا الدرس التطبيقي، سنستند إلى بعض مفاهيم التصميم الأساسية.
- معرفة مفاهيم التصميم الأساسية: لوحات الألوان
- معرفة مخططات الألوان والأدوار الحالية في Android
- معرفة Figma
- اختياري: درس تطبيقي حول الترميز: عرض الألوان الديناميكية في تطبيقك
المتطلبات
- حساب Figma
- ملف Figma Designlab
- مكوّن Figma الإضافي Material Theme Builder
2. البدء
الإعداد
للبدء، عليك الوصول إلى ملف Designlab Figma. يتضمّن ملف Figma كل ما تحتاج إليه في المختبر. يمكنك إما تنزيل الملف واستيراده، أو تكراره من مجتمع Figma.
أولاً، سجِّل الدخول إلى Figma أو أنشئ حسابًا.
نسخة مكرّرة من "مجتمع Figma"
انتقِل إلى ملف تخصيص التصميم المتعدد الأبعاد أو ابحث عن "تصوُّر الألوان الديناميكية في تطبيقك باستخدام التصميم المتعدد الأبعاد" ضمن Figma Community. انقر على تكرار في أعلى يسار الصفحة لنسخ الملف إلى ملفاتك.
تنسيق الملف
أثناء تصفّح الملف، لاحظ أنّه يتضمّن كل المعلومات اللازمة، بدءًا بمقدمة. ينقسم كل قسم إلى صف من لوحات العرض المرتبطة ببعضها البعض، مع بعض المفاهيم الأساسية للقسم، يليها تمارين. تعتمد الأقسام والتمارين على بعضها البعض ويجب إكمالها بالتسلسل.
يرشدك هذا الدرس التطبيقي حول الترميز إلى هذه المفاهيم والتمارين بتفصيل أكبر. يمكنك قراءة هذا الدرس التطبيقي حول الترميز للتعرّف على المزيد من المعلومات حول ميزات Material You الجديدة.
بدءًا بلوحة العرض Intro، هناك أزرار تربط لوحات العرض ببعضها البعض بالترتيب. للوصول إلى الرابط، انقر على الزر.
تثبيت المكوّن الإضافي في Figma
يعتمد هذا الدرس التطبيقي حول الترميز بشكل كبير على إضافة Figma جديدة لإنشاء أنظمة ألوان ورموز ديناميكية. ثبِّت إضافة Figma مباشرةً من صفحة "مجتمع Figma" أو ابحث عن "أداة إنشاء السمات في Material" في "مجتمع Figma".
3- ألوان Material
سنقدّم أولاً نظرة عامة حول كيفية استخدام الألوان في Material وطريقة عمل نظام الألوان الجديد.
يُستخدم اللون للتعبير عن الأسلوب ونقل المعنى، سواء كان هذا المعنى شخصيًا للمستخدم أو مرتبطًا بالعلامة التجارية أو دلاليًا. يتعامل نظام الألوان مع التغيّر في أنظمة الألوان التي تتغير ديناميكيًا نتيجةً لتغيّر مدخلات المستخدم. توفّر منطق العلاقات اللونية والتغييرات في درجة اللون والصفاء أساسًا لتطبيق الألوان بمرونة.
توفّر مساحة الألوان طريقة لإنشاء أنظمة ألوان فاتحة وداكنة يسهل استخدامها، ويتم استخراجها من لون مصدر من خلال إنشاء 5 ألوان أساسية ثم لوحات ألوان متدرّجة، حيث يتم اختيار بعض درجات الألوان.
لا توفّر تقنية تغيير الألوان هذه نظام ألوان يسهل الوصول إليه فحسب، بل توفّر أيضًا طرقًا لإنشاء أنظمة ألوان خاصة بالعلامة التجارية يسهل الوصول إليها ومتسقة مع أنظمة الألوان التي ينشئها المستخدمون.
يتم إنشاء أنظمة الألوان من 5 ألوان أساسية في لوحات ألوان متدرّجة لإنشاء أنظمة ألوان يسهل استخدامها
موضوع مرتبط بعلامة تجارية
تتيح M3 استخدامات منهجية للمعلمات المخصّصة للمساعدة في تحديد الأنماط التي تعبّر عن علامتك التجارية والحفاظ عليها.
المخطّط المخصّص هو نظام ألوان غير مستمد من خلفية جهاز المستخدم، بل من مطوّر التطبيق. يشكّل نظام الألوان M3 والمخططات المخصّصة الأساس لإتاحة الألوان الديناميكية في التطبيقات.
سيعمل المخطّط المخصّص على سدّ الفجوة بين M2 وM3 لتسهيل عملية نقل البيانات من خلال إعداد الرموز المميزة اللازمة (خانات الألوان) وإنشاء تجربة أكثر اتساقًا مع العلامة التجارية.
إضافة ألوان العلامة التجارية إلى أداة إنشاء التصميم المتعدّد الأبعاد
4. الألوان: ألوان التمييز
أساس نظام الألوان هو مجموعة من خمسة ألوان رئيسية ترتبط كلّ منها بلوحات ألوان منفصلة تضم 13 درجة لونية. يتم تعيين درجات ألوان معيّنة من كل لوحة ألوان إلى أدوار الألوان في جميع أنحاء واجهة المستخدم. لنبدأ بفتح إضافة "أداة إنشاء المظاهر المستندة إلى Material Design" وإعداد أول لون تمييز: اللون الأساسي.
سيؤدي إدخال اللون الأساسي فقط إلى استخدامه كمصدر لإنشاء نظام ألوان كامل.
- في النافذة المنبثقة الخاصة بالبرنامج المساعد، انقر على "مخصّص". سيؤدي ذلك إلى تبديل المظهر إلى مظهر مخصّص. في هذا الدرس التطبيقي، سنستخدم material-theme الذي تم إنشاؤه مسبقًا، ولكن يمكن أيضًا إنشاء مظهر جديد إذا أردت ذلك. يمكنك الاطّلاع على مزيد من المعلومات في تصوّر الألوان الديناميكية.
- بعد ذلك، سنضبط لون المفتاح الأساسي. يمكن أن يكون اللون الأساسي هو لون علامتك التجارية الرئيسي أو لون التمييز الأساسي الأكثر استخدامًا. سيتم ملء بقية ألوان المفاتيح استنادًا إلى اللون الأساسي. وهذا يعني أنّه ليست هناك حاجة إلى إضافة ألوان إضافية إذا لم تكن بحاجة إليها.
5- إنشاء بقية المظهر
يُستخدم اللون الأساسي لإنشاء المظهر، ولكن قد يكون لديك ألوان تمييز لدعم لون العلامة التجارية الأساسي.
- في النافذة المنبثقة الخاصة بالإضافة، أضِف لونًا ثانويًا من خلال النقر على مربّع اللون الثانوي. تُستخدَم الأدوار الثانوية للمكوّنات الأقل بروزًا في واجهة المستخدم، مع توسيع فرصة التعبير عن الألوان. سيتم تعديل اللون الثانوي في مخطط الألوان وواجهة مستخدم التطبيق.
- نفِّذ الإجراء نفسه مع Tertiary. تُستخدَم الأدوار الثلاثية للتمييز بين العناصر التي يمكن استخدامها لتحقيق التوازن بين الألوان الأساسية والثانوية أو لجذب المزيد من الانتباه إلى أحد العناصر. يتم ترك دور اللون الثانوي للمصنّعين لاستخدامه حسب تقديرهم، ويهدف إلى دعم التعبير عن الألوان بشكل أوسع في المنتجات.
- أصبحت الأدوار المحايدة الآن تُستخدَم للأسطح والخلفيات والنصوص والرموز التي تتطلّب تركيزًا عاليًا.
قدِّم ألوانًا ثانوية وثالثية ومحايدة لتخصيص نظام الألوان بالكامل.
سيتم الآن تضمين ألوان علامتك التجارية في نظام الألوان الأساسي الذي تم تعديله ليتوافق مع مساحة ألوان M3، وسيكون متاحًا بالكامل، ويمكن تصديره وتنفيذه ضمن الرمز البرمجي كمظهر.
6. تطبيق المظهر
الأدوار والرموز المميزة
يتم توفير كل لون تمييز (أساسي وثانوي وثالث) في مجموعة من أربعة ألوان متوافقة بدرجات مختلفة لتسهيل عملية الدمج وتحديد العناصر البارزة والتعبير المرئي. تتألف المجموعة من لون التمييز واللون الأساسي والحاوية واللون على الحاوية.
تُستخدَم الأدوار المحايدة للأسطح والخلفيات والنصوص والأيقونات التي تتطلّب تركيزًا عاليًا.
تمثّل رموز التصميم قرارات التصميم الصغيرة والمتكررة التي تشكّل النمط المرئي لنظام التصميم. تحلّ الرموز المميزة محل القيم الثابتة، مثل الرموز السداسية العشرية للألوان، بأسماء تشرح نفسها بنفسها. تربط رموز التصميم بشكل فعّال خيارات الأنماط التي قد لا تكون مرتبطة ببعضها بشكل واضح.
ينشئ المكوّن الإضافي Figma رموزًا مميّزة ويدخل ألوان المصدر الخاصة بك في شكل أنماط Figma للربط بالنماذج التجريبية الحالية وأدلة أنماط العلامات التجارية وحتى أنظمة التصميم.
توفّر رموز التصميم لغة مشتركة بين أدوار الألوان وتنفيذها.
التدرّج الهرمي للألوان
عند تطبيق أدوار الألوان على النماذج التجريبية، ضع في اعتبارك ترتيب الأهمية أو التسلسل الهرمي للعناصر. سيساعد هذا المفهوم في تحديد ألوان العلامة التجارية لكل دور من الأدوار، بالإضافة إلى ربطها بواجهة المستخدم. عادةً، تجذب الألوان الأكثر تشبّعًا أو تركيزًا انتباه المستخدم أولاً، ولهذا السبب يتم ربط دور "اللون الأساسي" بالمكوّنات التي تركّز بشكل أكبر على عبارات الحثّ على اتّخاذ إجراء. على الرغم من أنّ أداة Material Theme Builder تستخدم نظام ألوان M3 لإنشاء ألوان مناسبة، سيؤدي توفير ألوان ثانوية أو ثلاثية بدرجة تشبّع أعلى إلى إنشاء ألوان تتفوّق على اللون الأساسي. حدِّد الترتيب الذي تريد أن يتفاعل المستخدمون من خلاله مع واجهة المستخدم والمحتوى للمساعدة في تحديد أدوار الألوان، إذ لا يجب أن تستخدم جميع المكوّنات اللون الأساسي.
يجذب اللون المشبّع الثابت أكبر قدر من الانتباه.
7. التبديل إلى المظهر
لتطبيق التصميم المخصّص الذي أنشأته على تصاميمك، علينا ضبط النموذج التجريبي على الرموز المميزة في material-theme الحالي.
تتضمّن عناصر Material أدوارًا تمّت مطابقتها مسبقًا، وستعمل تلقائيًا مع أداة Material Theme Builder.
بدِّل إلى المظهر من النافذة المنبثقة "أداة إنشاء نسق Material".
- لنضبط كل الرموز المميزة (أنماط Figma) في التصميم على اليسار لاستخدام هذا المظهر من خلال تحديد إطار التصميم والنقر على "استبدال". سيظهر لك تعديل بادئة النمط في ألوان التحديد.
- لم يتم تحديث كل شيء؟ يجب تطبيق نمط Figma أولاً على المكوّنات المخصّصة، مثل بطاقة نصيحة العناية بالنباتات. اختَر حاوية نصيحة العناية، ثمّ انقر على رمز النقاط الأربع لتعيين نمط، واختَر الحاوية الثانوية. كرِّر الخطوات نفسها مع محتوى بطاقة نصيحة العناية، باستثناء تعيين حاوية على المستوى الثالث. التصنيفات الصغيرة في القائمة هي أيضًا مكوّنات مخصّصة، ولكن سنتطرق إليها لاحقًا.
- تستخدم مكوّنات التصميم المتعدد الأبعاد عمليات ربط تلقائية، ولكن يمكنك تجربة عمليات تعيين الأنماط لتناسب واجهة المستخدم على أفضل نحو. خصِّص بعض الوقت لتجربة تسلسلات هرمية مختلفة للألوان وطرق التعبير عن العلامة التجارية.
(يتم تضمين المظهر فقط في ملف التصدير الخاص بالرمز. في حال العمل مع مهندس، شارِك نماذج صورية لتوضيح عمليات ربط الرموز المميّزة، لأنّها لن تكون مضمّنة في عملية التصدير)
سيؤدي فتح المكوّن الإضافي بدون مظهر إلى عرض شاشة إعداد لبدء الاستخدام. سيؤدي النقر على "البدء" إلى إنشاء خط الأساس التلقائي "material-theme" كمجموعة أنماط في Figma للربط بنماذجك التجريبية أو استخدامها مع مجموعة أدوات التصميم المتعدد الأبعاد.
8. التوسّع إلى ما بعد المخطط الأساسي
لديك الآن نسق ألوان يحمل علامتك التجارية ومربوط بمكونات ونموذج تصميم، ولكن قد تحتاج إلى تضمين ألوان إضافية. وهنا يأتي دور نظام الألوان الموسّع الذي يتيح إضافة ألوان مخصّصة.
يمكن أن تكون هذه الألوان دلالية أو خاصة بالعلامة التجارية أو حتى خاصة بالمنتج، ويجب تحديد أدوارها وتغييرها من خلال خوارزمية الألوان أو تركها كما تم إدخالها.
يتيح نظام الألوان الموسّع أيضًا إمكانية الجمع بين الألوان الديناميكية (التي ينشئها المستخدم) وألوان علامتك التجارية. السماح للمخطط الأساسي بالتأثير المخصّص للمستخدم، مع ضبط ألوان العلامة التجارية في المخطط الموسّع وهذا يعني أنّ عناصر واجهة المستخدم يمكن أن تكون أكثر تخصيصًا للمستخدمين، ويمكن أن يكون لألوان علامتك التجارية لحظات أكثر تأثيرًا في التطبيق.
يمكن توسيع نطاق نظام الألوان الأساسي ليشمل ألوانًا مخصّصة. 
9- التوسّع والتخصيص
يتيح توسيع المخطط باستخدام ألوان مخصّصة إضافة ألوان مثل الألوان الدلالية أو ألوان العلامة التجارية الإضافية.
مخطط مخصّص مع ألوان مخصّصة تمت إضافتها
- في النافذة المنبثقة الخاصة بالبرنامج المساعد، ضِمن ألوان المفاتيح، انقر على إضافة لون.
- سيتم تعديل المظهر الحالي باستخدام صف Custom0 جديد. عدِّل هذا اللون من خلال النقر على أداة اختيار الألوان، ثم اختَر لونًا جديدًا.
- يمكن العثور على هذه الألوان الموسّعة كنمط ضمن الأنماط للقراءة فقط باسم Custom0. تتوفّر لوحة الألوان ونظام الألوان. لنربط بعض التصنيفات في القائمة باللون الجديد من خلال اختيار خلفية التصنيف وتحديد أحد أدوار اللون المُضاف (الحاوية on-custom0).
ضبط لون مخصّص في الألوان المحدّدة
- ينشئ تطبيق Material Theme Builder الألوان تلقائيًا باسم Custom#. لإعادة تسمية لون مخصّص تمت إضافته، وسِّع مجموعة الأنماط الخاصة بالمظهر في لوحة الأنماط (ستظهر هذه المجموعة عندما لا يكون أي عنصر محدّدًا). بعد ذلك، ابحث عن Custom0 ضمن المجموعة الفرعية للمصدر. ستؤدي إعادة تسمية المصدر هنا إلى إعادة تسمية اللون داخل النافذة المنبثقة الخاصة بالمكوّن الإضافي.
يمكن العثور على أنماط الألوان المخصّصة في لوحة الأنماط.
- يمكن حذف اللون المضاف بطريقة مشابهة من خلال النقر بزر الماوس الأيمن وحذف النمط. في المرة التالية التي يتم فيها فتح المكوّن الإضافي، ستتم إزالة اللون المُضاف. قد لا يظهر تغيير الاسم والحذف في مخطط الألوان.
10. تهانينا
لقد أحسنت تعلُّم كيفية إنشاء نسق ألوان مخصّص باستخدام أداة Material Theme Builder وتطبيقه على نماذج التصميم التجريبية وإضافة المزيد إلى نظام الألوان. يوفّر نظام الألوان الجديد Material 3 ألوانًا سهلة الاستخدام ومرنة ومتسقة في التصاميم، ونتطلّع إلى معرفة كيفية استخدامك لها.
إذا كانت لديك أي أسئلة، يمكنك طرحها علينا في أي وقت باستخدام @MaterialDesign على Twitter.
يمكنك متابعة المزيد من المحتوى والبرامج التعليمية حول التصميم على youtube.com/MaterialDesign