جشنواره ۵۰٪ تخفیف فرانش به مدت محدود

جشنواره ۵۰٪ تخفیف فرانش محدود

0 روز 0 ساعت 0 دقیقه 0 ثانیه

شروع یادگیری

آشنایی با مفهوم متریال دیزاین گوگل

متریال دیزاین چیست؟ + 10 فریمورک برتر متریال دیزاین

آیا تاکنون اسم متریال دیزاین (Material Design) را شنیده اید؟ با آن آشنایی دارید؟ قابلیت های جدید متریال دیزاین گوگل را می شناسید؟ همانطور که می دانید متریال دیزاین (Material Design) یک زبان برای طراحی محسوب می‌شود. در این مقاله از سایت فرانش 10 فریمورک برتر متریال دیزاین را برای شما آموزش می دهیم. گوگل، زبان طراحی متریال دیزاین (Material Design) را در سال 2014 عرضه کرد. این زبان از رویکرد Mobile-First پیروی می‌کند (رویکرد Mobile-First، همان‌طور که از نامش پیداست، رویکردی است که می‌گوید پیش از طراحی محصول به صورت تحت وب یا دسکتاپ، آن را برای دستگاه‌های موبایلی طراحی کنیم).

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

هدف اصلی متریال دیزاین گوگل این است که تجربه‌ی کاربریِ یکسان و منسجمی را در اپلیکیشن‌های موبایلی و تحت وبِ همه‌ی کسب و کارها ایجاد کند. از طرفی نیز تلاش می‌کند تا این اپلیکیشن‌ها با همه‌ی دستگاه‌ها و پلتفرم‌ها سازگار باشند (همه‌ی صفحات نمایش).

رویکرد متریال دیزاین از Responsive بودن، Shadowها، Transition، Animationها و Layoutهای مبتنی بر Grid در کنار هم استفاده می‌کند تا تجربه‌های طراحی آماده‌ای را بسازد. اگر بخواهیم واسط کاربری را با یک ورق کاغذ نشان دهیم، آن کاغذ را به چه شکلی درمی‌آوریم؟ این همان ایده‌ای است که متریال دیزاین بر مبنای آن ساخته شده است.

محصولات گوگل، مثل یوتیوب، اندروید و جی‌میل از متریال دیزاین استفاده می‌کنند. محبوبیت متریال اندورید هر روز بیشتر می‌شود و این موضوع را می‌توان در نرم‌افزارهای بزرگی (WhatsApp) دید که از آن استفاده می‌کنند.

قبل از اینکه به سراغ معرفی برترین فریمورک‌های متریال اندروید برویم، بیایید ببینیم که می‌توانیم از آن در پروژه‌های خود چه استفاده‌ای کنیم.

کاربرد متریال دیزاین

  • با فریمورک‌های متریال دیزاین می‌توانیم در محصولاتمان در همه‌ی پلتفرم‌ها یکپارچگی داشته باشیم (هم پلتفرم موبایلی و هم تحت وب)
  • دیگر لازم نیست CSS را از اول بنویسیم و می‌توانیم از کامپوننت‌های آماده‌ی متریال استفاده کنیم.
  • می‌توانیم با ساخت واسط‌هایی کاربرپسند، مطمئن باشیم که کاربرانمان تجربه‌ی کاربری خوبی خواهند داشت.

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

فریمورک متریالایز 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+ استفاده کنید.

آموزش angular 8

