做產(chǎn)品設(shè)計的朋友怕是最有體會，用戶用著你的產(chǎn)品覺得 “順手” 還是 “別扭”，很多時候不取決于功能多全，反而藏在那些看不見的細(xì)節(jié)里。我說的就是組件狀態(tài)。

比如按鈕能不能點、點了有沒有反應(yīng)、光標(biāo)停上去變不變樣這些。說實話，這東西就像產(chǎn)品和用戶的 “暗號”，沒對接好，用戶分分鐘就想放棄。今天就借著 Material 3 的規(guī)范，跟大家掰扯清楚這門 “暗號” 的門道。

組件狀態(tài)本質(zhì)上就是告訴用戶 “現(xiàn)在這個元素能干嘛、正在干嘛”。Material 3 把常用的分成了 6 種，每一種都有自己的使命。

啟用態(tài)就是組件 “隨時待命” 的狀態(tài)，比如能點擊的按鈕，顏色清晰、一眼就能看出能操作。

我之前做設(shè)計的時候，本來想把啟用態(tài)做得花哨點吸引注意，后來發(fā)現(xiàn)沒必要，簡潔清晰才是關(guān)鍵，不然反而會干擾用戶判斷。

禁用態(tài)就簡單了，就是 “此路不通” 的信號。一般都會調(diào)成灰色，對比度降低，讓用戶一眼就知道這個功能現(xiàn)在用不了。

很顯然，這種狀態(tài)不能亂用，比如導(dǎo)航欄這種必須固定的組件，搞個禁用態(tài)出來，用戶只會 confusion。

懸停態(tài)是光標(biāo)停在元素上觸發(fā)的。說實話，這個狀態(tài)的過渡動畫很重要，Material 3 推薦淡入淡出，我試過沒加動畫的，感覺特別生硬，用戶還以為是卡了。

而且同一時間只能有一個元素處于懸停態(tài)，不然用戶根本不知道該關(guān)注哪。

聚焦態(tài)是給用鍵盤或者語音操作的用戶準(zhǔn)備的，比如用 Tab 鍵切換元素時，選中的元素會出現(xiàn)一個指示器。這一點做不好，無障礙體驗就會大打折扣。

我見過有些設(shè)計忽略了聚焦態(tài)，用鍵盤操作的時候完全找不到當(dāng)前位置，體驗極差。

點擊態(tài)是用戶操作后的實時反饋，最常見的就是波紋效果。這個反饋一定要及時，不然用戶會懷疑自己沒點上。而且同一時間只能有一個點擊態(tài)，多了就亂了。

拖拽態(tài)是移動元素時的提示，比如拖動列表項、卡片。這個狀態(tài)的視覺效果要低調(diào)，不能搶了其他內(nèi)容的風(fēng)頭。我見過有些拖拽態(tài)做得太夸張，反而讓用戶分心，這就本末倒置了。

這 6 種狀態(tài)覆蓋了大部分交互場景，搞懂它們的區(qū)別，就相當(dāng)于掌握了和用戶溝通的基礎(chǔ)詞匯。

搞清楚了 6 種狀態(tài)是什么，接下來就得說說怎么讓這些狀態(tài)被用戶清晰感知到，這就離不開狀態(tài)層的設(shè)計。

狀態(tài)層其實就是一層半透明的圖層，疊在組件的內(nèi)容層和容器層之間。它的核心作用就是傳遞狀態(tài)信息，又不破壞組件原本的樣式。

并非明智之舉的做法是同時疊加多個狀態(tài)層，Material 3 明確要求同一時間只能疊一個，不然視覺上會很亂。

顏色選擇上有個硬性要求，必須和內(nèi)容層顏色一致。我之前見過有人為了突出狀態(tài)，選了和內(nèi)容層差異很大的顏色，結(jié)果用戶根本沒法把狀態(tài)和組件對應(yīng)起來，反而起了反作用。

不透明度的設(shè)置也有講究，不同狀態(tài)對應(yīng)不同的數(shù)值。比如懸停態(tài)低一點，點擊態(tài)高一點，這樣能區(qū)分狀態(tài)的優(yōu)先級。這些數(shù)值不是隨便定的，都是經(jīng)過大量用戶測試的，跟著 Material 3 的規(guī)范來準(zhǔn)沒錯。

狀態(tài)層的應(yīng)用范圍也靈活，可覆蓋整個組件，也可以只作用于部分區(qū)域。比如圓形按鈕，就可以只在圓形區(qū)域疊加狀態(tài)層，這樣更貼合組件形狀，視覺上也更協(xié)調(diào)。

搞懂了狀態(tài)和狀態(tài)層，最終還是要落到具體組件上。不同的組件，對狀態(tài)的支持程度不一樣，用錯了地方就會出問題。

操作類組件比如按鈕、復(fù)選框，基本都支持啟用、禁用、懸停、點擊這些狀態(tài)。就拿按鈕來說，禁用態(tài)一定要明顯，不然用戶反復(fù)點擊沒反應(yīng)，很容易煩躁。

我之前做過一個項目，按鈕禁用態(tài)只是稍微暗了一點，很多用戶沒看出來，還以為是產(chǎn)品卡了，投訴了好幾次。

容器類組件比如卡片、列表項，支持的狀態(tài)相對少一些，比如卡片支持拖拽態(tài)，能讓用戶拖動排序。但應(yīng)用欄這種需要固定的組件，就不支持拖拽態(tài)，這很好理解，總不能讓用戶把導(dǎo)航欄拖走了吧。

導(dǎo)航類組件比如菜單、標(biāo)簽頁，大多不支持懸停態(tài)和拖拽態(tài)。比如菜單，打開后用戶是點擊選擇選項，懸停態(tài)反而會干擾判斷。還有標(biāo)簽頁，切換的時候靠點擊，拖拽態(tài)完全沒必要。

不同場景下的狀態(tài)設(shè)計，要結(jié)合用戶的使用習(xí)慣。比如移動端用戶大多用觸摸操作，點擊態(tài)的反饋要更明顯。

桌面端用戶用鼠標(biāo)，懸停態(tài)就很重要。如此看來，狀態(tài)設(shè)計不是死記硬背規(guī)范，而是要站在用戶的角度思考，什么樣的反饋能讓他們更順暢地使用產(chǎn)品。

說實話，組件狀態(tài)這東西看著簡單，真要設(shè)計好并不容易。它不像功能那樣直觀，卻是影響用戶體驗的關(guān)鍵細(xì)節(jié)。

Material 3 的規(guī)范給我們提供了很好的參考框架，跟著這個框架，把每一種狀態(tài)的反饋做到位，把不同組件的狀態(tài)適配好，產(chǎn)品和用戶的 “溝通” 自然會更順暢。畢竟，好的產(chǎn)品體驗，從來都藏在這些看不見的細(xì)節(jié)里。