让你彻底弄明白组件设计中的6种状态类型

我们知道要想彻底理解产品交互的核心，那肯定离不开要弄明白组件状态，在这里虽不直接显示但它决定了操作逻辑。今天小编基于 Material 3 规范拆解启用、禁用、悬停等 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)

当用户通过点击、单击等输入方式，按住元素并准备移动时，拖拽态就会被触发。

同一个布局里，同一时间只能有一个元素处于拖拽态。而且拖拽态同一时间只能作用于一张卡片。

最后

状态其实是描述用户和系统当前关系的核心语言。像启用、禁用、鼠标悬停、焦点选中、点击按下、拖动这些状态，能清晰告诉用户当前哪些功能能用、注意力该放在哪，以及刚刚发生了什么操作。