组件状态是用户理解产品交互的核心，虽不直接显示却决定操作逻辑。本文基于 Material 3 规范拆解启用、禁用、悬停等 6 种常用状态类型，详解状态层设计及各状态的适用组件与设计规则，助力打造清晰流畅的交互体验。
今天分享的是「组件状态解析」。
状态类型，是组件或元素当前所处情况的直观体现。虽说状态在界面上往往不会直接显示出来，却是用户理解产品的关键要素。按钮能不能点、现在焦点在哪个元素上、刚完成的操作是什么，这些信息全靠状态来传递。
这里归纳了6种常用的状态类型，以及不同状态的使用方法，一起来看看~
在谷歌的Material 3设计规范里，状态被明确划分成了以下六种类型：
① 启用态
处于这个状态的组件或元素，已经准备好和用户进行交互。
② 禁用态
这个状态下的组件或元素，无法正常使用。比如按钮，启用时容器和文字的对比度很高，清晰易识别；禁用后就会换成低对比度的灰色文字和灰色容器，直观传递 “不可操作” 的信号。
③ 悬停态
当用户把光标停在可交互元素上时，就会触发这个状态。
④ 聚焦态
这个状态指的是元素被键盘、语音等输入方式选中的时候。获得焦点的按钮，容器和文字之间会形成鲜明对比，让用户清晰感知到当前选中的对象。
⑤ 点击态
这个状态会实时反馈用户的点击操作，让用户明确知道自己的点击已经被系统识别。
⑥ 拖拽态
这个状态用来提示用户，当前正在按住并移动某个元素。比如被按压的按钮，容器和文字会有鲜明对比；被拖动的芯片，也会通过视觉变化，让用户清楚看到它正在被移动。
状态层解析
状态层是一种半透明的图层，核心作用是清晰指示出元素当前的状态。通过调整不透明度的方式，把元素的状态直观又系统地呈现出来。
这种图层既可以覆盖整个元素，也可以只应用在圆形区域，不过要注意，同一时间只能给元素叠加一个状态层。
① 内容层 ② 状态层 ③ 容器
这里要补充的是，状态层属于叠加层的一种，每种状态对应的不透明度都是固定的，而且会使用和内容相同的颜色，这样能保证视觉上的一致性和辨识度。
启用状态是指组件或元素处于可交互的状态。当组件启用时，会自动应用为该类交互式组件预设的默认样式。
像按钮、浮动操作按钮（FAB）、开关和文本字段这些常见组件，都有各自对应的启用状态样式。
禁用状态，简单说就是组件或元素处于无法交互的状态。这种状态通常会通过颜色变化和降低视觉存在感的方式，直观告诉用户“当前不可操作”。
禁用状态在操作类、选择类和输入类组件中都很常见，以下这些组件设置禁用状态后，能更清晰地传递交互限制：
不过禁用状态并非适用于所有组件，像容器类、导航类组件，还有部分操作类组件，就不适合用禁用状态：
处于禁用状态的组件，既不能被选中获得焦点，也无法被拖动或按压，就算用户点击或把光标悬停在上面，它的状态也不会有任何变化。
在同一个布局里，同时存在多个禁用状态的组件是可以的，没有数量限制。
悬停状态的触发很简单——当用户把光标停在可交互元素上时，这个状态就会启动。用来提示悬停状态的低强度表面叠加层，既可以覆盖整个组件，也可以只应用在组件内的部分元素上，还能以圆形的形式，针对性地加在组件的特定区域。
像按钮、浮动操作按钮（FAB）、图标按钮和分段按钮这类组件，都支持悬停状态。而且悬停状态还会被操作类、选择类和输入类组件继承使用。
常见的带有悬停状态的组件有这些：
按钮 (Button)、卡片 (Card)、复选框 (Checkbox)、标签 (Chips)、日期和时间选择器 (Date and time picker)、列表项 (List items)、滑块 (Slider)、开关 (Switch)、文本字段 (Text field)
只有应用栏内的各个操作组件才会继承悬停状态。像对话类、容器类或导航类组件，一般都不适用悬停状态。常见的没有悬停状态的组件包括：
应用栏 (App bars)、徽章 (Badges)、对话框 (Dialogs)、菜单 (Menus)、导航栏(NavBar)、浮窗(Sheets)、标签页(Tabs)
补充一点，悬停状态的出现和消失，会搭配低强度的淡入淡出动画，让视觉过渡更自然，不会显得突兀。
还有个重要规则：同一个布局里，同一时间只能存在一种悬停状态。系统会根据光标的位置，把悬停状态只应用在当前对应的那一个元素上。
聚焦状态表示用户已使用键盘或语音输入高亮显示（选中）某个元素。聚焦状态适用于所有交互组件。
我们可以给组件添加叠加层来提示聚焦状态，叠加层的应用方式很灵活——既可以覆盖整个组件，也可以只应用在组件内的部分元素上，还能以圆形的形式，精准加在组件的特定区域。
聚焦状态会被操作类、选择类和输入类组件继承使用。常见的支持聚焦状态的组件有这些：
按钮 (Button)、卡片 (Card)、复选框 (Checkbox)、标签 (Chips)、日期和时间选择器 (Date and time picker)、列表项 (List items)、选择控件 (Selection controls)、文本字段 (Text field)
只有应用栏内部的各类操作组件，才会继承聚焦状态。像大部分对话类、容器类和导航类组件，都不会继承聚焦状态。常见的不适用聚焦状态的组件包括：
应用栏 (App bars)、徽章 (Badges)、横幅 (Banner)、卡片(Card)、对话框 (Dialogs)、导航栏(NavBar)、浮窗(Sheets)
很多用户习惯用Tab键或其他快捷键，来浏览页面上的可交互元素，比如链接、按钮、标签等。
当用Tab键选中某个元素时，这个元素就会进入聚焦状态，同时出现环形的键盘焦点指示器。这个指示器能帮用户清楚知道自己当前在页面的哪个位置，选中后还能直接用键盘操作这个元素。
同一个布局里，同一时间只能有一个组件处于聚焦状态。而且聚焦状态同一时间只能作用于一张卡片。
点击状态，指的是用户用光标点击、键盘操作或语音输入，对元素进行点击或轻触时触发的交互状态。这种状态适用于所有可交互的组件。
点击状态会触发组件视觉效果的变化，所以需要重点突出显示。通常它会以波纹叠加的形式呈现，应用范围很灵活：可以覆盖整个组件，也可以只作用于组件内的部分元素，还能以圆形的形式精准覆盖组件的特定区域。
点击状态会被相关组件继承，通常适用于操作类、选择类，以及部分容器类组件。常见的支持按下状态的组件有这些：
按钮 (Button)、卡片 (Card)、复选框 (Checkbox)、标签 (Chips)、列表项 (List items)、文本字段 (Text field)
导航类，以及部分容器类组件，是不会继承按下状态的。常见的不支持按下状态的组件包括：
应用栏 (App bars)、徽章 (Badges)、底部导航 (BotNav)、对话框 (Dialogs)、菜单 (Menus)、浮窗(Sheets)、标签页(Tabs)
点击状态的触发顺序，会跟随用户执行操作的顺序来显示。当用户通过键盘或语音输入，对可交互元素进行操作时，按下状态就会被激活。
同一个布局里，同一时间只能存在一种按下状态。而且按下状态同一时间只能作用于一张卡片。
拖拽态，指的是用户按住元素或组件并开始移动时，触发的交互状态。
拖拽态的视觉表现要尽量低调，避免分散用户的注意力。我们可以用低饱和度的叠加层来提示这个状态，叠加层既可以覆盖整个组件，也可以只应用在组件内的部分元素上。
另外，像列表项、标签和卡片这类组件，还能通过调整高度来提示拖拽状态。
拖拽态会被相关组件继承，主要适用于部分容器类和选择类组件。常见的支持拖拽态的组件有这些：
卡片 (Card)、标签 (Chips)、列表项 (List items)、滑块 (Slider)
那些需要一直固定在某个位置的组件（比如应用栏），本身就不支持拖拽操作。而且拖拽态不会被操作类、导航类，以及部分容器类组件继承。常见的不支持拖拽态的组件包括：
应用栏 (App bars)、徽章 (Badges)、按钮 (Button)、对话框 (Dialogs)、菜单 (Menus)、导航栏(NavBar)
当用户通过点击、单击等输入方式，按住元素并准备移动时，拖拽态就会被触发。
同一个布局里，同一时间只能有一个元素处于拖拽态。而且拖拽态同一时间只能作用于一张卡片。
状态其实是描述用户和系统当前关系的核心语言。像启用、禁用、鼠标悬停、焦点选中、点击按下、拖动这些状态，能清晰告诉用户当前哪些功能能用、注意力该放在哪，以及刚刚发生了什么操作。
本文由人人都是产品经理作者【Clip设计夹】，微信公众号：【Clip设计夹】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。