متریال 3 زبان طراحی رسا
با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
Material 3 Expressive (M3) برای پاسخگویی به تقاضای کاربر برای تجارب مدرن، مرتبط و متمایز ساخته شده است. Expressive همچنین به طراحان اجازه می دهد تا احساسات و عواطف خاص را در طرح و ارائه رابط منعکس کنند.
رنگ و تایپوگرافی
سیستم رنگ در حال گسترش است تا از پالتهای تونال عمیقتر M3 و مجموعه نشانههای گستردهتر استفاده کند و مقیاس تایپوگرافی سادهتر از محورهای قلم متغیر برای بیان بیشتر استفاده میکند و تعاملات را گویاتر و لذتبخشتر میکند.
تم رنگی
توکنهای جدید اجازه میدهند تا رنگ بیشتری در تمهای مختلف و در کل سیستم طراحی اعمال شود.
فونت های متغیر
ملاحظات بهروز شده برای فونتهای متغیر و محور قابل تنظیم آنها، فراتر از 1P گسترش مییابد تا موارد استفاده 3P مانند Roboto Flex، که دارای مجموعهای از محورهای متغیر مشابه است، ارائه شود.
محور فونت متغیر در حرکت
استفاده از محور فونت متغیر برای سیگنال دادن به بازخورد حرکت بیانگر و ایجاد تعاملات گویاتر و لذت بخش برای استفاده.
نمونه موارد استفاده:
- وزن فونت پویا
- عرض فونت پویا
- وزن و عرض فونت پویا
نقش ها را تایپ کنید
همراه با یک مقیاس نوع بهروز و بهینه، نقشهای نوع جدیدی را نیز معرفی میکنیم که به طور خاص الگوهای قابل توجهی را در Wear ارائه میکنند.
این نقشهای نوع جدید از چندین مورد استفاده پشتیبانی میکنند - از جمله Arc Text برای عناوین سطح، محتوای فعال با فضای زنده، و یک نوع تایپ به طور خاص برای Numerals - که امکان اندازههای متن بزرگتر و سبکتر را برای رشتههایی که نیازی به بومیسازی ندارند، میسازد.
شکل و حرکت
ما همچنین با استفاده از شکلهای ظرف انعطافپذیر برای گرد کردن و تیز کردن شعاع گوشه برای پشتیبانی از لیستهای شکلگیری شکل و حالتهای دکمه، به زبان شکل به روشی بسیار گستردهتر و معنادارتر متمایل میشویم. ما دکمههای لبهدار را بهعنوان یک الگوی طراحی نمادین و قابل مالکیت جدید برای دستگاههای گرد در Wear معرفی میکنیم.
ظروف لبه دار
ظروف شکلی را معرفی می کنیم که گرد را در بر می گیرند و فضای درون ضریب شکل دایره ای را به حداکثر می رساند.
شکل اعمال شد
استفاده از شعاع گوشه و اشکال منحصربهفرد بهعنوان محفظههایی برای استقبال از طراحی رسا - گسترش به انیمیشنهای بارگیری لذتبخش، طرحبندیهای جالب، دکمههای شکلدهی شکل و گروههای دکمههای تطبیقی.
شعاع گوشه
استفاده از اشکال گوشه مواد 3 برای فعال کردن تنوع، تمایز و ارتباط بین اشکال ظرف.
ظروف گروه بندی شده
ظروف کامپوننت از تکنیک های چیدمان انعطاف پذیر برای تطبیق پویا با فضای موجود استفاده می کنند. آنها می توانند این فضا را به طور یکنواخت برای تقارن توزیع کنند، یا عناصر را به صورت استراتژیک ترتیب دهند تا سلسله مراتب بصری ایجاد شود، بر محتوای مهم تأکید شود، و تعامل کاربر را از طریق نشانه های بصری بیانگر و هدایت کننده حرکت هدایت کند.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی."],[],[],null,["# Material 3 Expressive design language\n\nMaterial 3 Expressive (M3) was built to meet user demand for experiences that\nare modern, relevant, and distinct. Expressive also allows designers to mirror\nspecific emotions and feelings in the layout and presentation of the interface.\n\nColor and typography\n--------------------\n\nThe [color system](/design/ui/wear/guides/styles/color/system) is expanding to adopt M3's deeper tonal palettes and a\nwider token set and the simpler typography scale is utilizing variable font axes\nfor more expression, making interactions more expressive and delightful.\n\n### Color theming\n\n\nThe [new tokens](/design/ui/wear/guides/styles/color/roles-tokens) allow for more color to be applied across different themes\nand in context of the design system as a whole. \n\n\u003cbr /\u003e\n\n### Variable fonts\n\n\nThe updated considerations for variable fonts and their customizable axis,\nextend beyond 1P to also serve 3P use cases such as Roboto Flex, which has a\nsimilar set of variable axis. \n\n\u003cbr /\u003e\n\n### Variable font axis in motion\n\n\nUtilizing variable font axis to signal expressive motion feedback and making\ninteractions more expressive and delightful to use.\n\nExample use-cases:\n\n- Dynamic font weight\n- Dynamic font width\n- Dynamic font weight and width \n\n\u003cbr /\u003e\n\n### Type roles\n\n\nAlong with an updated and optimized type scale, we are also introducing new type\nroles that specifically serve notable patterns on Wear.\n\nThese new type roles support several use cases---including Arc Text for surface\ntitles, proactive content with live space, and a type role specifically for\nNumerals---that allow for bigger and more styled text sizes for strings that don't\nneed to be localized. \n\n\u003cbr /\u003e\n\nShape and motion\n----------------\n\nWe are also leaning into shape language in a much more expansive and meaningful\nway by utilizing flexible container shapes to apply rounding and sharpening of\ncorner radius to support shape morphing lists and button states. We're\nintroducing edge-hugging buttons as a new ownable and iconic design pattern for\nround devices on Wear.\n\n### Edge-hugging containers\n\n\nIntroducing shape containers that embrace round and maximize the space within\nthe circular form factor. \n\n\u003cbr /\u003e\n\n### Shape applied\n\n\nUsing corner radius and unique shapes as containers to embrace expressive design\n---extending to delightful loading animations, interesting layouts, shape-morphing\nbuttons and adaptive button groups. \n\n\u003cbr /\u003e\n\n### Corner radius\n\n\nUtilizing Material 3 corner shapes to enable variety, distinction, and\nrelationship between container shapes. \n\n\u003cbr /\u003e\n\n### Grouped containers\n\n\nComponent containers use flexible layout techniques to dynamically adapt to\navailable space. They can distribute this space evenly for symmetry, or\nstrategically arrange elements to establish visual hierarchy, emphasize\nimportant content, and guide user interaction through expressive and motion-lead\nvisual cues. \n\n\u003cbr /\u003e"]]