فریم ورک های طراحی متریال دیزاین
میدونستی بخاطر نداشتن سایت، روزانه چقدر مشتری از دست میدید؟!!ا گر قصد گسترش کار خود را داشته و میخواهید یک وبسایت زیبا و کاربر پسند داشته باشد پیشنهاد میکنم این لینک را کلیک کنید.
متریال دیزاین گوگل چیست؟
هدف اصلی متریال دیزاین گوگل این است که تجربهی کاربریِ یکسان و منسجمی را در اپلیکیشنهای موبایلی و تحت وبِ همهی کسب و کارها ایجاد کند. از طرفی نیز تلاش میکند تا این اپلیکیشنها با همهی دستگاهها و پلتفرمها سازگار باشند (همهی صفحات نمایش).
رویکرد متریال دیزاین از Responsive بودن، Shadowها، Transition، Animationها و Layoutهای مبتنی بر Grid در کنار هم استفاده میکند تا تجربههای طراحی آمادهای را بسازد. اگر بخواهیم واسط کاربری را با یک ورق کاغذ نشان دهیم، آن کاغذ را به چه شکلی درمیآوریم؟ این همان ایدهای است که متریال دیزاین بر مبنای آن ساخته شده است.
محصولات گوگل، مثل یوتیوب، اندروید و جیمیل از متریال دیزاین استفاده میکنند. محبوبیت متریال اندورید هر روز بیشتر میشود و این موضوع را میتوان در نرمافزارهای بزرگی (WhatsApp) دید که از آن استفاده میکنند.
قبل از اینکه به سراغ معرفی برترین فریمورکهای متریال اندروید برویم، بیایید ببینیم که میتوانیم از آن در پروژههای خود چه استفادهای کنیم.
کاربرد متریال دیزاین
با فریمورکهای متریال دیزاین میتوانیم در محصولاتمان در همهی پلتفرمها یکپارچگی داشته باشیم (هم پلتفرم موبایلی و هم تحت وب)
دیگر لازم نیست CSS را از اول بنویسیم و میتوانیم از کامپوننتهای آمادهی متریال استفاده کنیم.
میتوانیم با ساخت واسطهایی کاربرپسند، مطمئن باشیم که کاربرانمان تجربهی کاربری خوبی خواهند داشت.
در ادامه به معرفی برترین فریمورکهای متریال دیزاین میپردازیم.
فریمورک متریالایز Materialize
فریمورک متریالایز یا Materialize یکی از مشهورترین فریمورکهای Mobile-First است. دلیل اینکه اول به معرفی این فریمورک میپردازیم، این است که سازندهی آن خود متریال دیزاین است.
کار با این فریمورک ساده است. این فریمورک حاوی کدهای آمادهای است که ساخت پروژه را برای اولین بار سادهتر میکند.
Materialize دو نسخه دارد:
نسخهی Standard
نسخهی Sass
نسخهی Standard Materialize حاوی فایلهای CSS و SCSS، جاوا اسکریپت و فونتهای متریال دیزاین است. این نسخه مناسب اشخاصی است که با Sass آشنا نیستند.
Materialize اسناد کامل و مفصلی دارد که به فرایند طراحیتان کمک میکنند. اگر در راهاندازی فریمورک یا استفاده از آن به مشکل برخوردید، این اسناد به کارتان میآیند.
با Materialize میتوانید مثل Bootstrap، اپلیکیشنهایتان را سادهتر و سریعتر تولید کنید.
متریال دیزاین برای بوت استرپ Material Design for Bootstrap
Bootstrap یکی از پرکاربردترین فریمورکهای فرانت-اند (Front-End) است که از آن برای ساخت اپلیکیشنهای تحت وب استفاده میشود. میتوانید با استفاده از Bootstrap پروژههای Mobile-First و تحت وب بسازید. میتوانید از Material Design for Bootstrap یا فریم ورک بوت استرپ با متریال دیزاین استفاده کنید و با ترکیب CSS، جاوا اسکریپت و HTML، اپلیکیشنهای متریال دیزاینی بسازید.
با استفاده از این فریمورک میتوانید تمام کامپوننتهای Bootstrapای لازم را در متریال دیزاین تولید کنید. این فریمورک اسناد کامل و مفصلی دارد که به فرایند طراحیتان کمک میکند. اگر در راهاندازی فریمورک یا استفاده از آن به مشکل برخوردید، این اسناد به کارتان میآیند.
برای آنهایی که کمی با Bootstrap آشنا هستند، استفاده از این فریمورک بسیار ساده خواهد بود. تازه اگر به مرجع احتیاج داشتید، میتوانید کدهای آمادهی کامپوننتهای Bootstrap و متریال را پیدا کنید.
این فریمورک انجمن خوبی هم دارد که اگر در تولید پروژهتان به مشکل برخوردید، میتوانند کمکتان کنند.
Material Components for the Web
مهندسین و طراحان گوگل سازندگان اصلی این فریمورک هستند. این فریمورک یکی از نوادگان Material Lite است. (گوگل دیگر از Material Lite پشتیبانی نمیکند، اما انجمن آن هنوز دایر است. اگر هنگام کار با این فریمورک به مشکلی برخوردید، میتوانید به آنها مراجعه کنید.)
سازندهی اصلی Material Components for the Web گوگل است و این فریمورک از اصول متریال دیزاین گوگل پیروی میکند و به صور ت مداوم آپدیت میشود. بهعلاوه، با استفاده از اسناد مفصل آن میتوانید اپلیکیشن خود را از پایه بنویسید.به سادگی میتوانیداز این فریمورک در کنار فریمورکها و کتابخانههای جاوا اسکریپت، مثل انگولار (Angular) و ریاکت (React)، استفاده کنید.
انگولار متریال – Angular Material
تیم انگولار سازندهی این فریمورک است. هدف اصلی آن این است که هنگام استفاده در کنار انگولار، به خوبی کار کند. انگولار، سازندهی کامپوننتهایی است که به خوبی تست شده و قابل استفادهی مجدد هستند. میتوانید از این کامپوننتها برای پیادهسازی متریال دیزاین گوگل استفاده کنید.
این فریمورک دارای اسناد مفصلی است. کدهای آمادهی کامپوننتهای مختلف نیز موجودند که میتوانید آنها را کپی و در پروژهی خود پیست کنید (Paste). با استفاده از کامپوننتهای فراوانِ موجود در این فریمورک میتوانید از متریال دیزاین در اپلیکیشنِ انگولار خود استفاده کنید.
میتوانید از فریمورک Angular Material به صورت جداگانه در دو ورژن Angular JS Version 1 و Angular JS Version 2+ استفاده کنید.
فریم ورک متریال (Material)
فریمورک Material روی Bootstrap ساخته شده است (درست شبیه Material Design for Bootstrap) و Bootstrap 4 حامی آن است. میتوانید با آن برخی از کامپوننتهای قدیمی Bootstrap، مثل Cardها را به اپلیکیشن اضافه کنید.
Material کامپوننتهای Bootstrapای را پیادهسازی میکند که از اصول طراحی متریال دیزاین پیروی میکنند. این فریمورک اسناد کامل و مفصلی دارد که به فرایند طراحیتان کمک میکنند. اگر در راهاندازی فریمورک یا استفاده از آن به مشکل برخوردید، این اسناد به کارتان میآیند.
فریم ورک متریال فاندیشن Material Foundation
فریم ورک متریال فاندیشن یا Material Foundation، فریمورک فرانت-اند Foundation را در کنار متریال دیزاین گوگل قرار میدهد و میتوانید از آن برای ساخت اپلیکیشنهای تحت وب استفاده کنید. تیمِ فریمورک Foundation سازندهی اصلی این فریمورک است.
با استفاده از Material Foundationمیتوانید کامپوننتهای Foundationای را پیادهسازی کنید که از اصول طراحی متریال دیزاین گوگل پیروی میکنند. اگرچه، در Foundation کامپوننتهای کامل و آمادهی استفاده را ندارید (مثل Bootstrap)، و تنها زمینهای فراهم شده است تا کامپوننتها را از پایه بسازید (راحتتر میتوانید کامپوننتهای شخصی خودتان را بسازید). فریمورک Material Foundation نیز این چنین است.
در اینجا شما قابلیتهای فریمورک Foundation و متریال گوگل را در کنار هم دارید. یعنی کامپوننتهای آمادهی متریال دیزاین را در اختیار دارید و میتوانید با استفاده از فریمورک Foundationآنها را به دلخواه خود تغییر دهید.
فریم ورک متریال یو آی یا MUI
فریم ورک متریال یو آی یا MUI یک فریمورک CSSای است که به شما در ساخت اپلیکیشنهای تحت وبِ مبتنی بر اصول متریال گوگل کمک میکند. این فریمورک سبکوزن (مجموع فایل CSS و جاوا اسکریپت آن ۱۲KB است) و برای ساخت اپلیکیشنهایی با سرعت لود سریع بسیار مناسب است. MUIمتنباز (Open Source) و تحت لایسنس MIT منتشر شده است.
میتوانید از این فریمورک در کنار ریاکت استفاده کنید. این فریمورک دارای فایل Sass نیز هست و شخصیسازی آن آسان است. MUI در پلتفرمها و مرورگرهای مختلف به خوبی کار میکند.
این فریمورک را به دلیل سبکوزنی و سرعت خوبش، به پروژههای کوچک توصیه میکنیم.
فریم ورک Surface
Surface فریمورک دیگری است که از متریال دیزاین گوگل پیروی میکند. این فریمورک تنها دارای فایل CSS است و جاوا اسکریپت ندارد. کامپوننتهای آن بدون استفاده از جاوا اسکریپت ساخته شدهاند. سایز فایل CSS آن ۵٫۷۵KB و کوچک است و سرعت لود بالایی دارد. قابلیت شخصیسازی این فریمورک بسیار خوب است. Surface با مرورگرهای مختلف سازگار است و به خوبی در دستگاههای مختلف کار میکند.
فریمورک Lumx
Lumx کاملاً بر اساس انگولار جیاس ساخته شده است و از اصول طراحی متریال دیزاین پیروی میکند. این فریمورک به jQuery بسیار وابسته است. البته برای داشتن سرعتی مناسب، از پلاگینهای jQuery استفاده نمیکند.
Lumx با استفاده از Sass و Bourbon ساخته شده است که شخصیسازی اپلیکشن را بسیار سادهتر میکند. فایلهای Sass و جاوا اسکریپت به صورت خودکار و با استفاده از Gulp بهینه میشوند تا سرعت اپلیکیشن بهتر شود. با استفاده از این فریمورکِMVC جاوا اسکریپت میتوانید اپلیکیشنهای تک صفحهای سریع و مطمئن بسازید.
این فریمورک اسناد مفصل و نمونه کدهایی دارد که بسیار به کارتان میآیند.
متریال دیزاین گوگل چیست؟
متریال دیزاین یک سیستم یکپارچه است که تئوری، منابع و ابزار را برای ساخت تجربههای دیجیتال با هم ترکیب میکند.
به زبان سادهتر، متریال دیزاین مجموعهای از اصول، قوانین، کامپوننتها و رویکردهاست که میتوانیم از آنها برای ساخت وبسایتها و اپلیکیشنهایی بیعیب و نقص استفاده کنیم.
چرا گوگل متریال دیزاین را تولید کرد؟
همانطور که پیشتر هم به آن اشاره کردیم، هدف اصلی گوگل ساختِ زبانِ بصری یکپارچه برای تمامی محصولات بود. یعنی باید یک کامپوننتِ طراحی را برای استفاده در محصولات مختلف از نو طراحی کنیم. علاوه بر آن، گوگل میخواست کلاینتهایش هنگام برخورد با محصولات مختلف این شرکت، یک طراحی منسجم را ببینند.
متریال دیزاین مهم است
متریال دیزاین میتواند بخشی مهم در حضورِ آنلاین کسب و کارتان باشد. افراد زیادی هماکنون از متریال دیزاین استفاده میکنند و این نشان دهندهی مزایای جالب آن است.
چرا متریال دیزاین مهم است؟ و چه اهدافی دارد؟
تصمیمگیری بهتر
با متریال دیزاین میتوانید سریعتر پروتوتایپ (Prototype)محصول را تولید کنید و این فرایند تصمیمگیری را تسریع میکند. بهعلاوه، با متریال دیزاین دیگر لازم نیست برای هر المنتِ (مثل Toggleها، Sliderها و Buttonها) اپلیکیشن همهچیز را از نو طراحی کنید.
UI و UX منسجم
بسیا مهم است که UI و UX اپلیکیشن شما در دستگاههایی با اندازه صفحات مختلف منسجم باقی بماند.
کاربران ممکن است از طریق یک مرورگر دسکتاپ از وبسایت شما بازدید کنند. یا وقتی در مسیرند، از گوشی همراه خود این کار را انجام دهند.
با استفاده از متریال دیزاین میتوانید تجربهای کاربرپسند و خوب در تمام دستگاههای موجود داشته باشید.