不知道大家有沒(méi)有和我一樣的感覺(jué)，設(shè)計(jì)圈好像已經(jīng)很久沒(méi)有大的更新和流行趨勢(shì)出現(xiàn)了。終于在上周的“The Android Show ”活動(dòng)中，我看到 Google 對(duì)經(jīng)典的 Material Design 做了一次重大升級(jí)，新的設(shè)計(jì)語(yǔ)言叫 Material Design 3 Expressive。所以，周末的時(shí)候趕緊研究了一波，看看到底有了哪些新的變化，也學(xué)習(xí)下像 Google 這樣的大廠到底怎么做設(shè)計(jì)升級(jí)。

Google 的 Material Design 自 2014 年發(fā)布以來(lái)，一直是 UI 設(shè)計(jì)領(lǐng)域的重要風(fēng)向標(biāo)。從最初的“物理隱喻”到 Material 2 的“品牌定制化”，再到如今 Material 3 的“個(gè)性化與富有表現(xiàn)力”，Material Design 一直在不斷進(jìn)化。上周，Material 3 在“富有表現(xiàn)力 UX (Expressive UX)”方面的一系列更新，意味著設(shè)計(jì)語(yǔ)言向更個(gè)性化、更具情感連接、更適應(yīng)品牌敘事的方向迭代，重在提升視覺(jué)表現(xiàn)力和互動(dòng)性。

更多設(shè)計(jì)趨勢(shì)：

一、Material Design 3 Expressive 的核心設(shè)計(jì)理念

早在 2022 年，谷歌的研究實(shí)習(xí)生就在研究用戶對(duì) Google 應(yīng)用中 Material Design 的感受。然后在慕尼黑一家啤酒館向同事們透露了她的初步發(fā)現(xiàn)后，她引發(fā)了一場(chǎng)全團(tuán)隊(duì)的設(shè)計(jì)辯論：為什么這些應(yīng)用看起來(lái)都這么相似？這么無(wú)聊？難道就沒(méi)有空間來(lái)改變這種感覺(jué)嗎？

在過(guò)去三年中，谷歌團(tuán)隊(duì)不斷探索這場(chǎng)對(duì)話的意義，通過(guò) 46 項(xiàng)獨(dú)立研究，做了上百套方案，以及來(lái)自全球超過(guò) 18,000 名參與者的參與，最終找到了 Material Design 的下一個(gè)發(fā)展方向。谷歌發(fā)現(xiàn)傳統(tǒng)"整潔但乏味"的設(shè)計(jì)已無(wú)法滿足用戶對(duì)品牌個(gè)性與情感連接的深層需求，用戶越來(lái)越偏好富有表現(xiàn)力的設(shè)計(jì)。

Material 3 Expressive 標(biāo)志著谷歌設(shè)計(jì)哲學(xué)的重大轉(zhuǎn)型——將UI從功能型工具升級(jí)為情感化媒介。全新的 Material 3 Expressive 被谷歌稱(chēng)之為是一個(gè)“大膽設(shè)計(jì)的新方向”，也是“谷歌系統(tǒng)設(shè)計(jì)迄今為止研究最深入的一次更新”。

Material 3 Expressive 官方宣傳片

研究數(shù)據(jù)顯示：

1. 各年齡段用戶普遍偏好表現(xiàn)力更強(qiáng)的設(shè)計(jì)
2. 表現(xiàn)力設(shè)計(jì)在趣味性、活力、創(chuàng)造性和友好性等用戶屬性上得分更高
3. 用戶更傾向于選擇使用 Material 3 Expressive 組件和技術(shù)的產(chǎn)品
4. 表現(xiàn)力設(shè)計(jì)更易于使用，參與者能夠以最多快 4 倍的速度發(fā)現(xiàn)關(guān)鍵 UI 元素

我們?cè)趺蠢斫膺@次更新的“Expressive（富有表現(xiàn)力）”？

