心若磐石|即刻7.0：如何设计深色模式？编辑导读：自从19年苹果发布会推出了深

编辑导读：自从19年苹果发布会推出了深色模式后，越来越多的APP开始更新了深色模式。本文作者以社区产品即刻为例，进行了一次深色模式的适配练习并复盘整理，供大家一同参考和学习。
一、写在前面在2019年iOS13和安卓P发布后，带来了一个新的模式名为「Dark Mode」即深色模式，随后一些头部产品也都相继更新为用户带来了更好的使用体验。
需要注意的是深色模式非夜间模式， iOS文档中也说明了内容与背景的色彩对比率要达到7:1来满足用户在白天强光下和夜晚弱光下的多场景需求。
即刻曾经作为一个日活300w+的老牌社区产品由于某些原因消失了一年，在近期又回归到我们视野中，那就以即刻为例尝试进行一次社区产品的Dark Mode适配，为即友们带来更好的产品体验。
二、深色模式给即友们带来哪些好处？1. 节省电量在OLED屏的手机屏幕上，白色画面越少功耗越低。所以当深色模式中界面元素以黑色形式出现时相当于关上了屏幕的灯（像素点）这时会比浅色模式大幅降低手机功耗，从而达到省电，增加待机时间的目的。
(图为不同面积的白色画面下调整屏幕亮度，对功耗的影响)
数据来源：《显示比较：笔记本电脑上的OLED与IPS-功耗与效率》
2. 专注内容用户更易被深色背景上展示的图文、视频等内容所吸引，加强沉浸感，提高浏览效率。用官方的话说就是“使前景内容在较暗的背景下脱颖而出” 。
3. 保护视力在夜晚弱光环境下深色模式会与周围的暗色环境相融合，刷到凌晨4点也不会亮瞎眼睛。
三、定义设计目标本次以iOS版即刻7.0进行适配，着手设计前查阅了iOS人机界面指南中Dark Mode部分，苹果为深色模式规定了五项设计原则：

保持视觉风格的一致
保持平台的一致
保持信息层级的一致
保持操作规则的一致
易于开发者实现

解读官方文档也就是说，深色模式要在风格、交互行为、信息层级的感知上和浅色模式保持一致。遵循官方文档的建议，定义设计目标为：
四、执行设计策略1. 保持与浅色模式下全局的一致性采取由整体到局部的形式，首先对界面整体信息层级进行分析，在深色模式下还原，再将界面中所承载的具体元素单独处理。分为两部分：信息层级的一致和视觉特征的一致。
（1）信息层级的一致
浅色模式中，界面通常会以阴影来体现层级空间，但在深色模式下加深色阴影并不直观，浅色阴影反而有种发光的效果，合理的解决方案是通过颜色深浅来体现层级，即传统感知上离用户较近的内容颜色较亮。

由于OLED屏幕特性，在纯黑背景上划动内容会产生一定程度的拖影，文字尤为明显，就像灯泡（像素点）打开和关闭的感觉，所以应避免使用纯黑作为背景，尤其像即刻这样以文字为主的产品，会非常影响阅读体验。