哈喽，这里是Clip设计夹，今天分享的是「组件状态解析」。
状态类型，是组件或元素当前所处情况的直观体现。虽说状态在界面上往往不会直接显示出来，却是用户理解产品的关键要素。按钮能不能点、现在焦点在哪个元素上、刚完成的操作是什么，这些信息全靠状态来传递。
图片
这里归纳了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)
图片
当用户通过点击、单击等输入方式，按住元素并准备移动时，拖拽态就会被触发。
图片
同一个布局里，同一时间只能有一个元素处于拖拽态。而且拖拽态同一时间只能作用于一张卡片。
 
最后
状态其实是描述用户和系统当前关系的核心语言。像启用、禁用、鼠标悬停、焦点选中、点击按下、拖动这些状态，能清晰告诉用户当前哪些功能能用、注意力该放在哪，以及刚刚发生了什么操作。
图片
如果这些状态都遵循统一的设计规则，用户不用额外学习，就能自然而然地看懂界面。