متریال دیزاین استانداردی برای ساخت و طراحی وب سایت و برنامه ها است. نسبت به سبک های قدیمی طراحی، این سبک کاربر پسند تر بوده و هدف آن ایجاد نظم و وحدت در طراحی وب است. در ادامه قرار است با Material Design و نحوه کار آن آشنا شوید.
از زمان ایجاد وب تا کنون این حوزه دستخوش تغییرات زیادی شده است. طراحی های اولیه وب با دردسر های فراوان در دهه 1990 و اوایل 2000 آغاز شد و در نهایت راه برای وب سایت های ساده تر، تمیز تر و قابل پیش بینی تر باز شد. سپس، تلفن های هوشمند وارد معرکه شدند و حوزه وب به تغییرات عظیمی نیازمند شد. این تغییرات ابتدا زلزله عظیمی در دنیای طراحی ایجاد کردند، ولی سرانجام وب سایت ها به لطف سیستم طراحی Google Material Design، تحت تأثیر قرار گرفتند.
طراحی متریال در اصل در سال 2014 معرفی شد و به عنوان طراحی مبتنی بر شبکه پذیرفته شد، سپس به سرعت گسترده شده و روند کاری جدیدی به خود گرفت.
Material Design چیست؟
Material Design یک سیستم طراحی وب است که توسط گوگل در سال 2014 توسعه یافته است. کل سیستم طراحی، زبان طراحی و کلیه مستندات در حال حاضر در material.io قرار دارند، که شامل موارد زیر است:
1_توضیحات مربوط به سیستم متریال دیزاین:
2_دستورالعمل های استفاده از زبان متریال دیزاین و چگونگی طراحی با آن:
3_داشتن اجزایی با قابلیت استفاده مجدد که طراحان را قادر می سازد به راحتی UI های متریال ایجاد کنند:
متریال دیزاین بسیار جامع تر از اکثر سیستم های طراحی است. Material Design فقط برای یک نام تجاری یا یک پروژه خاص ساخته نشده است. متریال دیزاین با نام کد “Quantum Paper” به عنوان یک زبان طراحی منتشر شد تا طراحان اندروید بتوانند از آن برای طراحی برنامه های خود استفاده کنند. در کنار آن هم گوگل از Material Design برای بازنگری در طراحی برنامه های خود استفاده کرد.
هدف کلی از ساخت Material Design این بود که طراحان بتوانند به سرعت برنامه هایی طراحی کنند که پاسخ گو، قابل استفاده و مقیاس پذیر باشند. در سال 2014، با انتشار متریال دیزاین موج بزرگی در سراسر جامعه طراحی ایجاد شد، که نه تنها برای توسعه اندروید، بلکه برای برنامه های iOS و وب سایت ها نیز کاربرد فراوانی داشت.
چرا متریال دیزاین ایجاد شد؟
برای درک چگونگی شکل گیری و فواید Material Design، باید به طراحی های قبل از ظهور متریال دیزاین نگاهی بیاندازیم.
skeuomorphism:
حدود سال 2010 بود که skeuomorphism تبدیل به یک طراحی برجسته و محبوب شد. این مدل یک سبک طراحی بود که باعث می شد عناصر UI شبیه اشیاء واقعی به نظر برسد. معمولاً وقتی صحبت از طراحی پس زمینه و نماد های یک وب سایت می شود، این سبک را بسیار خواهید دید. مثلاً این تصویر از صفحه اصلی Apple در سال 2012 است را مشاهده کنید:
بسیاری از آیکون های برنامه ای که در iPad مشاهده می کنید تصویر هستند. به عنوان مثال، به مواردی که با رنگ زرد مشخص شده اند نگاه کنید:
- آیکون برنامه Camera که شبیه لنز دوربین است.
- آیکون برنامه ساعت که شبیه یک ساعت دیواری آنالوگ قدیمی است.
- آیکون برنامه تقویم که شبیه یک کارت تقویم با قابلیت تغییر است.
UI های Skeuomorph به دلیل ویژگی های واقع گرایانه این آیکون ها را مانند تصویر واقعی شان در دنیای واقعی نشان می دهند.
طراحی تخت (flat):
نوع دیگری از طراحی، طراحی تخت است، هدف این طراحی از بین بردن افراط و ایجاد تصور سطحی است. در اینجا این آیکون ها که قبلاً در دستگاه های قدیمی iOS نسخه سال 2020 بوده اند را می توانید مشاده کنید:
می بینید که نماد های برنامه ها در نسخه های 2020 مسطح شده اند و ویژگی های واقع گرایانه در آن ها کمتر دیده می شود. البته که طراحی های مسطح امروزه نیز دیده می شوند، زیرا به عنوان یک طراحی مینیمالیسم، خوب و تمیز هرگز از مد نمی افتند. طراحی تخت فقط یک سری نقص های بزرگ داشته که نیاز به اصلاح دارند.
گروه نیلسن نورمن توضیح می دهند: “[طراحی مسطح] اغلب منجر به گیج شدن کاربر هنگام کلیک و کاهش کارایی کاربر می شود. وقتی طراحان، رابط کاربری را مسطح می کنند، بسیاری از دال هایی که معمولاً به کاربران نشان می دهد کجا باید کلیک کند، حذف می شود. “
طراحی در Material Design:
Material Design از دنیای فیزیکی الهام گرفته شده است. می توان گفت این طراحی برای به روز رسانی طراحی های skeuomorphic بود، البته این یک استعاره است که به زودی وقتی اصول Material Design را بررسی می کنیم متوجه آن می شوید.
در واقع آنچه متریال دیزاین انجام داد فاصله گرفتن از UI های کاملاً تخت به منظور طراحی مسطح بود که گویی از کاغذ و جوهر الهام گرفته شده بودند. وقتی در طراحی مسطح به صورت مستقیم به صفحه نگاه می کنید، یک ورق کاغذ صاف و دو بعدی به نظر می رسد، اما در دنیای واقعی، اشکال واقعاً این گونه نیستند.
در واقعیت هم حتی کاغذ سه بعد دارد و ورق های کاغذ، سایه، درز و چین ایجاد دارند و حتی می توان آن ها را برش و تغییر اندازه داد، گوگل هم قصد دارد با استفاده از Material Design همین حالات را در فضای دیجیتال ایجاد کند.
به عنوان مثال به نمونه طراحی شده زیر دقت کنید:
به سایه ای که زیر نوار برنامه صاف قرار دارد توجه کنید. Material Design هنوز از عناصر تخت استفاده می کند. با این حال، این عناصر در سطوح مختلف قرار دارند و می توانند مانند کاغذ و سایر اشیاء در دنیای واقعی رفتار کنند و به تجربه های دیجیتالی احساس واقعی تری ببخشد.
این به کاربران برنامه یا وب سایت امکان می دهد تا به طور طبیعی به UI ها پاسخ دهند، زیرا در متریال دیزاین آن ها نحوه لمس و جابجایی اشیاء را دقیقاً مانند محیط فیزیکی درک می کنند. Matias Duarte، معاون بخش طراحی Google، توضیح می دهد که چرا Material Design یک تغییر مهم در طراحی وب است:
«بر خلاف اشیاء واقعی، مواد دیجیتالی را می توان به طور هوشمند گسترش داد و اصلاح کرد. مواد در متریال دیزاین دارای سطوح و لبه های فیزیکی بوده و شکاف ها و سایه ها مانند آنچه که می توانید لمس کنید طراحی می شوند. همچنین با استفاده از NNG، متریال دیزاین می تواند مشکلات ناشی از کمبود عمق و دیگر دال های کلیدی در طراحی مسطح را برطرف می کند.»
اصول اصلی Material Design چیست؟
Material Design چیزی فراتر از افزودن لایه یا سایه به طراحی ها است. در حقیقت متریال دیزاین یک منبع فوق العاده جامع است که قوانین طراحی جدیدی را تعیین می کند. همانطور که در هر نوع طراحی، اصولی اساسی برای طراحی وب وجود دارد، Material Design نیز دارای سه اصل خاص مربوط به خود است:
اصل شماره 1: مواد یک استعاره است
به عبارتی می توانید متریال دیزاین را دیجیتالی شدن دنیای فیزیکی بدانید. در Material Design به جای آن که بازدیدکنندگان و کاربران وارد یک فضای دیجیتالی غیر طبیعی شوند، می توان اصول اولیه محیط فیزیکی را در برنامه ها و وب سایت ها اعمال کرد تا تجربه کاربری بهتری ایجاد کرد.
به عنوان مثال، به Material Design’s Interaction نگاه کنید:
هر دو رابط دارای پیمایش افقی هستند. یکی به سمت چپ و تنها با کلیک کاربر و کشیدن محتوا حرکت می کند. در دنیای واقعی نیز معمولاً اشیاه به همین شکل حرکت می کنند. اما در سمت راست، یک انیمیشن پیمایش فعال شده با کلیک وجود دارد که طور دیگری حرکت می کند، در حالی که اجسام دنیای واقعی ما به این سمت حرکت نمی کنند. همانطور که می بینید در Material Design به شما نشان داده شده که کدام صحیح و کدام غلط است.
با ایجاد رابط کاربری با این نوع ویژگی های فیزیکی، کاربران می توانند برای تعامل با وب سایت ها و برنامه ها تنها به تجربیات زندگی طبیعی خود تکیه کنند.
اصل شماره 2: جسورانه، گرافیکی، طبیعی
به این مثال از بخش Material Foundation نگاه کنید:
بخش Material Foundation در متریال دیزاین بخش کامل و جامعی است. این قسمت خود بخش های متفاوتی دارد و هر بخش نحوه عملکرد، اجزا و دلیل نیاز به کارکرد آن را شرح می دهد.
این سیستم به وضوح عناصر UI حیاتی را تجزیه کرده و برای هر یک قسمتی را نظر گرفته است، این قسمت ها عبارت اند از:
- چیدمان (با تأکید بر شبکه های پاسخگو و سلسله مراتب)
- جهت بندی ها
- رنگ ها
- تایپوگرافی و فونت های طراحی وب
- صدا (این بیشتر به برنامه ها مربوط می شود)
- شمایل سازی
- طراحی اشکال
- متحرک سازی های معنا دار
- تعاملات
- ارتباطات (شامل تصاویر، نوشته ها و تجسم داده ها)
همچنین Material Design توضیح می دهد که چگونه یک طراحی کاربری، کاربر پسند ایجاد کنید. در ابتدا، متریال دیزاین بر طراحی مبتنی بر شبکه، تایپوگرافی های واضح، پالت رنگ های پررنگ و متحرک سازی های معنا دار تمرکز داشت.
برای اینکه بتوانید تصور کنید که چگونه به نظر می رسید، این ابزاری است به نام material design palette:
توجه کنید که این رنگ ها چقدر روشن هستند؟ اکنون متریال دیزاین پالت های قوی تر و پررنگ تری را به منظور ایجاد کنتراست و عمق بیشتر در رابط کاربری خود قرار داده است.
اصل شماره 3: متحرک سازی های معنا دار
طراحی های متحرک در متریال هیچ ارتباطی با انیمیشن ها و طراحی موشن گرافیک ندارد. متحرک سازی در Material Design باعث می شود که طراحی عمقی تر و تجربه کاربر بصری تر شود. سه دلیل وجود دارد که هنگام طراحی در متریال دیزاین، از حرکات ظریف در طراحی استفاده می شود:
- اطلاع رسانی: حرکات به کاربر اطلاع دهند که در صفحه چه کاری می تواند انجام دهد.
- کمک به تمرکز کاربر: حرکات می توانند کاربر را راهنمایی کرده تا به هدف خود برسد.
- بیان گرا کردن سایت: برای افزودن کمی شخصیت و شادی به رابط کاربری می توان از حرکات کمک گرفت.
حتی عناصر کوچک به اندازه آیکون ها می توانند متحرک شوند:
قسمت های مختلفی از صفحه می تواند متحرک شود به عنوان مثال، زمانی که کاربران منتظر باز شدن صفحه جدید هستند ما می توانیم تصویر متحرکی به آن ها نشان دهیم. واقعاً همه چیز بستگی به این دارد که هنگام حضور کاربر در صفحه، شما چقدر به حرکات نیاز دارد.
مزایا و معایب Material Design
خوب، بنابراین ما قبلاً نکات مثبت و منفی متریال دیزاین را بررسی کرده ایم. اما این جا مزایا و معایب را جمع بندی کرده و همه را در یک جا جمع آوری کرده ایم:
مزایای Material Design:
- طراحان وب در تمام مراحل می توانند از ویژگی های Material Design بهره مند شوند، خواه پایه اصلی باشد که تمام کار خود را در آن پایه گذاری کرده اند و یا منبعی باشد که گاهاً از آن استفاده می کنند.
- یک منبع جامع از هر یک از اجزای کلیدی و رفتار های UI است، که ارزش زیادی در طراحی دارند.
- برای شروع طراحی برنامه های Android، متریال دیزاین می تواند رویکردی سازگار با تلفن همراه بوده و مسئول پیش برد بیشتر وب سایت ها در زمینه موبایل باشد.
- متریال دیزاین اولین رویکرد طراحی کاربر پسند است و بسیاری از اشکالات مدل های قبلی خود را برطرف کرده است که در آن ها مشکلاتی در نحوه استفاده، خوانایی و دسترسی وجود داشت.
- Material Design طراحان را مجبور می کند که فراتر از زیبایی شناسی نگاه کنند و همه چیز را واقعی تر طراحی کنند. در نتیجه، به وسیله این مدل طراحی رابط ها بصری تر می شوند و تجربه کاربری بهبود می یابد.
- متریال دیزاین را گوگل ارائه می دهد و مستندات و پشتیبانی گسترده آن برای توسعه دهندگان و طراحان جذاب تر و کاربردی تر است.
- این روز ها سیستم طراحی بسیار انعطاف پذیر تر و قدرتمند تر است به طوری که طراحان می توانند تنها آنچه که مناسب خودشان است از متریال دیزاین بگیرند.
معایب Material Design:
- در صورت رعایت بیش از حد قوانین متریال دیزاین، وب سایت ها و برنامه ها اکثراً شبیه به یک دیگر می شوند.
- ممکن است متریال دیزاین آزادی یا خلاقیت در طراحی را کم کند، زیرا همه چیز را برای طراحان مو به مو بیان می کند.
- برخی هستند که به دلیل تأکید بر برنامه نویسی، ممکن است از Material Design (یا حتی هر یک از اجزای از پیش ساخته آن) استفاده نکنند.
- این سیستم طراحی در ابتدا برای طراحان برنامه طراحی شده بود، بنابراین بخش هایی از آن وجود دارد که واقعاً به طراحی وب ارتباطی ندارد.
- برخی از دستورالعمل های طراحی (مانند رابط های رنگارنگ، استفاده گسترده از نماد ها و انیمیشن ها) می تواند مشکلاتی مانند، کندی سرعت وب سایت به وجود آورد.
چرا از متریال دیزاین استفاده می شود؟
Material Design به هیچ وجه یک سیستم طراحی بی عیب و نقص نیست، اما تجربه به ما نشان داده است که همیشه با موفقیت به مخاطبان اصلی خود خدمت کرده است. Material Design شیوه طراحی بهتری را برای وب به ارمغان آورده و همه را به سمت طراحی های قابل استفاده و واکنش گرا هدایت می کند.
اکنون که ما وقت داریم تا با آن آشنا شویم، طراحان وب می توانند از آن برای این اهداف خود استفاده کنند:
- برای الهام گرفتن در سیستم های طراحی خودشان.
- قرض گرفتن اجزا یا موضوعات پیش ساخته آن که می تواند کار را سفارشی کند.
- پایبندی به مجموعه ای مدرن از اصول طراحی که اطمینان می دهد تجربه کاربر همیشه در اولویت قرار دارد.
فقط به خاطر داشته باشید که هدف در متریال دیزاین، طراحی بر اساس اعداد و ارقام نیست، این همان چیزی است که طراحان و توسعه دهندگان در روزهای اولیه طراحی متریال انجام دادند و نتیجه معکوس داشت.
در عوض، از Material Design برای ایجاد یک تجربه بصری بهتر برای بازدیدکنندگان خود استفاده کنید. تجربه ای که در آن می توانند به راحتی متوجه شوند هر عنصر در صفحه چه کار می کند و هنگام برخورد با آن چگونه باید واکنش نشان دهند.
منبع:
elementor.com
