التصميم بألوان يمكن الوصول إليها

1. مقدمة

تاريخ آخر تعديل: 05/11/22

ينشئ نظام الألوان في Material 3 أنظمة ألوان سهلة الاستخدام من خلال خوارزمية الألوان الديناميكية، ولكن ماذا تعني سهولة الاستخدام بالنسبة إلى الألوان؟ كيف يتيح نظام الألوان الجديد في Material Design إنشاء نظام ألوان يسهل استخدامه، وما هي الأدوات التي تساعد في ذلك؟

أهداف الدورة التعليمية

كيفية ارتباط اللون بإرشادات تسهيل الاستخدام والتباين
كيف يمكن أن تساعد الأدوات في إنشاء نظام ألوان يسهل استخدامه وإجراء تعديلات والتحقّق من التباين؟

المتطلبات الأساسية

في هذا الدرس التطبيقي، سنستند إلى بعض مفاهيم التصميم الأساسية.

معرفة تدرّجات الألوان والأدوار الحالية في Android
معرفة Figma

المتطلبات

حساب Figma
ملف Figma Designlab
مكوّن Figma الإضافي Material Theme Builder

2. البدء

الإعداد

للبدء، عليك الوصول إلى ملف Designlab Figma. يتضمّن ملف Figma كل ما تحتاج إليه في المختبر. يمكنك إما تنزيل الملف واستيراده، أو تكراره من مجتمع Figma.

أولاً، سجِّل الدخول إلى Figma أو أنشئ حسابًا.

تكرار الملف من "مجتمع Figma"

انتقِل إلى ملف التصميم باستخدام ألوان مناسبة لذوي الاحتياجات الخاصة، أو ابحث عن Designing with accessible colors ضمن Figma Community. انقر على تكرار في أعلى يسار الصفحة لنسخ الملف إلى ملفاتك.

تنسيق الملف

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

يرشدك هذا الدرس التطبيقي حول الترميز إلى هذه المفاهيم والتمارين بتفصيل أكبر. يمكنك قراءة هذا الدرس التطبيقي حول الترميز للتعرّف على المزيد من المعلومات حول ميزات Material You الجديدة.

بدءًا بلوحة العرض Intro، هناك أزرار تربط لوحات العرض ببعضها البعض بالترتيب. للوصول إلى الرابط، انقر على الزر.

تثبيت المكوّن الإضافي في Figma

يعتمد هذا الدرس التطبيقي حول الترميز بشكل كبير على إضافة Figma جديدة لإنشاء أنظمة ألوان ورموز ديناميكية. ثبِّت إضافة Figma مباشرةً من صفحة "مجتمع Figma" أو ابحث عن "أداة إنشاء السمات في Material" في "مجتمع Figma".

3- اللون وإمكانية الوصول

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

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

قد يعني عمى الألوان التحقّق من مجموعات الألوان حتى لا تمتزج عناصر واجهة المستخدم معًا.

على الرغم من أنّ مستوى التعتيم والوزن قد لا يكونان درجة اللون الحرفية، إلا أنّهما يؤثران بشكل كبير على كيفية إدراك اللون.

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

استخدِم التعتيم بحذر ولا تستخدمه أبدًا في الحالات التي لا تنصح بها الإرشادات المقترَحة.

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

يؤدي استخدام خط رفيع على خلفية داكنة إلى إحداث تأثير خانق.

الفرق بين الوضوح وسهولة القراءة سنشير في هذا الدرس التطبيقي إلى مدى سهولة قراءة النص. تقيس إمكانية القراءة مدى سهولة رؤية النص، بينما تقيس المقروئية مدى سهولة فهمه.

4. تباين الألوان

تتوفّر إرشادات تسهيل الاستخدام لمنح المصمّمين والمطوّرين قائمة تحقّق متّسقة تستند إلى خبرة الخبراء لضمان اتّباع أفضل الممارسات في إنشاء منتجات شاملة. إنّ "إرشادات إتاحة محتوى الويب" هي المعيار المعتاد الذي يشير إليه هذا المختبر.

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

مثال على تباين الألوان غير المتوافق

تنقسم إرشادات تباين الألوان إلى نص وغير نص، ولكل منهما مجموعة الدرجات الخاصة به.

نص

	AA	AAA
نص كبير	3:1	4.5:1
نص عادي (النص الأساسي)	4.5:1	7:1

محتوى غير نصي

	AA
