深度拆解組件設計的6種狀態類型

今天分享的是「組件狀態解析」。

狀態類型，是組件或元素當前所處情況的直觀體現。雖說狀態在界面上往往不會直接顯示出來，卻是用戶理解產品的關鍵要素。按鈕能不能點、現在焦點在哪個元素上、剛完成的操作是什么，這些信息全靠狀態來傳遞。

這里歸納了6種常用的狀態類型，以及不同狀態的使用方法，一起來看看~

01 狀態類型

在谷歌的Material 3設計規范里，狀態被明確劃分成了以下六種類型：

① 啟用態

處于這個狀態的組件或元素，已經準備好和用戶進行交互。

② 禁用態

這個狀態下的組件或元素，無法正常使用。比如按鈕，啟用時容器和文字的對比度很高，清晰易識別；禁用后就會換成低對比度的灰色文字和灰色容器，直觀傳遞 “不可操作” 的信號。

③ 懸停態

當用戶把光標停在可交互元素上時，就會觸發這個狀態。

④ 聚焦態

這個狀態指的是元素被鍵盤、語音等輸入方式選中的時候。獲得焦點的按鈕，容器和文字之間會形成鮮明對比，讓用戶清晰感知到當前選中的對象。

⑤ 點擊態

這個狀態會實時反饋用戶的點擊操作，讓用戶明確知道自己的點擊已經被系統識別。

⑥ 拖拽態

這個狀態用來提示用戶，當前正在按住并移動某個元素。比如被按壓的按鈕，容器和文字會有鮮明對比；被拖動的芯片，也會通過視覺變化，讓用戶清楚看到它正在被移動。

狀態層解析

狀態層是一種半透明的圖層，核心作用是清晰指示出元素當前的狀態。通過調整不透明度的方式，把元素的狀態直觀又系統地呈現出來。

這種圖層既可以覆蓋整個元素，也可以只應用在圓形區域，不過要注意，同一時間只能給元素疊加一個狀態層。

① 內容層 ② 狀態層 ③ 容器

這里要補充的是，狀態層屬于疊加層的一種，每種狀態對應的不透明度都是固定的，而且會使用和內容相同的顏色，這樣能保證視覺上的一致性和辨識度。

02 啟用態設計解析

啟用狀態是指組件或元素處于可交互的狀態。當組件啟用時，會自動應用為該類交互式組件預設的默認樣式。

像按鈕、浮動操作按鈕（FAB）、開關和文本字段這些常見組件，都有各自對應的啟用狀態樣式。

03 禁用態設計解析

禁用狀態，簡單說就是組件或元素處于無法交互的狀態。這種狀態通常會通過顏色變化和降低視覺存在感的方式，直觀告訴用戶“當前不可操作”。

禁用狀態在操作類、選擇類和輸入類組件中都很常見，以下這些組件設置禁用狀態后，能更清晰地傳遞交互限制：

按鈕 (Button)

卡片 (Card)

復選框 (Checkbox)

標簽 (Chips)

列表項 (List items)

單選按鈕 (Radio button)

開關 (Switch)

文本字段 (Text field)

不過禁用狀態并非適用于所有組件，像容器類、導航類組件，還有部分操作類組件，就不適合用禁用狀態：

應用欄 (App bars)

?徽章 (Badges)

對話框 (Dialogs)

浮動操作按鈕 (Fab)

菜單 (Menus)

導航欄(NavBar)

浮窗(Sheets)

標簽頁(Tabs)

工具提示(Tooltips)

處于禁用狀態的組件，既不能被選中獲得焦點，也無法被拖動或按壓，就算用戶點擊或把光標懸停在上面，它的狀態也不會有任何變化。

在同一個布局里，同時存在多個禁用狀態的組件是可以的，沒有數量限制。

04 懸停態設計解析

懸停狀態的觸發很簡單——當用戶把光標停在可交互元素上時，這個狀態就會啟動。

用來提示懸停狀態的低強度表面疊加層，既可以覆蓋整個組件，也可以只應用在組件內的部分元素上，還能以圓形的形式，針對性地加在組件的特定區域。

像按鈕、浮動操作按鈕（FAB）、圖標按鈕和分段按鈕這類組件，都支持懸停狀態。而且懸停狀態還會被操作類、選擇類和輸入類組件繼承使用。

常見的帶有懸停狀態的組件有這些：

按鈕 (Button)、卡片 (Card)、復選框 (Checkbox)、標簽 (Chips)、日期和時間選擇器 (Date and time picker)、列表項 (List items)、滑塊 (Slider)、開關 (Switch)、文本字段 (Text field)

只有應用欄內的各個操作組件才會繼承懸停狀態。像對話類、容器類或導航類組件，一般都不適用懸停狀態。常見的沒有懸停狀態的組件包括：

應用欄 (App bars)、?徽章 (Badges)、對話框 (Dialogs)、菜單 (Menus)、導航欄(NavBar)、?浮窗(Sheets)、?標簽頁(Tabs)

補充一點，懸停狀態的出現和消失，會搭配低強度的淡入淡出動畫，讓視覺過渡更自然，不會顯得突兀。

