طراحی تریال دیزاین مختص پلتفرم خاصی نیست و یک انقلاب در سبک سنتی طراحی محسوب می‌شود. هر چند که این سبک طراحی در ابتدای راه خود قرار گرفته است ولی توانسته نظرها را به خود جلب کند. در این مطلب قصد داریم شما را با این سبک طراحی آشنا سازیم.
برای معرفی طراحی Material باید در ابتدا با مفهوم Flat Design آشنا شوید.
سبک Flat Design چیست؟
طراحی Flat Design را می‌توان مدیون مایکروسافت دانست، چون مایکروسافت با استفاده از این نوع طراحی در منوی Start ویندوز هشت توانست نظر مردم را به این نوع طراحی جلب کند.
سبک طراحی تخت گونه‌ای از طراحی است که در عین مدرن بودن بر سادگی تاکید فراوانی دارد. در این نوع طراحی از سایه ها، گرادینت‌ها و المان‌های سه بعدی به میزان کمی بهره می‌برند.
رنگ‌ها در این طراحی محدود و متناسب هستند و از فونت‌های خانا تر استفاده می‌گردد. حتی لوگوی برخی از شرکت‌های بزرگ نیز متاثر از این سبک طراحی تغییر کرده است.
البته در لوگو‌های تخت معمولا یک سایه بلند با زاویه 45 درجه نیز استفاده می‌کنند. چند نمونه لوگوی تخت را در زیر می‌بینید:
مهم ترین نقطه قوت طراحی تخت این است که در این نوع طراحی بر خلاف طراحی‌های قدیمی و کهنه تکیه بر روی نشان دادن محتواست تا استفاده از طراحی‌های پیچیده و رنگ بندی‌های کلاسیک.
دیگر مزیت‌های این سبک طراحی عبارتند از:
- طرح‌های تخت به سادگی به صورت واکنشگرا پیاده سازی می‌شوند و برای دستگاه‌های مختلف مناسب هستند.
- این سبک طراحی نظر کاربران را بیشتر جلب کرده و یک حس اطمینان و مدرن بودن به او دست می‌دهد.
- حجم بالایی از اندازه‌ها درصدی هستند بنابراین مدیریت المان‌ها ساده تر خواهد بود.
- در این طرح استفاده از عکس‌ها کاهش پیدا کرده و بدلیل سبک تر شدن صفحات بازدهی بالاتری داریم.
- امکان دسترسی به المان‌های صفحه راحت تر شده است و اجزایی که منجر به حواس پرتی در کاربر می‌شوند حذف شده اند.
طراحی متریال چیست؟
ویدیو زیر را از دست ندهید:
طراحی متریال را می‌توان رشد و نبوغ طراحی تخت دانست و با وجود شباهت‌هایی که با آن دارد ولی مفهومی تازه و جدیدی است.
Material Design در سال 2014 توسط گوگل معرفی شده است و گوگل آن را اینگونه تعریف می‌کند:
Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences
گوگل متریال دیزاین را یک Visual Language و یا زبان تصویری می‌نامد و معتقد است یک سیستم منسجم را با ترکیب المان ها، منابع، ابزارها و قوانین پیاده سازی کرده است که در نهایت قصد دارد تجربه کاربر را از لایه نمایشی سایت و یا اپلیکیشن افزایش دهد.
بر خلاف طراحی تخت که هیچ سایه‌ای نداشت در این سبک طراحی سایه از اهمیت بسیار بالایی بر خوردار است. تفاوت مهم دیگر متریال دیزاین و طراحی تخت مبحث حرکت المان‌ها است.
یکی دیگر از موارد تفاوت بین طراحی تخت و متریال بحث حرکت است، حرکت المان‌ها در طراحی متریال از قوانین و قواعد ویژه‌ای بهره می‌برند. گوگل معتقد است حرکت المان‌ها معنی ایجاد می‌کنند و تمام حرکت‌ها باید دارای هدف باشند چون نوع حرکت در مشخص کردن اهمیت عناصر مهم است.
توجه داشته باشید که طراحی متریال یک طراحی اصولی و استاندارد است و کلیه ضوابط و قوانین آن توسط خود گوگل ابداء و گسترش می‌یابد. بنابر این صرف داشتن یک طراحی تخت آن هم با سایه و رنگ‌های متناسب اصلا به معنای طراحی متریال نیست و برای پیاده سازی یک طراحی متریال باید با کلیه اصول و قواعد آن آشنا شوید.
طراحی متریال مختص موبایل نیست!
عرضه متریال دیزان همزمان بود با معرفی اندروید 5 (Lollipop). بدلیل این همزمانی خیلی‌ها تصور می‌کنند طراحی متریال مختص نرم افزارهای اندروید است در صورتی که اصلا این گونه نیست.
گوگل تنها به تعریف استانداردها بسنده نکرده و ابزارهایی برای طراحی متریال در وب و موبایل ارائه داده است. در موبایل کامپوننت‌های مختص طراحی متریال دیزاین به سادگی قابل استفاده هستند و در وب نیز یک فریم‌ورک پایه به نام Material Design Lite عرضه کرده است تا کاربران بتوانند طراحی متریال قالب‌های خود را ساده تر پیاده کنند.
فریم‌ورک Material Design Lite در تمام مرورگرهای مدرن کار می کند ولی هنوز نتوانسته مانند دیگر فریم‌ورک‌های قدرتمند نظر طراحان را جلب کند، که طبق قول‌های گوگل باید منتظر بروز رسانی‌های مهم این فریم‌ورک در آینده باشیم.
البته فریم‌ورک بهتری از سوی AngularJs معرفی شده است که بسیار ایده آل است. این فریم‌ورک را در این لینک مشاهده کنید.
آیکون‌های ویژه متریال دیزاین
گوگل به صورت پیوسته در حال توسعه آیکون‌های ویژه متریال خود است. آیکون‌های متریال گوگل یکی پس از دیگری پا به عرصه می‌گذارند و در فرمت‌های مختلف قابل استفاده هستند.
این آیکون‌ها برای وب و برای موبایل قابل استفاده هستند و از کیفیت بالایی بر خوردارند.