Material Design——状态设计（下）

一. 禁用状态

禁用状态代表组件或元素是不可交互，且在UI设计中不需要着重强调。
禁用状态有两种表示方法：
颜色的改变，禁用状态的颜色建议使用启用状态颜色的38%。
颜色的改变和阴影高度的降低，也可用来代表禁用状态。

启用状态/禁用状态

（1）启用状态
（2）通过不同的颜色和阴影高度来展现按钮的禁用状态（按钮颜色为#CCCCCC，文字颜色为8A8A8A，阴影高度为0）

1.其他组件的禁用状态

其他组件，比如切换按钮、选择组件、文本输入框、图标、网格和列表项、卡片、纸片和按钮都有禁用状态

（1）切换按钮 （2）选择控件（3）文本输入框（4）列表项

但是一些组件没有禁用状态，比如：浮动操作按钮、底部卡片、侧边卡片、工具提示、警告、导航性控件（例如应用栏、标签栏、底部导航栏和步进器）。如果浮动操作按钮中的行为是无用的，则浮动操作按钮不应该出现在界面中。

错误：（1）浮动操作按钮 （2）底部卡片 （3）应用栏 没有禁用状态

2. 行为

当鼠标悬停或轻触禁用组件时，禁用组件的状态不会改变

鼠标悬停/轻触 禁用状态不可能与以下四个状态同时存在（1）悬停状态 （2）焦点状态（3）拖动状态（4）点击状态

在一个页面中，可能存在0、1或者多个处于禁用状态的元素或组件

（1）切换组件的禁用状态（2）按钮的禁用状态

—————————————————————————————————

二. 悬停状态

1. 用法

悬停状态是指用户将鼠标放置在可交互元素上。悬停状态可在所有可交互组件中使用，但不需要着重强调以避免对内容产生影响。

叠加图层可用于表示悬停状态，它既可以用在整个组件上，也可以用于组件中的某个元素或者使用圆形图层的一部分叠加在组件上。

（1）透明度叠加应用在组件的某个元素上 （2）透明度叠加在整个组件上 （3）以圆形的形式叠加在组件上 （1）一些组件，比如按钮和卡片，可以增加阴影的高度来表示悬停状态 （1）当鼠标悬停在组件上，有额外的组件出现

2. 其他组件的悬停状态

按钮、快速操作按钮、切换按钮、选择控件、网格列表项、列表项、卡片、纸片、文本输入框和图标都存在悬停状态

以下控件均存在悬停状态（1）图标（2）文本输入框（3）卡片（4）按钮

可交互的元素也存在悬停状态

控件中的某些元素或组件中的一部分可存在悬停状态，如（1）应用栏的图标（2）活动表单（3）标签栏项（4）列表项

但是应用栏、标签栏、底部导航栏、表单、对话框、警告、菜单和步进器不存在悬停状态

错误：（1）表单（2）应用栏（3）对话框都没有悬停状态

3. 行为

悬停状态是指用户将鼠标放置在可交互元素上

悬停状态的使用较低的强调性“渐隐动画”来表示出现和消失

悬停状态可与焦点状态、激活状态、选中状态、或按下状态同时存在

焦点状态可同时与以下状态同时存在：（1）悬停状态（2）激活状态（3）选中状态（4）点击状态

同一个布局中只有一个元素是悬停状态

基于鼠标的位置，只有一个元素是悬停状态

4. 叠加图层透明度数值

为了确保合适的对比度和可访问性，叠加的颜色透明度应该根据不同的文字及背景组合来调整。为了与界面内容有所区分，悬停状态应该使用较低的透明度值

（1）背景：100% #FFFFFF
文字：100% #000000
叠加： 4% #000000

（2）背景：100% #6200EE
文字：100% #FFFFFF
叠加： 8% #FFFFFF

（3）背景：图片
叠加：16% #000000

三. 焦点状态

1. 用法

焦点状态代表用户使用键盘或者声音使某个元素被高亮标记。焦点状态可以应用在所有可交互组件中。

当一个组件没有展现其他状态时，焦点状态应该被着重强调。

同样，可以使用图层叠加来表示焦点状态，它既可以用在整个控件上，也可以用于控件中的某个元素或者使用圆形图层部分叠加在控件上。

（1）图层叠加应用在控件的某个元素上（2）图层叠加在整个控件上（3）以圆形图层叠加在控件上 （1）一些控件，比如按钮、纸片和卡片，可以增加阴影的高度来表示焦点状态 （1）当出于焦点状态时，额外的控件出现

