زبان طراحی گوگل با الهام از دنیای فیزیک

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

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

اخیرا گوگل سیاست خود را تغییر داده و به جای اینکه خودش سرویسی یا محصولی را برای عام تولید کند، سرویس های شاخصی برای توسعه دهنده ها، برنامه نویس ها، طراح ها و کلا سازندگان ارائه میدهد که این کا باعث میشود(برای مثال: AngularJS, Dart Lang, Google Web Master Tools, Android API, Hangout API و... که گوگل هم عام را راضی کند چون با سرویسی که برای آن توسعه دهنده ارائه داده است محصولی تولید میشود که گوگل نیز در آن سهیم است.

گوگل زبان طراحی خود را عرضه کرده با نام  Google Material Design که این زبان طراحی برای اولین بار در اندروید نسخه 5 استفاده شده و بعد از آن در Whatsapp, Telegram, Instagram. Whatsapp Web, Google Web Docs, Hangouts, You Tube, Google Maps, Google Chrome, Facebook  و همچنین در اپ های فارسی مثل: دیجی کالا، کافه بازار، مترو تهران(فرداد)، هدفون و...

وقتی کنفرانس گوگل برگزار شد برای معرفی متریال دیزاین این جمله به کار رفت:

نه به تیرگی اندروید های قبلی، نه به روشنی iOS

این جمله یعنی در متریال دیزاین تعادل رعایت شده است. متریال دیزاین بر سه اصل بنا شده

قوانین فیزیک (استفاده همزمان از فضای منطقی و حرکت‌ها)

تایپوگرافی در مقیاس بزرگ – فضای سفید زیاد – رنگ‌های غلیظ و آگاهانه – تصاویر لبه به لبه

انیمیشن‌های معنی دار و منسجم.

در کل گوگل برای اینکه ظاهری یکی و همبسته در بین اپ های اجرایی وجود داشته باشد این زبان را ارائه داده اما این به این معنی نیست که سایت ها، برنامه ها و... که با متریال پیاده سازی میشوند همه شکل هم هستند.

هم بستگی از نظر چیدمان و ظاهر رنگ بندی و انمیشن ها قانون متریال برای هم بستگی است.

گوگل برای اینکه اپ های تولیدی با زبان متریال از لحاظ بصری یکی باشند چیدمان هایی را تحت عنوان White Frame ارائه میدهد که هر کدام از این White Frame ها برای 3 نمای دسکتاپ، تبلت، موبایل ارائه شده است که این White Frame شامل اجزایی هستند که یکسان میباشند.

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

در متریال دیزاین محتوای اصلی در محلی به نام Paper قرار میگیرد. همچنین بخش بندی و گروه بندی ها توسط Card ها انجام میشود.کارت ها همانند Paper دارای سایه میباشند. در طراحی این دو جز سایه ها اهمیت بسیاری دارند به این ترتیب که بیرونی ترین Paper ها دارای سایه بلند و Paper ها درونی تر سایه هایی کوتاه تر و Deep تر دارند.

Paper ها

Card ها

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

در متریال دیزاین انیمیشن ها جزو مهمترین بخش ها به شمار می آیند در کل انیمیشن ها جلوه Interactive بودن محصول تولیدی را بیشتر میکنند.

انیمیشن ها تبدیلی و ایجاد شدنی در متریال دیزاین بسیار مرسوم میباشند .مثلا میخواهیم بعد از کلیک شدن روی آیکون منو این آیکون به فلش بازگشت تبدیل بشه! این کار به صورت عادی با انمیشن هایی مثلا Fade یا Slide انجام میشود. اما توی متریال دیزاین این عمل با تبدیل جز به جز آیکون منو به آیکون فلش انجام میشود. برای درک بیشتر این موضوع بروی عکس زیر کنید.

اینک متریال دیزاین در پلتفرم هایی مثل Mobile, Car, TV, Android, Wear در حال استفاده است و راه گشای مشکلات زیاد طراحی شده است.