1. 主页 > 行业资讯 > 设计文章 >

8亿多人使用的QQ,总结了夜模设计的一般方法

腾讯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)当夜晚模式切换到官方白色时,过动画可以更流畅地呈现,让用户适应场景过渡。

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

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/378.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息