艾萨克·牛顿|B端设计 | 设计师必须了解的色彩系统搭建( 六 ) 色调|饱和度|设计|颜色|Color|色

文章图片
根据上文，我们知道前景色有时候也会为透明度，在我们建立色彩系统选色的时候就需要用到Materiel Design的可读性检测网站了：
https://material.io/resources/color/

文章图片
从上图我们可以看到，在我们选好主色，并且主色为背景的情况下，对应的黑色、白色和我们自定义文字颜色，在我们选好的主色上的是否有可读性，如果有，最低的透明度的值是多少可以满足可读性。
3.8 交互状态颜色（Inactive States Colors）
B端交互状态颜色的设计原则是：
明显的：状态必须有明确的不同将它们与其他和周围的 UI 设计和交互状态区分开来，并根据其优先级进行强调。
连续的：交互状态的改变要做到连续的，不能是跳跃性过大。
一致的：交互状态应该在不同组件之间保持，以提高可用性。
常见的交互状态我们依然参考Material Design ，如下图：

文章图片
默认态 Normal/Enable：启用状态表示组件或元素可交互。
悬停态 Hover：当用户将光标置于交互元素上方时，出现悬停交互状态。
点击态 Pressed：当用户按下时的交互状态。
聚焦态 Focused：当用户使用键盘或语音等输入方法突出显示元素时，出现聚焦状态
禁用态 Disabled：禁用状态表示组件或元素不可交互。
已选择 Selected：表示用户已选择的状态。
激活态 Activated：激活状态传达突出显示组件或交互元素，表示已激活。
拖拽 Dragged：当用户点击后拖拽移动元素或组件。
开关（启用/禁用）on/ff：上图中将checkbox和radio也放在了开关内， checkbox和radio状态其实需单独列出，并叠加其他状态。
功能状态 Status：含在错误、警告、成功、信息时的状态。
在b端设计中，常见的是将Normal、Hover、Press、Disable状态的色彩列出，其余状态配合组件显示。
常见的用色彩表示状态的方式有以下4种：
方式一：利用色板的颜色梯度来表示状态，比如Ant Design ，如下图：

文章图片
方式二：用利用透明度创建梯度表示状态，如下图：

文章图片
方式三：利用HSB来创建色彩梯度表示状态：

Hover：H不变 S加10 B减5
Pressed：H不变 S加20 B减10
Disable：HSB均不变，不透明度 30%

方式四：利用Overlay的透明度创建梯度：
之前提到的前景、遮罩、背景概念在这里就派上用场了，我们来用Material Design来做例子，如下图：

文章图片
需要注意的是，遮罩的的基色是是与前景色一致的。
3.9 梯度（Elevation）
在界面中，阴影的大小可以使界面产生高低不同的层级感。
比如在B端设计中， Drawer、Dialog等弹窗出现时，伴随的就是阴影。
阴影是为了创造界面中的z轴层级而出现的。可以通过透明度创造“投影远近”来定义。也可以根据Material Design的阴影梯度来调整，如下图：