夜间模式设计探索(以起点读书为例)

作者:徐萌萌

原文首发于微信公众号:阅文体验设计YUX

未经允许请勿转载,感谢您对作者版权的尊重。


前言

越来越多的人习惯在睡前阅读解除疲劳,如何提升夜间或在弱光环境下(以下统称为夜间)的产品使用体验是设计师们需要面对新课题。本文将起点读书的夜间模式设计实践梳理成文,与大家探讨如何提升产品的夜间阅读体验。


一、深色主题价值提升

深色主题占用更少的屏幕亮度,有效缓解了手机屏幕对眼睛的刺激,另外还可以降低电池损耗,强化用户的操控感。从 Yosemite 到 Mojave,苹果系统不断延展深色主题的覆盖范围,用户开启深色主题后可以一并开启系统内所有有深色主题的应用。Google 旗下的 Youtube 等产品也相继推出深色主题,今年11月的安卓开发峰会上,Google 再次肯定了深色主题的开发价值。


二、起点夜间模式现状

起点的夜间阅读体验并不完善,除了阅读页背景,没有覆盖全整条阅读路径,阅读过程中如果发表评论,或者查看目录,从黑色到白色,明显的亮度变化造成强烈的视觉刺激。

起点曾使用降低屏幕亮度和过滤蓝光的方法,改善夜间阅读的舒适度,但是「一刀切」的做法有些粗暴,整体界面的辨识度变得不可控,有些页面对比度过强,有些页面图底本身就对比度弱,加了蒙版且去掉蓝光之后,页面的信息层级有些模糊不清。

新红袖读书 [1] 的夜间模式的做法是非常彻底的,从底层代码上解决了全局换色的问题,且优化了响应速度,对起点夜间模式改造有很大的借鉴意义。


三、起点夜间模式设计策略

3.1 起点用户阅读行为研究

通过观察一天内不同时间段的用户活跃分布,我们发现晚上7点以后用户活跃量不断攀升,22:00 - 23:00 达到当天最大值。起点 iOS 和 Android 用户每日行为曲线基本类似,从晚上7点到凌晨,用户活跃量逐渐增加,在该时间段内,用户处于弱光或即将处于弱光环境下。

640.jpeg

起点每日用户活跃分布

我们希望用最小成本提升用户夜间阅读体验。作为一款阅读产品,核心路径是阅读,通过用户访谈和数据埋点,剔除掉部分过路页和到达率较低的页面,锁定核心阅读路径为:目录、段评、发表/回复评论、订阅、投票和打赏,以及追更用户每日都会到达的阅读末页。

640-1.jpeg

核心阅读路径

3.2 设计目标与可行性分析

权衡新老用户习惯和开发效率,我们决定从阅读路径向外辐射,逐步完成全局夜间模式的目标。

① 降低屏幕亮度

屏幕发出的短波蓝光危害健康 [2] ,过多的蓝光刺激使得感光细胞产生光化学扰动,甚至引起其畸变造成视网膜损伤。

给白色界面覆盖一层黄色或黑色蒙版并不会有很大改善,事实上,只要屏幕发光,蓝光就一直存在,真正的降低蓝光,是将界面整体调整为墨水屏的效果,减少大面积的白色界面,才能降低对眼睛的刺激。

② 减少冷色面积

色温也影响视觉感受,当屏幕色温低于 3000K [3] 时,屏幕会发出暖光,感觉会比较舒适。

很多手机系统都有调节色温的能力,比如 iOS 夜览,在特定时间段,屏幕颜色将自动调节为较暖的色调。另外,以 f.lux 为代表的第三方护眼软件也可以灵活调节色温。

上述改变屏幕色温的方法,一定程度上提升了视觉的舒适度,但是全局转黄会导致色彩失真,解决方案不算完美。白天和夜间的产品界面需要区别对待,应该在降低屏幕亮度的基础上,保留原有的色彩面貌。

3.3 组件映射设计方案

夜间模式是设计侧驱动的优化项,我们并不希望给设计和开发团队带来额外的工作负担。

起点读书改版 [4] 之后,设计师和开发同学一起开发了组件库 [5] ,夜间模式可以以组件为基础,围绕夜间阅读的核心路径,拆分出一套独立的「夜间模式组件」,再借助于 Libraries,快速调整新界面。开发同学可以组件为宗,梳理特定路径下的组件样式,按照色彩映射调整并调用,最终完成夜间模式的开发。


四、如何设计夜间模式映射

4.1  白色 UI 不能直接反色

起点的主色和辅助色均在蓝色区间,直接使用在深色背景上,整体页面偏冷,颜色显得较为尖锐。使用 Contrast Ratio [6] 发现,主色与深色背景的对比度仅为 1.98,不符合 WCAG 标准。