還有個重要規則：同一個布局里，同一時間只能存在一種懸停狀態。系統會根據光標的位置，把懸停狀態只應用在當前對應的那一個元素上。

05 聚焦態設計解析

聚焦狀態表示用戶已使用鍵盤或語音輸入高亮顯示（選中）某個元素。聚焦狀態適用于所有交互組件。

我們可以給組件添加疊加層來提示聚焦狀態，疊加層的應用方式很靈活——既可以覆蓋整個組件，也可以只應用在組件內的部分元素上，還能以圓形的形式，精準加在組件的特定區域。

聚焦狀態會被操作類、選擇類和輸入類組件繼承使用。常見的支持聚焦狀態的組件有這些：

按鈕 (Button)、卡片 (Card)、復選框 (Checkbox)、標簽 (Chips)、日期和時間選擇器 (Date and time picker)、列表項 (List items)、選擇控件 (Selection controls)、文本字段 (Text field)

只有應用欄內部的各類操作組件，才會繼承聚焦狀態。像大部分對話類、容器類和導航類組件，都不會繼承聚焦狀態。常見的不適用聚焦狀態的組件包括：

應用欄 (App bars)、?徽章 (Badges)、橫幅 (Banner)、卡片(Card)、對話框 (Dialogs)、導航欄(NavBar)、?浮窗(Sheets)

很多用戶習慣用Tab鍵或其他快捷鍵，來瀏覽頁面上的可交互元素，比如鏈接、按鈕、標簽等。

當用Tab鍵選中某個元素時，這個元素就會進入聚焦狀態，同時出現環形的鍵盤焦點指示器。這個指示器能幫用戶清楚知道自己當前在頁面的哪個位置，選中后還能直接用鍵盤操作這個元素。

同一個布局里，同一時間只能有一個組件處于聚焦狀態。而且聚焦狀態同一時間只能作用于一張卡片。

06 點擊態設計解析

點擊狀態，指的是用戶用光標點擊、鍵盤操作或語音輸入，對元素進行點擊或輕觸時觸發的交互狀態。這種狀態適用于所有可交互的組件。

點擊狀態會觸發組件視覺效果的變化，所以需要重點突出顯示。通常它會以波紋疊加的形式呈現，應用范圍很靈活：可以覆蓋整個組件，也可以只作用于組件內的部分元素，還能以圓形的形式精準覆蓋組件的特定區域。

點擊狀態會被相關組件繼承，通常適用于操作類、選擇類，以及部分容器類組件。常見的支持按下狀態的組件有這些：

按鈕 (Button)、卡片 (Card)、復選框 (Checkbox)、標簽 (Chips)、列表項 (List items)、文本字段 (Text field)

導航類，以及部分容器類組件，是不會繼承按下狀態的。常見的不支持按下狀態的組件包括：

應用欄 (App bars)、?徽章 (Badges)、底部導航 (BotNav)、對話框 (Dialogs)、菜單 (Menus)、?浮窗(Sheets)、?標簽頁(Tabs)

點擊狀態的觸發順序，會跟隨用戶執行操作的順序來顯示。當用戶通過鍵盤或語音輸入，對可交互元素進行操作時，按下狀態就會被激活。

同一個布局里，同一時間只能存在一種按下狀態。而且按下狀態同一時間只能作用于一張卡片。

07 拖拽態設計解析

拖拽態，指的是用戶按住元素或組件并開始移動時，觸發的交互狀態。

拖拽態的視覺表現要盡量低調，避免分散用戶的注意力。我們可以用低飽和度的疊加層來提示這個狀態，疊加層既可以覆蓋整個組件，也可以只應用在組件內的部分元素上。

另外，像列表項、標簽和卡片這類組件，還能通過調整高度來提示拖拽狀態。

拖拽態會被相關組件繼承，主要適用于部分容器類和選擇類組件。常見的支持拖拽態的組件有這些：

卡片 (Card)、標簽 (Chips)、列表項 (List items)、滑塊 (Slider)

那些需要一直固定在某個位置的組件（比如應用欄），本身就不支持拖拽操作。而且拖拽態不會被操作類、導航類，以及部分容器類組件繼承。

常見的不支持拖拽態的組件包括：

應用欄 (App bars)、?徽章 (Badges)、按鈕 (Button)、對話框 (Dialogs)、菜單 (Menus)、導航欄(NavBar)

當用戶通過點擊、單擊等輸入方式，按住元素并準備移動時，拖拽態就會被觸發。

同一個布局里，同一時間只能有一個元素處于拖拽態。而且拖拽態同一時間只能作用于一張卡片。

08 最后

狀態其實是描述用戶和系統當前關系的核心語言。像啟用、禁用、鼠標懸停、焦點選中、點擊按下、拖動這些狀態，能清晰告訴用戶當前哪些功能能用、注意力該放在哪，以及剛剛發生了什么操作。

如果這些狀態都遵循統一的設計規則，用戶不用額外學習，就能自然而然地看懂界面

來源 | Clip設計夾（ID：ClipppDesign）

作者 | 趙一 ; 編輯 | 蝦餃

內容僅代表作者獨立觀點，不代表早讀課立場