مخصوص اعضای ویژه 
با این حال، این‌ها فقط موارد اولیه هستند. از آنجا که متریال دیزاین یک پروژه open-source است، توسعه‌دهندگان دیگر نیز ابزارهای خود را با پیروی از اصول متریال دیزاین ساخته‌اند. در این مقاله ما بهترین کتابخانه‌های کامپوننت رابط کاربری متریال دیزاین را جمع‌آوری کرده‌ایم که می‌تواند در پروژه‌های بعدی وب یا موبایل‌تان به شما کمک زیادی کند.
اصول متریال دیزاین
قبل از معرفی بهترین کتابخانه‌های کامپوننت رابط کاربری (UI) متریال دیزاین، بیایید یک نگاه سریع به مهم‌ترین اصول متریال دیزاین داشته باشیم. آن‌ها به شرح زیر هستند:
پالت‌های رنگی متریال از یک رنگ اصلی و ثانویه استفاده می‌کنند.
رنگ‌ها باید وضعیت کامپوننت‌ها و رابطه بین آن‌ها را نشان دهند.
متن و آیکون‌ها باید استانداردهای خوانایی را رعایت کنند.
حرکات در صفحه همیشه باید معنادار باشد.
کامپوننت‌ها باید قابل استفاده مجدد باشند.
طراحی آیکون‌ها باید خوب و واضح باشد.
و بسیاری موارد دیگر.
گوگل برای ایجاد سیستم متریال دیزاین تحقیقات کاملی را انجام داده است و کمی زمان می‌برد تا دستورالعل‌ها را دنبال کنید. و در اینجا، ما می‌خواهیم لیستی از بهترین کتابخانه‌های کامپوننت رابط کاربری را به شما معرفی کنیم که می‌تواند کمک زیادی به شما کند. همچنین اگر شما موردی را پیدا کردید که به آن علاقه دارید، لازم نیست یک متخصص در زمینه متریال دیزاین باشید تا بتوانید برنامه‌هایی را بسازید که دستورالعمل‌های متریال گوگل را دنبال می‌کنند.
Materialize .1
Materialize یک فریم‌ورک CSS ریسپانسیو است که از اصول متریال دیزاین پیروی می‌کند. این فریم‌ورک چندین کامپوننت آماده از قبیل badges، buttons، breadcrumbs، cards، icons، navigation bars و موارد دیگر را ارائه می‌دهد. Materialize علاوه بر عناصر معمولی برای وب‌سایت‌ها، شامل کامپوننت‌های برنامه تلفن همراه مانند هشدارهای (alert) محبوب موبایل است.
همه کامپوننت‌های Materialize با نمونه کدهایی ارائه می‌شوند که شما فقط باید به صفحه HTML خود اضافه کنید. علاوه بر کامپوننت‌های HTML و CSS، به تعدادی از عناصر قابل سفارشی‌سازی جاوااسکریپت مثل carousel، modals، parallax effects و موارد دیگر نیز دسترسی خواهید داشت. تیم Materialize همچنین تم‌هایی ارائه می‌دهند که با کتابخانه کامپوننت ایجاد شده است، اما آن‌ها رایگان نیستند.
2. Material Design for Bootstrap
Material Design for Bootstrap یک کتابخانه کامپوننت همه‌کاره است که به شما اجازه می‌دهد برنامه‌های وب‌سایت‌های mobile-first ریسپانسیو را بسازید. این کتابخانه برای فریم‌ورک بوت‌استرپ 4 ایجاد شده است تا به شما کمک کند همزمان از تکنولوژی‌های front-end استفاده کنید. پیکربندی پیش‌فرض آن از jQuery برای تعاملات استفاده می‌کند، با این حال، این کتابخانه دارای تنظیماتی برای سه فریم‌ورک محبوب JS: Angular، React و Vue است.
این کتابخانه هم نسخه رایگان و هم پولی دارد. شما می‌توانید material UI kit رایگان را از گیت‌هاب دانلود کنید. در حال حاضر، شامل بیش از 400 عنصر رابط کاربری متریال، بیش از 600 آیکون متریال، 74 انیمیشن CSS، آموزش‌ها و قالب‌های از پیش ساخته شده است. اگرچه کتابخانه رایگان برای بیشتر برنامه‌ها کافی است، نسخه حرفه‌ای آن شامل بیش از 4500 کامپوننت، بیش از 50 بخش، پلاگین و JS ماژولار که همگی پولی هستند می‌باشد.
3. Material UI (برای React)
Material UI کتابخانه محبوب کامپوننت رابط کاربری برای فریم‌ورک React است. اگر می‌خواهید هر نوع برنامه Reactای را با با متریال ایجاد کنید، دیگر نیازی نیست ادامه مطالب را بخوانید و این مورد برای شما کافی است. کامپوننت‌های Material UI بدون تنظیمات خاصی کار می‌کنند، آن‌ها به پیکربندی اضافی نیاز ندارند. این کتابخانه شامل کامپوننت‌های طرح‌بندی، همه نواع عنصر ورودی، نوارهای پیمایش، و موارد دیگر است. برای لیست کامل کامپوننت‌ها، می‌توانید به مستندات آن نگاهی بیاندازید.
Material UI علاوه بر دسترسی به چندین کامپوننت از پیش طراحی‌شده، Component APIهای گسترده‌ای را در اختیار شما قرار می‌دهد. به شما اجازه می‌دهد همه کامپوننت‌ها را سفارشی‌سازی کنید. مستندات Material UI واقعا خوب هستند و به راحتی می‌توانید از آن‌ها استفاده کنید، و همراه با مثال‌های زیادی، قطعه کدها، و انواع دموها می‌باشد، بنابراین شما سریعا می‌توانید نمونه‌سازی اولیه را با آن شروع کنید.
4. Vue Material
Vue Material یک کتابخانه کامپوننت UI متریال دیزاین سبک وزن برای فریم‌ورک Vue.js می‌باشد. سازندگان آن افتخار می‌کنند که همه کامپوننت‌های آن دقیقا مطابق با مشخصات متریال دیزاین گوگل ساخته شده است. Vue Material با بسیاری از عناصر رابط کاربری از پیش طراحی‌شده مثل avatars، buttons، cards، dialogs، forms، icons، lists، toolbars و بسیاری موارد دیگر ارائه می‌شود.
از آنجا که Vue Material کاملا خوب مستندسازی شده است، اگر قبلا با HTML، CSS و Vue کار کرده باشید، کار با آن برای شما آسان است. هر کامپوننت به صورت live منتشر شده است، بنابراین شما می‌توانید کدها را آنلاین تغییر دهید و نتایج را در لحظه ببینید. این کتابخانه رایگان است که با دو تم همراه است: Vue Material Dashboard Free شامل 16 کامپوننت و Vue Material Dashboard Pro با ویژگی‌های کامل که 59 دلار می‌باشد.
5. Angular Material
اگر به دنبال یک کتابخانه کامپوننت UI متریال دیزاین برای برنامه انگولار خود هستید، Angular Material می‌تواند یک راه‌حل خوب برای شما باشد. این کتابخانه توسط گوگل برای فریم‌ورک Angular 2 ایجاد شده است و همچنان در حال توسعه می‌باشد. Angular Material علاوه بر چندین کامپوننت رابط کاربری، شامل Angular Component Development Kit (CDK) می‌باشد. Angular CDK ابزاری است که الگوهای فعل و انفعالات رایج را پیاده‌سازی می‌کند مثل دسترسی‌پذیری، قابلیت کشیدن و رها کردن، اسکرول و موارد دیگر.
Angular Material به شما امکان می‌دهد با ارائه کامپوننت‌های طراحی‌شده حرفه‌ای ایجادشده توسط گوگل، رابط کاربری هر برنامه انگولار را به سرعت نمونه‌سازی کنید. کامپوننت‌ها به شش گروه دسته‌بندی می‌شوند:
form controls,
navigation،
layout،
Buttons و indicators،
Popups و modals،
و جداول داده برای داده‌های جدولی.
این کتابخانه همچنین با راهنمای دقیقی ارائه می‌شود که هر آنچه را که باید در مورد ساخت رابط‌های کاربری با Angular Material بدانید را توضیح می‌دهد.
6. MUI CSS
MUI CSS یک کامپوننت رابط کاربری متریال دیزاین کم حجم است که مهم‌ترین کامپوننت‌های مورد نیاز شما در یک وب‌سایت یا برنامه را شامل می‌شود. شما فقط باید یک فایل CSS کم حجم‌شده (6.6 کیلوبایت) و جاوااسکریپت کم‌حجم‌شده (5.4 کیلوبایت) را به صفحه HTML خود اضافه کنید. از آنجا که MUI CSS هیچ وابستگی خارجی‌ای ندارد، تنظیم آن حتی برای مبتدیان آسان است.
علاوه بر کامپوننت‌های نوشته شده در CSS و JS، MUI CSS دارای عناصر UI آماده برای برنامه‌های React و Angular است. تیم MUI CSS همچنین توسعه نسخه بتای Web Components library را نیز آغاز کرده‌اند. MUI CSS همچنین یک کتابخانه UI ایمیل جالب دارد که با استفاده از آن می‌توانید قالب‌های ایمیلی بسازید که از دستورالعمل‌های متریال دیزاین پیروی می‌کند.
7. Material Components for the Web
Material Components for the Web یک پیاده‌سازی موفق از Material Design Lite (MDL) است، که هر دوی این‌ها توسط تیم in-house گوگل ساخته شده‌اند. اگر به دنبال استفاده از MDL برای پروژه‌های خود هستید، در عوض از این کتابخانه استفاده کنید، زیرا MDL vs1 در حالت پشتیبانی محدود است.
کتابخانه وب طیف گسترده‌ای از کامپوننت‌های UI مانند buttons، cards، grids، منوها، تب‌ها و بسیاری موارد دیگر را در اختیار شما قرار می‌دهد. اگر می‌خواهید یک برنامه وب یا موبایل ایجاد کنید که شبیه برنامه‌های خود گوگل باشد، کتابخانه Material Components for the Web می‌تواند بهترین گزینه برای شما باشد.
جمع‌بندی
متریال دیزاین می‌تواند حس و نگاهی حرفه‌ای به هر برنامه وب یا موبایلی بدهد. به خصوص اگر می‌خواهید برنامه‌ها را برای یک برند برای پلت‌فرم‌های مختلف بسازید، انتخاب خوبی است.
ایجاد یک رابط کاربری خوب می‌تواند واقعا یک چالش باشد. با بهترین کتابخانه‌های کامپوننت UI متریال دیزاین، می‌توانید دستورالعمل‌های متریال دیزاین گوگل را، بدون اینکه یک طراح باتجربه باشید، دنبال کنید.
نظرات کاربران در رابطه با این دوره