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

متریال دیزاین چیست سیستمی است که از سوی گوگل برای کمک به تیم‌ها در جهت ساخت تجربه دیجیتال با کیفیت برای پلتفرم‌های اندروید، 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 عرضه کند و گام‌های بلندی در زمینه موشن، بُعد‌پذیری، رنگ و سلسله مراتب گرافیک بردارد.

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

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