طراحی متریال چیست و چگونه به وجود آمد ؟

گوگل در سال ۲۰۱۴ با معرفی نسخه ۵ اندروید (لالی پاپ)، زبان بصری جدیدش رو هم با نام”متریال” معرفی کرد که انقلاب جدیدی در طراحی های رابط کاربری بوجود آورد. در واقع گوگل قصد داره با ترکیب این سبک طراحی با تکنولوژی روز تجربه کاربری بهتری رو به کاربرانش ارائه بده.

این سبک طراحی به دلیل نوپا بودن در شرایط فعلی از منابع کمتری برخورداره ولی در این مقاله سعی شده تعدادی از این منابع کمیاب رو معرفی کنیم.

اول از همه خود گوگل

اول از همه سراغ خود گوگل میریم که باعث و بانی این سبک طراحی خودشه. گوگل تعدادی فایل رو در قالب نرم افزار ادوبی ایلوستریتور ارائه کرده که میشه بدون افت کیفیت ویرایششون کرد و تو طراحی های ازشون استفاده کرد. لینک های زیر منابعی هستن که گوگل در اختیار توسعه دهنده ها و طراح ها گذاشته :

Mobile Whiteframe
Tablet Whiteframe
Desktop Whiteframe
Color palette
Roboto font
Structural elements
More of individual UI concepts

الهام گیری از طراحان جهانی

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

فایل پروژه های افتر افکت

Jelio Dimitrov این اثر رو تو نرم افزار افتر افکت ایجاد کرده. اگه شما هم علاقه‌مند به ساخت همچین انیمیشنی هستید این منبع می تونه کمکتون کنه!

رابط کاربری کنترل ها به سبک متریال

اینجا می تونید چند تا از عناصر طراحی شده به سبک متریال رو مشاهده کنید. این طراحی ها بصورت CSS و شامل : دکمه ها – عناصر مربعی شکل – کادرهای هشدار – مربع های ساده – تصاویر و دایره ها هستن. ازش میشه به عنوان یه کتابخونه کوچیک واسه شروع کار یاد کرد.

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

این زمین بازی رو طراحی به اسم “Eric Bidelman” آماده کرده و باغ بزرگیه پر از کدهای متریال. استفاده از این کدها می تونه شما رو با اصول اولیه طراحی متریال آشنا کنه.

کنترل های متریال

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

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

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

الگوی طراحی آیکن های گوگل

اگه به دنبال یه الگو واسه طراحی آیکن به سبک متریال هستین این می تونه کمکتون کنه.

رابط کاربری جدید اندروید لالی پاپ

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

اصول و مبانی طراحی متریال

آموزش های موجود تو این اسلاید ها توسط Harrison Weber آماده شده و می تونید با اصول و مبانی طراحی متریال بیشتر آشنا بشید.

طراحی متریال

این طراحی توسط دانش آموزی به اسم “Jovie Brett” به نمایش گذاشته شده. واقعاً انیمیشن شگفت انگیزیه که جوهره طراحی متریال توش به درستی رعایت شده.

نتیجه

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