طراحی متریال یک زبان طراحی است که در سال 2014 توسط گوگل توسعه داده شد. طراحی متریال با استفاده از طرح های مبتنی بر شبکه، انیمیشن های واکنشی و انتقال، لایه برداری و جلوه های عمیق مانند نورپردازی و سایه ها کاربرد بیشتری دارد. گوگل طراحی متریال را در تاریخ 25 ژوئیه 2014 ، در کنفرانس O/I  اعلام کرد.

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

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

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

طراحی متریال چیست؟

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

اما در مورد رابطه های دیجیتالی متفاوت است و منظور مواد مشابه جنس پارچه و یا پرده نیست. طراحی متریال گوگل ، نوعی مواد دیجیتالی مانند "پیکسل ها" را مطرح می کند.

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

کمی گیج کننده است. درسته؟  در اینجا برای روشن شدن موضوع کمی بیشتر توضیح می دهیم. در دنیای دیجیتال هر قطعه ای از متریال به عنوان یک عنصر جداگانه در نظر گرفته می شود. بنابراین اپلیکیشنی با پس زمینه سفید در واقع از یک قطعه کامل از رنگ متریال سفید استفاده می کند.

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

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

پیاده سازی

از سال 2015، اکثر برنامه های کاربردی موبایل برای اندروید از جمله gmail ،  یوتیوب ، google doc، اسلایدر ها و برگه ها ، google drive ، نقشه های گوگل ، گوگل پلاس ، تمام اپلیکیشن های کاربردی گوگل و اندازه های کوچکتر مرورگر کروم، کاربردی شده اند. رابط های کامپیوترهای رومیزی مانند برگه ها، اسلایدر ها ، google drive  ، docs و غیره نیز کاربردی شده اند.

جستجو هایUX  و UI گوگل

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

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

مزیت استفاده از طراحی متریال این است که گوگل جستجوهای UX  و  UI  را انجام می دهد.  بنابراین توسعه دهندگان فردی به دلیل ناوبری آسان و رفتار سازگار مجبور به انجام آن نیستند.

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

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

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

طراحی متریال لایت چیست؟

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

در حالی که MDL ممکن است از طراحی کلاسیک متریال متفاوت باشد ولی به هیچ وقت نسخه پائین تر از آن نیست. اکثر سایت های طراحی شده با MDL، قدرتمند، آسان برای استفاده و زیبا هستند.

پالت رنگ های متریال

 یکی از جنبه های بصری MDL  پالت های مربوط به رنگ است. پروژه های متریال اغلب رنگارنگ و زیبا هستند. رنگ ها عمیقا اشباع شده اند و ترکیب رنگ ها غیرمنظره، چشم نواز و زیبا هستند.

رنگ های متریال اصولا بر اساس یک پالت هستند که شامل یک رنگ اصلی و رنگ های فرعی می باشد.

طراحی متریال گوگل، زبان طراحی اندروید

طراحی متریال توسط گوگل ایجاد شده است و یک زبان طراحی است که برای دستگاه های اندروید استفاده می شود. به گفته ماتیاس دوراته ، مدیر انجمن طراحی گوگل، این یک ایده طراحی است که احساس قلم و کاغذ را تقلید می کند.

به گفته مدیر طراحی گوگل :" طراحی دارای 3 بعد  و 5 حس است". در طراحی دیجیتال، طراحی سه بعدی است.

درباره طراحی متریال

در کنفرانسل سال 2014،  طراحی متریال رسما اعلام شد و طراحی متریال سازگار با تمام نسخه های اندروید در نظر گرفته شد.

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

مولفه های مختلف طراحی مواد برای ادغام با نرم افزارهای اندروید وجود دارد از جمله:

• پس زمینه های متریال- یک سبک جدید از صفحه نمایش را برای برنامه های اندروید ارائه می دهد. این در ویجت های سیستم ساخته شده است و به توسعه دهنگان اجازه می دهد تا به سرعت و به راحتی پالت های رنگی را تغییر دهند. همچنین مجموعه ای از انیمیشن ها برای تغییرات سبک وجود دارد.
• لیست و کارت پشتیبان- دو ویجت وجود دارد که لیست طراحی متریال و فرم های کارت را پشتیبانی می کند، که شامل تمام سبک ها و انیمیشن ها می باشد. ویجت لیست recycle veiw  و ویجت کارت cartveiw  است.
• طراحی متریال همچنین علاوه بر دو بعد طول و عرض یک بعد سایه هم در نظر می گیرد و بنابراین سه بعدی است. بنابراین علاوه بر x و y ، یک جز دیگر مانند z  هم بر روی آن تاثیر می گذارد:
• مقادیر Z بزرگ منجر به سایه های ضخیم و مقادیرz کوچک سایه های نازک است.
• همچنین مقادیر Z بزرگ تعیین می کند که جز در بالای سایر نمایش ها ظاهر می شود.
• انیمیشن ها از طریق API ها پشتیبانی می شوند، که به توسعه دهنده اجازه می دهد، انیمیشن های سفارشی را برای UI ها بسازند، اینها:
• به برنامه ها اجازه می دهند تا رویدادهای لمسی را با انیمیشن های لمسی نمایش دهند.
• شما را قادر می سازد تا نظریه ها را با استفاده از انیمشین های دایره ای پنهان کنید و نمایش دهید.
• اجازه استفاده از حرکت های منحنی برای انیمیشن ها به منظور طبیعی جلوه دادن آن ها را می دهد.
• به شما اجازه گسترش انتقال انیمیشن های سفارشی را می دهد.
• به شما اجازه می دهد که تغییرات را با استفاده از "مشاهده تغییر وضعیت" انجام دهید.
• یک لیست کامل از انیمیشن ها را در لیست" مشاهده تغییرات " نمایش می دهد.
• انیمیشن های لمسی همچنین در چند نمایش استاندارد ارائه می شوند، که می توانند به راحتی سفارشی شوند.

چند اصل گوگل برای طراحی های متریال رنگارنگ

استعاره متریال

استعاره متریال به معنی تئوری فضا و حرکت است. مواد در واقعیت الهام بخش ، کاغذ ، پارچه ، جوهر و غیره هستند.

سطوح طبیعی و بصری هستند

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

یک طراحی سازگار

یک سیستم طراحی اصولی، فضا و تعاملات را سازماندهی می کند. هر دستگاهی نمای متفاوتی از سیستم های اصولی را منعکس می کنند.

محتوا ، گرافیکی و واضح تر است

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

رنگ، سطح و نمادگرافی، تاکید بر عمل است

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

چند مورد از طراحی های متریال UI برای طراحی پوسته و PSD  در سال 2018

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

طراحی مواد برای کاربر یک تجربه واقعی را ایجاد می کند. بسیاری از طراحان UX و  UI   از این روند  در طراحی های خود استفاده می کنند. در اینجا می خواهیم چند مورد از طراحی های UI را برای شما به اشتراک بگذاریم:

کیت طراحی های متریال رایگان:

با فرمت PSD  و قیمت رایگان ارائه می شود.

خصوصیات:

• این در فتوشاپ CS6 کار می کند.
• می تواند از فونت رایگان استفاده کند.
• از لایه های گروه بندی استفاده می کند.
• از بردارهای سفارشی استفاده می کند.
• سبک طراحی UI متریال دارد.

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

کیت طراحی مواد

فرمت آن PSD  است.

مشخصات:

• سازگار با فتوشاپ CC15
• سازگار با IOS و اندروید
• سازگار با قالب های UI
• راهنمای طراحی مواد

این کیت ، کتابخانه نهایی عناصر UI  ، قالب های اپلیکیشن و سبک های راهنما است که با کیفیت بالا برای فتوشاپ و sketch ترکیب شده اند.  تمام چیزی که برای کار سریع تر و نتایج بهتر برای اندروید نیاز دارید، اینجاست.