متریال دیزاین (Material Design)

سیستم متریال دیزاین استانداردی برای طراحی و ایجاد وب سایت و برنامه های اندرویدی است که هدف آن ایجاد نظم و یکپارچگی در طراحی وب می باشد. مفهوم ابداع Material Design به گوگل باز می‌گردد که شامل مجموعه‌ای از راهنمایی ها برای طراحان و توسعه‌دهندگان فرانت‌اند است. این رویکرد طراحی، دیدگاه‌های تازه‌ای در مورد رابط کاربری، انیمیشن و تعامل با کاربر را معرفی می‌کند و یک پایهٔ مناسب برای طراحی نرم‌افزارها و اپلیکیشن‌های کاربرپسندتر است. این سیستم طراحی مبتنی بر شبکه که در سال 2014 معرفی شد، مورد پذیرش قرار گرفت.

متریال دیزاین با کد (Quantum Paper) به عنوان یک زبان طراحی منتشر شده است که طراحان اندروید می توانند با استفاده از آن، برنامه های بهتری ایجاد کنند. گوگل همچنین از متریال دیزاین برای بازنگری در طراحی برنامه های خود استفاده کرده است.

هدف متریال دیزاین این بود که طراحان وب بتوانند به سرعت برنامه هایی بسازند که قابل استفاده و مقیاس پذیر باشند. در سال 2014 ، انتشار Material Design موج بزرگی را در جامعه طراحی ایجاد کرد نه فقط برای توسعه Android ، بلکه بر روی برنامه های iOS و وب سایت ها نیز تاثیر گذار بوده است.

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

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

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

به طور کلی، شما می‌توانید طراحی متریال را به دو بخش کلی تقسیم کنید که عبارتند از:
1) عناصر طراحی
2) حرکات و انیمیشن‌ها

آشنایی با متریال دیزاین (Material Design)

رنگ در متریال دیزاین

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

تایپوگرافی

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

شکل

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

حرکت‌ها و انیمیشن‌ها

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

واکنش‌گرایی

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

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