متریال دیزاین چیست و ۲۰ فریم ورک فوق العاده متریال دیزاین

متریال دیزاین (Material Design) یک زبان طراحی محسوب می شود که در سال های نه چندان دور توسط گوگل توسعه داده شده است. طراحان و کاربران نهایی (End Users) می توانند از طریق متریال دیزاین دستورالعمل های گوگل را تکرار کنند. در این مقاله زبان طراحی متریال دیزاین گوگل را با یکدیگر مورد بررسی قرار داده و ۲۰ مورد از برترین فریم ورک های آن را نیز به شما معرفی خواهیم کرد.

متریال دیزاین چیست؟

گوگل در سال ۲۰۱۴ زبان متریال دیزاین را بر اساس طراحی Card-Based موجود در دستیار هوشمند Google Now توسعه داد. در آن زمان سبک طراحی Flat محبوبیت زیادی در بین طراحان داشت اما متریال دیزاین با استایل طراحی کاغذی شکل (Paper-Based) پا به عرصه طراحی گذاشت.

هدف متریال دیزاین همانند سیستم های طراحی دیگر این است که تجربه کاربری (User Experience) مشابهی را در دستگاه ها، پلتفرم ها و ورودی های مختلف برای کاربران به ارمغان آورد. در حقیقت همانطور که کمپانی اپل اصول طراحی Flat را به عنوان استاندارد خود مورد استفاده قرار می دهد، گوگل نیز با استفاده از متریال دیزاین و صرف نظر از نحوه دسترسی کاربران به محصولات خود، سعی کرده تا تجربه کاربری یکپارچه و خوشایندی را برای آنها به ارمغان آورد.

متریال دیزاین دستورالعمل هایی درباره تمامی مقوله های مربوط به طراحی نظیر نوع فونت (Typography)، چهارچوب (Grid)، فضا (Space)، مقیاس (Scale)، رنگ و تصاویر را در اختیار طراح قرار می دهد. علاوه بر این طراحان با استفاده از این زبان طراحی می توانند طرح های هدفمند خود را متناسب با سلسله مراتب، معنی و تمرکز بر روی نتیجه نهایی ایجاد کنند.

۲۰ فریم ورک برتر دیزاین متریال

۱- فریم ورک Materialize

فریم ورک Materialize یک کتابخانه فرانت اند (Front-End) ریسپانسیو بسیار مدرن محسوب می شود که مبتنی بر زبان متریال دیزاین توسعه داده شده است. کار با Materialize به دلیل وجود مستندات دقیق بسیار ساده است، این فریم ورک همچنین مجهز به نسخه SASS است که امکان انتخاب کامپوننت های مورد نظر را در اختیار کاربران قرار می دهد.

نرم افزار Materialize یکی از محبوب ترین فریم ورک های متریال دیزاین به شمار می رود که برای افراد مبتدی نیز گزینه بسیار مطلوبی محسوب می شود.

• پشتیبانی : Alvin Wang
• تاریخ انتشار : ۲۰۱۴
• محبوبیت در GitHub : 37.700 ستاره و ۴۹۰۰ فورک
• لایسنس : MIT

۲- Muse-UI

ابزار Muse-UI یکی از سبک ترین فریم ورک های CSS به شمار می رود که از دستورالعمل های متریال دیزاین تبعیت می کند. در حقیقت سایز فایل های CSS و JS موجود در آن به صورت فشرده ۱۲ کیلوبایت است. این ابزار مبتنی بر کتابخانه کامپوننت محور Vue 2.0 طراحی شده و دارای بیش از ۴۰ کامپوننت UI است، این نرم افزار همچنین از React و سفارشی سازی با افزونه SASS نیز پشتیبانی می کند.

• پشتیبانی : Andres Morey
• تاریخ انتشار : ۲۰۱۶
• محبوبیت در GitHub : 8.100 ستاره و ۹۱۱ فورک
• لایسنس : MIT

۳- فریم ورک Material UI

فریم ورک Material UI دارای کامپوننت های React است که دستورالعمل های متریال دیزاین گوگل را اجرا می کنند. اگر از فریم ورک ری اکت استفاده می کنید، ابزار Material UI بهترین گزینه برای شما محسوب می شود. این ابزار همچنین دارای حالت پس زمینه تیره و روشن است و در حال حاضر یکی از محبوب ترین فریم ورک های متریال دیزاین به شمار می رود.

• پشتیبانی : Material-UI Team
• تاریخ انتشار : ۲۰۱۴
• محبوبیت در GitHub : 58.800 ستاره و ۱۶۹۰۰ فورک
• لایسنس : MIT

۴- Material Design Lite