2. 其他控件的悬停状态

按钮、快速操作按钮、 切换按钮、选中控件、网格列表项、列表项、卡片、纸片、文本输入框和图标都存在焦点状态。

（1）图标的焦点状态（2）文本输入框的焦点状态（3）卡片的焦点状态 （4）文字按钮的焦点状态 可交互的元素也存在焦点状态，比如（1）应用栏的图标（2）可操作组件 （3）标签栏元素（4）列表项 错误：焦点状态不可能在整个应用栏、表单、对话框中出现

3. 行为

焦点状态是用户使用键盘输入或者声音输入控制某个可交互元素而产生的，当用户完成声音或键盘操作后焦点状态自动消失

使用渐隐动画来表达焦点状态的出现和消失

焦点状态可以与悬停状态、激活状态或选中状态同时存在

焦点状态可同时与以下状态同时存在：（1）悬停状态（2）激活状态（3）选中状态

同一个布局中只有一个元素是焦点状态

同一个布局中只有一个元素是焦点状态

4. 图层叠加的透明度值

为了确保合适的对比度和可访问性，图层叠加的颜色透明度应该根据不同的文字及背景组合来调整。当一个控件没有展现其他状态时，焦点状态应该使用较高的透明度叠加。

（1）背景：100% #FFFFFF
文字：100% #000000
叠加： 12% #000000

（2）背景：100% #6200EE
文字： 100% #FFFFFF
叠加： 24% #FFFFFF

（3）背景：图片
叠加：36% #000000

四. 选中状态

1. 用法

选中状态是指用户通过手指、鼠标、键盘或声音等输入设备从众多选项中确定了一个选项。设计选中状态时既要让它有辨识度，又不能对内容产生影响，因此它的强调程度为中等。

图层叠加可用来表示选中状态，它即可以用在控组件的元素上，也可以用在整个组件上。

（1）叠加可用在控件对某个元素中（2）叠加可用在整个控件中 选中状态由（A）图层叠加和（B）图标的组合来表示

2. 其他控件的悬停状态

图片列表项、列表项、纸片、卡片、数据表单、菜单项和选择器都有选中状态

（1）图片列表项（2）列表项（3）卡片（4）纸片

应用栏、背景面板、底部导航栏、sheets、对话框、警告、菜单和步进器都没有选中状态

以下组件没有选中状态（1）按钮（2）文字输入框（3）应用栏（4）对话框

3. 行为

选中状态是用户在众多选项中确定一个或多个选项而产生的。

使用渐隐动画表达选中状态的出现和消失

选中状态可与悬停状态、焦点状态、按下状态和拖动状态同时存在

（1）选中状态与悬停状态同时存在（2）选中状态与焦点状态同时存在

同一个布局中可能同时存在多个选中状态

多个选中状态同时存在

4. 图层叠加的透明度数值

为了确保合适的对比度和可访问性，图层叠加的颜色透明度应该根据不同的文字及背景组合来调整。选中状态的设计既要有辨识度，又不能对内容产生影响，因此它的强调程度为中等。

（1）背景：100% #FFFFFF
文字：100% #6200EE
叠加： 8% #6200EE

（2）背景：100% #6200EE
文字：100% #FFFFFF
叠加： 16% #FFFFFF

（3）背景：图片
叠加：24% #000000

五. 激活状态

1. 用法

激活状态代表一组选项中当前正在被查看的选项。系统默认或者用户使用手指、鼠标、键盘或声音的输入方式进行选择。激活状态的强调程度应该为高等级。
图层叠加、颜色改变或者其他应用在组件某个部分或组件元素的视觉方案，均可用来表示激活状态。

（1）图层叠加可表示激活状态 （2）线性元素可表示激活状态

2.其他组件的激活状态

激活状态与选中状态的不同点是，激活状态让用户选择的目的地被高亮显示。
导航列表项、标签项、底部导航栏项、步进器项、选择纸片或者切换按钮。

（1）切换按钮 （2）底部导航栏按钮 （3）选择纸片 （4）标签项 都有激活状态

按钮、浮动操作按钮、选择控件、滑块、应用栏、底部和侧边sheets、对话框或者警告。

错误：按钮和对话框没有激活状态

3. 行为

激活状态由系统默认或者用户选择来触发。

使用渐隐动画来展现激活状态的出现和消失

激活状态能与悬停状态和焦点状态同时存在

激活状态能与悬停状态和焦点状态同时存在

在一组选项中，同一时间只有一个选项是激活状态

