معرفی بهترین فریم‌ورک‌های متریال دیزاین

معرفی بهترین فریم‌ورک‌های متریال دیزاین

Best Material Design Frameworks

معرفی 16 فریم‌ورک برتر در زمینه طراحی متریال

 

معرفی ۱۶ فریم‌ورک برتر در زمینه طراحی متریال:

 

طراحی متریال (Material Design) چیست؟

مفهوم طراحی متریال (Material Design) توسط شرکت گوگل مطرح شد. با این ایده که طراحی های وب سایت و اپلیکیشن موبایل را یکسان سازی و یکپارچه کند. متریال دیزاین قوانین خاصی دارد مانند: انیمیشن های مناسب، استفاده هوشمندانه از رنگ ها و سایه ها (colors & shdaows)، واکنش گرایی و… شما می توانید با مراجعه به وب سایت مرجع متریال دیزاین، اطلاعات کافی را در این زمینه کسب کنید.

طراحی گوگل را می توان در اپلیکیشن های native اندروید مشاهده کرد. این طراحی برای اپلیکیشن، وب سایت و اپلیکیشن های هیبریدی بسیار مناسب می باشد. برای کمک به طراحان وب و اپلیکیشن، فریم ورک ها (Frameworks) و کتابخانه هایی (Libraries) وجود دارند که شامل کامپوننت های آماده استفاده (ready-to-use components) می باشند.

 

۱- Material Design Lite:

 

فریمورک Material Design Lite

 

Material Design Lite فریم ورک استاندارد و رسمی گوگل برای متریال دیزاین می باشد. بنابراین شما می توانید اطمینان داشته باشید که هرگاه گوگل آپدیتی روی هر المان یا بخش طراحی متریال اعمال کند، بلافاصله در فریم ورک MDL نیز آپدیت می شود.

 

۲- Materialize:

 

فریم ورک Materialize

 

فریم ورک Materialize یک فریم ورک Front-end است برای طراحی وب سایت و اپلیکیشن های تحت وب با طراحی متریال. شروع کار با این فریم ورک بسیار ساده می باشد. مخصوصا برای کسانی که با فریم ورک های مشابه مانند بوت استرپ (bootstrap) آشنایی دارند و قبلا با آن کار کرده اند. یکی از ویژگی های جالب این فریم ورک، نسخه SASS می باشد که به طراح وب، امکان انتخاب کامپوننت موردنظر را می دهد.

 

۳- Material-UI:

 

فریم ورک Material-UI

 

فریم ورک Material-UI مجموعه ای از کامپوننت های React می باشد که طراحی متریال را پیاده سازی می کند. از ویژگی pixel-perfect CSS در استایل ها و انیمیشن ها بهره می برد. همچنین دو قالب (Theme) تیره و روشن برای طراحان وب در دسترس قرار داده است.

 

۴- MUI CSS:

 

فریم ورک MUI CSS

 

یکی از سبک ترین فریم ورک های موجود برای پیاده سازی Material-Design فریم ورک MUI CSS می باشد که هیچ وابستگی (Dependency) به کتابخانه خاصی ندارد. حجم کلی این فریم ورک به صورت gzip فقط ۱۲کیلوبایت می باشد. فریم ورک MUI CSS دارای پشتیبانی React می باشد و با تغییر کدهای فایل SASS می توان آنرا سفارشی سازی کرد.

 

۵- Polymer:

 

فریم ورک Polymer

 

فریم ورک Polymer یکی دیگر از فریم ورک های پیشنهادی گوگل در زمینه متریال-دیزاین می باشد که برای تولید سریع کامپوننت های قابل استفاده مجدد (reusable) مفید می باشد. شما می توانید این کامپوننت ها را به پروژه خود import کنید. فریم ورک polymer  المان های آماده زیادی را برای طراحان وب فراهم کرده است:

 

المان هایی که فریم ورک Polymer در اختیار کاربران قرار می دهد در 8 دسته کلی تقسیم بندی می شوند

 

همانطور که در تصویر فوق مشاهده می کنید، المان هایی که این فریم ورک در اختیار کاربران قرار می دهد در ۸ دسته کلی تقسیم بندی می شوند. در باکس سفیدرنگ، المنت های paper وجود دارند که شامل تمام المان های Material-Design می باشد.

 

۶- Ionic Material:

 

فریم ورک Ionic Material

Ionic Material یک کتابخانه است برای فریم ورک اپلیکیشن هیبریدی برای موبایل. این فریم ورک، کلاس ها و helper های مربوط به متریال-دیزاین را به فریم ورک Ionic اضافه می کند تا اپلیکیشنی که توسط این فریم ورک ایجاد می شود ظاهری مطابق استانداردهای Material-Design گوگل داشته باشد.

 

۷- Material Foundation:

 

فریم ورک Material Foundation

 

فریم ورک Foundation که شرکت ZURB آنرا معرفی کرده است، یکی دیگر از فریم ورک هایی می باشد که توسط آن می توان وب سایت ها و اپلیکیشن های واکنش گرا طراحی نمود. کتابخانه Material Foundation مجموعه ای از کامپوننت های مستقل است که استایل های متریال دیزاین را به المان های فریم ورک فاندیشن اعمال می کند. نقطه ضعف این کتابخانه اینست که از تمام المان های متریال پشتیبانی نمی کند.

 

۸- Surface:

 

فریم ورک Surface

 

فریم ورک Surface تنها توسط CSS ایجاد شده است و از هیچ زبان برنامه نویسی مانند جاوااسکریپت استفاده نمی کند. این فریم ورک، کامپوننت های کلاسیک در طراحی متریال را بوسیله استایل های CSS پیاده سازی کرده است. از آنجائیکه کل این فریم ورک دارای یک فایل CSS می باشد، حجمش بسیار سبک است و کارکردن با آن ساده می باشد.

 