فریم ورک Material Design Lite توسط کمپانی گوگل توسعه داده شده است و از طریق آن می توانید ظاهر متریال دیزاین را به وبسایت خود اضافه کنید. این ابزار به هیچ کدام از فریم ورک های جاوا اسکریپت وابسته نیست و برای استفاده در دستگاه های مختلف بهینه سازی شده است. فریم ورک متریال دیزاین لایت از پیش پردازنده SASS نیز پشتیبانی می کند، البته این فریم ورک به صورت مستقیم از طرف گوگل پشتیبانی نمی شود اما دارای انجمن کاربری گسترده ای که می توانید در صورت نیاز از آن کمک بگیرید.

• پشتیبانی : Google Team
• تاریخ انتشار : ۲۰۱۵
• محبوبیت در GitHub : 31.600 ستاره و ۵٫۳۰۰ فورک
• لایسنس : Apache License 2.0

۵- فریم ورک Material Components for the web

فریم ورک Material Components for the web توسط مهندسین گوگل طراحی شده است و به نوعی جایگزین متریال دیزاین لایت به شمار می رود. شما با استفاده از این ابزار می توانید کامپوننت های متریال دیزاین را به راحتی با فریم ورک های جاوا اسکریپت ادغام کنید.

• پشتیبانی : Material Components Team
• تاریخ انتشار : ۲۰۱۶
• محبوبیت در GitHub : 14.600 ستاره و ۱٫۹۰۰ فورک
• لایسنس : Apache License 2.0

۶- فریم ورک Material Design for Bootstrap

فریم ورک Material Design for Bootstrap بهترین گزینه برای کاربران بوت استرپ به شمار می رود. این ابزار مبتنی بر فریم ورک های بوت استرپ طراحی شده است و شما می توانید از طریق آن برای Bootstrap 3 و Bootstrap 4 کامپوننت بسازید. این فریم ورک همچنین مستندات بسیار مطلوبی دارد و از جامعه کاربری بسیار فعالی نیز برخوردار است.

• پشتیبانی : Federico Zivolo
• تاریخ انتشار : ۲۰۱۴
• محبوبیت در GitHub : 20.200 ستاره و ۳٫۳۰۰ فورک
• لایسنس : MIT

۷- Polymer

پلیمر کتابخانه ای است که از طریق آن می توانید با با سرعت هر چه تمام کامپوننت هایی با قابلیت استفاده مجدد بسازید و سپس آنها را در پروژه خود اعمال (Import) کنید. مجموعه عناصر کاغذی شکل این فریم ورک دستورالعمل های متریال دیزاین گوگل را پیاده سازی می کنند.

علاوه بر این شما با استفاده از دیگر کامپوننت های پلیمر می توانید به Layoutهای متریال دیزاین دسترسی پیدا کنید. این ابزار توسط گوگل و جامعه کاربری موجود در GitHub پشتیبانی می شود و در کمپانی های بزرگی نظیر یوتیوب، Google Earth، نتفلیکس و غیره مورد استفاده طراحان قرار می گیرد.

• پشتیبانی : Polymer Team
• تاریخ انتشار : ۲۰۱۲
• محبوبیت در GitHub : 21.400 ستاره و ۲۰۰۰ فورک

۸- Angular Material

ابزار Angular Material یک فریم ورک متریال دیزیان به شمار می رود که برای اجرای دستورالعمل های آن در AngularJS توسط تیم انگولار توسعه داده شده است. این فریم ورک دارای مجموعه بزرگی از کامپوننت های Reusable و تست شده، مستندات (Documentation) همراه با نمونه کد و یک انجمن کاربری بسیار فعال است. به خاطر داشته باشید که این کتابخانه در دو نسخه سازگار با انگولار جی اس ۱ و انگولار جی اس ۲+ در دسترس طراحان قرار دارد.

جزییات مربوط به انگولار متریال برای AngularJS 2+ به شرح زیر است :

• پشتیبانی : Angular Team
• تاریخ انتشار : ۲۰۱۶
• محبوبیت در GitHub : 20.000 ستاره و ۵٫۴۰۰ فورک
• لایسنس : MIT

و جزییات فریم ورک انگولار متریال AngularJS 1 نیزبه شرح زیر است :

• پشتیبانی : Angular Team
• تاریخ انتشار : ۲۰۱۴
• محبوبیت در GitHub : 16.600 ستاره و ۳٫۶۰۰ فورک
• لایسنس : MIT
• وبسایت : angularjs.org

۹- Vuetify

این ابزار یک فریم ورک معنایی برای Vue 2 به شمار می رود که کامپوننت هایی با قابلیت استفاده مجدد را در اختیار طراحان اپلیکیشن قرار می دهد. این نرم افزار در راستای دستورالعمل های متریال دیزاین گوگل توسعه یافته است و مستندات مطلوب و نمونه کدهای بیشماری در خود دارد به گونه ای که می توان به راحتی از آنها در پروژه خود استفاده کنید.

• پشتیبانی : js Team
• تاریخ انتشار : ۲۰۱۶
• محبوبیت در GitHub : 26.200 ستاره و ۴٫۵۰۰ فورک
• لایسنس : MIT

۱۰- فریم ورک JFoenix

ابزار JFoenix یک کتابخانه است که دستورالعمل های متریال دیزاین را با استفاده از کامپوننت های جاوا اجرا می کند. این ابزار همچنین کامپوننت های کلاسیک را در خود دارد و شما با استفاده از JavaFX می توانید آن ها را پیاده سازی کنید.

• پشتیبانی : JFoeniX
• تاریخ انتشار : ۲۰۱۵
• محبوبیت در GitHub : 4.900 ستاره و ۹۴۲ فورک
• لایسنس : Apache License 2.0

۱۱- Propeller

ابزار Propeller یک فریم ورک فرانت اند ریسپانسیو به شمار می رود که مبتنی بر استانداردهای متریال دیزاین گوگل و Bootstrap طراحی شده است. این فریم ورک مستندات و نمونه کدهای دقیقی در خود دارد که می توانید از آن ها در پروژه خود استفاده کنید.

• پشتیبانی : Digicorp Team
• تاریخ انتشار : ۲۰۱۶
• محبوبیت در GitHub : 1.100 ستاره و ۱۵۷ فورک
• لایسنس : MIT

۱۲- Framework7

ابزار Framework7 یک فریم ورک HTML است که برای توسعه اپلیکیشن های هیبریدی اندروید یا iOS مورد استفاده طراحان قرار می گیرد. فریم ورک ۷ این امکان را در اختیار شما می گذارد تا وب اپلیکیشن هایی با ظاهر بومی iOS یا اندروید توسعه دهید؛ علاوه بر این نمونه سازی (Prototype) اپلیکیشن ها نیز در این فریم ورک به راحتی صورت می پذیرد.

• پشتیبانی : Framework7 Team
• تاریخ انتشار : ۲۰۱۴
• محبوبیت در GitHub : 15.500 ستاره و ۳٫۲۰۰ فورک
• لایسنس : MIT

۱۳- فریم ورک Zurb Foundation

فریم ورک Zurb Foundation یک ابزار بسیار کاربردی برای توسعه وب اپلیکیشن های ریسپانسیو به شمار می رود. عملکرد این فریم ورک بسیار مطلوب است اما در مواجهه با برخی از کامپوننت ها دچار مشکل می شود؛ علاوه بر این توسعه این فریم ورک نیز متوقف شده است.

• پشتیبانی : Mikolaj Dobrucki
• تاریخ انتشار : ۲۰۱۴
• محبوبیت در GitHub : 359 ستاره و ۸۱ فورک
• لایسنس : MIT

۱۴- Ionic Material

ابزار Ionic Material یک افزونه برای فریم ورک اپلیکیشن های موبایل Ionic hybrid به شمار می رود. در حقیقت با استفاده از این فریم ورک برای بدون نیاز به تغییر در اپلیکیشن می توانید ظاهر آنها را به گوگل متریال دیزاین تغییر دهید به گونه ای که برای این کار در واقع کلاس ها، متدها و Helperها را بدون هر گونه تغییر در رفتار یا استایل کدها به اپلیکیشن اضافه خواهد کرد.

• پشتیبانی : Zach Fitzgerald
• تاریخ انتشار : ۲۰۱۵
• محبوبیت در GitHub : 3000 ستاره و ۹۶۶ فورک
• لایسنس : MIT

۱۵- Materia Theme for Bootstrap

تیم توسعه دهنده Bootswatch تِم های بسیاری برای Bootstrap توسعه داده است. یکی از تم های این کمپانی Materia نام دارد که از طریق آن می توان دستورالعمل های متریال دیزاین را نیز اجرا کرد. اگرچه این فریم ورک برخی از کامپوننت های کلاسیک متریال را در خود دارد اما همچنین بهترین گزینه برای کار با Bootstrap به شمار می رود. در واقع شما با استفاده از این ابزار دیگر مجبور نخواهید بود کل پروژه را تغییر دهید، بلکه باید فایل های Bootstrap CSS را با فایل های تِم جایگزین کنید.

• پشتیبانی : Thomas Park
• تاریخ انتشار : ۲۰۱۲
• محبوبیت در GitHub : 12.300 ستاره و ۳٫۴۰۰ فورک
• لایسنس : MIT

۱۶- فریم ورک Material

ابزار Material در واقع مبتنی بر فریم ورک فرانت اند و ریسپانسیو Bootstrap4 توسعه داده شده است. این نرم افزار کامپوننت های متریال را در بوت استرپ پیاده سازی کرده و بسیاری از عناصر متریال دیزاین نظیر کارت ها (Cards) را نیز به آن اضافه می کند. این فریم ورک همچنین از مستندات بسیار دقیقی برخوردار است که به راحتی شما را در حین کار راهنمایی خواهد کرد.

