BiTJoO

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

از زمان ایجاد آن ، چهره وب دستخوش تغییرات زیادی شده است. آنچه اساساً به عنوان غرب وحشیِ طراحی در دهه 1990 و اوایل 2000 آغاز شد ، سرانجام راه را برای وب سایت های ساده‌تر ، تمیزتر و قابل پیش بینی تر باز کرد.

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

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

اما متریال دیزاین واقعا چیست؟ 

متریال دیزاین یک استراتژی طراحی است که توسط گوگل در سال 2014 توسعه داده شده است. زبان طراحی آن و تمام مستندات مرتبط اکنون در material.io در دسترس هستند.

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

متریال دیزاین با کد «Quantum Paper» به عنوان یک زبان طراحی منتشر شد که طراحان اندروید می توانند با استفاده از آن ، برنامه های بهتری ایجاد کنند. گوگل همچنین از متریال دیزاین برای بازنگری در طراحی برنامه های خود استفاده کرده است.

هدف متریال دیزاین این بود که طراحان بتوانند به سرعت برنامه هایی بسازند که پاسخگو ، قابل استفاده و مقیاس پذیر باشند. در سال 2014 ، انتشار Material Design موج بزرگی را در جامعه طراحی ایجاد کرد – نه فقط برای توسعه Android ، بلکه برنامه های iOS ملعون و وب سایت ها نیز بر روی این موج سوار شدند.

چرا Material Design ایجاد شده است؟

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

اسکوئومورفیسم

حدود سال 2010 بود که اسکوئومورفیسم به شهرت رسید. این یک سبک طراحی بود که باعث می شد عناصر UI مانند اشیا Objects واقعی که بر اساس آن ها ساخته شده اند ، به نظر برسند. وقتی صحبت از پس زمینه و نمادهای وب سایت می شود ، این مورد را بسیار دیده ایم :

این تصویر از صفحه اصلی اپل ملعون در سال 2012 است:

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

نماد برنامه دوربین شبیه لنز دوربین واقعی است.
نماد برنامه Clock مانند یک ساعت دیواری قدیمی آنالوگ به نظر می رسد.
لوگو برنامه Calendar مانند یک کارت تقویم قابل لمس به نظر می رسد.
در نهایت UI های Skeuomorph ثابت کردند که به دلیل کیفیت های واقعی آن ها (برجستگی) حواس آدم ها را پرت می کنند. علاوه بر این ، ویژگی های واقع گرایانه طراحی به هیچ دلیل دیگری جز مد روز بودن مورد استفاده قرار نگرفته اند. (زمانی را تصور کنید سینه ها و باسن برجسته ، برتری محسوب می شد 😐 )

طراحی تخت

روند طراحی بعدی ، طراحی مسطح ، با هدف از بین بردن سطح اضافی (عدم برجستگی) و سطحی گرایی قبلی است. (دیگر سینه یا باسن برجسته برتری محسوب نمی شود)

در اینجا نحوه نمایش آیکون های اسکئوومورفیک در دستگاه iOS در سال 2020 آورده شده است:

این آیکون ها (و همچنین آیکون های بسیاری از برنامه های قدیمی) مسطح شده اند و بیشترین نزدیکی به واقعیت را از آن ها گرفته اند. (تاثیر بسیار بهتری بر روی بیننده می گذارد)

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

«[طراحی تخت] اغلب منجر به عدم اطمینان کلیک و کاهش کارایی کاربر می شود. وقتی طراحان رابط کاربری را صاف می کنند ، تمایل دارند بسیاری از نشانه ها را که معمولن به کاربران می گویند کجا کلیک کند ، حذف کنند.» (اگر چه سینه و باسن نه چندان برجسته شخصیت زیادی به ظاهر فرد می بخشد ، اما لمس آن مشکل است)

سرانجام : متریال دیزاین

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

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

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

کاغذ در سه بعد وجود دارد. – ورق های کاغذ سایه ها ، درزها و چین هایی ایجاد می کنند و برای نیازهای ما قابل برش و تغییر سایز هستند – چیزی که گوگل قصد داشت آن را با استفاده از متریال دیزاین در فضای دیجیتال دوباره ایجاد کند.

این مثال از وب سایت materal.io یکی از سبک های برند تجاری متریال است:

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

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

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

ماتیاس دوارت ، معاون طراحی در Google ، توضیح می دهد که چرا این یک تغییر مهم برای وب است:

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

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

این تغییرات معنای دیگری نیز در طراحی ایجاد کرد:

اصول اصلی متریال دیزاین چیست؟

متریال دیزاین چیزی فراتر از افزودن لایه یا سایه برای طراحی است. سه اصل مبنای آن به شرح زیر هستند:

اصل شماره 1: مواد استعاره است!

متریال دیزاین را به صورت دیجیتالی کردنِ دنیای فیزیکی در نظر بگیرید.

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

به عنوان مثال ، ایده علت و معلولی بدون پدیده ها را در نظر بگیرید. وقتی کسی اقدام خاصی را انجام می دهد ، انتظار نتیجه قابل پیش بینی دارد.

با تعبیه UI با این نوع ویژگی های فیزیکی ، کاربران می توانند برای درگیر شدن با وب سایت ها و برنامه ها به شهود و اقدامات طبیعی خود اعتماد کنند.

اصل شماره 2: شاخص ، گرافیک و با قصد و منظور خاص

به این مثال از بخش Material Foundation در مورد تایپوگرافی وب نگاه کنید :

تمام Material Foundation در همین حد جامع است. اساساً ، در پشت پرده هر انتخابِ طراحی ، معنی و منطق نهفته است.

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

این سیستم به وضوح عناصر حیاتی UI را در هم شکست و اعتبار تازه ای به عناصر زیر بخشید:

طرح بندی یا Layout (با تأکید بر شبکه Grid های واکنش گرا و سلسله مراتب)

پیمایش

رنگ

تایپوگرافی و فونت های وب

صدا (این مورد بیش تر مربوط به برنامه ها است)

آیکون نگاری

شکل

حرکت – جنبش

اینتراکشن ها

ارتباطات (شامل تصاویر ، نوشتن و Data Visualization.)

متریال دیزاین همچنین توضیح داد که چگونه و چرا می توان به طریقی خاص برای مورد اولویت قرار دادن کاربر عمل کرد.

اکنون روشن است که چرا «منطق و عمد در طراحی هر قسمت» بخشی از این اصل بوده است. اما در مورد «برجسته بودن» و «گرافیکی بودن» چطور؟

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

برای اینکه ایده ای داشته باشید از رنگ ها و دیزاین کلی ، ابزاری وجود دارد به نام : Material Design Color Palette Generator که البته در این ویدیو یوتیوب آن را به طور کامل و به زبان فارسی توضیح داده ام.

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

اصل شماره 3: حرکت معنی می بخشد

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

سه دلیل وجود دارد که متریال دیزاین خواستار حرکتِ ظریف در طراحی است:

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

برای کمک به توجه و راهنمایی کاربران به کلیدی ترین قسمت های صفحه

شخصیت و لذت بخشیدن به رابط کاربری

عناصر کوچک به اندازه آیکون ها را می توان متحرک کرد:

همچنین می توان فضاهای های بینابینی را نیز متحرک کرد. به عنوان مثال ، در حالی که کاربران منتظر باز شدن صفحه جدید هستند. تعریف فضای بینابینی

در واقع همه این ها بستگی به این دارد که حرکت برای چه منظوری اعم از : اطلاع رسانی ، تمرکز یا رساندن پیام استفاده می شود؟

امروزه ، طراحان وب چگونه از طراحی متریال دیزاین استفاده می کنند؟

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

خیلی سیاه و سفید بود. به معنای واقعی کلمه ، همه چیز برای طراحان مشخص شده بود ، بنابراین این طور بود که «این نحوه طراحی برای شما (به عنوان طراح) خوب است از آن چه که من می گویم ، تبعیت کن.»

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

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

در نتیجه آن چه که خواهیم داشت ، تعداد زیادی برنامه و وب سایت یکسان است. 🥺

متریال دیزاین 2.0 راهی برای نجات

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

در مورد اینکه امروز متریال دیزاین چگونه به نظر می رسد ، بیش تر سیستم اصلی دست نخورده است. به منظور مدرن تر شدن ، برخی از به روزرسانی ها در متریال دیزاین انجام شده اند.

به عنوان مثال ، اکنون بر فضای سفید و یا بهتر بگویم ، فضای خالی ، استفاده از دکمه های ناوبری در پایین پایین صفحه و درج مجموعه آیکون های رنگارنگ تأکید بیشتری شده است. اوه … و حالت Dark Mode اکنون در بیش تر برنامه ها و وب سایت ها در دسترس است.

علاوه بر این ، تأکید زیادی بردر دسترس پذیرتر کردن وب (برای نابینایان و …) و همین طور بین المللی شدن آن وجود دارد.

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

این روزها بهترین استفاده از متریال دیزاین 2.0 به عنوان یک جعبه ابزار است.

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

جعبه ابزار یا ToolKit  متریال دیزاین

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

بخش منابع و همه آن چه که در آن جا فراهم است چگونگی این امر را نشان می دهد.

طراحان به کیت ها و ابزارهای Starter دسترسی دارند:

مجموعه آیکون ها

