腾讯ISUX-华罗:你有晚上用移动设备的习惯吗？你觉得QQ现有的夜间模式亮度用起来舒服吗？为了更科学的验证我们的设计，我们通过对比分析、Nite值测试、色彩亮度和色彩普适性来设计界面，并总结出一套优化方法来互相分享和启发。

我们为什么做夜间模式？

1.用户调查显示，57%的用户希望使用夜间模式，71.1%的用户习惯于晚上不开灯看手机

在ISUX北京课题组的帮助下，我们对移动终端上QQ界面的夜间模式进行了研究。从2000多份调查问卷的分析中发现，用户对夜间模式有明确的需求，大部分人使用的是没有灯光的软件。

2.用户反馈现有界面晚上用起来刺眼，亮度低的时候界面文字不清晰

发现现有界面的用户在夜间使用时感觉眼花缭乱，长期使用感觉眼睛疼痛。有些用户认为字符看不清，识别比较费眼。

3.用户期望更暗、更友好的夜间模式设计

从用户对夜间模式的预期来看，他们希望主界面的颜色更暗，软件可以更持久地使用。我希望我们的设计师能设计出一种更人性化的夜间模式。

我们如何设计夜间模式？

1.亮度、色彩对比度、通用色是重点，行业趋势趋向于低饱和度的非彩色

1)关注健康人眼的特性——对亮度的需求

首先介绍nit值(nit)，nit值是用于量化亮度强度的专业术语，意思是每平方米烛光的强度:1nit=1坎德拉/平方米；

白天，人的眼睛能适应高于3.4 nits的亮度值；

到了晚上，被摄体的颜色接近0.034 nits，最亮元素的亮度低于3.4 nits。

2)关注弱视、色盲和色弱人群——对比度和色彩多功能性的需求

老年人或者视力弱的人对对比度要求比较高，所以看不清，要选择比较合理的对比度。颜色淡的人和我们看到的颜色不一样。所以以后在选择色彩度的时候，要选择更通用的色彩设计方案。

3)行业趋势——减少极端颜色，主要是无色颜色

行业趋势方面，2016年，Google Material Design和iOS先后推出了夜间模式、黑暗主题设计和护眼模式。很多黑暗界面设计也是从其他权威网站上找来的。最后得出界面主体趋于无色黑色的结论。柔和、低饱和度的颜色可以增加用户长时间观看界面的舒适度。

2.五晚模式设计原则

通过文献检索和多次测试对比，我们提出了五个评价原则，帮助设计师判断亮度、对比度和色彩多功能性是否满足人眼的需求。

原则一:保证色彩普遍性:关注特殊人群

颜色的选择要考虑色盲者的特点，保证他们看到的颜色和我们的颜色接近，减少这类人在颜色识别上的差异，增强设计的统一性。从软件的角度来说，没有颜色可以减少正常人和色盲等特殊人群的颜色识别差异。(可由Sim Daltonsim针对Mac软件进行检测)。

原则二:选择低亮度、低饱和度、非极端色(避免纯黑色)

对于亮度控制，首先需要确定颜色本身的亮度。从一开始，就应该选择亮度较低的颜色，从设计颜色上控制界面的亮度。因此，方法是直接降低颜色本身的亮度，但避免使用极端的颜色(避免纯黑色)。为了比较所选颜色的亮度，可以通过颜色亮度公式计算(Y-范围为0-255，Y值接近0时亮度较低):

原则3:确保界面在屏幕上呈现低像素值(低亮度)

为了控制屏幕显示的亮度，它需要由上面提到的Nite值来确定。Nite值可以将设计方案的亮度反馈到设备上，直接影响人眼的亮度舒适度。所以根据早期人眼的视觉特性，在没有光线的情况下，屏幕会自动调整到最低亮度，屏幕上主背景色的亮度应该接近0.034 nits，界面上最亮的元素应该尽量低于3.4 nits，让用户使用起来更加持久舒适(nits值需要通过屏幕亮度测试仪来测量)。

原则四:保证文字、元素、背景的对比度在易读的范围内

对比规范是由《网络可访问性指南》(WCAG)提出的，并已逐渐被大公司采用。苹果的设计规范中引用了这个对比规范。根据夜间模式的要求，我们建议确保文本与背景颜色的对比度在3:1-4.5:1的范围内，元素(头部和图片)与背景颜色的对比度在3:1-7:1的范围内。这样既能保证文字的清晰度，又能降低其他元素的亮度。(对比度可以通过软件颜色对比度分析仪来测量)。

原则5:如有必要，为过亮的元素添加黑色透明遮罩

因为界面元素的多样性，比如头像，歌曲，新闻。如果这类元素不能满足亮度和对比度(3:1-7:1)的要求，就需要在它们上面加一个黑色透明掩膜(不透明度40%-50%)来降低对比度和亮度，使界面元素的亮度尽可能满足对比度(3:1-7:1)的要求。

3.设计方法步骤

为了便于大家理解，我们绘制了整个设计过程，如下图所示:

确定通用颜色→选择颜色亮度→确定文本对比度→给元素添加蒙版以降低元素的亮度对比度→通过设备检查界面的Nite值。

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

1.检查现有接口——它不能满足夜间模式的要求

我们按照五个原则来评价现有的QQ iPad版本界面——白色版和黑色版，每个版本都有各自的缺点。如下图所示:

2.按照方法步骤逐步完成

1)选择通用色作为主色系统

使用Mac的Sim Daltonsim软件，可以观察到色盲者和普通人在颜色识别上差别不大。因此，我们选择无色系列作为背景和文字颜色，以减轻色盲等特殊人群的负担:

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

根据QQ品牌颜色推荐的无色颜色的透明度等级，我们通过颜色亮度公式逐一计算，最后在#191919-#333333之间设置符合背景色标准的颜色。

3)选择并微调颜色，使文本和背景之间的对比度达到3:1-4.5:1的范围

确定背景颜色后，选择色标上的其他颜色作为文本的颜色，并使用颜色对比度分析器软件进行测试，尽量满足文本对比度在3:1-4.5:1的范围内。通过微调，文本方案如下:

4)加一个掩膜，保证其他元素在3:1-7:1内满足要求

因为界面元素的多样性，比如头像，歌曲，新闻。由于颜色的多样性，无法满足对比度要求。在上面加了黑色透明蒙版(不透明度50%)后，对比度都低于7:1，符合规则要求:

5)检测整体nitt值，选择nitt值接近0.034的方案

我们在实际的夜景中测试了这两种方案。两种方案的Nit值如下。方案1的主色的Nit值较低，接近0.034 Nit。方案二也是低饱和度的柔和色，但是主体亮度接近0.21 nits，整体来说还是比较亮的。所以我们把方案一作为最终的设计方向。

最终方案数据

设计方案的情景应用

将方案1的设计扩展到QQ iPad版、QQ Android版、QQ iPhone版，如下图所示:

其他建议

对于夜间模式的设计，我们也有一些小建议:

(1)夜间模式和官方白色界面的设计不应改变图形、结构、交互等。除了颜色，从而降低用户的学习成本。

(2)自动调整界面的功能，通过感受环境光来切换夜间模式，减少用户的操作步骤。

(3)当夜晚模式切换到官方白色时，过动画可以更流畅地呈现，让用户适应场景过渡。

最后感谢共同撰写此文的多多同学，也感谢参与研究的每一位小伙伴。