一、四步骤概括
选颜色 选亮度 选对比度 加遮罩
二、具体步骤
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的方案：
夜间模式设计方法（下）：设计步骤
三、其他建议
1.夜间模式与官方界面的设计除颜色之外，不要对图形、结构、交互等有其他改变，减少用户学习成本。
2.自动调节界面的功能，可以通过感受环境光来切换夜间模式，也减少了用户的操作步骤。
3.夜间模式与官方白切换时，可以更平滑的过渡动画呈现，让用户能够适应场景转换。
网友评论