Material Design——状态设计（上）

状态是组件或可交互元素的视觉表达方式。

内容

使用
视觉解析
禁用状态
悬停状态
焦点状态
选中状态
激活状态
按下状态
拖动状态

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

一. 使用

UI元素与用户之间交流是通过状态来实现的，每一种组件状态需要在视觉上相似但组件本身没有过大的改变，与此同时，当前状态要与其它状态及周围的布局有明显的区别。

当前状态要与其它状态及周围的布局有明显的区别

1. 设计原则

区分：当前的状态与其他状态及周围的UI有明显的区别，并在视觉设计中根据重要程度进行设计

可叠加：当多种状态同时发生时，例如同时进行选中和悬停操作，则需要同时显示两种状态的视觉效果

一致性：为了增加可用性，组件的状态应该保持一致性

2. 状态的类型

启用/禁用

启用 ：启动状态代表组件或元素被激活

禁用：禁用状态代表组件或元素未被激活

悬停/焦点

悬停：悬停状态代表用户将鼠标放在可交互元素的上方

焦点：焦点状态代表用户使用键盘或声音输入等方式使某个元素被高亮显示

选中/激活

选中：选中状态代表用户的一个决定

激活：激活状态代表无论是用户手动或是系统默认导致某个组件或可交互元素被触发并高亮显示

按下/拖动

按下：按下状态代表用户的一次轻触

拖动：拖动代表用户按住并移动一个元素

打开/关闭

打开：打开状态是在打开、关闭这两个切换状态的其中一种状态

关闭：关闭状态是在打开、关闭这两个切换状态的其中一种状态

错误

错误：错误状态代表了用户或系统出现了错误

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

二. 设计解析

1. 叠加

在一个元素上方叠加半透明图层用来代表状态，它提供了一个将状态视觉化的系统方法。

叠加可以被应用在整个元素或在元素上方叠加半透明的圆形。叠加的颜色需要与元素本身的文字及图标颜色相符，如果在改变状态后文字和图标的颜色产生了变化，那叠加的颜色应该与文字和图标最后显示的颜色相符。

（1）叠加在列表项上 （2）叠加在纸片上（3）叠加在选中组件上 （1）叠加与阴影高度结合用来表示某些组件的的状态 （2）图标与叠加结合用来表示某些组件的状态 （1）颜色的改变可表示状态 （2）额外的文字信息可表示状态

2、叠加的透明度值

为了确保合适的对比度和可见度，叠加的颜色透明度应该根据不同的文字及背景组合来调整。

（1） 在白色（#FFFFFF）背景上叠加颜色透明度时，采用黑色（#000000）或者主题色（本例为#6200EE）的对应透明度 （2）在主题色（本例为#6200EE）背景上叠加颜色透明度时，采用白色（#FFFFFF）的对应透明度

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

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