clB端设计指南-字体( 二 )

我们可以通过字重来改变页面层级。因为字体越粗，代表阅读视线更加注意，整个信息层级会发生较大变化。而粗字体通常表示我们的标题，也就意味着你的标题是概括下面的所有信息内容。因此通过良好的字重管理，能够帮助我们进行信息层级的区分。

文章插图
五、字体灰色字体灰色的色阶会直接影响页面是否发灰，我们先来看看页面发灰的页面所存在的问题。

文章插图
虽然“发灰”是一种我们设计师的主观感受，但是想要深究其中的逻辑，我们可以通过WCAG规范当中找到更为合适的解答。

文章插图
这里我们将常见的中性色进行平铺，可以根据HSB色值当中的明度得出一个折线图，因为字体使用往往都在后三个色阶，颜色的色值走向也相对更陡。

文章插图
色阶相对更陡的逻辑其实都是源于中性色的使用场景。浅灰色部分主要是以「背景区分、分割线、输入框描边」为主，通过浅灰色来实现对于页面布局的关系。

文章插图
深灰色则主要用于「文字、标题、正文排版」它需要拉开明度的变化来引导视觉关系，进而营造界面的整体层次感。

文章插图
而对于浅灰色与深灰色，行业当中往往存在着一种说法，即「字体灰色可以通过透明度进行控制变化，比如使用 #000 然后将透明度进行随意降低增加」。
当我深究这个问题，发现好像在各大系统当中都会存在这样说法，这真的对吗？

文章插图
通过查看 SAP、Lightning、Ant Design、Element、Clarity Design 等设计规范，对比发现这种说法主要源自国内 Clarity Design 与 Ant Design 两家，不清楚规范的小伙伴可以查阅 B端设计指北 (youthce.com)。
Clarity Design 确实有描述关于字体透明度的问题的一段话：
“我们使用透明度来区分字体层级。当字体应用于浅色背景时，以 #000 为基础来调整透明度；当应用于深色背景时，以 #FFF 为基础。”
仔细阅读可以理解到其核心在于表达字体层级关系，让大家能够快速理解层级的概念而并非教唆大家使用透明度进行字体的使用。
我们再看 Ant Design ，如果只看配图，好像表达的含义确实是通过透明度控制文本颜色和背景颜色之间的关系，但是看一下旁边的描述文字：
“文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。”
但是仔细阅读你会发现，它也只是通过透明度表达层级关系。我去翻看了阿里云、语雀、Teambition 等线上产品，发现他们均没有使用透明度的方式。
那透明度究竟适用吗？使用透明度的字体会有以下三点问题：
1. 字体适应场景不多当字体在一个图片或者有纹理的背景图上，一个带有65%透明度的字体明显会出现字体无法控制的问题。
2. 增加渲染负担使用透明度进行渲染，会增加浏览器的负担，而作为一个全局使用的内容，在可以不使用的情况下，便尽可能不要使用，以免增加不必要的负担。
3. 维护困难因为字体颜色采取透明度，本身就跳脱颜色规范的范畴当中，因此需要单独维护一套字体 Color 的组件库。