UI设计规范中文字色彩的透明度

相信大家都有制作设计规范的经历，在设计规范中文字颜色部分我们经常根据文字的不同层级对其进行不同的定义。但是大家有没有遇到过使用定义好的颜色做设计在有的情况下会出现识别不清晰，以及和背景色搭配起来不美观的情况。

而解决上述问题我们可以用给文字色彩更改透明度的办法解决。这个方法也是谷歌设计规范中推荐的方法

https://material.io/design/color/text-legibility.html#grid-and-keyline-shapes。

今天像素妹儿和大家来简单聊一聊如何做文字色彩透明度。

我们先来看下文字纯色定义经常会出现的问题

一般我们对于app中主要文字颜色会大致依据“重要文字”、“常规文字”、“辅助文字”这样来定义。而这些文字色彩是建立在“文字处于页面背景色之上”这一假设上设置的。实际上界面中除了背景色，还会有许多诸如品牌色、辅助色这一类与背景色有着很大差别的色彩。

当文字与这些颜色的元素搭配时就有可能出现一些尴尬的状况。

如下图中相同颜色文字出现在品牌色背景上，文字识别就出现了问题，而且文字也像是浮在背景上一样。

我们对文字颜色进行以下设置，文字颜色选取纯黑#000000并将透明度降低

效果如下

左边通过降低不透明的文字识别没有问题了，而且细节也提升了，文字颜色中也融合了背景的颜色，不再有浮在背景上的感觉。

其实不光文字，一些其他的元素也可以用这个方法来设置，比如表格的分割线。我们也来看一下。

我们常用的分割线填充的颜色通常比较淡，在遇彩色背景时就不容易显示甚至“隐身”。下图中，同样填充色的分割线在有悬停效果的表格（右侧）上时就”隐身“了。

接下来看一下通过给色彩设置不同透明度的效果。对分割线填充色进行以下设置

效果如下

可以看出左边分割线显示出了比表格本身颜色更深的蓝色，比右边表格的颜值有了提升。从这里也能看出设计师对于细节的把控。

那么这个方法如何落地呢？接下来我们就来讲下工作中如何使用这个方法。

第一步

首先我们需要考虑我们文字的使用场景，大致分为三种：浅色背景、深色背景、彩色背景。这里我们需要以自己的实际项目情况为考量依据去确定使用场景。

第二步

对深色和浅色背景下的文字色彩做出定义，具体操作如下

浅色背景下将文字分为重要、次要、辅助三个层级，颜色填充#000000，不透明度分别设置为87%、60%、38%。

深色背景下将文字分为重要、次要、辅助三个层级，颜色填充#ffffff，不透明度分别设置为87%、60%、38%。

注：不透明度参数可以根据实际项目做调整。

彩色背景下，视情况采用深色或浅色下文字颜色。

第三步

在定义好之后，我们需要通过对比度测试去检验自己定义的不透明度。

https://contrast-ratio.com/#%23666666-on-%23000000

以为这样就结束了？那你就太天真了~

我们做完了设计稿，最终是要开发小哥哥去实现的，并不是所有的开发小哥哥都知道并且愿意使用不透明度这个系统的，这个时候我们就需要用我们的魅力专业知识去说服他了。

就像把大象关进冰箱一样，我们说服理由也三步走

1、可开发

谷歌的Material Design官方文档明确的提出了这一方法，说明这个方法在开发层面是没有问题的。

附官方网址：

https://material.io/design/color/text-legibility.html#grid-and-keyline-shapes

2、开发难度系数不高

因为文字中颜色的不透明度在之前需要换算，比较麻烦。这也是有些程序员小哥哥不喜欢他的原因，但是现在有了蓝湖这一工具之后，只要在颜色中将hsb切换为rgba这一模式便可直接看出透明度的参数，可谓方便快捷。

3、提升效率

在之前我们举了分割线填充采用设置透明度做法的例子。这里就可以用上啦。如果我们做出下图中正确的分割线效果，我们就需要做很多颜色的分割线，那么开发需要一个个的写代码写出来，这个工作量是很大的。如果采用了不透明度的设置，那么只需要开发一次就可以一直复用了，效率提升不止一点点。

今天讲的给文字（以及分割线）透明度系统也并不是一劳永逸，希望大家在实际工作中留意，并且找到适合自己和自己项目的方法。

我们下期再见啦