国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

組件狀態(tài)是用戶理解產(chǎn)品交互的核心，雖不直接顯示卻決定操作邏輯。本文基于 Material 3 規(guī)范拆解啟用、禁用、懸停等 6 種常用狀態(tài)類型，詳解狀態(tài)層設(shè)計(jì)及各狀態(tài)的適用組件與設(shè)計(jì)規(guī)則，助力打造清晰流暢的交互體驗(yàn)。

今天分享的是「組件狀態(tài)解析」。

狀態(tài)類型，是組件或元素當(dāng)前所處情況的直觀體現(xiàn)。雖說狀態(tài)在界面上往往不會(huì)直接顯示出來，卻是用戶理解產(chǎn)品的關(guān)鍵要素。按鈕能不能點(diǎn)、現(xiàn)在焦點(diǎn)在哪個(gè)元素上、剛完成的操作是什么，這些信息全靠狀態(tài)來傳遞。

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

01 狀態(tài)類型

在谷歌的Material 3設(shè)計(jì)規(guī)范里，狀態(tài)被明確劃分成了以下六種類型：

① 啟用態(tài)

處于這個(gè)狀態(tài)的組件或元素，已經(jīng)準(zhǔn)備好和用戶進(jìn)行交互。

② 禁用態(tài)

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

③ 懸停態(tài)

當(dāng)用戶把光標(biāo)停在可交互元素上時(shí)，就會(huì)觸發(fā)這個(gè)狀態(tài)。

④ 聚焦態(tài)

這個(gè)狀態(tài)指的是元素被鍵盤、語音等輸入方式選中的時(shí)候。獲得焦點(diǎn)的按鈕，容器和文字之間會(huì)形成鮮明對(duì)比，讓用戶清晰感知到當(dāng)前選中的對(duì)象。

⑤ 點(diǎn)擊態(tài)

這個(gè)狀態(tài)會(huì)實(shí)時(shí)反饋用戶的點(diǎn)擊操作，讓用戶明確知道自己的點(diǎn)擊已經(jīng)被系統(tǒng)識(shí)別。

⑥ 拖拽態(tài)

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

狀態(tài)層解析

狀態(tài)層是一種半透明的圖層，核心作用是清晰指示出元素當(dāng)前的狀態(tài)。通過調(diào)整不透明度的方式，把元素的狀態(tài)直觀又系統(tǒng)地呈現(xiàn)出來。

這種圖層既可以覆蓋整個(gè)元素，也可以只應(yīng)用在圓形區(qū)域，不過要注意，同一時(shí)間只能給元素疊加一個(gè)狀態(tài)層。

① 內(nèi)容層 ② 狀態(tài)層 ③ 容器

這里要補(bǔ)充的是，狀態(tài)層屬于疊加層的一種，每種狀態(tài)對(duì)應(yīng)的不透明度都是固定的，而且會(huì)使用和內(nèi)容相同的顏色，這樣能保證視覺上的一致性和辨識(shí)度。

02 啟用態(tài)設(shè)計(jì)解析

啟用狀態(tài)是指組件或元素處于可交互的狀態(tài)。當(dāng)組件啟用時(shí)，會(huì)自動(dòng)應(yīng)用為該類交互式組件預(yù)設(shè)的默認(rèn)樣式。

像按鈕、浮動(dòng)操作按鈕（FAB）、開關(guān)和文本字段這些常見組件，都有各自對(duì)應(yīng)的啟用狀態(tài)樣式。

03 禁用態(tài)設(shè)計(jì)解析

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

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

• 按鈕 (Button)
• 卡片 (Card)
• 復(fù)選框 (Checkbox)
• 標(biāo)簽 (Chips)
• 列表項(xiàng) (List items)
• 單選按鈕 (Radio button)
• 開關(guān) (Switch)
• 文本字段 (Text field)

不過禁用狀態(tài)并非適用于所有組件，像容器類、導(dǎo)航類組件，還有部分操作類組件，就不適合用禁用狀態(tài)：

• 應(yīng)用欄 (App bars)
• 徽章 (Badges)
• 對(duì)話框 (Dialogs)
• 浮動(dòng)操作按鈕 (Fab)
• 菜單 (Menus)
• 導(dǎo)航欄(NavBar)
• 浮窗(Sheets)
• 標(biāo)簽頁(Tabs)
• 工具提示(Tooltips)

