Ant Design 发展到今天，体系越来越完善。今天不说大道理，就给大家科普几个Ant Design 色彩的小知识。

知识点 1. Ant Design 如何区分背景色和填充色?

如果你觉得“区分背景色和填充色”并不是什么难题，请回答：以下出现的所有的蓝色，是背景色还是填充色？

看，这似乎又是一个很难说清的问题。Ant Deisgn 发现，区分背景色和填充色在 UI 设计语言体系的建立中，是不可避免的问题，但我们并没有在同类的产品中，找到现有的、可供参考的、成熟的解决方案。

从字面意思来看，背景色和填充色这两个概念都比较好理解，但又被定义的极为相像：

背景色

• 概念：background color，是用来设置图像的背景颜色，也用来设置文档、表格、图像等的背景颜色。它可以是一种单一颜色，一种渐变，或一张照片。每一种背景色都可以有不同的不透明度（透明度），范围为 0-100。
• 应用实例：

填充色

• 概念：fill color，是用于填补的颜色，填充也是对象背景的另一个名称。如果一个对象没有填充，也没有边框或效果，那么它在界面上将不可见。不过你仍然可以选择它，移动它，修改它。它也将仍然存在于图层列表中。它也可以是一种单一颜色，一种渐变，或一张照片。每一种填充色也可以有不同的不透明度（透明度），范围为 0-100。
• 应用实例：

对于此，Ant Design 用最简单的物理性思维，给出了一个好记又好用的解决方案：

• 区分标准：如果在一个区域内的颜色上放置了前景内容（包括文字和 icon 等），这块颜色就命名为背景色（background color）；如果颜色上没有放置前景内容，这块颜色就命名为填充色（fill color）
• 填充颜色：
  • · system Fill：纤细和小形状填充
  • · secondary Sytem Fill：中等形状叠加填充（且颜色区域内没有放置前景内容）
  • · tertiary System Fill：大形状的叠加填充（且颜色区域内没有放置前景内容）
• 背景颜色：
  • · system Grouped Background：主背景色
  • · secondary System Grouped Background: 主背景色上层的背景色（包括卡片、导航栏等）
  • · tertiary System Grouped Back ground: 主背景色上层的上层的背景色（包括 button、checkbox 的背景色等）
  • 
    

这次，再来看看开篇的那个问题，你有答案了吗？

Ant Design 在下一轮更新后，会将这个概念和定义对所有组件进行统一的应用。

知识点 2. 如何正确的设计“置灰”状态的颜色？

（1）“置灰”状态的定义

“置灰”状态是相对于“常态”而言的，通常情况下代表着当前不可用，或者没有必要使用。我们对 “置灰”状态做进一步的细节分类及定义：

• 完全不可用：已经不能正常使用，且不可以被点击：

按钮不可点击的状态

• 不可用但马上可用：当前没有权限/没到时间使用，未来有权限/到时间之后可以使用：

内容正在加载的状态

• 不可用但可读：已经不能正常使用，但仍然可以浏览或被点击。比如已失效的订单，但仍可以点开订单看到订单的详情。

（2）“置灰”状态的对比度分析

理论上这些 “置灰”状态都需要根据使用场景进行相应的设计与定义，针对这么多样的场景，这里我们不探讨具体的色值，只讲解设计思路。我们先来看看“置灰”效果中存在多少种灰色的梯度。我们将一个组件拆解为最基础元素（不可再拆解元素），最常见以下几种：

• 背景：设计时需要分别考虑与边框和前景的对比度
• 边框：需要考虑与背景的对比度
• 前景：需要考虑与背景的对比度

W3C 最新发布的 WACG2.1 对于文本对比度和视觉效果呈现的 AA 标准规定指出：

非必要的内容：作为非活动用户界面组件一部分，纯装饰，不做对比度要求
如果文本不是粗体且大于 18pt，或者文本是粗体且大于 14pt：要确保文本（和文本图像）与文本后面的背景之间的对比度至少为 3：1

“置灰”状态为非活动状态，是相对边缘的状态，在整个页面中的信息阅读等级属于低等级。我们从其可读性和功能性这几个角度出发，确定了以下几个设计原则：

• 最低对比度需要保证整体组件的可读性
• 前景和背景之间的对比度大于边框和组件之间的对比度，以保证置灰状态下重点内容的易读性
• 最高对比度标准要避免置灰的禁用功能在页面中过于出跳，因此要小于 WACG2.1 规定的 3：1
• 如果置灰状态的内容中有多个层级的信息，可参考以上三条逻辑，进行重复叠加推导

基于以上原则，我们可以大致确定出“置灰”状态下组件的每个元素色彩的对比度（以下给出一组参考值）：

1：1 < 背景与边框的对比度 ≤ 1.5：1
1.25：1 ≤ 前景与背景的对比度 ≤ 2：1
背景与边框的对比度 < 前景与背景的对比度

例如：Ant Design 现在的解决方案：

背景与边框的对比度为 1.29：1； 前景与背景的对比度为 1.68：1

（3）“置灰”状态的新思考

对于“置灰”状态，我认为 Ant Design 还有其他探索和升级的可能。例如以下问题：

• 同一场景下，主、次要组件的“置灰”状态是否需要做区分？要怎样区分？

Ant Design 的主按钮和次按钮，目前的置灰效果是一致的

• 已被选中的或已开启状态的功能按钮，在置灰状态时是否需要保持选中或开启的状态特征？

Ant Design 的开关和多选框的置灰状态，目前在用色逻辑上存在一定的更新空间

针对这些类似的问题，我们正在披星戴月、快马加鞭的分析和定义中，相信不久后就会与大家见面。感兴趣的小伙伴可以直接关注我的知乎号 @元尧，第一时间为大家更新有关 Ant Design 的热乎乎的内容～

知识点 3. 为什么暗色模式的默认背景色不能用 #000000？

原因 1：减缓用眼疲劳

Material Design 和 iOS 系统 都引入了制作暗色模式的指南，以补充产品现有主题。Ant Design 也在积极的探索自己的暗色模式设计理念。与 Material Design 一致，Ant Design 在背景色的选择上更偏爱深灰色。其官方给出的论证后的解释是：在深灰色背景上使用浅色字体的对比度会比在黑色背景上低，更有助于减缓用眼疲劳。

可以对比一下右边两个页面的呈现效果，深灰色背景会更显柔和，且不影响阅读

原因 2：体现页面的层次感

我们都知道，有些元素或组件的设计是带有投影的，并且有时我们会依靠投影来区分页面的信息层次。使用深灰色背景也更容易看到灰色阴影，体现页面层次。

阴影可以有效体现元素在页面所处的高度和层级

原因 3：有助于画面的动态呈现

这一点需要我们了解 OLED 屏幕的发光原理。OLED 屏幕背后的每个像素会自己发光，可独立控制，在显示画面时关闭不需要的画素还可以降低功耗。你可以简单的理解为：OLED 屏幕上的纯黑色，背后的像素点是不需要开启的。而当屏幕上画面和文字的变化，打开和关闭像素会导致屏幕滚动时出现延迟，会使元素出现拖影而变的模糊，如下图所示，所以通常会避免使用 100% 的纯黑色，可以考虑用 #010101 这样的深灰色进行替代黑色。

在运动的过程中，由于像素在开启和关闭中切换，导致元素呈现模糊效果

Powered by Froala Editor