أنشئ تطبيقات ويب فائقة الحداثة باستخدام مادة زاويّة

في مؤتمر Google I / O مرة أخرى في عام 2014 ، أعلنت Google عن التصميم متعدد الأبعاد ، لغة التصميم الجديدة الخاصة بها. لقد قاموا منذ ذلك الحين بتحويل الكثير من تطبيقاتهم الشعبية للالتزام بهذه المواصفات الجديدة في محاولة لتوفير تجربة متسقة. الآن يحاولون إقناعك بالمتابعة أيضًا.

ما هو التصميم متعدد الأبعاد؟

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

المرمى

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

مبادئ

تأسس التصميم متعدد الأبعاد على ثلاثة مبادئ.

المادة هي الاستعارة

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

جريئة ، رسومية ، مقصودة

خيارات الألوان المتعمدة والصور من الحافة إلى الحافة والطباعة واسعة النطاق والمساحة البيضاء المتعمدة تخلق واجهة جريئة ورسومية تغمر المستخدم في التجربة. زر الإجراء العائم ، أو FAB ، هو مثال رئيسي على هذا المبدأ. هل لاحظت تلك الدائرة الصغيرة التي بها رمز "زائد" تطفو في تطبيق Google Inbox؟ يوضح التصميم متعدد الأبعاد أن هذا الزر مهم للغاية.

تقدم الحركة معنى

الحركة ذات مغزى ومناسبة ، تعمل على تركيز الانتباه والحفاظ على الاستمرارية. ردود الفعل خفية لكنها واضحة. التحولات فعالة لكنها متماسكة. النقطة الأساسية هنا هي التحريك فقط عندما يكون له هدف وليس المبالغة فيه.

كيف تتناسب AngularJS مع التصميم متعدد الأبعاد؟

AngularJS ، "Superheroic JavaScript MVW Framework" من Google ، يعالج العديد من التحديات التي تواجه تطوير التطبيقات أحادية الصفحة (SPA). يوفر الإطار المطلوب لإنشاء تطبيقات الويب الحديثة التي تتصل بواجهات برمجة التطبيقات ولا تحتاج أبدًا إلى تحديث الصفحة.

AngularJS: نهج جديد

Angular هو ما كان يمكن أن يكون عليه HTML ، لو تم تصميمه للتطبيقات. HTML هي لغة تعريفية رائعة للمستندات الثابتة ، ولكن إنشاء تطبيقات ديناميكية ليس كثيرًا.

لطالما كان إنشاء تطبيقات ديناميكية باستخدام HTML بمثابة تمرين في خداع المتصفح للقيام بأشياء لم يكن من المفترض القيام بها. هناك طريقتان للقيام بذلك.

1. مكتبة - مجموعة من الوظائف. (مسج)
2. الإطار - تملأ التعليمات البرمجية العناصر الثابتة ديناميكيًا عند الحاجة. (دوراندال ، إمبر)

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

ألن يكون الأمر رائعًا إذا أنشأت Google مجموعة من التوجيهات بناءً على مبادئ التصميم متعدد الأبعاد؟

إدخال مادة الزاوي

تعمل Google بنشاط على تطوير Angular Material ، وهو تنفيذ للتصميم متعدد الأبعاد في AngularJS. توفر المواد الزاويّة مجموعة من مكونات واجهة المستخدم القابلة لإعادة الاستخدام بناءً على نظام تصميم المواد. تتكون المادة الزاويّة من عدة قطع. يحتوي على مكتبة CSS للطباعة والعناصر الأخرى ، ويوفر نهج JavaScript مثيرًا للاهتمام بالنسبة لهم ، ويستخدم تخطيطه المتجاوب شبكة مرنة. لكن الميزة الأكثر جاذبية لـ Angular Material هي مجموعتها المذهلة من التوجيهات.

ابدء

لقد أنشأت مشروعًا مفتوح المصدر للمساعدة في بدء مشروع Angular Material التالي. الغرض من هذا المشروع هو إعطاء مثال على كل ما تقدمه Angular Material ، كل ذلك تحت سقف واحد. التنقل والصفحات والتسميات والمجموعة الكاملة من التوجيهات جاهزة للعمل ، كل ما عليك فعله هو تغذية بياناتك وربطها بـ HTML.

