Material 3 表達性設計語言
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
Material 3 Expressive (M3) 的設計宗旨是滿足使用者對現代化、切合需求且獨特體驗的要求。設計人員也可以透過 Expressive,在介面的版面配置和呈現方式中,反映特定情緒和感受。
顏色和字體排版
色彩系統將擴充,採用 M3 更深的色調調色盤和更廣泛的權杖集,而簡化的字體排版比例會使用可變字體軸,呈現更多樣的樣式,讓互動更生動有趣。
色彩主題
新權杖可讓您在不同主題中套用更多顏色,並在整個設計系統的脈絡中使用。
變數字型
更新後的考量事項適用於可變字型及其可自訂軸,除了 1P 之外,也適用於 3P 用途,例如 Roboto Flex,這類字型具有類似的可變軸集。
變數字型軸線動畫
利用可變字型軸來表示生動的動作回饋,讓互動更生動有趣。
用途範例:
輸入角色
除了更新及最佳化字體比例,我們也推出了新的字體角色,專門用於 Wear 的顯著模式。
這些新類型角色支援多種用途,包括用於介面標題的弧形文字、主動式內容 (含即時空間),以及專為數字設計的類型角色,可讓不需要本地化的字串採用更大且更具風格的文字大小。
形狀和動態
我們也更廣泛地運用形狀語言,以更有意義的方式使用彈性容器形狀,套用圓角和銳角,支援形狀變形清單和按鈕狀態。我們將推出邊緣貼合按鈕,做為 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"]]