從極簡到極繁：谷歌Material 3如何重新定義安卓美學設計？

Google 的 Material Design 設計語言最新演進版本：Material 3 Expressive （以下簡稱 M3）于 2025 年 5 月的 The Android Show 活動中正式推出。它是在 Material Design2 的基礎上，強化現有設計哲學，重點在于更具表現力的界面和情感連接，目標是讓安卓系統更易用、更吸引人。

基礎介紹：

本文將為你介紹其主要特點：

Part 1 設計表達：豐富多樣

顏色：動態配色方案

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

應用動態配色方案的產品可以自動生成界面視覺效果，并為 UI 中的每個元素分配顏色。該功能的主要優勢在于：

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

給你舉兩個例子：

例 1：Android 系統可以采用你的手機鎖屏壁紙的主色調，將其融入系統 UI 和應用程序中，為你創建獨特的色彩視覺界面，下圖的應用程序就采用了來自用戶紅色壁紙的主題色，動態生成配色方案：

例 2：應用程序可以自動采用來自應用內部的圖片的主色調，來動態生成配色方案進行著色。如下圖的音樂播放器程序就采用了來自應用程序內歌曲專輯封面的藍色調，對播放器整體界面進行動態配色：

字體：加大、加粗、適配

M3 共有 30 種字體樣式，包括 15 種基線字體和 15 種強調字體。每種字體樣式都能在不同屏幕尺寸和內容上下文中流暢適配。加大加粗了新字體的基準字重和字號，最適合用于粗體、選擇和其他強調區域，便于用戶在閱讀時快速識別關鍵信息。

同時，字體的樣式可以使用 Material Token 來進行自定義，每一個樣式的字體、行高、大小、粗細等都有單獨對應的 Token（你可以閱讀我之前的文章：Design Token 如何理解和應用？），都可以做重新調整以適應應用產品的設計風格：

組件：新增變體 & 樣式

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

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

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

動效：運動擬物系統

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

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

Google 認為這種微動畫增強了交互的流暢感和視覺反饋，又不會讓用戶感到厭煩。下圖中左邊為 M3 彈簧動效，右邊為之前的標準動效：

圖形：擴展形狀樣式

M3 添加了 35 種新形狀和形狀變體，為圖像裁剪和頭像等元素增加裝飾細節。M3 也為這些形狀添加了新的使用原則和規范指導：

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

1. 交互動作及狀態：例如選擇按鈕、打開開關等；
2. 正在進行的操作：例如正在打字、頁面加載等；
3. 元素及環境變化：例如聲音、溫度或時間上的變化等。

Part 2 設計策略：極繁主義

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

1. 應用不同的形狀和比例。

形狀是界面設計中強大的溝通工具。在視覺設計的基礎層面，組件、元素和容器的形狀會為用戶奠定第一印象。巧妙地結合形狀和圓角，可以營造出視覺張力和聚合力，引導用戶的注意力。

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

2. 使用豐富而細膩的色彩。

M3 的動態色彩系統用于關鍵組件或視覺元素，有助于強調屏幕的主要內容，創建出更加豐富的視覺層次，以此強化出用戶操作的優先級。

比如，左側圖中的色彩對比度不強，變化較少，元素之間就容易分不清主次；而右側圖中使用強烈的色彩對比來強調主要內容和元素，可以自然而然地引導用戶進行操作：

3. 使用字體引導用戶視線。

使用突出強調的文本樣式來吸引用戶對重要界面元素（如標題和主要操作）的注意力。更大的字重、更大的字號和間距的對比關系可以使關鍵信息更具吸引力。混合使用 Material 字體庫中的其他字體樣式，有助于創建出適當的信息層級：

4. 用容器組織和強調內容。

將信息內容進行合理的分組，并組織到容器當中，使用大小、間距、節奏、相似性等分組原則，使最重要的內容、任務或操作在視覺上更加突出，信息更加清晰易懂：

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

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

6. 善于應用組件的靈活性。

產品的 UI 應該根據整體環境來調整組件大小、形狀、配色和自定義布局，使內容適應于任意尺寸的屏幕和使用場景，幫助用戶的更容易完成操作任務：

7. 結合技術創造英雄時刻。

產品的“英雄時刻（Hero Moment）”是指：以新穎的、恰當的方式突出重要信息，讓最重要的互動環節精彩紛呈，這些時刻正是產品的核心靈魂。

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

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