Google 的 Material Design 設(shè)計(jì)語言最新演進(jìn)版本：Material 3 Expressive （以下簡稱 M3）于 2025 年 5 月的 The Android Show 活動中正式推出。它是在 Material Design2 的基礎(chǔ)上，強(qiáng)化現(xiàn)有設(shè)計(jì)哲學(xué)，重點(diǎn)在于更具表現(xiàn)力的界面和情感連接，目標(biāo)是讓安卓系統(tǒng)更易用、更吸引人。

基礎(chǔ)介紹：

本文將為你介紹其主要特點(diǎn)：

Part 1 設(shè)計(jì)表達(dá)：豐富多樣

顏色：動態(tài)配色方案

M3 保留原有的基線色盤和配色方案，在此基礎(chǔ)上升級了動態(tài)配色方案。動態(tài)配色方案會根據(jù)不同的顏色輸入來改變 UI 界面的顏色，讓整個(gè)產(chǎn)品的視覺外觀就像壁紙一樣可以任意變換。而其中一些特定顏色，例如語義色或功能色，可以設(shè)置為不做動態(tài)變化：

應(yīng)用動態(tài)配色方案的產(chǎn)品可以自動生成界面視覺效果，并為 UI 中的每個(gè)元素分配顏色。該功能的主要優(yōu)勢在于：

1. 用戶界面可以更加個(gè)性化；
2. 用戶可以更隨意地調(diào)控頁面顏色的搭配和對比度；
3. 整個(gè)系統(tǒng)可以自動絲滑地轉(zhuǎn)換暗色主題或多色主題；
4. 應(yīng)用產(chǎn)品可以基于使用環(huán)境產(chǎn)生視覺變化，并能夠與手機(jī)背景、壁紙和其它使用環(huán)境更加自然地融合。

給你舉兩個(gè)例子：

例 1：Android 系統(tǒng)可以采用你的手機(jī)鎖屏壁紙的主色調(diào)，將其融入系統(tǒng) UI 和應(yīng)用程序中，為你創(chuàng)建獨(dú)特的色彩視覺界面，下圖的應(yīng)用程序就采用了來自用戶紅色壁紙的主題色，動態(tài)生成配色方案：

例 2：應(yīng)用程序可以自動采用來自應(yīng)用內(nèi)部的圖片的主色調(diào)，來動態(tài)生成配色方案進(jìn)行著色。如下圖的音樂播放器程序就采用了來自應(yīng)用程序內(nèi)歌曲專輯封面的藍(lán)色調(diào)，對播放器整體界面進(jìn)行動態(tài)配色：

字體：加大、加粗、適配

M3 共有 30 種字體樣式，包括 15 種基線字體和 15 種強(qiáng)調(diào)字體。每種字體樣式都能在不同屏幕尺寸和內(nèi)容上下文中流暢適配。加大加粗了新字體的基準(zhǔn)字重和字號，最適合用于粗體、選擇和其他強(qiáng)調(diào)區(qū)域，便于用戶在閱讀時(shí)快速識別關(guān)鍵信息。

同時(shí)，字體的樣式可以使用 Material Token 來進(jìn)行自定義，每一個(gè)樣式的字體、行高、大小、粗細(xì)等都有單獨(dú)對應(yīng)的 Token（你可以閱讀我之前的文章：Design Token 如何理解和應(yīng)用？），都可以做重新調(diào)整以適應(yīng)應(yīng)用產(chǎn)品的設(shè)計(jì)風(fēng)格：

組件：新增變體 & 樣式

M3 把此次的組件升級稱之為“Expressive components「富有表現(xiàn)力的組件」”，對包括按鈕組、加載提示、菜單等 15 個(gè)組件做了更新，使之具備更多的配置功能、形狀選項(xiàng)、強(qiáng)調(diào)文本和其他富有表現(xiàn)力的樣式：

比如導(dǎo)航欄線條更簡潔，位置更高；浮動操作按鈕增加多種尺寸，輪廓更方正；對話框增大了內(nèi)邊距、加粗了文本以提高可讀性等等：

幾乎所有組件都采用了新的圓潤造型，連谷歌新默認(rèn)字體 Google Sans Flex Rounded 的筆畫末端也從原本的銳角轉(zhuǎn)為平滑圓角。

動效：運(yùn)動擬物系統(tǒng)

M3 使用了運(yùn)動彈簧感的新擬物效果，使交互和轉(zhuǎn)換感覺更加生動、流暢和自然。交互動畫模擬彈簧物體實(shí)際運(yùn)動的物理原理，使動畫清晰可預(yù)測，也能為實(shí)體顏色與有透明度顏色之間創(chuàng)造無縫銜接與過渡：

彈簧效果有三種速度：默認(rèn)、快速和慢速。大多數(shù)元素的運(yùn)動都使用默認(rèn)速度，較小的元素可以使用快速，較大的元素可以使用慢速。

Google 認(rèn)為這種微動畫增強(qiáng)了交互的流暢感和視覺反饋，又不會讓用戶感到厭煩。下圖中左邊為 M3 彈簧動效，右邊為之前的標(biāo)準(zhǔn)動效：

