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

متریال

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

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

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

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

  • 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” به نمایش گذاشته شده. واقعاً انیمیشن شگفت انگیزیه که جوهره طراحی متریال توش به درستی رعایت شده.
 نتیجه
در واقع اینا هنوز اول راه بود. درسته منابع کمیاب هستن ولی حداقل می تونن یه معرف مختصری از سبک طراحی متریال باشن. به ندرت این منابع افزایش خواهند یافت و البته همراهشون ایده های نو.

 

 

فاطمه زکایی

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

نوشته‌های مرتبط

دیدگاه‌ها

*
*

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

    ahmad پاسخ

    تشکر بابت این آموزش

ما یک پرسشنامه‌ی کوچولو داریم، که قول میدیم وقتتون رو خیلی نمی‌گیره، ولی کلی به ما کمک می‌کنه، چون هم assessment مونه ,و هم شما به ما در این زمینه کمک میکنید.بزن بریم