15 إطارًا مجانيًا لتصميم المواد للمطورين 2021

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

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

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

تجسد

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

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

مادة Swift

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

الإطار المادي

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

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

جوهر

تجمع Essence بين شيئين: Material Design & React.js - إذا كنت تبحث عن أداء ويب سريع بمواصفات تصميم مثالية ، فسيكون من الصعب مطابقة ما تقدمه Essence لجميع المطورين. يتم إعادة بناء جميع مكونات واجهة المستخدم التي يجب أن يقدمها تصميم المواد من خلال React.js إذا قررت اختيار Essence! النتيجة النهائية هي اختيار عنصر واجهة مستخدم مذهل سيخلق تجربة مستخدم فريدة. يتوفر Essence بسهولة على NPM حتى تتمكن من التثبيت والبدء باستخدام أمر تثبيت بسيط. يجب تثبيت المكونات واستخدامها بشكل منفصل ، ولكن بغض النظر عن ذلك ، يتم وضع كل شيء ضمن نفس المجلد.

Onsen UI

تشتهر Onsen UI بأميال عديدة لكونها واحدة من أفضل الأطر الهجينة لبناء تطبيقات الأجهزة المحمولة باستخدام HTML5. هذه المنصة مفتوحة المصدر مجانية تمامًا وكانت دائمًا كذلك ، وقد ساعد الفهم الحديث للتصميم الجيد مطوري Onsen UI على إنشاء عناصر واجهة مستخدم تنتهي في النهاية ببناء تجارب مستخدم لا مثيل لها. كإطار عمل حيادي ، يمكنك استخدام Onsen حرفيًا مع أي إطار عمل آخر هناك ولا تقلق بشأن أي تضارب في التعليمات البرمجية أو مشكلات على الإطلاق. هذا أيضًا ما يحدث في Onsen UI V2 الجديد - إنها مكونات مدمجة لتصميم المواد و Angular 2 و React لإثراء التجربة بشكل أكبر. في الوقت الحالي لا يزال مرشحًا للإصدار ، ولكن يتم استخدامه من قبل الآلاف بالفعل. إذا كنت تنوي إطلاق منتج للجوال أو الدخول في تطوير برامج الهاتف المحمول ، فإن تعلم كيفية استخدام Onsen UI يمكن أن يضيف بعض النفوذ الإضافي إلى سيرتك الذاتية.

المواد CSS

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

مادة التصميم لايت

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

سطح

يبدو أن الكثير من المطورين يمارسون قدراتهم في إنشاء إطار عمل بأنفسهم ، فإن Surface هو إطار آخر خفيف الوزن (في هذه الحالة خفيف الوزن حقًا) ينتهي به الأمر إلى أن يكون حجمه 6 كيلو بايت تقريبًا عند تصغيره. يعتمد أيضًا على CSS الخالص ، لذا لن تضطر إلى توصيل JavaScript على الإطلاق. ابدأ بالانتقال إلى وثائق Surface والتعرف على الطريقة التي تعمل بها شبكة Surface ، بحيث يكون لديك وقت أسهل في الحصول على جميع المكونات على اللوحة. مكونات مثل الرسوم المتحركة والتنبيهات والمربعات والعناصر القابلة للطي والتذييلات والوسائط والوسائط والأدوات المساعدة وتلميحات الأدوات. جعل المطورون كل هذا منظمًا بدقة وأسهل في الإعداد من العد إلى 1 من 100 للخلف.

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

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

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

MUI

MUI عبارة عن إطار عمل CSS غني وخفيف الوزن يضفي الحيوية على تصميماتك باستخدام تصميم المواد من Google. يوفر لمستخدميه أنواعًا مختلفة من التخطيطات التجريبية: مدونة وصفحة مقصودة وقائمة شريط التمرير ومربع اشتراك في النشرة الإخبارية بتنسيق HTML. من خلال هذه العروض التوضيحية وحدها ، يمكن للمطورين معرفة مدى كفاءة تصميم المواد ومدى سهولة تنفيذه. تعمل MUI أيضًا مع إطاراتي React.js و Angular.js حتى تتمكن من توصيل تطبيقاتك بالمواد دون أي متاعب. هناك أيضًا مكونات ويب فردية مختلفة ، وكلها جاهزة للاستخدام.

مادة الزاوي

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

تصميم المواد لـ Bootstrap

يعد Bootstrap بلا شك المفضل لدى العديد من مطوري الواجهة الأمامية في العالم. يُمكّن Bootstrap الملايين من مواقع الويب اليوم ، وهناك ملايين أخرى لم تأت بعد. تصميم المواد لـ Bootstrap هو سمة Bootstrap فعالة تستخدم التصميم متعدد الأبعاد لإنشاء تجارب تصميم مذهلة. يمكنك الاختيار من بين جميع عناصر Bootstrap الحالية والمفضلة لديك. أيضًا ، يمكنك تحسينها باستخدام واجهة المستخدم لتصميم المواد ، ما مدى روعة ذلك؟ قد يتطلب الأمر القليل من الإصلاح لجعله يعمل لمن لم يستخدم NPM من قبل. يبدو أن التوثيق يشرح عملية بدء التشغيل بشكل جيد إلى حد ما.

لومكس

LumX هو أول إطار أمامي سريع الاستجابة يعتمد على مواصفات AngularJS & Google Material Design. يوفر إطار عمل CSS كاملًا تم إنشاؤه باستخدام Sass ومجموعة من مكونات AngularJS. لاستخدام LumX ، ستحتاج إلى معرفة كيفية استخدام Bower لتثبيت المكتبات. إذا لم تكن معتادًا على Bower ، فإن البديل الآخر هو تنزيل جميع التبعيات بشكل فردي. وتشمل هذه الرموز Angular و jQuery و Velocity و Moment و Bourbon و Material. تستخدم LumX أيضًا Flexbox من أجل إنشاء أنظمة شبكة موحدة وسريعة الاستجابة باستخدام خاصية Flexbox. تغطي مكونات LumX أي منطقة وجزءًا من تصميم تخطيط موقع الويب التقليدي.

المواد الأيونية

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

فونون

يوفر Phonon Framework حلاً موجزًا ​​لإنشاء تطبيقات المحمول HTML5 باستخدام تقنية إطار العمل المختلط. الجانب القوي لـ Phono هو حدسه الجيد لتوسيع نطاق تطبيقاتك بسرعة حيث تريدها. إنها أيضًا مكتبة واجهة مستخدم تمنحك أدوات سريعة لإنشاء واجهات أثناء التنقل. يصل حجم الهاتف إلى 24 كيلو بايت تقريبًا عند تصغيره وتحسينه بالكامل. هذا هو أحد الأسباب الرئيسية التي تجعل مطوري الهواتف المحمولة يستخدمون Phonon. هذا أقل بكثير مما تراه في أطر مثل Ionic أو Onsen!