۹- Essence:

 

فریم ورک Essence

 

Essence یک فریم ورک CSS-based می باشد که بر اساس React و React Native نوشته شده است. این فریم ورک به توسعه دهندگان این امکان را می دهد که در کمترین زمان ممکن، برای اپلیکیشن های تحت وب خود و همچنین اپلیکیشن های موبایل، طراحی کاربری مطابق Material-Deisgn گوگل را پیاده سازی کنند. توسط کنسول npm شما می توانید تمام کتابخانه Essence و یا چند ماژول مورد نیاز خود را نصب کنید.

 

۱۰- LumX:

 

فریم ورک LumX

 

فریم ورک LumX توسط استایل های css و اسکریپت های javascript ایجاد شده است و بر اساس AngularJS پیاده سازی شده است. یعنی برای پیاده سازی طراحی متریال برای اپلیکیشن های AngularJS مناسب می باشد. برای پیاده سازی طراحی و استایل های این فریم ورک از کتابخانه SASS-based بنام Bourbon استفاده شده است. برای انیمیشن های این فریم ورک از کتابخانه معروف Velocity.js استفاده شده است. با ترکیب این کتابخانه ها و چند پلاگین دیگر، فریم ورک LumX قادر است امکانات زیادی را برای طراحان و توسعه دهندگان اپلیکیشن ها برای طراحی کاربری متریال دیزاین فراهم کند.

 

۱۱- قالب Paper برای بوت استرپ:

 

قالب Paper برای بوت استرپ

 

توسعه دهندگان و نویسندگان وب سایت Boostwatch  که قالب های رایگان زیادی در زمینه فریم ورک بوت استرپ ارائه می کنند، قالبی بنام paper دارند که توسط استانداردهای Material-Design طراحی شده است. این قالب، تمام المان ها و کامپوننت های کلاسیک متریال-دیزاین را ندارد اما برای افرادی که در حال حاضر از فریم ورک bootstrap برای رابط کاربری اپلیکیشن و یا وب سایت خود استفاده می کنند مناسب می باشد. زیرا دیگر نیازی نیست تمام قالب خود را تغییر دهند. تنها کافیست قالب paper را به پروژه خود import کنید.

 

۱۲- متریال دیزاین برای بوت استرپ (Material Design for Bootstrap):

 

متریال دیزاین برای بوت استرپ (Material Design for Bootstrap)

 

گزینه دیگری که علاقمندان فریم ورک بوت استرپ (bootstrap framework) در اختیار دارند، فریم ورک متریال دیزاین برای بوت استرپ می باشد. یک قالب آپدیت شده برای کاربران بوت استرپ فراهم می کند که از css و js و jQuery های زیادی برای پیاده سازی متریال دیزاین بهره برده است. بنابراین توسط این فریم ورک می توانید قابلیت متریال-دیزاین را به قالب بوت استرپ خود اضافه کنید. بدون اینکه نیاز باشد قالب فعلی بوت استرپ پروژه خود را تغییردهید. یکی از مزیت های این فرم ورک اینست که دارای حدود ۱۴۰۰۰ ستاره (عضو فعال) در وب سایت gitHub می باشد.

 

۱۳- متریال برای انگولار (Angular Material):

 

متریال برای انگولار (Angular Material)

 

انگولار (AngularJS) یک فریم ورک کد-باز (open-source) است برای توسعه (develop) اپلیکیشن های تحت وب. توسط تیم گوگل پشتیبانی می شود. برای پیاده سازی متریال دیزاین در اپلیکیشن های Angular می توانید از Angular Material استفاده کنید.

 

۱۴- متریال (Material):

 

متریال (Material)

Material را بعنوان یک فریم ورک UI در نظر بگیرید که ترکیبی از Bootstrap و MDL می باشد. این فریم ورک بسیار شبیه بوت استرپ می باشد (grid و HTML یکسان) اکثر المان های مربوط به متریال دیزاین را پوشش می دهد.

 

۱۵- Phonon:

 

فریم ورک Phonon

 

فریم ورک Phonon به توسعه اپلیکیشن های هیبریدی موبایل اختصاص دارد. به این دلیل که این فریم ورک تنها ۶۰ کیلوبایت حجم دارد و به هیچ third-party Library نیاز ندارد، برای ایجاد اپلیکیشن های Cordova و PhoneGap مناسب می باشد. ظاهر و رفتار کامپوننت های فریم ورک phonon بر اساس متریال دیزاین طراحی شده است.

 

۱۶- فریم ورک ۷ (Framework7):

 

فریم ورک 7 (Framework7)

 

Framework7 برای پیاده سازی رابط کاربری اپلیکیشن های هیبریدی موبایل بکار می رود. توسط این فریم ورک می توانید رفتار و استایل های دستگاه های Apple (سیستم عامل IOS) و اپلیکیشن های اندروید را شبیه سازی کنید. فریم ورک ۷ دو تمپلیت کلی ارائه می دهد: یکی برای طراحی اپلیکیشن های IOS و دیگری برای پیاده سازی طراحی متریال در اپلیکیشن های اندروید.

 

منبع: https://tutorialzine.com/2016/03/the-15-best-material-design-frameworks-and-libraries


برچسب‌ها:

Ionic MaterialMaterial Design LiteMaterial-UIMaterializeبوت استرپطراحی متریالفریم ورک Foundationفریم ورک Front-endفریم ورک LumXفریم ورک MUI CSSفریم ورک Polymerفریم ورک Surfaceفریم ورک فاندیشنفریم‌ورک طراحی متریالکتابخانه Essenceمتریال برای انگولارمتریال دیزاین

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

16 + نه =