实例解析夜间模式设计的通用方法

原则5：必要时为过亮元素添加黑色透明度遮罩

由于界面元素的多样性，例如头像、歌曲、新闻。该类元素如果不能满足亮度和对比度(3:1-7:1)的要求，需要在其上方添加黑色透明遮罩(不透明度40%-50%)，从而降低对比度和亮度，使界面元素的亮度尽力满足对比度(3:1-7:1)的要求。

3. 设计方法步骤

为了让大家更简单地理解，我们把整个设计过程绘制出来，见下图：

确定通用性色彩→选择色彩亮度→确定文字对比度→为元素添加遮罩降低元素亮度对比度→设备检测界面尼特值。

实际案例应用 —— QQ iPad版夜间模式设计

1. 检测现有界面——不能满足夜间模式要求

依据5项原则去评价现有QQ iPad版界面——白色版与黑色版，每个版本都有各自不能满足原则要求的地方。如下图所示：

2. 依据方法步骤逐步完成

1)选择通用性色彩作为主色系

利用软件Sim Daltonsim for Mac可以观察到，无色彩系列对色盲人群来说，和普通人群的识色差异不大。因此，我们选择无彩色系列作为背景和文字的颜色，减轻色盲等特殊人群的负担：

2)选择低亮度色彩(避免纯黑)

依据QQ 品牌色推荐的无彩色透明度色阶，我们通过色彩亮度公式进行逐个计算，最终符合底色标准的颜色定在#191919-#333333之间。

3)选择并微调颜色使文字与背景对比度满足3:1-4.5:1范围之间

确定底色后，挑选色阶上的其他颜色作为文字的颜色，利用软件Colour Contrast Analyser进行测试，尽量满足文字对比度的比值在3:1-4.5:1的范围。通过微调，文字方案如下：

4)添加遮罩，保证其他元素达到满足在3:1-7:1之内

由于界面元素的多样性，例如头像、歌曲、新闻。由于色彩的多样性，不能满足对比度要求。我们在其上方添加黑色透明遮罩(不透明度50%)之后，对比度全部低于7:1，满足了规则的要求: