为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结出一套优化方法来分享给大家,相互启发。


你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结出一套优化方法来分享给大家,相互启发。

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

我们为什么要做夜间模式?

1. 用户调研显示:57%的用户想要使用夜间模式,71.1%的用户习惯在夜间不开灯看手机

在ISUX北京调研小组的帮助下,我们针对移动端QQ界面夜间模式进行了调研。从2000多份问卷数据中分析发现,用户对夜间模式有明确需求,且多数人在无照明下使用软件。

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

2. 用户反馈现有界面夜间使用时刺眼,低亮度时界面文字不清晰

调研发现,现有界面用户在夜间使用时感觉刺眼,长时间使用会感觉眼睛疼痛。部分用户认为文字看不清,辨识比较费眼。

3. 用户期望更暗色 、更能保护眼睛的夜间模式设计

从用户对夜间模式的期望来看,他们希望主体界面的颜色更暗,能够更加持久地使用软件。希望我们设计师,能够设计出更加保护眼睛的夜间模式。

我们如何设计夜间模式?

1. 亮度、色彩对比度、通用性色彩是关键,行业趋势倾向低饱和无彩色

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

  • 首先引入尼特值(nit),它是用于量化亮度强度的专业术语,其意思每平方米烛光的强度:1nit=1坎德拉/平方米;
  • 白天,人的眼睛能适应亮度的值高于3.4尼特;
  • 夜晚,主体颜色接近0.034 尼特,最亮元素低于3.4尼特的亮度眼睛会比较舒适。

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

(2)关注弱视、色盲色弱人群——对比度、色彩通用性的需求

老人或视力弱的人群对于对比度的要求较高,容易看不清文字,应该选择更为合理的对比度。色弱人群和我们看到的颜色存在区别。 所以后续选择色彩度时,应该选择更具通用性色彩设计的方案。

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

(3)行业趋势——减少极端色,无彩色居多

从行业趋势来看,2016年,Google Material Design 和 iOS 相继推出了夜间模式和深色主题设计及护眼模式。从其他权威网站中也发现许多深色界面的设计。最终整理得出,界面主体倾向无色彩,黑色居多。柔和、低饱和度色彩可以增加用户长时间观看界面的舒适度。

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

 2. 五项夜间模式设计原则

通过文献查找结合多次测试对比,我们提出5项评价原则,帮助设计师去判断亮度,对比度,色彩通用性是否满足人眼需求?

原则1:保证色彩通用性,关注特殊人群

所选色彩需要考虑色盲人群的特性,尽量保证他们所看到的颜色和我们接近一致,减少该类人群的识色的 差异性,增强设计的统一性。从软件角度来看,无色彩更能减少正常人和色盲等特殊人群的识色差别。(可利用Sim   Daltonsim for Mac软件检测)。

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

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

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

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

原则3:保证界面在屏幕中呈现出低尼特值(低亮度)

对于屏幕呈现的亮度的控制,需要通过前面提到的尼特值确定。尼特值能够反馈设计方案在设备上呈现亮度,它直接影响了人眼的亮度舒适程度。所以结合前期人眼视觉特性来看,无光照时,屏幕自动调至最低亮度,主体背景颜色在屏幕上呈现的亮度应该接近0.034尼特,界面中最亮元素应该尽量低于3.4尼特,才能让用户更加持久舒适地使用 (获取尼特值需要通过屏幕亮度仪测试仪测得)。

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

原则4:保证文字、元素、背景的对比度在能看清的范围内

对比度规范是由Web 无障碍指南(WCAG)提出,现已经逐步被大公司采纳,苹果公司的设计规范中引用了此对比度规范。结合夜间模式的需求,我们提出保证文字与背景色对比度在3:1-4.5:1范围,保证元素(头像,图片)与背景色的对比度在3:1-7:1的范围内。以此保证文字的清晰度,减少其他元素过亮的情况。(对比度可通过软件Colour Contrast Analyser测出)。

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

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

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

3. 设计方法步骤

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

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

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

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

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

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

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

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

步骤1:选择通用性色彩作为主色系

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

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

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

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

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

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

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

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

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

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

步骤5:整体尼特值检测,选择尼特值更接近0.034的方案

我们将两个方案在实际夜晚场景中测试,两个方案尼特值呈现如下,方案1的主体颜色的尼特值更低接近0.034尼特。方案2虽然也是低饱和柔和色彩,但是主体亮度接近0.21尼特,整体还是比较偏亮。因此,我们将方案1作为最终设计方向。

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

最终方案数据

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

设计方案场景应用

将方案1的设计扩展应用到 QQ iPad版、QQ Android 版和QQ iPhone版中,如下图所示:

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

其他建议

针对夜间模式的设计,我们还有些小小的建议:

  • 夜间模式与官方白色界面的设计除颜色之外,不要对图形、结构、交互等有其他改变,减少用户学习成本。
  • 自动调节界面的功能,可以通过感受环境光来切换夜间模式,也减少了用户的操作步骤。
  • 夜间模式与官方白切换时,可以更平滑的过度动画呈现,让用户能够适应场景转换。

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