圖形：擴(kuò)展形狀樣式

M3 添加了 35 種新形狀和形狀變體，為圖像裁剪和頭像等元素增加裝飾細(xì)節(jié)。M3 也為這些形狀添加了新的使用原則和規(guī)范指導(dǎo)：

形狀可以對不同的交互（例如點(diǎn)擊、滑動、滾動、釋放和長按等）做出反應(yīng)。因此使用形狀的變化可以更好地傳達(dá)以下信息：

1. 交互動作及狀態(tài)：例如選擇按鈕、打開開關(guān)等；
2. 正在進(jìn)行的操作：例如正在打字、頁面加載等；
3. 元素及環(huán)境變化：例如聲音、溫度或時(shí)間上的變化等。

Part 2 設(shè)計(jì)策略：極繁主義

隨著產(chǎn)品開始使用新的視覺表達(dá)元素，Google 也迅速建立了一套設(shè)計(jì)策略，包括以下 7 點(diǎn)。這些設(shè)計(jì)策略會幫助設(shè)計(jì)師正確使用 M3，讓組件、布局和產(chǎn)品更具表現(xiàn)力：

1. 應(yīng)用不同的形狀和比例。

形狀是界面設(shè)計(jì)中強(qiáng)大的溝通工具。在視覺設(shè)計(jì)的基礎(chǔ)層面，組件、元素和容器的形狀會為用戶奠定第一印象。巧妙地結(jié)合形狀和圓角，可以營造出視覺張力和聚合力，引導(dǎo)用戶的注意力。

比如，下圖左側(cè)圖中較小的、規(guī)整的形狀可能會導(dǎo)致操作功能看起來不那么重要；而右側(cè)圖中打破規(guī)則的、不一致的形狀和變化線條風(fēng)格可以吸引用戶對特定元素的注意力：

2. 使用豐富而細(xì)膩的色彩。

M3 的動態(tài)色彩系統(tǒng)用于關(guān)鍵組件或視覺元素，有助于強(qiáng)調(diào)屏幕的主要內(nèi)容，創(chuàng)建出更加豐富的視覺層次，以此強(qiáng)化出用戶操作的優(yōu)先級。

比如，左側(cè)圖中的色彩對比度不強(qiáng)，變化較少，元素之間就容易分不清主次；而右側(cè)圖中使用強(qiáng)烈的色彩對比來強(qiáng)調(diào)主要內(nèi)容和元素，可以自然而然地引導(dǎo)用戶進(jìn)行操作：

3. 使用字體引導(dǎo)用戶視線。

使用突出強(qiáng)調(diào)的文本樣式來吸引用戶對重要界面元素（如標(biāo)題和主要操作）的注意力。更大的字重、更大的字號和間距的對比關(guān)系可以使關(guān)鍵信息更具吸引力。混合使用 Material 字體庫中的其他字體樣式，有助于創(chuàng)建出適當(dāng)?shù)男畔蛹墸?/p>

4. 用容器組織和強(qiáng)調(diào)內(nèi)容。

將信息內(nèi)容進(jìn)行合理的分組，并組織到容器當(dāng)中，使用大小、間距、節(jié)奏、相似性等分組原則，使最重要的內(nèi)容、任務(wù)或操作在視覺上更加突出，信息更加清晰易懂：

5. 使用流暢而自然的動效。

通過形狀變形或表面效果的變化讓交互更加生動活潑，合理使用富有表現(xiàn)力的運(yùn)動彈簧或自定義微動畫：

6. 善于應(yīng)用組件的靈活性。

產(chǎn)品的 UI 應(yīng)該根據(jù)整體環(huán)境來調(diào)整組件大小、形狀、配色和自定義布局，使內(nèi)容適應(yīng)于任意尺寸的屏幕和使用場景，幫助用戶的更容易完成操作任務(wù)：

7. 結(jié)合技術(shù)創(chuàng)造英雄時(shí)刻。

產(chǎn)品的“英雄時(shí)刻（Hero Moment）”是指：以新穎的、恰當(dāng)?shù)姆绞酵怀鲋匾畔ⅲ屪钪匾幕迎h(huán)節(jié)精彩紛呈，這些時(shí)刻正是產(chǎn)品的核心靈魂。

“英雄時(shí)刻”通常是短小精悍、令人驚喜且出乎意料的。產(chǎn)品功能中的“英雄時(shí)刻”數(shù)量應(yīng)有所控制，過多的英雄時(shí)刻可能會讓人不知所措或分心。

Google 稱 M3 是“有史以來研究最深入的一次更新”，也是迄今最具“極繁主義”風(fēng)格的設(shè)計(jì)版本，旨在通過豐富的設(shè)計(jì)元素和多樣的設(shè)計(jì)手法來引導(dǎo)用戶更迅速、高效地完成操作任務(wù)，與此同時(shí)重新喚起用戶的愉悅與驚喜。更大膽的色彩、更俏皮的動畫和更直接的界面語言已經(jīng)成為 Material Design 的主導(dǎo)特征。