المحتوى غير النصي (العناصر الرسومية)	3:1

لنحاول التحقّق من بعض التباينات ومعرفة كيفية إصلاحها يدويًا.

في Figma، ابحث عن الألوان في عناصر واجهة المستخدم. بدءًا من النص الكبير (‎#C0BEC5)، يظهر على خلفية باللون (‎#F5F5FF). باستخدام أداة التحقّق من التباين على الإنترنت، يؤدي إدخال هذه الألوان في المقدّمة والخلفية إلى عدم استيفاء جميع التقييمات.
النص ساطع جدًا بالنسبة إلى لون الخلفية. في أداة فحص التباين على الإنترنت، اضبط لون المقدّمة باستخدام أداة اختيار الألوان على لون أغمق إلى أن يتم اجتياز معيار AAA.
ارجع إلى Figma وطبِّق اللون الجديد الذي يستوفي المعايير على النص الكبير.
اتّبِع العملية نفسها لنسخة الإعلان الأساسية والأزرار، وتأكَّد من التحقّق من لون النص ولون الخلفية لكل منهما.
,استخدِم النتيجة ضمن الكائنات الرسومية ومكوّنات واجهة المستخدم لتطبيق العملية نفسها على الرموز**.**
أدخِل اللون الجديد إلى Figma لكل عنصر. يجب أن تجتاز جميع العناصر الآن تقييمات التباين.

مثال على تباين الألوان الذي يستوفي المعايير

من المحتمل أنّك شعرت بأنّها عملية طويلة، وقد تكون النتائج قد أدّت إلى إنشاء لوحة ألوان أقل تناسقًا. هنا يأتي دور الأدوات.

5- مصمَّم بالاستناد إلى مقياس السطوع

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

عند استخراج لون، ينتج عنه 5 ألوان مفتاحية متغيرة يتم منها إنشاء لوحات ألوان متدرجة. تتألف لوحة الألوان من ثلاث عشرة درجة لونية، بما في ذلك الأبيض والأسود. تعادل قيمة اللون 100 فكرة الضوء في الحد الأقصى، وتؤدي إلى اللون الأبيض. تعرض كل قيمة درجة لون بين 0 و100 مقدار الضوء المتوفّر في اللون.

يُعدّ نظام لوحات الألوان الدرجات اللونية أساسيًا لإتاحة أي نظام ألوان تلقائيًا.

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

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

تم تصميم الألوان الديناميكية في Material You لتعمل في سياقات لا يمكن التنبؤ بها. لإدارة نسب التباين في سياقات العرض المختلفة، تُعدّ مستويات الإضاءة السمة الرئيسية التي تتيح دمج الألوان بنجاح حتى بدون أن يختبر فريق المنتج كل مجموعة ألوان محدّدة.

6. إنشاء مظهر يسهل الوصول إليه

تُنشئ أداة إنشاء المظاهر رموز التصميم المتعدد الأبعاد كأنماط Figma، ما يتيح لك عرض الألوان الديناميكية وإنشاء مظهر مخصّص. ويتم ذلك مع اتّباع نظام ألوان Material 3 لضمان إنشاء ألوان يسهل استخدامها في نظام الألوان.

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

إضافة ألوان إلى MTB

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

نظام الألوان مع نموذج تجريبي مرتبط

بالنسبة إلى هذه التمارين، أنشأ تطبيق Material Theme Builder الرموز المميزة المطلوبة في ملف Figma.

7. التحقّق من التباين باستخدام أداة Material Theme Builder

هذا رائع، ولكنّنا ندرك أنّك تريد تعديل بعض هذه الأنماط يدويًا باستخدام ألوان مختلفة. تتضمّن أداة Material Theme Builder ميزة التحقّق من التباين المضمّنة لألوان المخطط الأساسي للمساعدة في اتّخاذ هذه القرارات.

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

التباين في مربّع حوار الأنماط في Figma

8. تهانينا

إنجاز عظيم. يجب أن تكون إمكانية الوصول جزءًا مهمًا من عملية التصميم، وقد أصبح ذلك أسهل من خلال التصميم المتعدد الأبعاد وMaterial Theme Builder.

إذا كانت لديك أي أسئلة، يمكنك طرحها علينا في أي وقت باستخدام @MaterialDesign على Twitter.

يمكنك متابعة المزيد من المحتوى والبرامج التعليمية حول التصميم على youtube.com/MaterialDesign