Material 3 表達性設計語言
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
Material 3 Expressive (M3) 的設計目的,是為了滿足使用者對現代化、相關性和獨特性的體驗需求。設計人員也可以透過 Expressive,在介面版面配置和呈現方式中反映特定情緒和感受。
色彩和字體排版
色彩系統正在擴充,採用 M3 更深層的色調調色盤和更廣泛的符記集,而更簡單的字體排版比例則是利用可變字型軸線,提供更多表情符號,讓互動更具表達力和樂趣。
色彩主題
新的符記可讓您在不同主題和整個設計系統的背景下,套用更多顏色。
變數字型
我們已更新變數字型及其可自訂軸的考量事項,除了用於第一方服務,也適用於第三方用途,例如 Roboto Flex,因為這類字型也具有類似的變數軸。
變數字型軸線動畫
使用可變字型軸線傳達生動的動作回饋,讓互動更生動有趣。
用途範例:
- 動態調整字型粗細
- 動態調整字型寬度
- 動態調整字型粗細和寬度
類型角色
除了更新並最佳化類型等級,我們也推出了新的類型角色,專門提供 Wear 的顯著模式。
這些新的類型角色可支援多種用途,包括用於介面標題的 Arc Text、含有即時空間的主動式內容,以及專門用於數字的類型角色,可讓文字串的文字大小更大且更具樣式,但不必經過本地化。
形狀和動作
我們也以更廣泛且有意義的方式,運用彈性容器形狀來套用圓角半徑的圓角和銳利度,以支援形狀變形清單和按鈕狀態。我們推出了邊緣貼合按鈕,這是 Wear 圓形裝置專屬的全新經典設計模式。
邊緣緊貼容器
推出形狀容器,可支援圓形,並盡量擴大圓形板型規格內的空間。
已套用形狀
使用圓角半徑和獨特形狀做為容器,採用生動設計,擴展至令人驚豔的載入動畫、有趣的版面配置、形狀變形按鈕和自適應按鈕群組。
圓角半徑
使用 Material 3 邊框形狀,讓容器形狀之間具有多樣性、區別性和關係。
已分組的容器
元件容器會使用彈性版面配置技術,動態調整可用空間。他們可以將這個空間平均分配,以達到對稱效果,也可以策略性地安排元素,建立視覺階層、強調重要內容,並透過生動且以動態為主的視覺提示引導使用者互動。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-07-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],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"]]