قلم های گوگل

کیت های طراحی Adobe ، Sketch و Figma

الگوهای Material Design

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

رنگ

شکل

تایپوگرافی

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

همانطور که می بینید ، تأکید بیشتر بر روی ایجاد رابط کاربری سفارشی است ، در عوض این که فقط به رنگ ها ، قلم ها ، چیدمان ها و موارد دیگر که Google در ابتدا برای برنامه های اندروید طراحی کرده است ، ادامه دهند.

این همان چیزی است که امروزه حیات طراحی متریال را تضمین کرده است.

نمونه هایی از طراحی مواد

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

با این وجود یک Case Study در meterial.io وجود دارد که در آن به وضوح روشن است که از همین رویکرد استفاده شده است. این Case Study ریپلای ( به فارسی : پاسخ ) نام دارد. لینک Case Study

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

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

وب سایت سازنده افزونه Elementor وردپرس 

وب سایت Elementor بر اساس بسیاری از اصول طراحی خوبی است که متریال دیزاین به ما ارائه داده است:

مهم ترین دکمه های صفحه به گونه ای طراحی شده اند که مانند عناصر قابل کلیک باشند، تا به بازدیدکنندگان تأیید کنند که «بله ، شما باید اینجا را کلیک کنید». ( یه ضرب المثل قدیمی هست که می گه دکمه خوب ، دکمه ای هست که می گه منو بمال ) 

سایر اجزای مهم (مانند Layout ها ، تایپوگرافی و جعبه رنگ ها) روی یک لایه بالاتر قرار می گیرند تا بازدیدکنندگان قبل از حرکت متوجه آن ها شوند.

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

با گوگل فکر کنید ( وب سایت Think with Google ) 

تعجب آور نیست که یک وب سایت تحت مدیریت Google از جمله نمونه های متریال دیزاین است. Think with Google در وب سایتش از این عناصر استفاده کرده است:

طراحی مبتنی بر شبکه  Grid :  برای جریان قابل پیش بینی از محتوا

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

حداقل طراحی با کنتراست رنگ روشن برای جلب توجه به Calls-to-action

وب سایت Glue Lock

وب سایت Glue Lock مثالی عالی در مورد نحوه استفاده از یک جلوه فوق العاده مدرن متریال دیزاین است:

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

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

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

وب سایت Mockplus

Mockplus وب سایت دیگری است که اصول اولیه را از متریال دیزاین می گیرد و به آن ها جلوه سفارشی می دهد:

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

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

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

وب سایت Hotels.com

اگرچه وب سایت دسک تاپ Hotels.com دقیقاً به اصول متریال دیزاین پایبند نیست ، اما سایت موبایل آن این موارد را انجام می دهد:

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

انتقال از نمای لیست List View به نمای نقشه Map View نشان می دهد که چگونه متریال دیزاین به طراحان وب کمک می کند تجربه وب سایت موبایل بهتری را برای بازدید کنندگان ایجاد کنند.

دکمه های موجود در نمای نقشه برای «مشاهده ویژگی های بیشتر» ، «لیست» و دکمه های بزرگ نمایی به راحتی قابل تشخیص هستند زیرا روی یک لایه بالای نقشه قرار گرفته اند.

جوانب مثبت و منفی Material Design

جوانب مثبت طراحی مواد:

طراحان وب می توانند در تمام مراحل از متریال دیزاین بهره مند شوند. برای مثال از بیخ و بن یا گاه گاهی و در بعضی از قسمت ها.

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

از آنجا که به عنوان یک سیستم طراحی برای برنامه های آندروید آغاز به کار کرده است ، این یک روش واکنش گرا برای طراحی است و باعث می شود که یک وب سایت یا برنامه بیش تر و بیش تر به سمت و سوی واکنش گرایی حرکت کند.

این اولین رویکرد طراحی برای کاربر a user-first approach to design است که بسیاری از نقایص مدل های قبلی خود را که در آن قابلیت استفاده ، خوانایی و قابلیت دسترسی وجود نداشت ، برطرف کرد.

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

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

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

جوانب منفی متریال دیزاین:

وقتی خیلی دقیق به آن ها پایبند شوید ، وب سایتها (و برنامه ها) بسیار شبیه می شوند.

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

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

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

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

Material.io : این راهنمای رسمی طراحی متریال است و تمام مواردی را که برای شروع به کار نیاز دارید ، شامل اجزای از پیش طراحی شده ، تولیدکننده تصاویر برند و سایر موارد در اختیار شما قرار می دهد.

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

Global Systems How to: اگر مثل من طرفدار وردپرس هستید ، منابع موجود در وب سایت افزونه المنتور ، حتما در این زمینه کمک کننده هستند.

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