وب از زمانی که برای اولین بار به جهان معرفی شد، تغییرات زیادی را تجربه کرد. هر تغییری آن را برای کاربران راحت کرده است، به طوری که کاربران چیزهای بیشتری برای کاوش دارند، به معنای واقعی کلمه بدون مرز. بعد از صفحات وب و صفحات مرورگر، گوشی های هوشمند و چندین دستگاه هوشمند دیگر آمدند.
از صفحات وب استاتیک گرفته تا دستگاه های هوشمند و هوشمند با هوش مصنوعی ، تحول فوق العاده ای بوده است. اما گوگل تغییراتی را که باید در صفحات وب رخ دهد را فراموش نکرده است. تحولی در سیستم و زبان طراحی گوگل رخ داده است. و اینجا جایی بود که متریال دیزاین متولد شد.
توضیح طراحی متریال
بنابراین، طراحی متریال زاییده فکر گوگل بود و در اواسط سال 2014 ظاهر شد و با اسم رمز “کاغذ کوانتومی” شناخته شد. طراحی متریال برای تعدادی از پیاده سازی های طراحی استفاده می شود. سبک های طراحی مبتنی بر کاغذ آن را کاملاً با سبک طراحی مسطح که در آن زمان ها مورد استفاده قرار می گرفت کاملاً متفاوت کرد.
هدف از توسعه متریال دیزاین ارائه خروجی با کیفیت بالا در تمامی پلتفرم ها به صورت ثابت بود. این یک تجربه کاربری یکپارچه را در همه دستگاه‌ها، پلتفرمها و روش‌های ورودی به ارمغان می‌آورد. این تقریباً شبیه اصول طراحی اپل است که آنها از آن به عنوان روش استاندارد خود استفاده می کردند. اما گوگل یک قدم جلوتر رفت و تجربه کاربری ثابتی را ممکن کرد.
دستورالعمل‌های طراحی متریال Google به پروتکل‌های استاندارد برای برندسازی هر شرکت تبدیل شده‌اند، زیرا آنها به عنوان وابسته به Google شناخته شده‌اند. جالب اینجاست که گوگل توسط جامعه طراحی بزرگ و رو به رشد پذیرفته شده است. بنابراین، هر کسی می‌تواند از طراحی متریال، نه تنها در پلتفرم‌های بومی، بلکه در سایر پلتفرم‌های رقیب نیز استفاده کند.
ساده‌ترین چیز در مورد مشخصات طراحی متریال این است که دستورالعمل‌هایی برای همه چیز وجود دارد – سبک، رنگ، تصاویر، شبکه‌ها، فضا، تایپوگرافی و غیره. و طراحان را راهنمایی می‌کند تا به آنها نشان دهند که چگونه به نظر می‌رسند، از جمله طرح‌های بین‌المللی حاوی سلسله مراتب، تمرکز و معنا.
نکاتی در مورد چگونگی موثر ساختن متریال دیزاین در پلتفرم ها
مفهوم یا واقعیت لمسی
یکی از اصول طراحی متریال این است که مفهوم واقعیت لمسی و آن را به کار ببرید. طراحی باید زمانی که کاربران از ویژگی های دنیای واقعی استفاده می کنند، آشنایی لازم را ارائه دهد. به عنوان مثال، دکمه باید شبیه به یک باشد – ظاهر، سطح، درزها و لبه‌ها باید با یک دکمه سازگار باشد تا کاربران بتوانند راهنمایی داشته باشند.
برای آشکار کردن قطعات متحرک، باید نور و سایه واقعی وجود داشته باشد تا کاربر فورا متوجه شود.
طراحی تطبیقی
در طراحی تطبیقی، نمادها، رنگ‌ها، نسبت‌های فضایی و سلسله مراتب در پلتفرمها و دستگاه‌های مختلف سازگار خواهند بود. خود طرح ها باید جذاب و منظم باشند تا کاربران بتوانند به راحتی سلسله مراتب را پیدا کنند. برای ارائه تجربه بهتر به کاربران، مطمئن شوید که فضای خالی کافی، توپوگرافی بزرگ، تصاویر قوی و استفاده درخشان از رنگ ها وجود دارد.
پیام هایی که از حرکت استفاده می کنند بسیار هیجان انگیز است
وقتی کاربران کنترل ناوبری خود را . وقتی تغییراتی را که مستقیماً ناشی از اعمالشان است ببینند، پذیرای بیشتری خواهند بود. انیمیشن ها در حرکات جریان مداوم با اقدامات قابل پیش بینی باعث آرامش کاربران می شود.
با این حال، طبیعی بودن آن حرکات مهم است. به عنوان مثال، اگر کاربر یک مورد انتخاب شده را در پوشه ای با اشیاء دیگر بکشد و رها کند، اشیاء موجود در پوشه باید به کناری منتقل شوند تا فضا باز شود. اگر بعد از «گزینه کشیدن و رها کردن»، شی ناپدید شود و نتواند ببیند چه اتفاقی برای آن افتاده است، کاربر شوکه خواهد شد. این نوع پاسخ جادویی کاربر را خاموش می کند.
اصول طراحی متریال
طراحی متریال بسیار بیشتر از افزودن سایه ها و افکت های سه بعدی به ویژگی ها است. این یک منبع جامع است که پایه و اساس یک زبان طراحی جدید را ایجاد می کند. به برخی از اصول اولیه طراحی متریال نگاهی بیندازید.
ماده یک استعاره است
کاربران از تجربیات دیجیتالی که برایشان طبیعی به نظر می رسد لذت می برند. بنابراین این یکی از اولین اصول اولیه است که در برنامه ها و وب سایت هایی که با طراحی متریال ایجاد می کنید اضافه می شود. قوانین علت و معلولی باید با جدیت دنبال شود، به این معنا که وقتی کاربر یک عمل را انجام می دهد، انتظار یک نتیجه قابل پیش بینی را دارد و باید آن را به دست آورد. حرکاتی که در صفحه اتفاق می‌افتد باید با نحوه انجام آن در دنیای واقعی سازگار باشد. این آنها را تشویق می کند تا با برنامه ها تعامل بیشتری داشته باشند.
معنا و منطق از طریق Bold، Graphics و Hierarchy
هر انتخاب طراحی باید معنایی و منطقی برای آن داشته باشد. طراحی باید به گونه ای باشد که یک قاعده و دلیل پشت آن وجود داشته باشد. دیگر بحث طراحی نیست زیرا کسی آن را دوست داشت یا به دلیل اینکه مد روز است. بر اساس آخرین سیستم، عناصر رابط کاربری باید از سلسله مراتب خاصی پیروی کنند. طراحی متریال عناصر زیر را به شیوه ای منطقی توضیح می دهد:
چیدمان
جهت یابی
رنگ
شکل
حرکت – جنبش
اثر متقابل
صدا
تایپوگرافی و فونت های وب
ارتباط
Generator پالت رنگی Material Design قابلیتی است که به طراحان اجازه می‌دهد تا پالت‌های رنگی قوی‌تر و پررنگ‌تر را برای تشویق کنتراست و عمق در رابط کاربری ایجاد کنند.
حرکت به آن را بصری
انیمیشن کاری نیست که شما به خاطر انیمیشن انجام دهید. با طراحی متریال، هدف این است که آن را هدفمندتر کنیم تا تجربه کاربر بصری تر شود. داشتن حرکت در طراحی هدفی دارد. در اینجا به برخی از آنها اشاره می کنیم:
برای اطلاع کاربران از زمان و مکان انجام یک اقدام
برای هدایت فوکوس به بخش های مهم تر یک صفحه
برای افزودن شخصیت و شخصیت به رابط
تمام تمرکز بر این است که سفر کاربر هیجان‌انگیزتر، سرگرم‌کننده‌تر و مطلوب‌تر شود.
چیزی که طراحان در طراحی متریال دوست نداشتند
طراحی متریال یک نقص عمده داشت که طراحان به راحتی می توانند از آن شکایت کنند. کانسپت بیش از حد سیاه و سفید بود، به این معنی که تمام کارهایی که طراح انجام داده است به صورت کامل بیان شده است و فضای کمی برای خلاقیت و پیشرفت باقی می گذارد. قالب ها و اجزایی وجود دارد که می توانند از آنها کار کنند، اما همه آنها سیستم و قوانین طراحی یکسانی دارند.
برای برندهایی که به دنبال منحصر به فرد بودن در سبک بصری و جذابیت خود هستند، این کار آسانی نبود، زیرا سیستم طراحی در دسترس عموم قرار گرفت، و ایجاد سیستمی که بتوان به طور مداوم اصلاح و نگهداری شود، مهم است.
در اصل، طراحی متریال دارای تمی بود که بسیار سبک و روشن است و با تم بسیاری از برندها مطابقت نداشت، اما اکنون این موضوع پاک شده است و تم های تیره نیز وجود دارد که انعطاف بصری بیشتری را به توسعه دهندگان اضافه می کند.
تغییری در طراحی متریال صورت گرفته است و سیستم طراحی دیگر خلاقیت و منحصر به فرد بودن طراح را محدود نمی کند. در حال حاضر ابزارهایی وجود دارند که نه تنها به بهترین شیوه های طراحی پایبند هستند، بلکه به طراحان اجازه می دهند که چرخش خلاقانه خود را نیز داشته باشند.
نتیجه :
طراحی متریال انعطاف پذیرتر و قدرتمندتر از همیشه شده است. و با مستندات و پشتیبانی گسترده، توسعه دهندگان و طراحان واقعاً از مزایای طراحی متریال لذت می برند. طراحان می‌توانند رابط‌هایی ایجاد کنند که بصری‌تر باشند، اکنون می‌توانند فراتر از زیبایی‌شناسی کار کنند و یک طراحی عمدی توسعه دهند که تجربه کاربر را بهبود می‌بخشد.
استفاده از طراحی متریال را شروع کنید تا وب سایت ها و برنامه ها را در دسترس تر، دوستانه تر و شهودی تر کنید.