夜间模式设计方法（下）：设计步骤

原文链接

一、四步骤概括

选颜色  选亮度  选对比度  加遮罩

二、具体步骤

1.选颜色——选择通用性色彩作为主色系

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

2.选亮度——选择低亮度色彩（避免纯黑）

以QQ为例，依据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，满足了规则的要求:

5.整体尼特值检测，选择尼特值更接近0.034的方案：

图片发自App

三、其他建议

1.夜间模式与官方界面的设计除颜色之外，不要对图形、结构、交互等有其他改变，减少用户学习成本。

2.自动调节界面的功能，可以通过感受环境光来切换夜间模式，也减少了用户的操作步骤。

3.夜间模式与官方白切换时，可以更平滑的过渡动画呈现，让用户能够适应场景转换。