Material Design چیست؟ آشنایی با اصول طراحی رابط کاربری
میتوانید خلاصهای کوتاه از محتوای مقاله را با استفاده از هوش مصنوعی دریافت نمایید.
طراحی وبسایتها و برنامهها همه از اصول و قوانین خاصی پیروی میکنند. طراحی و اصول یکپارچهای برای تجربه بهتر کاربر از وبسایت و برنامهها قرار گرفته است. قوانین زیادی برای این طراحیها وجود دارد، اما پرکاربردترین و محبوبترین آنها Material Design است.
Material Design چیست؟
رنگهای استفاده شده در هر قسمت از وبسایت و برنامهها، تایپوگرافی (اندازه، فاصله متن و کلمات) و انیمیشنهای استفاده شده، همه از قانون و منطق طراحی پیروی میکنند. یکی از معروفترین قوانین Material Design است که توسط Google ارائه شده است.
Material Design یک Design System (یک مجموعه کامل از قوانین و اصول برای طراحی است.) کامل است که مجموعهای از اصول، الگوها و کامپوننتها را برای طراحی رابط کاربری استاندارد و قابل فهم ارائه میدهد. Material Design یک راهنمای طراحی است، یعنی کاربرد برنامه یا وبسایت را مشخص نمیکند، بلکه ظاهر و رفتار آن را تعیین میکند. این قانون و راهنما برای تجربه بهتر کاربر (ux) است، مشخص میکند هر المان و بخش چه رنگی داشته باشد یا اندازه دکمهها چقدر باشد و انیمیشنهای موجود برای درک بهتر کاربر در زمان استفاده از اپ و برنامه تعیین میشود.
چرا Material Design ساخته شد؟
تا قبل از مشخص کردن قوانین و وجود Material Design، هر سایت و اپلیکیشن ظاهر متفاوتی داشت، رنگهای زیاد و غیر اصولی در طراحی استفاده میشد، اندازه متنها و دکمهها متفاوت بودند، طراحیها شلوغ بودند و باعث سردرگمی کاربران میشدند. همچنین، کاربران برای استفاده از هر برنامه مجبور بودند مجددا نحوه کار با آن را یاد بگیرند. گوگل در سال 2014 Material Design را مطرح کرد تا طراحیها پایه و اساس مناسبی داشته باشند و کار با برنامهها راحت شود.
هدف اصلی Material Design، ایجاد رابط کاربری با ظاهری واقعیتر و نزدیک به دنیای واقعی است؛ به این معنا که در طراحی، عناصر دیجیتال همانند اشیا واقعی در نظر گرفته میشوند. به همین دلیل، در طراحیهایی که مطابق با Material Design ساخته شدهاند، دکمهها دارای انیمیشن هستند و حالتشان هنگام هاور (قرار گرفتن موس روی دکمه) و کلیک تغییر میکند تا کاربر درک بهتری از فعالیت خود در برنامه یا وبسایت داشته باشد. همچنین، استفاده از سایهها به طراحی عمق میبخشد و المانهای جلوتر را مشخص میکند.
در Material Design هیچ چیز فقط برای تزئین نیست. دکمهها، سایهها و انیمیشنها همه برای راهنمایی و استفاده بهتر کاربر هستند. یکی از مهمترین قوانین در Material Design سادگی است، یعنی با سادهترین طراحی پیام را به کاربر برسانیم و تجربه دلپذیری ایجاد کنیم. حذف عناصر غیر ضروری و ایجاد فضای خالی و تمرکز روی محتوای اصلی نیز از قوانین Material Design است، این قوانین باعث میشود کاربر گیج نشود، سریعتر تصمیم بگیرد و کمتر اشتباه کند.
استفاده از Material Design برای قشنگی و زیبایی برنامه نیست بلکه برای استفاده راحت از برنامه است به طوری که همه چیز قابل پیش بینی باشد.
کتابخانههای Material Design
دقت کنید که Material Design یک زبان برنامه نویسی، فریم ورک یا نرم افزار نیست. بلکه اصول و راهنما در طراحی است. Material Design خودش یک زبان طراحی (Design System) است، ولی کتابخانههای (Libraries) زیادی مانند Vuetify (برای Vue.js)، Material UI (برای React)، Angular Material (برای Angular) و Materialize CSS (برای HTML و CSS) دارد که به کمک آنها میتوان از این زبان طراحی در پروژهها استفاده کرد.
استفاده از این کتابخانهها سرعت طراحی را افزایش میدهد، ظاهر استاندارد را در طراحی حفظ میکند و امکانات واکنش گرایی (Responsive) آماده را در اختیار طراح قرار میدهد.
نقطهی جهش کسبوکار شما!
خدمات میزبانی وب پویان آی تی با پشتیبانی ۲۴/۷، سخت افزار قدرتمند و پایداری بیوقفه، همراه شماست تا کسبوکارتان را به سطح بعدی ارتقا دهید. بهترین انتخاب برای رشد و پیشرفت حرفهای شما، همین امروز در دسترس است!
اجزای اصلی Material Design
اجزای اصلی Material Design بخشهای مهم و کاربردی آن است که هر کدام از این اصول طراحی ما را پیشرفتهتر و چشم نوازتر میکند.
رنگها در طراحی
رنگها در طراحی نقش بسیار مهمی دارند، با استفاده اصولی از آنها میتوان توجه کاربر را جلب کرد.
- برای طراحی حداقل از سه رنگ استفاده میشود. رنگ اصلی (Primary color)، رنگ فرعی (Secondary color) و در بعضی طراحیها رنگ سوم (Tertiary color) هم کاربرد دارد.
- رنگهای انتخابی باید با هم تناسب داشته باشند و برای انتخاب این رنگها نیز از اصول پالت رنگی استفاده میشود.
- رنگ اصلی (Primary color) برای اقدامات و عناصر مهم که به بیشترین تاکید و توجه نیاز دارند استفاده میشود.
- رنگ فرعی (Secondary color) برای عناصری به کار میرود که نیاز به توجه یا تاکید فوری ندارند، مانند دکمههایی با اهمیت کمتر.
- رنگ سوم (Tertiary color) برای عناصر کوچکتری هستند که نیاز به تاکید ویژه دارند اما به توجه فوری نیاز ندارند، مانند یک نشان یا اعلان.
فونت و نوشته (Typography)
انتخاب فونت و تایپوگرافی مناسب در طراحی، خوانایی متنها را افزایش داده و استفاده راحتتر کاربران از وبسایت را تسهیل میکند.
- متنها باید خوانا باشند، در متنهای طولانی از فونتهای مناسب استفاده شود تا کاربر راحتتر مطالعه کند.
- اندازه کلمات باید متناسب باشد؛ متنهای خیلی کوچک باعث خستگی چشم کاربر میشوند و متنهای کم اهمیت که بیش از حد بزرگ باشند، توجه کاربر را جلب کرده و او را از موضوع اصلی منحرف میکنند.
- طراحی باید سلسله مراتبی باشد؛ تیترها و عنوانها بزرگتر از پاراگرافها و سایر متنها هستند تا توجه کاربر را به خود جلب کنند.
فاصله و چیدمان
رعایت اصول فاصله گذاری در طراحی، نقش مهمی در زیبایی و خوانایی وبسایت دارد. نادیده گرفتن این اصل میتواند باعث نامنظم شدن سایت یا برنامه شود و کاربر را دچار سردرگمی کند. یکی از رایجترین قوانین برای فاصله گذاری در طراحی رابط کاربری، سیستم ۸ پیکسلی است. سیستم ۸ پیکسلی یکی از استانداردترین و محبوبترین روشها برای ایجاد نظم، هماهنگی و سرعت در طراحی رابط کاربری به شمار میرود. در این روش، تمامی اندازهها از جمله Padding ،Margin و همچنین طول و عرض المانها بر اساس مضارب عدد ۸ تعیین میشوند. این رویکرد به طراحان کمک میکند تا ساختاری منظمتر و قابل پیش بینی در طراحی ایجاد کنند.
- فاصله میان عناصر به صورت منطقی و سلسله مراتبی تعیین میشود؛ به گونهای که فاصله بین تیتر، عنوان و متن پاراگراف کمتر از فاصله میان عنوان و بخش بعدی صفحه در نظر گرفته میشود. این موضوع به درک بهتر ساختار محتوا کمک میکند.
- دلیل انتخاب عدد ۸ در این سیستم آن است که این عدد بهراحتی بر ۲ و ۴ بخش پذیر است. این ویژگی باعث میشود چیدمان عناصر در اندازههای مختلف صفحهنمایش بدون ایجاد پیکسلهای ناقص انجام شود. همچنین بسیاری از رزولوشنهای رایج صفحه نمایش (مانند 1920×1080) مضربی از عدد ۸ هستند.
- در برخی موارد، فاصله ۸ پیکسل برای عناصر کوچک (مانند آیکونهایی که در کنار متن قرار دارند) بیش از حد به نظر میرسد. در چنین شرایطی میتوان از فاصله ۴ پیکسل استفاده کرد. در این حالت، مقیاس فاصله گذاری به جای ۸، ۱۶، ۲۴ به صورت ۴، ۸، ۱۲، ۱۶ تنظیم میشود تا انعطاف بیشتری در طراحی ایجاد شود.
حرکت و انیمیشن (Motion)
انیمیشنها به کاربران کمک میکنند تا فعالیتها و حرکات خود در صفحه را بهتر درک کنند.
- در Material Design حرکت و انیمیشنها بی دلیل نیست و هر کدام برای درک بهتر کاربر هستند.
- انیمیشن در دکمهها درک بهتری به کاربر از فعالیت خود میدهد.
- منوها به صورت نرم و چشم نواز باز میشوند.
برای تغییر این متن بر روی دکمه ویرایش کلیک کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
در آخر
Material Design یعنی طراحی رابط کاربری بر اساس منطق دنیای واقعی، با هدف سادگی، زیبایی و راحتی کاربر.
با رعایت اصول Material Design میتوانیم یک اپلیکیشن و وبسایت زیبا با رابط کاربری مناسب و اصولی طراحی کنیم تا کاربران تجربه خوبی داشته باشند. یادگیری و آشنایی با قوانین Design System یکی از مهمترین کارها برای شروع طراحی و ورود به بازار UI/UX است.
سوالات متداول
هدف Material Design، ایجاد تجربهای بهتر برای کاربر از رابط کاربری است؛ به طوری که هنگام استفاده از اپلیکیشن یا وبسایت، دچار سردرگمی نشود و نحوه عملکرد برنامهها مشابه باشد تا کاربر مجبور به یادگیری مجدد هر برنامه نباشد.
خیر، یادگیری Material Design الزامی نیست. یادگیری آن زمانی ضروری است که بخواهید یک اپلیکیشن اندروید توسعه دهید یا رابط کاربری استاندارد، حرفهای و سازگار با اکوسیستم گوگل طراحی کنید. با این حال، یادگیری Design System همواره ضروری است.
منابع
- https://m3.material.io/
- https://m2.material.io/design
اولین دیدگاه را اضافه کنید.