首发于Ant Design
这几个 Ant Design 色彩的小知识,我猜你不知道!

这几个 Ant Design 色彩的小知识,我猜你不知道!

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 这样的深灰色进行替代黑色。

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


知乎关注设计师 @元尧,第一时间为大家更新有关 Ant Design 的热乎乎的内容~期待与你有更多交流!

编辑于 10-24

文章被以下专栏收录