ألقِ نظرة على العرض التوضيحي هنا أو اكتب الكود على GitHub.

التوجيهات

التوجيهات هي سمة أساسية من سمات Angular. يأتي Angular بالعديد من التوجيهات التي تستخدمها طوال الوقت مثل ng-model أو ng-Repar. إنها قطعة مهمة جدًا من Angular تجعل إطار العمل يعمل كما ينبغي.

كيفية استخدام توجيه المواد الزاوي

توسع Angular Material هذه المكتبة التوجيهية بمجموعة من التوجيهات المستوحاة من تصميم المواد الجميلة. توجيهات المواد الزاويّة هي علامات HTML تبدأ بـ "md" ؛ اختصار لـ Material Design. لا يمكن أن تكون أسهل بكثير في الاستخدام. على سبيل المثال ، دعنا نلقي نظرة على الزر القديم الجيد.

قد يبدو زر HTML القياسي شيئًا كهذا.

 <button>Click Me</button>

يبدو زر المادة الزاوي هكذا.

 <md-button>Click Me</md-button>

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

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

خدمات

تعتبر الخدمات أيضًا أساسية للوظيفة الزاويّة. يتم استخدامها لمشاركة التعليمات البرمجية عبر التطبيق. يتم استخدام خدمة أساسية شائعة مثل $ http وإعادة استخدامها لمكالمات البيانات في تطبيقات Angular.

الخدمات الزاوية هي:

1. تم إنشاء مثيل له بشكل كسول - يقوم Angular بإنشاء مثيل للخدمة فقط عندما يعتمد عليها أحد مكونات التطبيق.
2. الأحجام الفردية - يحصل كل مكون يعتمد على خدمة على مرجع للمثيل الفردي الذي تم إنشاؤه بواسطة مصنع الخدمة.

كيفية استخدام خدمة المواد الزاوية

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

النخب عبارة عن إشعار صغير ينزلق من أعلى الشاشة ويختفي بعد بضع ثوانٍ. استخدام هذه الخدمة سهل.

في JavaScript ،

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

يوضح هذا المثال نخبًا بسيطًا ينبثق في أسفل يسار الشاشة ويتراجع بعد 3 ثوانٍ.

يمكن تخصيص بعض الخدمات باستخدام قوالب مخصصة. في هذه الحالة ، يمكن لخدمة $ mdToast استخدام قالب HTML مخصص باستخدام التوجيه md-toast.

تصميم

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

وفقًا لإرشادات التصميم متعدد الأبعاد ، يجب "تقييد اختيارك للألوان باختيار ثلاثة ألوان من اللوحة الأساسية ولون تمييز واحد من اللوحة الثانوية." تجعل Angular Material اتباع هذا المبدأ التوجيهي أمرًا بسيطًا باستخدام JavaScript لتكوين السمة. لكن أولاً ، ما هو اللوح والصبغة؟

• هوى: الصبغة هي لون واحد في لوحة.
• اللوحة: اللوحة عبارة عن مجموعة من الأشكال.

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

تكوين السمة

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

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

باستخدام السمة

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

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

تخطيط

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

أفضل 9 توجيهات بشأن المواد الزاويّة

هناك عدد كبير جدًا من توجيهات Angular Material لإدراجها جميعًا ، لذا أود أن أشارككم مفضلاتي.

9. التقدم الخطي

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

8. منتقي التاريخ

يجعل توجيه "منتقي التاريخ" اختيار التاريخ تجربة نظيفة وبسيطة للمستخدم وكتابة سطر واحد حقيقي. ما عليك سوى استخدام md-datepicker وحصر النطاق اختياريًا مع md-min-date و md-max-date وهذا كل شيء.

7. الإكمال التلقائي

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

6. الورقة السفلية

الورقة السفلية عبارة عن قائمة صغيرة تنزلق لأعلى من أسفل الشاشة ، وتغطي المحتوى وتركز. كان المقصود في الأصل استخدامه فقط للأجهزة المحمولة ، وقد اكتسبت الطبقة السفلية شعبية على الشاشات الأكبر حجمًا. لاستخدامه ، قم بإنشاء قالب باستخدام ورقة md-bottom تحتوي إما على شبكة md أو قائمة md لتخطيط الشبكة أو تخطيط القائمة ، على التوالي. ثم اتصل بخدمة "الورقة السفلية" ، $ mdBottomSheet.show ().

