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

متریال دیزاین
مقالات نرم افزار های تحت وب

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

متریال دیزاین چیست یک زبان طراحی است که گوگل در سال 2014 معرفی کرده است. این زبان طراحی با بسط دادن مفهوم کارت، از لی‌آوت‌های مبتنی بر گرید، انیمیشن‌ها و گذارهای واکنش‌گرا، فاصله‌بندی و جلوه‌های عمق مانند نورپردازی و سایه استفاده می‌کند. در این مقاله از تدریس24 آموزش متریال دیزاین به بررسی مفاهیم اساسی این کتابخانه مهم می‌پردزایم. گوگل متریال دیزاین را در تاریخ 5 تیر 1395 در کنفرانس I/O معرفی کرده است.

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

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

در سال 2018 گوگل با معرفی امکان ایجاد تم‌های سفارشی شروع به بازطراحی اغلب اپلیکیشن‌های خود به صورت نسخه‌های سفارشی و تطبیق‌یافته متریال دیزاین به نام Google Material Theme کرد و از نام Material Design 2 برای آن استفاده نمود.

 این زبان جدید تمرکز بیشتری روی فضاهای خالی، گوشه‌های گرد، آیکون‌های رنگی، نوارهای ناوبری تحتانی و استفاده از نسخه خاص با تراکم اندازه از فونت Google Sans داشته است. در سال 2020 اپلیکیشن‌های مختلف گوگل هم این طراحی Google Material Theme را پیاده‌سازی کرده‌اند و تنها استثنا، اپلیکیشن یوتیوب است.

متریال دیزاین چیست پیاده‌سازی خاص متریال دیزاین برای رابط‌های کاربری وب‌اپلیکیشن‌ها Polymer نام دارد که شامل کتابخانه PolymerAPI کامپوننت‌های وب برای مرورگرهایی که این استاندارد را به صورت نیتیو پیاده‌‌سازی نمی‌کنند و یک کاتالوگ از عناصر شامل مجموعه عناصر کاغذی است که نمایانگر عناصر بصری متریال دیزاین است.

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

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

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

متریال دیزاین از دنیای فیزیکی و بافت‌های آن الهام گرفته است که شامل شیوه بازتاب نور و ایجاد سایه‌ها می‌شود. سطوح متریال به بازنمایی رسانه‌های کاغذ و جوهر کمک می‌کنند.

درشت، گرافیکی و با مقاصد گویا

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

حرکت معنا می‌بخشد

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

کامپوننت‌های متریال دیزاین

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

کامپوننت‌ها طیفی از نیازهای اینترفیس شامل موارد زیر را پوشش می‌دهند:

نمایش (Display): متریال دیزاین چیست قرارگیری و سازمان‌دهی محتوا با استفاده از کامپوننت‌هایی مانند کارت‌ها، لیست‌ها و برگه‌ها.

ناوبری (Navigation): به کاربران امکان می‌دهد که در بخش‌های مختلف محصول حرکت کنند و شامل دراورهای ناوبری (Navigation Drawers) و زبانه‌ها (Tabs) می‌شود.

اکشن‌ها (Actions): به کاربران امکان می‌دهد که وظایف را با استفاده از کامپوننت‌هایی مانند دکمه اکشن شناور انجام دهند.

ورودی (Input): به کاربران امکان می‌دهد که اطلاعات را وارد کنند یا با استفاده از کامپوننت‌های مانند فیلدهای متنی، چیپ‌ها و کنترل‌های انتخاب، مواردی را انتخاب کنند.

ارتباط (Communication): به کاربران در مورد اطلاعات کلیدی و پیام‌ها با استفاده از کامپوننت‌هایی از قبیل اسنک‌بار، بنر و دیالوگ‌ها هشدار می‌دهد.

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

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

دیگر لازم نیست CSS را از اول بنویسیم و می‌توانیم از کامپوننت‌های آماده‌ی متریال استفاده کنیم.

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

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

فریمورک متریالایز Materialize

فریمورک متریالایز یا Materialize یکی از مشهورترین فریمورک‌های Mobile-First است. دلیل اینکه اول به معرفی این فریمورک می‌پردازیم، این است که سازنده‌ی آن خود متریال دیزاین است.

کار با این فریمورک ساده است. این فریمورک حاوی کدهای آماده‌ای است که ساخت پروژه را برای اولین بار ساده‌تر می‌کند.

Materialize دو نسخه دارد:

نسخه‌ی Standard

نسخه‌ی Sass

متریال دیزاین چیست نسخه‌ی Standard Materialize حاوی فایل‌های CSS و SCSS، جاوا اسکریپت و فونت‌های متریال دیزاین است. این نسخه مناسب اشخاصی است که با Sass آشنا نیستند.

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

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

متریال دیزاین چیست چنان که در بخش قبل اشاره کردیم، متریال دیزاین سیستمی برای طراحی کاربردی و متمایز ارائه کرده است. در این بخش به صورت عملی و در طی یک راهنمای گام به گام با روش خلق یک برند به روش متریال دیزاین آشنا خواهیم شد.

متریال دیزاین چیست هیچ کس برندتان را بهتر از شما نمی‌شناسد. به همین جهت است که وقتی قصد دارید برندسازی خود را به روش متریال دیزاین به توسعه‌دهنده‌های ثالث بسپارید، باید در مورد روش بهره‌گیری آن‌ها از این سیستم حساس باشید. ما می‌خواهیم متریال دیزاین راهنمایی منسجمی برای طراحی مؤثر و متمایز UI عرضه کند و گام‌های بلندی در زمینه موشن، بُعد‌پذیری، رنگ و سلسله مراتب گرافیک بردارد.

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

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

دیدگاه خود را اینجا قرار دهید

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

اعضا

‫بروز رسانی

سمیرا مردانی's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

محمد جواد محمدی's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

مریم نوری's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

محمد امین طاهری's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

نگار حجتی's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

فیلدهای نمایش داده شده را انتخاب کنید. دیگران مخفی خواهند شد. برای تنظیم مجدد سفارش ، بکشید و رها کنید.
  • عکس
  • شناسه محصول
  • امتیاز
  • قیمت
  • در انبار
  • موجودی
  • افزودن به سبد خرید
  • توضیحات
  • محتوا
  • عرض
  • اندازه
  • تنظیمات بیشتر
  • ویژگی ها
  • ویژگی های سفارشی
  • زمینه های دلخواه
برای پنهان کردن نوار مقایسه ، بیرون را کلیک کنید
مقایسه
مقایسه ×
Let's Compare! Continue shopping