فریم ورک متریال (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آنها را به دلخواه خود تغییر دهید.

در صورتیکه تمایل دارید در مورد پارالاکس‌ها، Image Sliderها و دریافت ورودی‌های متریالی اطلاعات بیشتری کسب کنید این دوره را از دست ندهید:

آموزش متریال دیزاین (بخش اول)

آموزش Material UI یا Material-UI

فریمورک Material ui دارای کامپوننت‌های ری‌اکت برای پیاده‌سازی متریال دیزاین گوگل است. Material-UI یک فریمورک CSSای قدرتمند و قابل اعتماد است. اسناد کامل و مفصلی نیز دارد که به فرایند طراحی‌تان کمک می‌کنند. اگر در راه‌اندازی فریمورک یا استفاده از آن به مشکل برخوردید، به کارتان می‌آیند.

فریم ورک متریال یو آی یا MUI

فریم ورک متریال یو آی یا MUI یک فریمورک CSSای است که به شما در ساخت اپلیکیشن‌های تحت وبِ مبتنی بر اصول متریال گوگل کمک می‌کند. این فریمورک سبک‌وزن (مجموع فایل CSS و جاوا اسکریپت آن 12KB است) و برای ساخت اپلیکیشن‌هایی با سرعت لود سریع بسیار مناسب است. MUIمتن‌باز (Open Source) و تحت لایسنس MIT منتشر شده است.

می‌توانید از این فریمورک در کنار ری‌اکت استفاده کنید. این فریمورک دارای فایل Sass نیز هست و شخصی‌سازی آن آسان است. MUI در پلتفرم‌ها و مرورگرهای مختلف به خوبی کار می‌کند.

این فریمورک را به دلیل سبک‌وزنی و سرعت خوبش، به پروژه‌های کوچک توصیه می‌کنیم.

پیشنهاد می کنیم نحوه متریال سازی و تکسپرینگ مدل های سه بعدی به صورت پیشرفته را مطالعه کنید:

متریال سازی پیشرفته

فریم ورک Surface

Surface فریمورک دیگری است که از متریال دیزاین گوگل پیروی می‌کند. این فریمورک تنها دارای فایل CSS است و جاوا اسکریپت ندارد. کامپوننت‌های آن بدون استفاده از جاوا اسکریپت ساخته شده‌اند. سایز فایل CSS آن 5.75KB و کوچک است و سرعت لود بالایی دارد. قابلیت شخصی‌سازی این فریمورک بسیار خوب است. Surface با مرورگرهای مختلف سازگار است و به خوبی در دستگاه‌های مختلف کار می‌کند.

فریمورک Lumx

Lumx کاملاً بر اساس انگولار جی‌اس ساخته شده است و از اصول طراحی متریال دیزاین پیروی می‌کند. این فریمورک به jQuery بسیار وابسته است. البته برای داشتن سرعتی مناسب، از پلاگین‌های jQuery استفاده نمی‌کند.

Lumx با استفاده از Sass و Bourbon ساخته شده است که شخصی‌سازی اپلیکشن را بسیار ساده‌تر می‌کند. فایل‌های Sass و جاوا اسکریپت به صورت خودکار و با استفاده از Gulp بهینه می‌شوند تا سرعت اپلیکیشن بهتر شود. با استفاده از این فریمورکِMVC جاوا اسکریپت می‌توانید اپلیکیشن‌های تک صفحه‌ای سریع و مطمئن بسازید.

این فریمورک اسناد مفصل و نمونه‌ کدهایی دارد که بسیار به کارتان می‌آیند.

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

متریال دیزاین یک سیستم یکپارچه است که تئوری، منابع و ابزار را برای ساخت تجربه‌های دیجیتال با هم ترکیب می‌کند.

به زبان ساده‌تر، متریال دیزاین مجموعه‌ای از اصول، قوانین، کامپوننت‌ها و رویکردهاست که می‌توانیم از آنها برای ساخت وب‌سایت‌ها و اپلیکیشن‌هایی بی‌عیب و نقص استفاده کنیم.

چرا گوگل متریال دیزاین را تولید کرد؟

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

متریال دیزاین مهم است

متریال دیزاین می‌تواند بخشی مهم در حضورِ آنلاین کسب و کارتان باشد. افراد زیادی هم‌اکنون از متریال دیزاین استفاده می‌کنند و این نشان دهنده‌ی مزایای جالب آن است.

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

تصمیم‌گیری بهتر

با متریال دیزاین می‌توانید سریع‌تر پروتوتایپ (Prototype)محصول را تولید کنید و این فرایند تصمیم‌گیری را تسریع می‌کند. به‌علاوه، با متریال دیزاین دیگر لازم نیست برای هر المنتِ (مثل Toggleها، Sliderها و Buttonها) اپلیکیشن همه‌چیز را از نو طراحی کنید.

UI و UX منسجم

بسیا مهم است که UI و UX اپلیکیشن شما در دستگاه‌هایی با اندازه صفحات مختلف منسجم باقی بماند.

کاربران ممکن است از طریق یک مرورگر دسکتاپ از وب‌سایت شما بازدید کنند. یا وقتی در مسیرند، از گوشی همراه خود این کار را انجام دهند.

با استفاده از متریال دیزاین می‌توانید تجربه‌ای کاربرپسند و خوب در تمام دستگاه‌های موجود داشته باشید.

دوره‌های مرتبط در فرانش

 

همراهان گرامی سایت فرانش همانطور که مشاهده کردید 10 فریمورک برتر متریال دیزاین را توضیح دادیم؛ همچنین اهمیت متریال دیزاین را بیان کردیم. آیا این مقاله برای شما مفید بود؟ در بخش دیدگاه در انتهای مقاله می توانید نظر یا پیشنهاد خود را با ما در میان بگذارید.

مرتضی شایق

مرتضی شایق

مدیر دیجیتال مارکتینگ

فعال در دیجیتال مارکتینگ در تخصص‌های: SEO (بهینه‌سازی سایت برای موتورهای جستجوگر)، SEM (بازاریابی در موتورهای جستجوگر)، UX (تجربه کاربری)

بدون دیدگاه

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