• پشتیبانی : Daemon Internet Consultants Team
• تاریخ انتشار : ۲۰۱۵
• محبوبیت در GitHub : 3.100 ستاره و ۷۴۴ فورک
• لایسنس : MIT

۱۷- Surface

ابزار Surface یک فریم ورک CSS است که بسیاری از کامپوننت های متریال دیزاین را بدون هیچگونه وابستگی پیاده سازی می کند.  این فریم ورک در حقیقت یک فایل CSS فشرده و کم حجم (۵٫۷ کیلوبایت) است و هیچ نوع جاوا اسکریپتی را در خود ندارد.

• پشتیبانی : Ben Mildren
• تاریخ انتشار : ۲۰۱۵
• محبوبیت در GitHub : 338 ستاره و ۶۰ فورک
• لایسنس : MIT

۱۸- فریم ورک Essence

ابزار Essence نیز یک فریم ورک CSS مبتنی بر کتابخانه ReactJS فیسبوک است که دستور العمل های متریال دیزاین را پیاده سازی می کند. در حقیقت شما با استفاده از این ابزار می توانید اپلیکیشن های موبایل و وب را با سرعت بسیار بالا توسعه دهید؛ البته به خاطر داشته باشید که فریم ورک Essence از انجمن کاربری فعالی برخوردار نیست.

• پشتیبانی : Evo Forge Team
• تاریخ انتشار : ۲۰۱۵
• محبوبیت در GitHub : 413 ستاره و ۵۳ فورک
• لایسنس : MIT

۱۹- Lumx

شما می توانید با استفاده از این فریم ورک دستورالعمل های متریال دیزاین را به صورت طراحی پیکسل پرفکت (pixel-perfect) پیاده سازی کنید. این فریم ورک مبتنی بر AngularJS است و از jQuery و مجموعه ابزار Sass برای سفارشی سازی استایل استفاده می کند.

این ابزار همچنین از کتابخانه Velocity برای ساخت انیمیشن استفاده می کند و دارای نمونه کدها و مستندات بسیار دقیقی است که به راحتی می توانید از آن در پروژه خود بهره مند شوید.

• پشتیبانی : Lumapps Team
• تاریخ انتشار : ۲۰۱۴
• محبوبیت در GitHub : 2.000 ستاره و ۲۹۵ فورک
• لایسنس : MIT

۲۰- Phonon

ابزار Phonon یک فریم ورک برای توسعه اپلیکیشن های هیبریدی موبایل به شمار می رود که از پلتفرم آپاچی کردوا (Apache Cordova) و PhoneGap نیز پشتیبانی می کند. این فریم ورک همچنین بسیار کم حجم است و حجمی حدود ۶۲ کیلوبایت دارد.

• پشتیبانی : Quarkdev Team
• تاریخ انتشار : ۲۰۱۴
• محبوبیت در GitHub : 416 ستاره و ۱۰۸ فورک
• لایسنس : MIT

نتیجه‌گیری

متریال دیزاین به عنوان یک زبان طراحی استاندارد توسط گوگل، تحول بزرگی در دنیای طراحی رابط کاربری ایجاد کرده است. با هدف ارائه تجربه کاربری یکپارچه و سازگار در تمامی دستگاه‌ها و پلتفرم‌ها، متریال دیزاین ابزارها و دستورالعمل‌های جامعی را در اختیار طراحان قرار می‌دهد. ویژگی‌های برجسته آن، از قبیل طراحی کاغذی‌شکل، مقیاس‌پذیری و تمرکز بر اصول طراحی مینیمالیستی، آن را به انتخابی محبوب برای طراحان وب و اپلیکیشن تبدیل کرده است.

معرفی ۲۰ فریم ورک برتر متریال دیزاین در این مقاله نشان می‌دهد که این زبان طراحی تا چه حد گسترده و انعطاف‌پذیر است. از فریم‌ورک‌های مبتنی بر جاوا اسکریپت نظیر Angular Material و Material UI گرفته تا ابزارهایی مانند Polymer و Vuetify که کاربردهای خاصی را پوشش می‌دهند، متریال دیزاین توانسته نیازهای متنوع طراحان را برآورده کند. همچنین، فریم‌ورک‌هایی نظیر Materialize و Material Design Lite کار توسعه را برای مبتدیان آسان‌تر کرده‌اند.

در نهایت، گستردگی ابزارها، محبوبیت بالا در GitHub و جامعه‌های کاربری فعال نشان‌دهنده جایگاه ویژه متریال دیزاین در دنیای طراحی است. این زبان طراحی همچنان به رشد خود ادامه داده و ابزارهای بیشتری را برای طراحان فراهم خواهد کرد تا تجربه کاربری بهتری خلق کنند.