می توانید Material Design 3 را به طور کامل در وب نمایش دهید

Google Material You را در I/O 2021 معرفی کرد و از آن زمان تاکنون به اکثر برنامه‌های اندرویدی خود رسیده است. در وب، Gmail نمونه اصلی است، اما می‌توانید Material Design 3 را در Material.io نمایش دهید.

گوگل در نظر گرفته است Material.io به عنوان یک “کتاب درسی آنلاین” و در این ماه با عناصر طراحی متریال 3 بیشتر طراحی مجدد شد تا پتانسیل کامل خود را به نمایش بگذارد:

برای این به‌روزرسانی، تیم Material.io ویژگی‌ها و اجزای جدیدی را به نمایش گذاشت و همچنین نشان داد که چگونه می‌توان اصول Material 3 را برای حل موارد استفاده خاص محصول گسترش داد، در مورد ما، یک کتابخانه غنی از اطلاعات برای کمک به طراحان و توسعه‌دهندگان برای ساخت محصولات زیبا.

به جای Dynamic Color مشتق شده از کاغذ دیواری، Material.io از رنگ پویا مبتنی بر محتوا استفاده می کند که از «مجموعه ای از تصاویر در محدوده سبک، رنگ و موضوع استفاده می کند».

تغییر رنگ پویا با بازتاب محتوایی که خواننده مصرف می‌کند، یک تجربه بصری جامع ایجاد می‌کند و سیستم رنگی جدید Material Design 3 را نشان می‌دهد که از پالت منحصربه‌فردی از رنگ‌ها و تعریف‌ها استفاده می‌کند.

هنگام مشاهده مقالات دستورالعمل Material Component می توانید این را در عمل مشاهده کنید.

در همین حال، Material.io با این طراحی مجدد یک تم تیره (سوئیچ گوشه پایین سمت چپ) به دست آورد و گوگل آن را طوری ساخت که تصاویر کلیدی به حالت‌های مختلف پاسخ دهند. این سایت همچنین از رنگ سبز اجتناب می کند، با توجه به کوررنگی قرمز-سبز، و به جای آن از آبی (Do) یا قرمز (Don’t) استفاده می کند.

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

نکته قابل توجه رویکرد Material.io به نقاط گلوله با شکل “کوکی” است:

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

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

آیکون ها با افزایش وزن در حین شناور شدن و کاهش وزن با فشار دادن واکنش نشان می دهند. این دوباره حس انرژی جادویی و سودمندی را فراهم می کند. برای اجزای ناوبری، نمادها با انتخاب یک مورد پر می شوند.

FTC: ما از پیوندهای وابسته خودکار برای کسب درآمد استفاده می کنیم. بیشتر.


برای اخبار بیشتر، 9to5Google را در YouTube بررسی کنید: