重大升級！3個章節深度解讀Google Material 3 Expressive

不知道大家有沒有和我一樣的感覺，設計圈好像已經很久沒有大的更新和流行趨勢出現了。終于在上周的“The Android Show ”活動中，我看到 Google 對經典的 Material Design 做了一次重大升級，新的設計語言叫 Material Design 3 Expressive。所以，周末的時候趕緊研究了一波，看看到底有了哪些新的變化，也學習下像 Google 這樣的大廠到底怎么做設計升級。

Google 的 Material Design 自 2014 年發布以來，一直是 UI 設計領域的重要風向標。從最初的“物理隱喻”到 Material 2 的“品牌定制化”，再到如今 Material 3 的“個性化與富有表現力”，Material Design 一直在不斷進化。上周，Material 3 在“富有表現力 UX (Expressive UX)”方面的一系列更新，意味著設計語言向更個性化、更具情感連接、更適應品牌敘事的方向迭代，重在提升視覺表現力和互動性。

更多設計趨勢：

一、Material Design 3 Expressive 的核心設計理念

早在 2022 年，谷歌的研究實習生就在研究用戶對 Google 應用中 Material Design 的感受。然后在慕尼黑一家啤酒館向同事們透露了她的初步發現后，她引發了一場全團隊的設計辯論：為什么這些應用看起來都這么相似？這么無聊？難道就沒有空間來改變這種感覺嗎？

在過去三年中，谷歌團隊不斷探索這場對話的意義，通過 46 項獨立研究，做了上百套方案，以及來自全球超過 18,000 名參與者的參與，最終找到了 Material Design 的下一個發展方向。谷歌發現傳統"整潔但乏味"的設計已無法滿足用戶對品牌個性與情感連接的深層需求，用戶越來越偏好富有表現力的設計。

Material 3 Expressive 標志著谷歌設計哲學的重大轉型——將UI從功能型工具升級為情感化媒介。全新的 Material 3 Expressive 被谷歌稱之為是一個“大膽設計的新方向”，也是“谷歌系統設計迄今為止研究最深入的一次更新”。

Material 3 Expressive 官方宣傳片

研究數據顯示：

1. 各年齡段用戶普遍偏好表現力更強的設計
2. 表現力設計在趣味性、活力、創造性和友好性等用戶屬性上得分更高
3. 用戶更傾向于選擇使用 Material 3 Expressive 組件和技術的產品
4. 表現力設計更易于使用，參與者能夠以最多快 4 倍的速度發現關鍵 UI 元素

我們怎么理解這次更新的“Expressive（富有表現力）”？

“富有表現力 UX”是 Material Design 3 的核心設計原則之一。它超越了傳統意義上對“美觀”的追求，更強調：個性化、情感連接、品牌敘事和適應性與包容性。簡單來說，M3 的“富有表現力”目的是讓數字產品感覺更“活”、更“懂你”、更能代表品牌。這也是它的核心升級理念。

富有表現力的設計的基本要素是色彩、形狀、大小、動效和內容的運用。

1. 色彩上，它引入了更豐富的點綴色，用于突出關鍵操作按鈕；
2. 形狀上，優化了按鈕與浮動工具欄的圓角半徑，使界面看起來更親和；
3. 尺寸上，在保證信息層次的同時，擴大了"可點擊區域"，以提升操作體驗；
4. 動畫上，通過微交互動效，引導用戶注意力并提供操作反饋。

這些設計不僅提升了可用性，也在情感層面與用戶建立了更深層次的聯系，使應用在"酷感"、"現代感"和"叛逆感"等品牌認知指標上有了顯著提升。

二、具體更新了哪些內容？

1. 提升組件視覺表現力

這次更新有 15 個新的或更新的組件現在具有更多的配置功能、形狀選項、強調文本和其他富有表現力的更新。

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

組件的不同狀態（如懸停、按下、禁用）通過色彩、陰影、形狀的細微變化得到更清晰的表達。

組件可以根據其在界面中的重要性和上下文，呈現不同的視覺強調。

可能還會引入新的組件類型，以滿足更豐富的交互和信息展示需求，如支持更復雜布局的卡片、更具表現力的導航元素等。

2. 更有活力和有意義的動效

使用運動彈簧的新系統使交互和轉換感覺更加生動、流暢和自然。空間彈簧模擬物體實際運動的物理原理，使動畫清晰可預測。效果彈簧則能為顏色和不透明度的變化創造無縫的過渡。

M3 強調動效不僅是為了“炫技”，更應服務于用戶體驗。動效應具有目的性，能夠引導用戶、提供反饋、增強空間感，并增添愉悅感。

3. 更有表現力的排版系統

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

M3 引入了更靈活、更具表現力的排版系統。強調使用可變字體 (Variable Fonts) 和更精細的字階 (Type Scale) 來優化信息層級和閱讀體驗。會使用更重的字重、更大的尺寸、色彩和間距可以引導注意力，使關鍵信息更具吸引力。

4. 更豐富的形狀

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

內置的形狀變形動畫可實現形狀間的平滑過渡。這可以是動態的，也可以是簡單的正方形變為圓形。M3 允許對組件的圓角半徑進行更細致的定制，從小圓角到完全的“藥丸形”，甚至是不規則形狀的探索。

對設計的影響，主要體現在我們可以利用形狀系統為組件注入更多個性。用不同的圓角風格可以微妙地傳遞品牌的氣質（如科技感、親和力、趣味性），形狀可以幫助區分元素、建立視覺層級，并引導用戶的交互行為。

5. 動態的配色方案

顏色是 M3 最具標志性的特性。系統能夠從用戶的壁紙或預設主題中提取主色調和輔助色，并將其應用于整個 UI 界面，包括應用、小組件等。豐富的顏色選擇范圍可用于清晰地展現層次結構并明確關鍵操作。豐富的視覺樣式支持個性化和動態色彩。

基于這種新的設計元素，咱們就需要考慮應用如何在各種動態色彩主題下保持品牌識別度和可用性。因為每個用戶的設備界面都因其個性化選擇而獨一無二。

三、設計策略

我在官網上看到了 Google 對于這些更新寫了明確的設計策略，幫助我們更好理解和應用這次的設計更新。

1. 使用多種形狀

形狀可以成為界面中強大的溝通工具。在視覺設計的基礎層面，組件、容器和內容的形狀會為用戶設定第一眼的視覺基調。巧妙地結合形狀和圓角半徑，可以營造視覺張力或凝聚力，引導用戶在應用中的注意力。結合經典形狀和抽象形狀，可以創建獨特的輪廓或群組。 使用形狀庫和全新的圓角半徑選項，可以混合圓形和方形，營造張力和視覺對比。

2. 使用豐富細膩的色彩

Material 的動態色彩系統已為主色、次色和復色元素及界面提供了一系列顏色。使用顏色創建視覺層次。利用主色、次色和復色角色之間的對比，可以確定操作的優先級并簡化導航。

3. 用字體引導注意力

使用強調的文本樣式來吸引用戶對重要界面元素（例如標題和操作）的注意力。通過強調排版，在應用中營造出類似編輯的效果。更大的字重、更大的字號、顏色和間距可以引導用戶，使關鍵信息更具吸引力。使用 Material 字體庫中的其他字體樣式，有助于在內容塊內部和之間創建適當的層次結構。

4. 包含強調內容

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

5. 添加流暢自然的動畫

通過形狀變形或界面效果，讓交互更加生動活潑。應用富有表現力的動畫曲線或自定義微動畫。

6. 利用組件靈活性

UI 應該適應用戶環境。根據環境調整組件或控件，使任務更容易完成。通過自定義調整或應用規范布局，使內容適應可折疊屏幕和大屏幕。

7. 組合設計手法，打造高光時刻

“高光時刻”通過多種富有表現力的設計技巧，打破千篇一律的套路化設計。用新穎的、像雜志排版一樣吸睛的方式，突出核心信息或傳遞產品態度。這些時刻能幫用戶聚焦重點——把時間花在打磨最關鍵的操作體驗上，因為這些瞬間才是產品的靈魂！

高光時刻的特點：

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

如何找到你的高光時刻？問自己：

① 這個操作能戳中用戶情緒嗎？

比如設計能否放大用戶的成就感（如健身 APP 完成目標的慶祝動畫）

或者強化熟悉感（像微信紅包的拆封音效）

② 這是產品的關鍵操作嗎？

是否需要強化某個步驟的清晰度？

比如把重要按鈕做得更醒目，或讓關鍵信息“跳”出來引導用戶視線

我的思考

Material Design 3 的“富有表現力 UX”升級，是 Google 對未來數字產品體驗方向的深刻洞察。在設計趨勢上打破 iOS 主導的極簡主義，建立"情感優先"的新標準。它鼓勵設計師打破傳統束縛，創造出更個性化、更具情感連接、更能傳遞品牌價值的產品。這不僅是對設計工具和規范的更新，更是對設計理念的一次升華。

這次更新不僅僅是視覺上的改變，更是基于深入用戶研究的設計決策，當然這花的錢也是不少，大規模用戶研究越來越被重視。對于設計師來說，這是一件好事，Material 3 Expressive 提供了更多的創作自由和表達方式，給了我們更多設計上發揮的空間，讓我們能夠設計出不僅功能強大，還能觸動人心的產品。