في حدث I / O 2014 الأخير ، عادت Google بمفاجئاتها الجديدة. بالإضافة إلى إصدار تحديث Android الجديد مع الاسم المستعار Lollipop ، قدمت Google أيضًا تصميمًا جديدًا للغة Design Material . إنه نظام تصميم لا يهدف فقط إلى تحسينات واجهة مستخدم Lollipop الجديدة ، ولكن أيضًا عبر الأجهزة والبيئات.
يحتوي التصميم متعدد الأبعاد على بعض الميزات الرئيسية التي تميزه بين اتجاهات التصميم الأخرى بطرقها الفريدة. تمامًا مثل اسمه ، تم استلهامه من مواد حقيقية ودمجها في نظام تصميم واحد لإنشاء تجربة مستخدم أنيقة وبديهية وجميلة وأكثر تفاعلية. في هذه المشاركة ، سننظر في ما هو داخل التصميم متعدد الأبعاد ونقدم لك دليلاً سريعًا حول كيفية تنفيذه. من خلال الاقتباس من مدونة Google ، سأقول: "هذا هو التصميم المتعدد الأبعاد".
مقدمة
تصميم المواد هو نظام تصميم موحد ، يعني أنه تم تصميمه للعمل مع جميع الأجهزة والأنظمة الأساسية المتاحة اليوم. من الجهاز اللوحي والهاتف الذكي إلى سطح المكتب ومن Android و iOs و Windows إلى منصات الويب. يجب أن تكون كل مظاهر التصميم والشعور كما هي في أي مكان.
المبادئ الرئيسية
هناك ثلاثة مبادئ رئيسية لبناء التصميم متعدد الأبعاد. هذه هي أهم جزء مما تقدمه المادة بشكل عام.
- المادة هي استعارة . تم استلهام تطوير المادة من خلال دراسة العناصر اللمسية التي نستخدمها يوميًا ، الورق والحبر . فهو يجعل ضوء الكائن والسطح والحركات أفضل عند التفاعل مع بعضها البعض.
- جريئة ورسومات ومقصودة . تؤدي الطباعة ، والشبكات ، والمساحة ، والمقياس ، واللون ، واستخدام الصور المستخدمة في التصميم التأسيسي المستند إلى الطباعة إلى تحسين محتوى المادة.
- الحركة توفر المعنى . هذا هو واحد من الشيء الأكثر ملاحظة. في المادة ، يجب أن يكون لديك حركة ذات معنى وملائمة ، وملاحظات دقيقة ورقيقة وفعالة ومتماسكة.
المكونات
ويولي التصميم المادي الاهتمام لكل تفاصيل مكوناته بحيث يمكن استخدامه بشكل عام. ستساعد هذه المكونات في إنشاء تطبيق وموقع مدهش. هناك العديد من المكونات التي توفرها المواد مثل الأزرار ، والتبديل ، والبطاقة ، وإدخال النص ، والقوات المسلحة البوروندية (زر التحرك العائم) ، والحوار ، والخبز المحمص ، والقائمة الفرعية ، وعلامة التبويب ، وأكثر من ذلك. كل واحد منهم لديه قاعدة خاصة به ومرشد حول كيفية بنائها حتى لا يكون لديك أي عناصر غير مهمة.
أنماط الشيء
إلى جانب المكونات ، توفر لك المادة أيضًا بعض الأنماط الأساسية لواجهة المستخدم الإضافية. ستحسن هذه الأنماط واجهة المستخدم التي أنشأتها باستخدام مكونات المادة. الأنماط بما في ذلك تنسيق البيانات ودرج التنقل والأخطاء والإيماءات وتقنية التمرير والبحث والإعدادات وتحميل الصور والتمرير السريع للتحديث والمزيد.
ألوان تصميم المواد
وقد تم تصميم الألوان في مادة بطريقة لن تجعلك تشعر بعدم الارتياح ، غريبة ومسطحة. من خلال إلهامنا من بيئاتنا اليومية مثل علامات الطرق ، والهندسة المعمارية المعاصرة ، وشريط تعليم علامات الرصيف ، والملاعب الرياضية ، يوفر لك التصميم متعدد الأبعاد ألوانًا غير متوقعة وذات روح عالية. هناك العديد من لوحات الألوان للاختيار لتوفر لك المزيد من الراحة عند تطوير التطبيقات أو المواقع. يمكنك أيضًا تنزيل عينات الألوان للاستخدام المحلي ، مثل مجموعة Photoshop.
رمز المادة
إذا كنت من مطوري برامج Android ، فيجب أن تكون على دراية ببعض حزم الرموز المجانية التي تقدمها Google. وعادة ما يتم استخدامها للعنصر الرئيسي وشريط العمل فقط. بينما بالنسبة لموارد أخرى ، يتعين علينا البحث عن رموز أخرى مثل المجلد والملف والنسخ واللصق ، وما إلى ذلك يدويًا. في التصميم متعدد الأبعاد ، قامت Google بإصلاح المشكلة باستخدام العديد من حزم الرموز التي يمكنك استخدامها.
لقد مرت كل واحدة من الأيقونات ببعض منهج التصميم الذي يستخدم أيضًا دراسة المواد الملموسة. هم الحفاظ على مبدأ المواد أيضا ، وهذا ثابت. يمكنك تنزيل هذه الرموز على GitHub ، وتأتي مع بعض الخيارات للاستخدامات المختلفة مثل iOs أو الويب أو Android أو svg. إذا كنت تريد خيارًا أوسع للتخصيص السهل ، فربما تريد أن ترى حزم رمز التصميم متعدد الأبعاد على FlatIcon. داخل الحزمة ، ستحصل على رمز المتجه (SVG و EPS) ، PSD و PNG.
الرسوم المتحركة للمادة
هذه هي ميزات المادة التي أحبها أكثر. الرسوم المتحركة في مادة حقيقية وبديهية جدا. كل الرسوم المتحركة لديها انتقالات ذات مغزى ومتسقة وتوقيت صحيح. عرض gif المعروض أدناه هو واحد من الرسوم المتحركة المادية الجميلة. لتوفير تفاعل جذاب ومتجاوب ، يعمل فريق Google أيضًا على إنشاء رسوم متحركة تشبه تموج الماء لتأثير إدخال المستخدم. يتم استخدامه في الغالب على الأزرار والبطاقات.
تلك الميزات التي شرحتها هي جزء بسيط مما يقدمه التصميم متعدد الأبعاد. لمعرفة المزيد حول العالم المادي ، ما عليك سوى التوجه إلى صفحة الوثائق.
التنفيذ
بشكل افتراضي ، يأتي التصميم متعدد الأبعاد في شكل تحديث جديد لواجهة المستخدم لنظام التشغيل Android Lollipop. جميع الإرشادات التي طبقتها المادة داخلها. نظرًا لأن المواد تستهدف جميع أنواع البيئات ، فلن يكون من الصعب تطبيقها على نظام آخر. وبفضل المجتمعات ، أصبح الأمر أسهل بكثير مع بعض الأدوات التي أنشأوها.
هذه هي عدة طرق يمكنك تحقيقها للحصول على تصميم متعدد الأبعاد خارج Android ، على الويب على سبيل المثال.
باستخدام CSS Frameworks
هذه هي الطريقة الأسهل إذا كنت ترغب في تنفيذ التصميم متعدد الأبعاد في منصة الويب. مع الأطر ، كل ما عليك القيام به هو تهيئة البرنامج ثم كتابة العناصر التي تحتاجها. هناك العديد من الأطر التي يمكنك استخدامها مثل Materialize أو Material UI أو Polymer على سبيل المثال لا الحصر. يقع اختياري الشخصي في Materialize. من الأسهل استخدام وفهم وثائق رائعة مع عرض توضيحي جميل.
يتبع المبادئ التوجيهية
إذا كنت ترغب في تنفيذ المادة دون مساعدة من الإطار وتفضل الفوضى مع الرموز ، يجب عليك اتباع إرشادات المواد. هناك ، ستجد كل ما يجب فعله وما لا يجب أن تلاحظه لتحقيق مبادئ المواد. سترى جميع الأدلة الأساسية لإنشاء المكونات والتخطيط والرسوم المتحركة واللون والأنماط والمزيد. قد ترغب في رؤية بعض قائمة التحقق من المواد لتسهيل التطوير.
استنتاج
التصميم المادي هو نظام تصميم رائع وأصبح أحد أكثر الاتجاهات المتوقعة لهذا العام. في الشهرين القادمين ، قد نراه في كل مكان. سيتم صقل المزيد من التطبيقات والموقع باستخدام تحديث تصميم Google الجديد هذا.
ومع التصميم متعدد الأبعاد ، أثبتت Google تفوقها كواحدة من أكبر شركات التكنولوجيا. إنه يجعل Google لا تقود فقط في محرك البحث ونظام التشغيل المحمول ولكن أيضًا في مجال التصميم. حتى الآن ، لا توجد شركات أخرى تطور هذا الشيء الكبير مثل Google. لكن التجربة تقول ، لن تدوم طويلا. دعنا فقط ننتظر استجابة شركات أخرى لتصميم المواد في Google.