参考文献

[1] CIE组织

[2] 对比度参考文献:web无障碍视觉

[3] 对比度参考文献: iOS 设计规范

[4] 对比度参考文献  

[5] 对比度软件下载地址  

[6] 手机护眼文献(尼特值)

[7] 人眼视觉特性(尼特值)

[8] 亮度计算公式

 

作者:花咯

来源:腾讯isux

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24820/

(0)
CatherineCatherine
上一篇 2017-05-09 19:52
下一篇 2017-05-09 21:49

相关推荐

  • 众多新闻客户端,评论交互哪家强?

    上一篇文章《众多新闻客户端,评论功能哪家强?》中,我通过抽样的方法对网易新闻、腾讯新闻、今日头条评论功能的数量和质量进行了对比分析。本文将继续对这三款产品评论功能的交互设计进行对比分析。我的结论是并非某款产品明显优于其他,而是各自都有特色和优点,值得对手借鉴。

    2017-04-29
  • “来电”性格测试的交互设计历程

    来电,是一个主打免费通话的纯语音应用。从14年7月份低调发布Lightalk1.1后,历经3个版本,终于在1.4版更名为来电并投入推广了。除了运用一些传统的渠道推广,来电也尝试在应用内嵌一个提供分享的入口,鼓励用户做…

    交互设计 2015-04-10
  • 【UI交互设计】首月结课作业展示

    花瓣美素是全国最大的版权素材平台,本文章内学生作品图片,未经允许,严禁抄袭和转载。花瓣网丨花瓣美素教学中心,承担天津市大学软件学院数字媒体专业UI交互设计方向120人的教实训任务,在刚刚过去的第一个月里,通过同学们和教师团队的不断努力,专业核心课程《图形图像基础》和《用户体验设计》等两门课程教学任务圆满完成。《图形图像基础》是UI交互设计专业的专业必修课。通过企业教师的认真指导和对该课程的学习,同学们对UI交互有了进一步的了解,在企业教...

    2018-04-17
  • 扁平化2.0:扁平化设计以前从未有的6个设计风格

    时至今日,扁平化已不再是流行一时的设计风潮,而是一种美学风格。扁平化大胆的用色,简洁明快的界面风格一度让大家耳目一新,当它对元素效果抛弃的如此彻底之际,它又将效果捡起来,改装成另一番模样,使得扁平化进化为扁平化2.0。

    2017-05-24
  • 交互进阶指南:如何扫除交互设计路上的3大障碍?

    目前网上基本没有对做交互设计师的难点进行系统的归纳和总结。基于这个原因我总结交互设计师的三大障碍以及如何扫除交互设计师路上的3大障碍。

    2017-04-29
  • 交叉学科-交互设计春季周末班课程计划

    开课时间:本周末4.14日开课,可预约免费试听。请单独联系教务老师。联系方式:教务老师微信二维码上课地址:北京海淀区北四  环保福寺桥南  恒兴大厦10层E室

    2018-04-11
  • Apple Watch界面设计规范之UI设计基础(2/2)

    六、布局 并排放置的按钮数量要控制好。当并排放置按钮时,使用图标来代替标题文案。一行不要放置3个以上,否则按钮的尺寸将会太小,很难被点到。 完整利用左右两个边缘之间的全部空间。Apple Watch的边缘斜面会在…

    2015-03-10
  • 极致用户体验的养成

    上周五约了朋友吃晚饭,提前约的顺风车。由于堵车,司机到了办公区的北门。经过沟通,我从定位地点过去找他。四扇车窗都是开的,他坐在副驾驶,烟刚抽了三分之二,后视镜旁还有未散尽的烟雾。他回头看见了我,我朝他微笑示意。确认了眼神,我是他的乘客,他马上把烟灭了。左手在空中挥了挥,右手扭转了空调按钮,抬起头在空中胡乱吹了几口气。隔着车窗看见副驾驶有件外套,说了句“久等了”,我便从右后侧上了车。刚落座,他就急忙表现出歉意:不好意思,不知道你走过来这么...

    2018-04-25
  • 信息的收集、甄别和呈现

    史蒂芬说:用户调研帮助我们去理解其他人需求,从而我们可以用充分的,有灵感的设计解决方案来对他们的需求做出更快捷的反馈。用研同时也帮助我们避开自己的偏见,因为我们必须频繁的为跟我们生活截然不同的人们设…

    2014-11-11
  • 从业务视角看交互设计师的价值

    最近和组里的设计师review近期工作进展时,发现了不少问题。想起设计新人一脸无辜和迷茫的表情,我觉得我需要再多做点什么。 对于处在业务部门中的UED团队来说,专业固然重要,但更重要的是如何体现你带给业务的价…

    交互设计 2016-03-24