1. مقدمة
تاريخ آخر تعديل: 21/09/2021
يمكن أن تتضمّن التطبيقات مجموعة من الألوان من أنظمة الألوان الأساسية أو الألوان الديناميكية التي ينشئها المستخدم أو ألوان العلامة التجارية.
استعِدّ لتجربة ميزات الألوان الديناميكية الجديدة التي تم طرحها مع Material You. في هذا الدرس التطبيقي، ستنشئ لوحات ألوان ديناميكية للتعرّف على طريقة عمل نظام الألوان والمفاهيم الأساسية التي تنشئ لوحات ألوان سهلة الاستخدام وطرق تساعد في عرض تطبيقك باستخدام الألوان الديناميكية من خلال أحدث أدوات التصميم.
أهداف الدورة التعليمية
- الميزات الجديدة في ألوان Material Design
- كيفية تطبيق ألوان من إنشاء المستخدمين على تطبيقك
- أدوات للمساعدة
المتطلبات الأساسية
في هذا الدرس التطبيقي، سنستند إلى بعض مفاهيم التصميم الأساسية.
- معرفة مفاهيم التصميم الأساسية: لوحات الألوان
- معرفة مخططات الألوان والأدوار الحالية في Android
- معرفة Figma
المتطلبات
- حساب Figma
- ملف Figma Dynamic color 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 You ابتكار الألوان لتوفير تجربة أكثر تخصيصًا. من خلال استخراج الألوان الديناميكي، يصبح نطاق تجارب الألوان الممكنة أوسع بكثير.
الألوان الديناميكية هي جزء أساسي من لغة التصميم Material You، حيث تستخدم خوارزمية لاستخلاص ألوان مخصّصة من خلفية المستخدم وتطبيقها على تطبيقاته وواجهة مستخدم النظام.
الاستضواء
تم تصميم "الألوان الديناميكية" لتعمل في سياقات غير متوقّعة. لإدارة نسب التباين في سياقات العرض المختلفة، تُعدّ مستويات الإضاءة السمة الرئيسية التي تسمح بدمج الألوان بنجاح حتى بدون أن يختبر فريق المنتج كل مجموعة ألوان محدّدة.
لن تتوفّر درجة التباين المناسبة للقراءة في العناصر التي تتضمّن درجة سطوع متشابهة، بينما ستكون العناصر التي تتضمّن قيمًا مختلفة لدرجة السطوع أكثر تمييزًا.
لوحات الألوان المتناغمة
لوحة الألوان الدرجاتية هي ترجمة لدرجة لون واحدة (لون ديناميكي مستخرَج) إلى مجموعة من درجات الألوان ذات الصلة. يتيح تحويل اللون إلى 13 درجة لونية إمكانية تطبيق مجموعة من النطاقات اللونية، تُعرف باسم لوحة الألوان الدرجات اللونية، في سياقات مختلفة، بدءًا من العناصر الفردية داخل أحد المكوّنات وصولاً إلى مظاهر التطبيق بأكمله.
اللون مترجَم إلى نطاق ألوان متدرّجة
4. استخراج الألوان
التحويل من بيانات أولية إلى مخطط
لنتعرّف على كيفية عمل الألوان الديناميكية مع أداة Material Theme Builder.
- افتح أداة Material Theme Builder. مع تحديد ديناميكي، أفلِت صورة أو اختَر صورة من متصفِّح الملفات. لاحظ أنّ لون الخلفية سيتغيّر استنادًا إلى الصورة.
- يتم استخراج قيم الألوان من خلفية الشاشة وتعيين "نوع" لها يحدّد كيفية ارتباط اللون بالألوان الأخرى في نظام الألوان. تم تعديل "الألوان الرئيسية" (على اليسار) لتعكس هذه القيم.
- بعد ذلك، يتم تحويلها إلى لوحات ألوان متدرّجة تستند إلى درجة الإضاءة، ما يؤدي إلى إنشاء خمسة نطاقات ألوان بدرجات تتراوح من الفاتح إلى الداكن. يتم تصنيف لوحات الألوان النغمية على هذا النحو في ناتج الألوان.
- من النطاقات اللونية الخمسة، يتم إدراج درجات ألوان محدّدة (استنادًا إلى الإضاءة) في الأدوار المحدّدة مسبقًا التي تتضمّن نظامًا. يتم ربط الألوان بنظام من خلال رموز التصميم.
أدوار الألوان الثانوية التي تم إنشاؤها من نطاق الألوان الثانوية وتم ربطها بالمكوّنات
5- المظاهر والرموز المميزة
تتيح رموز التصميم المرونة والاتساق في جميع أنحاء المنتج من خلال السماح للمصممين، على سبيل المثال، بتعيين دور لون العنصر في واجهة المستخدم، بدلاً من قيمة محددة. تعمل الرموز المميزة كجسر يربط بين الدور المسنَد إلى أحد العناصر وقيمة اللون المحدّدة لهذا الدور. مع طرح ميزة "الألوان الديناميكية"، أصبح من الأساسي مراعاة دور اللون في التصميم بدلاً من التركيز على اللون المحدّد.
تحتوي المظاهر على رموز التصميم المتعدد الأبعاد لكل من اللون والنوع، ما يضمن أن يكون للتصاميم والرموز البرمجية مصدر واحد للحقيقة يمثّل خط الأساس، بالإضافة إلى لوحات الألوان التي ينشئها المستخدم والقيم المخصّصة.
في Figma، تنشئ الإضافة هذه الرموز المميزة كأنماط، ما يعني أنّه في حال استخدام الأنماط التي تم إنشاؤها، ستستخدم الرموز المميزة في MD.
يتم ربط الألوان في لوحة الألوان الدرجات بنظام ألوان فاتح أو داكن من خلال رموز التصميم.
يحدّد نظام الربط نغمة لكل عنصر في أحد المكوّنات.
رموز الإعداد
لتطبيق "الألوان الديناميكية" على تصميماتك، يجب ضبط النموذج التجريبي على الرموز المميزة في material-theme الحالي.
- لنضبط كل الرموز المميزة (أنماط Figma) في التصميم على اليسار لاستخدام هذا المظهر من خلال اختيار إطار التصميم والنقر على استبدال. سيظهر لك تعديل بادئة النمط في ألوان التحديد.
انقر على "تبديل" لتعديل المظهر المرتبط المستخدَم في التصميم المحدّد.
- الآن، أفلِت صورة أو اختَر صورة من متصفّح الملفات. ستتخذ قيم النموذج الأولي اللون الديناميكي المستخرَج من الصورة.
- انقر على زر التبديل العشوائي، وسيؤدي ذلك إلى تبديل لون البداية عشوائيًا للاستقراء منه بدلاً من استخراجه من الصورة. هذه طريقة أخرى للاطّلاع بسرعة على كيفية تأثير الألوان الديناميكية في نماذج التصميم.
النقر على زر الترتيب العشوائي لترتيب لون البداية عشوائيًا
سيؤدي فتح المكوّن الإضافي بدون مظهر إلى عرض شاشة إعداد لبدء الاستخدام. سيؤدي النقر على "البدء" إلى إنشاء خط الأساس التلقائي "material-theme" كمجموعة أنماط في Figma للربط بنماذجك أو استخدامها مع مجموعة أدوات التصميم المتعدد الأبعاد.
6. تقديم طلب للحصول على واجهة مستخدم
تم إنشاء التصاميم المقدَّمة باستخدام Material Design Kit الذي يستخدم رموز التصميم المتعدد الأبعاد، ولكن هناك بعض العناصر المخصّصة التي لم يتم ربطها.
- اختَر بطاقات المقالات. في التعبئة، اضبط النمط (رمز النقاط الأربع) على material-theme/surface. (يمكنك أيضًا البحث عن سطح).
- باتّباع عملية مشابهة، اختَر النوع في البطاقات واضبطه على على السطح، وضَع علامات في مربّعات الاختيار لتحديد البطاقة الأساسية.
أنماط Figma المستخدَمة في بطاقات التصميم
بعد ذلك، سننشئ نماذج إضافية لتكرار بقية المخططات.
إنشاء مظاهر وتكرارها
لقد ربطنا الآن نموذجًا أوليًا لعرض الألوان الديناميكية، ولكن يمكننا أيضًا إنشاء عدة سمات وتبديلها على نماذج أولية منفصلة لعرض مجموعة من الألوان الديناميكية في آنٍ واحد.
- في النافذة المنبثقة الخاصة بالمكوّن الإضافي، انقر على القائمة المنسدلة واختَر إضافة مظهر جديد.
- أنشئ اسمًا فريدًا للمظهر وانقر على إنشاء مظهر. سيؤدي ذلك أيضًا إلى إنشاء مخططات ألوان جديدة لكل مظهر تم إنشاؤه.
إضافة مظهر جديد من خلال القائمة المنسدلة
- أضِف صورة أو بدِّل لون الخلفية.
- في النافذة المنبثقة الخاصة بالإضافة، اختَر تصميمًا تجريبيًا (أحد عناصر واجهة مستخدم التطبيق) وانقر على استبدال. سيؤدي ذلك إلى تعديل قيم النمط إلى المظهر الحالي المعروض في القائمة المنسدلة.
- كرِّر النموذج التجريبي (CMD + D).
انقر على "تبديل" لتعديل المظهر المرتبط المستخدَم في التصميم المحدّد.
- كرِّر الخطوات من 1 إلى 5.
أصبح لديك الآن تصاميم متعددة تتضمّن تكرارات مختلفة للألوان الديناميكية.
7. تهانينا
أحسنت في تعلُّم ميزة "الألوان الديناميكية" وتطبيقها. تتوفّر أداة Material Theme Builder لمساعدتك في تسهيل استخدام الألوان في التصميم المتعدد الأبعاد من خلال عرض الألوان الديناميكية وإنشاء مظاهر مخصّصة وتصديرها إلى الرمز البرمجي.
إذا كانت لديك أي أسئلة، يمكنك طرحها علينا في أي وقت باستخدام @MaterialDesign على Twitter.
يمكنك متابعة المزيد من المحتوى والبرامج التعليمية حول التصميم على youtube.com/MaterialDesign