同一布局中，导航性列表只有一个选项被激活

3. 图层叠加的透明度数值

为了确保合适的对比度和可访问性，图层叠加的颜色透明度应该根据不同的文字及背景组合来调整。由于激活状态并非总是用户触发的，因此激活状态的图层叠加拥有较高的图层透明度数值。

（1）背景：100% #FFFFFF
文字：100% #6200EE
叠加： 12% #6200EE

（2）背景：100% #6200EE
文字：100% #FFFFFF
叠加 ： 24% #FFFFFF

（3）背景：图片
叠加：36% #000000

六. 按下状态

1. 用法

按下状态是指用户使用手指、鼠标、键盘或声音等输入方式触发轻触或点击操作。按下状态能应该在所有可交互的控件上。

按下状态引起了一组内容的改变，并且强调程度为高等级。

波纹图层叠加可用来表示按下状态，它即可用在组件中某个元素或整个组件上，也可以用圆形图层应用在整个控件上。

（1）波纹图层叠加应用在控件的某个元素上（2）波纹图层叠加应用在整个控件上（3）圆形图层叠加应用在整个控件上

一些控件，比如按钮或卡片也可以同时使用阴影高度来表示按下状态

阴影高度在按钮和卡片上的应用

2. 其他控件的按下状态

按钮、快速操作按钮、切换按钮、选择控件、网格列表项、列表项、卡片、纸片、文本输入框和图标都有按下状态

以下控件都有按下状态（1）图标（2）文本输入框（3）卡片（4）按钮

可交互的元素也具有按下状态

控件中可交互的元素或部分也有按下状态，如（1）应用栏图标（2）活动条 （3）标签栏项（4）列表项

应用栏、标签栏、底部导航栏、sheets、对话框、警告、菜单和步进器没有按下状态

（1）表单（2）应用栏（3）对话框 没有按下状态

3. 行为

按下状态是用户使用键盘或声音输入操作一个可交互元素而触发的。

按下状态可以和悬停状态、焦点状态、激活状态和选中状态同时存在

（1）按下状态与悬停状态同时存在（2）按下状态与焦点状态同时存在（3）按下状态与激活状态同时存在（4）按下状态与选中状态同时存在

同一个布局中只能同时存在一个按下状态

4. 图层叠加的透明度数值

为了确保合适的对比度和可访问性，图层叠加的颜色透明度应该根据不同的文字及背景组合来调整。因为按下状态触发了布局的改变，因此它的透明度数值应该较高。

（1）背景：100% #FFFFFF
文字：100% #000000
叠加： 16% #000000

（2）背景：100% #6200EE
文字：100% #FFFFFF
叠加：32% #FFFFFF

（3）背景：图片
叠加：48% #000000

七. 拖动状态

1. 用法

拖动状态在用户按下并移动一个组件或元素时被触发。为了避免用户在任务中分心，拖动状态的强调程度为低等级。

图层叠加可用来表示拖动状态，它即可用在组件中某个元素上，也可以应用在整个组件上。

（1）叠加应用在组件的某个元素上（2）叠加应用在整个组件上

一些组件，比如列表项、纸片或卡片也可以同时使用阴影高度来表示拖动状态

阴影高度在卡片和列表项上的应用

2. 其他控件的拖动状态

网格列表项、列表项、卡片和纸片都有拖动状态

以下控件都有拖动状态（1）列表项（2）网格列表项（3）卡片（4）纸片

应用栏、按钮、底部导航栏、对话框、警告、菜单和步进器没有拖动状态

以下控件没有拖动状态（1）按钮（2）应用栏（3）对话框（4）文本输入框

3. 行为

拖动状态是用户使用手指或鼠标按下并保持这一操作来触发的

同一个布局中只能同时存在一个拖动状态

4. 图层叠加的透明度数值

为了确保合适的对比度和可访问性，图层叠加的颜色透明度应该根据不同的文字及背景组合来调整。为了避免用户在当前内容中分心， 拖动状态的透明度数值应该较低。

（1）背景：100% #FFFFFF
文字：100% #000000
叠加： 8% #000000

（2）背景：100% #6200EE
文字：100% #FFFFFF
叠加： 16% #FFFFFF

（3）背景：图片
叠加：32% #000000

参考文献：
Material Design/States : https://material.io/design/interaction/states.html#

关于我
一枚在职交互设计师，不定期更新设计规范翻译文章，如果你喜欢我的文章，扫一扫下方的二维码，关注我吧