處于禁用狀態(tài)的組件，既不能被選中獲得焦點(diǎn)，也無法被拖動(dòng)或按壓，就算用戶點(diǎn)擊或把光標(biāo)懸停在上面，它的狀態(tài)也不會(huì)有任何變化。

在同一個(gè)布局里，同時(shí)存在多個(gè)禁用狀態(tài)的組件是可以的，沒有數(shù)量限制。

04 懸停態(tài)設(shè)計(jì)解析

懸停狀態(tài)的觸發(fā)很簡(jiǎn)單——當(dāng)用戶把光標(biāo)停在可交互元素上時(shí)，這個(gè)狀態(tài)就會(huì)啟動(dòng)。用來提示懸停狀態(tài)的低強(qiáng)度表面疊加層，既可以覆蓋整個(gè)組件，也可以只應(yīng)用在組件內(nèi)的部分元素上，還能以圓形的形式，針對(duì)性地加在組件的特定區(qū)域。

像按鈕、浮動(dòng)操作按鈕（FAB）、圖標(biāo)按鈕和分段按鈕這類組件，都支持懸停狀態(tài)。而且懸停狀態(tài)還會(huì)被操作類、選擇類和輸入類組件繼承使用。

常見的帶有懸停狀態(tài)的組件有這些：

按鈕 (Button)、卡片 (Card)、復(fù)選框 (Checkbox)、標(biāo)簽 (Chips)、日期和時(shí)間選擇器 (Date and time picker)、列表項(xiàng) (List items)、滑塊 (Slider)、開關(guān) (Switch)、文本字段 (Text field)

只有應(yīng)用欄內(nèi)的各個(gè)操作組件才會(huì)繼承懸停狀態(tài)。像對(duì)話類、容器類或?qū)Ш筋惤M件，一般都不適用懸停狀態(tài)。常見的沒有懸停狀態(tài)的組件包括：

應(yīng)用欄 (App bars)、徽章 (Badges)、對(duì)話框 (Dialogs)、菜單 (Menus)、導(dǎo)航欄(NavBar)、浮窗(Sheets)、標(biāo)簽頁(Tabs)

補(bǔ)充一點(diǎn)，懸停狀態(tài)的出現(xiàn)和消失，會(huì)搭配低強(qiáng)度的淡入淡出動(dòng)畫，讓視覺過渡更自然，不會(huì)顯得突兀。

還有個(gè)重要規(guī)則：同一個(gè)布局里，同一時(shí)間只能存在一種懸停狀態(tài)。系統(tǒng)會(huì)根據(jù)光標(biāo)的位置，把懸停狀態(tài)只應(yīng)用在當(dāng)前對(duì)應(yīng)的那一個(gè)元素上。

05 聚焦態(tài)設(shè)計(jì)解析

聚焦?fàn)顟B(tài)表示用戶已使用鍵盤或語音輸入高亮顯示（選中）某個(gè)元素。聚焦?fàn)顟B(tài)適用于所有交互組件。

我們可以給組件添加疊加層來提示聚焦?fàn)顟B(tài)，疊加層的應(yīng)用方式很靈活——既可以覆蓋整個(gè)組件，也可以只應(yīng)用在組件內(nèi)的部分元素上，還能以圓形的形式，精準(zhǔn)加在組件的特定區(qū)域。

聚焦?fàn)顟B(tài)會(huì)被操作類、選擇類和輸入類組件繼承使用。常見的支持聚焦?fàn)顟B(tài)的組件有這些：

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

只有應(yīng)用欄內(nèi)部的各類操作組件，才會(huì)繼承聚焦?fàn)顟B(tài)。像大部分對(duì)話類、容器類和導(dǎo)航類組件，都不會(huì)繼承聚焦?fàn)顟B(tài)。常見的不適用聚焦?fàn)顟B(tài)的組件包括：

應(yīng)用欄 (App bars)、徽章 (Badges)、橫幅 (Banner)、卡片(Card)、對(duì)話框 (Dialogs)、導(dǎo)航欄(NavBar)、浮窗(Sheets)

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

當(dāng)用Tab鍵選中某個(gè)元素時(shí)，這個(gè)元素就會(huì)進(jìn)入聚焦?fàn)顟B(tài)，同時(shí)出現(xiàn)環(huán)形的鍵盤焦點(diǎn)指示器。這個(gè)指示器能幫用戶清楚知道自己當(dāng)前在頁面的哪個(gè)位置，選中后還能直接用鍵盤操作這個(gè)元素。

