لقد تحدينا أنفسنا لإنشاء لغة بصرية للمستخدمين وهي تجمع بين المبادئ الكلاسيكية للتصميم الجيد مع الإبتكار وإمكانية إستخدام التكنولوجيا والعلوم .. هذا ما قالته جوجل .هذا هو تصميم الماتريال (الخامات أو المواد ).هذة المواصفات هي وثيقة حية وسيتم تحديثها بشكل مستمر ونحن نواصل تطوير مبادئ وتفاصيل تصميم المواد.

الأهداف

إنشاء لغة بصرية للمستخدمين وهي تجمع بين المبادئ الكلاسيكية للتصميم الجيد مع الإبتكار وإمكانية إستخدام التكنولجيا والعلوم.

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

المبادئ

إستعارة الماتريال “الخامات أو المواد” (Material is the metaphor)

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

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

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

الوضوح،الجرافيك،القصد (Bold, graphic, intentional)

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

هذة العناصر تعمل أكثر بكثير من مجرد أنها مريحة للعين؛لأنها تقوم بخلق التسلسل الهرمي، التركيز، إظهار المعاني.

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

التركيز على إجراءات المستخدم يجعل الوظيفة الأساسية واضحة على الفور ويوفر نقاط الطرق للمستخدم.

الحركة توفر المعني (Motion provides meaning)

الحركة تحترم و تعزز المستخدم كمتحرك رئيسي. حركات و أفعال المستخدم الرئيسي هي نقط الانحاء التي تبدأ عندها الحركة، و تحول التصميم كله.

جميع الإجراءات تتم في بيئة واحدة،  يتم عرض الأعمال إلى المستخدم دون كسر استمرارية التجربة حتي أثناء تحركهم وتحولهم (transform) واعادة تنظيمهم.

التحريك أو الحركة مفيدة ومناسبة، وهي تعمل على تركيز الإهتمام والحفاظ على الإستمرارية.التحولات (Transitions) فعالة ومتناسقة.

عناصر السلسة:

1-المقدمة

2-الرسوم المتحركة (Animation):

• الحركة الأصلية (Authentic Motion).
• تفاصيل رائعة (Meaningful Transitions).
• التفاعل المستجيب (Responsive Interaction).
• التحول الهادف (Meaningful Transitions).

3-الشكل أو النمط (Style):

• الألوان (Color).
• التيبوجرافي (Typography).
• الأيقونات (Icons).
• الصور (Imagery).

4-التصميم “التخطيط” (Layout):

• المبادئ (Principles).
• المقاييس (Metrics and Keylines ).
• الهيكل والبنية (Structure).

5-المكونات “العناصر” (Components):

• الصفحات السفلية (Bottom Sheets).
• الأزرار (Buttons).
• البطاقات (Cards).
• الشرائح (Chips).
•  مربعات الحوار (Dialogs).
• الفواصل (Dividers).
• الشبكات (Grids).
• القوائم الرئيسية (Menus).
• قائمة التحكمات (List controls).
• القوائم (Lists)
• التقدم و النشاط (Progress and Activity).
• السلايدر (Sliders)
• النوافذ المنبثقة (Snackbars and Toasts).
• العناوين الفرعية (Subheaders).
•  التنقل (Switches).
• علامات التبويب (Tabs).
• مساحات النصوص (Text fields).
• التلميحات (Tooltips).

6-الأنماط (Patterns):

• التحديد أو الإختيار (Selection).
• الإشارات (Gestures).
• إجراءات التعزيز (Promoted Actions).
• الإعدادت (Settings).
• معالجة الصور (Imagery Treatment).
• البحث (Search).

7-قابلية الاستخدام (Usability):

• إمكانية الوصول (Accessibility).

8-العيوب و ما يؤخذ على جوجل في هذة المبادئ:

• الفلسفة الكامنة وراء التصميم.
• ماذا يجب عليك أنا تأخد من تصميم الماتريال؟
• محاولات فاشلة حتى الأن.

هذة كانت مقدمة لدورة مبادئ جوجل التوجهية لتصميم الماتريل(المواد والخامات)وبإذن الله سوف يتم نشر مقال يومياً نظراً لأن الدورة مكثفة ودسمة.

المصدر