“富有表現(xiàn)力 UX”是 Material Design 3 的核心設(shè)計(jì)原則之一。它超越了傳統(tǒng)意義上對(duì)“美觀”的追求，更強(qiáng)調(diào)：個(gè)性化、情感連接、品牌敘事和適應(yīng)性與包容性。簡(jiǎn)單來(lái)說(shuō)，M3 的“富有表現(xiàn)力”目的是讓數(shù)字產(chǎn)品感覺(jué)更“活”、更“懂你”、更能代表品牌。這也是它的核心升級(jí)理念。

富有表現(xiàn)力的設(shè)計(jì)的基本要素是色彩、形狀、大小、動(dòng)效和內(nèi)容的運(yùn)用。

1. 色彩上，它引入了更豐富的點(diǎn)綴色，用于突出關(guān)鍵操作按鈕；
2. 形狀上，優(yōu)化了按鈕與浮動(dòng)工具欄的圓角半徑，使界面看起來(lái)更親和；
3. 尺寸上，在保證信息層次的同時(shí)，擴(kuò)大了"可點(diǎn)擊區(qū)域"，以提升操作體驗(yàn)；
4. 動(dòng)畫(huà)上，通過(guò)微交互動(dòng)效，引導(dǎo)用戶注意力并提供操作反饋。

這些設(shè)計(jì)不僅提升了可用性，也在情感層面與用戶建立了更深層次的聯(lián)系，使應(yīng)用在"酷感"、"現(xiàn)代感"和"叛逆感"等品牌認(rèn)知指標(biāo)上有了顯著提升。

二、具體更新了哪些內(nèi)容？

1. 提升組件視覺(jué)表現(xiàn)力

這次更新有 15 個(gè)新的或更新的組件現(xiàn)在具有更多的配置功能、形狀選項(xiàng)、強(qiáng)調(diào)文本和其他富有表現(xiàn)力的更新。

例如，按鈕、卡片、對(duì)話框等組件都提供了更多的樣式和定制選項(xiàng)。

組件的不同狀態(tài)（如懸停、按下、禁用）通過(guò)色彩、陰影、形狀的細(xì)微變化得到更清晰的表達(dá)。

組件可以根據(jù)其在界面中的重要性和上下文，呈現(xiàn)不同的視覺(jué)強(qiáng)調(diào)。

可能還會(huì)引入新的組件類(lèi)型，以滿足更豐富的交互和信息展示需求，如支持更復(fù)雜布局的卡片、更具表現(xiàn)力的導(dǎo)航元素等。

2. 更有活力和有意義的動(dòng)效

使用運(yùn)動(dòng)彈簧的新系統(tǒng)使交互和轉(zhuǎn)換感覺(jué)更加生動(dòng)、流暢和自然?？臻g彈簧模擬物體實(shí)際運(yùn)動(dòng)的物理原理，使動(dòng)畫(huà)清晰可預(yù)測(cè)。效果彈簧則能為顏色和不透明度的變化創(chuàng)造無(wú)縫的過(guò)渡。

M3 強(qiáng)調(diào)動(dòng)效不僅是為了“炫技”，更應(yīng)服務(wù)于用戶體驗(yàn)。動(dòng)效應(yīng)具有目的性，能夠引導(dǎo)用戶、提供反饋、增強(qiáng)空間感，并增添愉悅感。

3. 更有表現(xiàn)力的排版系統(tǒng)

可變和靜態(tài)字體的新類(lèi)型樣式可用于表達(dá)一系列情緒狀態(tài)，自動(dòng)調(diào)整變量以提高可讀性，并支持粗體編輯布局。強(qiáng)調(diào)的字體強(qiáng)化了信息層次，并吸引人們注意重要的操作，如 “開(kāi)始錄制” ， 或信息，如未讀消息。

M3 引入了更靈活、更具表現(xiàn)力的排版系統(tǒng)。強(qiáng)調(diào)使用可變字體 (Variable Fonts) 和更精細(xì)的字階 (Type Scale) 來(lái)優(yōu)化信息層級(jí)和閱讀體驗(yàn)。會(huì)使用更重的字重、更大的尺寸、色彩和間距可以引導(dǎo)注意力，使關(guān)鍵信息更具吸引力。

4. 更豐富的形狀

使用新的 35 種形狀為圖像裁剪和頭像等元素添加裝飾細(xì)節(jié)。

內(nèi)置的形狀變形動(dòng)畫(huà)可實(shí)現(xiàn)形狀間的平滑過(guò)渡。這可以是動(dòng)態(tài)的，也可以是簡(jiǎn)單的正方形變?yōu)閳A形。M3 允許對(duì)組件的圓角半徑進(jìn)行更細(xì)致的定制，從小圓角到完全的“藥丸形”，甚至是不規(guī)則形狀的探索。

對(duì)設(shè)計(jì)的影響，主要體現(xiàn)在我們可以利用形狀系統(tǒng)為組件注入更多個(gè)性。用不同的圓角風(fēng)格可以微妙地傳遞品牌的氣質(zhì)（如科技感、親和力、趣味性），形狀可以幫助區(qū)分元素、建立視覺(jué)層級(jí)，并引導(dǎo)用戶的交互行為。

5. 動(dòng)態(tài)的配色方案

顏色是 M3 最具標(biāo)志性的特性。系統(tǒng)能夠從用戶的壁紙或預(yù)設(shè)主題中提取主色調(diào)和輔助色，并將其應(yīng)用于整個(gè) UI 界面，包括應(yīng)用、小組件等。豐富的顏色選擇范圍可用于清晰地展現(xiàn)層次結(jié)構(gòu)并明確關(guān)鍵操作。豐富的視覺(jué)樣式支持個(gè)性化和動(dòng)態(tài)色彩。

基于這種新的設(shè)計(jì)元素，咱們就需要考慮應(yīng)用如何在各種動(dòng)態(tài)色彩主題下保持品牌識(shí)別度和可用性。因?yàn)槊總€(gè)用戶的設(shè)備界面都因其個(gè)性化選擇而獨(dú)一無(wú)二。

三、設(shè)計(jì)策略

我在官網(wǎng)上看到了 Google 對(duì)于這些更新寫(xiě)了明確的設(shè)計(jì)策略，幫助我們更好理解和應(yīng)用這次的設(shè)計(jì)更新。

1. 使用多種形狀

形狀可以成為界面中強(qiáng)大的溝通工具。在視覺(jué)設(shè)計(jì)的基礎(chǔ)層面，組件、容器和內(nèi)容的形狀會(huì)為用戶設(shè)定第一眼的視覺(jué)基調(diào)。巧妙地結(jié)合形狀和圓角半徑，可以營(yíng)造視覺(jué)張力或凝聚力，引導(dǎo)用戶在應(yīng)用中的注意力。結(jié)合經(jīng)典形狀和抽象形狀，可以創(chuàng)建獨(dú)特的輪廓或群組。 使用形狀庫(kù)和全新的圓角半徑選項(xiàng)，可以混合圓形和方形，營(yíng)造張力和視覺(jué)對(duì)比。

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

Material 的動(dòng)態(tài)色彩系統(tǒng)已為主色、次色和復(fù)色元素及界面提供了一系列顏色。使用顏色創(chuàng)建視覺(jué)層次。利用主色、次色和復(fù)色角色之間的對(duì)比，可以確定操作的優(yōu)先級(jí)并簡(jiǎn)化導(dǎo)航。

3. 用字體引導(dǎo)注意力

使用強(qiáng)調(diào)的文本樣式來(lái)吸引用戶對(duì)重要界面元素（例如標(biāo)題和操作）的注意力。通過(guò)強(qiáng)調(diào)排版，在應(yīng)用中營(yíng)造出類(lèi)似編輯的效果。更大的字重、更大的字號(hào)、顏色和間距可以引導(dǎo)用戶，使關(guān)鍵信息更具吸引力。使用 Material 字體庫(kù)中的其他字體樣式，有助于在內(nèi)容塊內(nèi)部和之間創(chuàng)建適當(dāng)?shù)膶哟谓Y(jié)構(gòu)。

4. 包含強(qiáng)調(diào)內(nèi)容

將內(nèi)容組織到合理的分組或容器中。通過(guò)大的留白和顏色，使最重要的內(nèi)容、任務(wù)或操作在視覺(jué)上更加突出。考慮使用大小、間距、節(jié)奏、相似性或其他分組原則，使重要元素更加清晰易懂。

5. 添加流暢自然的動(dòng)畫(huà)

通過(guò)形狀變形或界面效果，讓交互更加生動(dòng)活潑。應(yīng)用富有表現(xiàn)力的動(dòng)畫(huà)曲線或自定義微動(dòng)畫(huà)。

6. 利用組件靈活性

UI 應(yīng)該適應(yīng)用戶環(huán)境。根據(jù)環(huán)境調(diào)整組件或控件，使任務(wù)更容易完成。通過(guò)自定義調(diào)整或應(yīng)用規(guī)范布局，使內(nèi)容適應(yīng)可折疊屏幕和大屏幕。

7. 組合設(shè)計(jì)手法，打造高光時(shí)刻

“高光時(shí)刻”通過(guò)多種富有表現(xiàn)力的設(shè)計(jì)技巧，打破千篇一律的套路化設(shè)計(jì)。用新穎的、像雜志排版一樣吸睛的方式，突出核心信息或傳遞產(chǎn)品態(tài)度。這些時(shí)刻能幫用戶聚焦重點(diǎn)——把時(shí)間花在打磨最關(guān)鍵的操作體驗(yàn)上，因?yàn)檫@些瞬間才是產(chǎn)品的靈魂！

高光時(shí)刻的特點(diǎn)：

1. 短暫但令人愉悅
2. 出其不意（比如完成支付時(shí)蹦出一個(gè)小彩蛋）
3. 少而精：一個(gè)產(chǎn)品最多設(shè) 1-2 個(gè)，太多反而會(huì)分散注意力

如何找到你的高光時(shí)刻？問(wèn)自己：

① 這個(gè)操作能戳中用戶情緒嗎？

比如設(shè)計(jì)能否放大用戶的成就感（如健身 APP 完成目標(biāo)的慶祝動(dòng)畫(huà)）

或者強(qiáng)化熟悉感（像微信紅包的拆封音效）

② 這是產(chǎn)品的關(guān)鍵操作嗎？

是否需要強(qiáng)化某個(gè)步驟的清晰度？

比如把重要按鈕做得更醒目，或讓關(guān)鍵信息“跳”出來(lái)引導(dǎo)用戶視線

我的思考

Material Design 3 的“富有表現(xiàn)力 UX”升級(jí)，是 Google 對(duì)未來(lái)數(shù)字產(chǎn)品體驗(yàn)方向的深刻洞察。在設(shè)計(jì)趨勢(shì)上打破 iOS 主導(dǎo)的極簡(jiǎn)主義，建立"情感優(yōu)先"的新標(biāo)準(zhǔn)。它鼓勵(lì)設(shè)計(jì)師打破傳統(tǒng)束縛，創(chuàng)造出更個(gè)性化、更具情感連接、更能傳遞品牌價(jià)值的產(chǎn)品。這不僅是對(duì)設(shè)計(jì)工具和規(guī)范的更新，更是對(duì)設(shè)計(jì)理念的一次升華。

這次更新不僅僅是視覺(jué)上的改變，更是基于深入用戶研究的設(shè)計(jì)決策，當(dāng)然這花的錢(qián)也是不少，大規(guī)模用戶研究越來(lái)越被重視。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，這是一件好事，Material 3 Expressive 提供了更多的創(chuàng)作自由和表達(dá)方式，給了我們更多設(shè)計(jì)上發(fā)揮的空間，讓我們能夠設(shè)計(jì)出不僅功能強(qiáng)大，還能觸動(dòng)人心的產(chǎn)品。