同一個(gè)布局里，同一時(shí)間只能有一個(gè)組件處于聚焦?fàn)顟B(tài)。而且聚焦?fàn)顟B(tài)同一時(shí)間只能作用于一張卡片。

06 點(diǎn)擊態(tài)設(shè)計(jì)解析

點(diǎn)擊狀態(tài)，指的是用戶用光標(biāo)點(diǎn)擊、鍵盤操作或語音輸入，對(duì)元素進(jìn)行點(diǎn)擊或輕觸時(shí)觸發(fā)的交互狀態(tài)。這種狀態(tài)適用于所有可交互的組件。

點(diǎn)擊狀態(tài)會(huì)觸發(fā)組件視覺效果的變化，所以需要重點(diǎn)突出顯示。通常它會(huì)以波紋疊加的形式呈現(xiàn)，應(yīng)用范圍很靈活：可以覆蓋整個(gè)組件，也可以只作用于組件內(nèi)的部分元素，還能以圓形的形式精準(zhǔn)覆蓋組件的特定區(qū)域。

點(diǎn)擊狀態(tài)會(huì)被相關(guān)組件繼承，通常適用于操作類、選擇類，以及部分容器類組件。常見的支持按下狀態(tài)的組件有這些：

按鈕 (Button)、卡片 (Card)、復(fù)選框 (Checkbox)、標(biāo)簽 (Chips)、列表項(xiàng) (List items)、文本字段 (Text field)

導(dǎo)航類，以及部分容器類組件，是不會(huì)繼承按下狀態(tài)的。常見的不支持按下狀態(tài)的組件包括：

應(yīng)用欄 (App bars)、徽章 (Badges)、底部導(dǎo)航 (BotNav)、對(duì)話框 (Dialogs)、菜單 (Menus)、浮窗(Sheets)、標(biāo)簽頁(Tabs)

點(diǎn)擊狀態(tài)的觸發(fā)順序，會(huì)跟隨用戶執(zhí)行操作的順序來顯示。當(dāng)用戶通過鍵盤或語音輸入，對(duì)可交互元素進(jìn)行操作時(shí)，按下狀態(tài)就會(huì)被激活。

同一個(gè)布局里，同一時(shí)間只能存在一種按下狀態(tài)。而且按下狀態(tài)同一時(shí)間只能作用于一張卡片。

07 拖拽態(tài)設(shè)計(jì)解析

拖拽態(tài)，指的是用戶按住元素或組件并開始移動(dòng)時(shí)，觸發(fā)的交互狀態(tài)。

拖拽態(tài)的視覺表現(xiàn)要盡量低調(diào)，避免分散用戶的注意力。我們可以用低飽和度的疊加層來提示這個(gè)狀態(tài)，疊加層既可以覆蓋整個(gè)組件，也可以只應(yīng)用在組件內(nèi)的部分元素上。

另外，像列表項(xiàng)、標(biāo)簽和卡片這類組件，還能通過調(diào)整高度來提示拖拽狀態(tài)。

拖拽態(tài)會(huì)被相關(guān)組件繼承，主要適用于部分容器類和選擇類組件。常見的支持拖拽態(tài)的組件有這些：

卡片 (Card)、標(biāo)簽 (Chips)、列表項(xiàng) (List items)、滑塊 (Slider)

那些需要一直固定在某個(gè)位置的組件（比如應(yīng)用欄），本身就不支持拖拽操作。而且拖拽態(tài)不會(huì)被操作類、導(dǎo)航類，以及部分容器類組件繼承。常見的不支持拖拽態(tài)的組件包括：

應(yīng)用欄 (App bars)、徽章 (Badges)、按鈕 (Button)、對(duì)話框 (Dialogs)、菜單 (Menus)、導(dǎo)航欄(NavBar)

當(dāng)用戶通過點(diǎn)擊、單擊等輸入方式，按住元素并準(zhǔn)備移動(dòng)時(shí)，拖拽態(tài)就會(huì)被觸發(fā)。

同一個(gè)布局里，同一時(shí)間只能有一個(gè)元素處于拖拽態(tài)。而且拖拽態(tài)同一時(shí)間只能作用于一張卡片。

最后

狀態(tài)其實(shí)是描述用戶和系統(tǒng)當(dāng)前關(guān)系的核心語言。像啟用、禁用、鼠標(biāo)懸停、焦點(diǎn)選中、點(diǎn)擊按下、拖動(dòng)這些狀態(tài)，能清晰告訴用戶當(dāng)前哪些功能能用、注意力該放在哪，以及剛剛發(fā)生了什么操作。