5. الإدخال

استمارات الإدخال مملة وكانت منذ بداية الإنترنت. لكن ليس عليهم أن يكونوا كذلك! امنح مدخلاتك بعض الذوق مع توجيه الإدخال. قم بلف علامة الإدخال بحاوية md-input-container وشاهدها وهي تنبض بالحياة. شاهد كعنصر نائب يتحرك في تسمية عائمة. تحقق من صحة إدخالك بسهولة من خلال تغييرات الألوان والرسائل التحذيرية الفورية ، ولكن الدقيقة. يأخذ توجيه الإدخال عنصرًا يُتوقع أن يكون مملًا ويقدم مفاجأة سارة.

4. نخب

تجربة المستخدم الأكثر تفاقمًا هي عدم معرفة ما يفعله التطبيق. نحن نخفف من تفاقم المشكلة باستخدام المحامص ، أو القليل من الإخطارات غير المزعجة. في الأيام الخوالي ، عندما أرسلنا طلبًا إلى الخادم ، انتظرنا على تلك الصفحة حتى عادت الاستجابة قبل أن نتمكن من المضي قدمًا. انخفض مدى اهتمام المستخدم بشكل كبير منذ ذلك الحين. في SPA اليوم ، نضغط على زر ونتوقع المضي قدمًا على الفور ، والتعامل مع استجابة الخادم عندما يأتي. يجعل توجيه Toast هذه قطعة من الكعكة. يتم استدعاء المحمصة عن طريق استخدام خدمة التوست ، $ mdToast.show () ، وتعيين النص والمدة والزاوية التي ستظهر فيها. اصنع محمصة مخصصة باستخدام md-toast.

3. قائمة الشبكة

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

2. الإطار الأبيض

مفهوم الفضاء هو جوهر التصميم متعدد الأبعاد واستعارته الورقية. ورقتان من الورق في نفس الموضع (أو العمق) على شكل حرف z تشكلان درزة ويجب أن تتحرك معًا. تشكل ورقتان متداخلتان ، بمواضع z مختلفة ، خطوة. يتحركون بشكل مستقل عن بعضهم البعض. لمتابعة التصميم ، يجب أن نكون قادرين على إزاحة العناصر على طول المحور z. توفر المادة الزاويّة طريقة بسيطة للقيام بذلك. باستخدام التوجيه Whiteframe ، اضبط الفئة على md-whiteframe-z {x} ، حيث x هي وحدات العمق لأعلى من الخلفية. كلما زاد الرقم ، زاد الظل الذي تلقيه الورقة.

1. Sidenav

لم يكن إنشاء قائمة تنقل جانبية أسهل من أي وقت مضى. يضع توجيه Sidenav قائمة تنقل على يسار أو يمين الشاشة. مع وضع الهاتف المحمول في الاعتبار ، فإنه يقوم بالتمرير السريع للداخل والخارج كما هو متوقع ، أو بشكل برمجي بنقرة زر. إضافة لطيفة هي ميزة فتح القفل. يمكن ضبط التنقل الجانبي بحيث يفتح عندما تصل الشاشة إلى حجم معين. من خلال تعيين المعلمة md-is-locked-open = ”$ mdMedia ('gt-sm')” ، سيتم وضع القائمة بعيدًا على الهاتف ولكن يتم قفلها على الجهاز اللوحي وأكبر.

خاتمة

تقوم Google بتحويل تطبيقاتها الأكثر شيوعًا إلى تصميم متعدد الأبعاد. وهم الآن يقودون تطوير Angular Material ، وهو تنفيذ لتصميم المواد مكتوب بلغة AngularJS. يستخدم التصميم متعدد الأبعاد استعارة ورقية ونوايا جريئة وحركة ذات مغزى. ينظم AngularJS تطبيقات الصفحة الواحدة. تطبق Angular Material مبادئ التصميم متعدد الأبعاد لتطبيقات AngularJS.

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

ما رأيك في اختياراتي لأفضل توجيهات المواد الزاويّة؟ هل فهمتهم بشكل صحيح؟ ما هي مفضلاتك؟