既然白色 UI 不能直接反色用到深色主题上,那么应该如何定义夜间模式色板呢?我们研究了 iOS Design 和 Material Design 的深色主题设计,发现在深色主题下的色彩有一定的梯度规律。

640-2.jpeg

Apple 和 Google 开发的系统应用

4.2 建立夜间模式下的色彩映射关系

夜间模式色彩库需要遵循一定的规则,且应该与白色UI的基础色形成映射。仔细观察 Sketch 颜色面板,不难发现这其实是一个被展开的 Hexcone Model [7] 色彩模型,横轴是饱和度,纵轴是明度,色彩平面的中的任何一个颜色,向左横向滑动色圈至纵轴,均为该色去彩度之后的明度,可以通过此种方法将白色UI的基础颜色转换为灰色。

640-3.jpeg

Sketch 颜色拾取器分析

以文字为例,将白色UI的主色和辅助色转换为夜间模式下主色和辅助色。

640-4.jpeg

基础色彩映射

同理,可提取一组背景色。

640-5.jpeg

夜间模式映射规范和颜色库

使用对比度测试工具检测出当前对比度已经提升至 9.42,处于合理区间,符合 WCAG 标准。对于界面上一些特定的彩色,他们是信息层级的一部分,去除彩度后会削弱视觉表现。

640-6.jpeg

段评两种设计方案比较

以段评信息模块的夜间模式为例,方案一完全去彩色,削弱了需要强调的内容,如帖子荣誉标签和操作反馈。对比方案一,方案二页面整体处于一个亮度,红色降低饱和度之后,依然保留了原有的荣誉标签,点赞反馈也比较明确。

4.3 图标

起点读书采用的是多为 SVG / PDF 格式的切图。单色图标是使用最多的样式,黑色的单色图标按照色彩映射规范可以直接转为灰色。多色图标需要分类处理,全彩色图标将其视为一个整体,降低其透明度;对于黑色搭配彩色的图标,需要将图形拆解后,各元素分别做夜间模式色彩映射。

640-7.jpeg

单色与多色图标的映射

起点全局图标切换为 SVG / PDF 之后,定位和调整都变得简单,不但批量修改方便,也减少了安装包体积,后期维护只需同步变量即可,非常高效。

需要注意的是,图标转为 SVG / PDF 之后,提高了对设计师绘制图形的要求。设计师的源文件应保持整洁,复杂图形执行完布尔运算之后应该仔细检查是否破损,图形交插点和填充方式是否准确,否则会导致编译出错。

4.4 按钮和其他

夜间模式下按钮需要继承白色UI的默认态、点击态、选中态和禁用态。以网文订阅半弹层为例,按照夜间模式色彩映射规范,拆解白色UI组件的文字、背景、选中框、渐变等元素,一一映射到深色背景上。

640-8.jpeg

订阅弹层页面和部分组件

对于页面中的其他元素,如书封、广告位、用户的头像和上传的社区向内容等UI之外的图片,整体增加50%蒙版,以保持和其他深色UI同等亮度。


五、结语

任何一处的设计提升都不是凭空想象。夜间使用体验不佳最早由我们的交互设计师 @剑剑 提出的,阅读页发表或回复段评都不得不唤起一个白色界面,由黑到白,强烈的亮度反差非常刺眼。这个问题在新段评第二个版本得到解决,在之后的几个版本中,我们把夜间模式做的更成体系。

夜间模式的设计只是起点不断更新和完善过程中的一件小事,我们会继续努力。如果你对本文有任何疑问或建议,欢迎留言与笔者讨论,如果你在使用起点时有任何问题或不便,可以在起点账户页左上角「设置 —— 吐个槽」告诉我们。

最后,感谢精诚协作的小伙伴,设计师 亚宁、燕雯、雪松、剑剑;客户端开发周林、石健。


相关阅读

01 打造更年轻的阅读体验 —— 红袖读书设计改版

02 Blue light excited retinal intercepts cellular signaling.  Scientific Report , 2018

03 Color temperature , Wiki

04 起点改版相关介绍:从心开始,起点改版项目小结

05 如何使用 Sketch Libraries 管理组件:视觉工作流程优化

06 Web Content Accessibility Guidelines (WCAG) 2.1 - https://www.w3.org/TR/WCAG/

07 Hue, Saturation, and Value Color Model , HyperGraph , 1999


更多文章,欢迎访问 uicircle.club

微信公众号:uicircle

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 59 元即可加入我们

成为会员后,您可以

  • 加入所在城市的微信群
  • 免费参与各种线上活动、线下聚会
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们