心若磐石|即刻7.0：如何设计深色模式？( 二 )
分析浅色模式下界面的信息层级关系 ， 提取全局背景色、内容部分背景色 ， 并在深色模式下一一对应 ， 保持视觉统一 ， 首先看下两大系统是如何做层级划分的 。
iOS13：
iOS规范中官方给出了两组背景色 ， 分别为：系统背景色(System Backgrounds)：运用在全局的基础背景元素 。 分组背景色(System Grouped Backgrounds)：运用在承载内容的分组背景元素 。
两组背景色也定义了主要、次要、三级三组颜色来体现不同的层级结构 ， 每组颜色也给出了对应的背景色和前景色建议 。
苹果为了缓和黑白灰背景下视觉的无趣 ， 在背景色中都加入了少许的蓝色来提升质感 。
Android P：
在material design的深色模式下由低到高分别为界面定义了10个层级 ， 由0dp-24dp ， 表面高度越高 ， 离隐含光源就会越近 ， 表面也就会越浅 ， 这点和iOS的设计比较一致 ， 区别在于material design将最深的颜色使用深灰（#121212）而非纯黑色（#000000） ， 目的在于深灰可以代表更广泛的颜色而非极限的黑色 ， 也能适当降低背景与内容的对比度 。
为了保留品牌标识 ， material design可以在默认背景色的基础上叠加低透明度的品牌色变成带有品牌色的背景色 。
即刻的层级划分
拆解即刻的主要界面层级 ， 发现大多界面整体层级不会太多 ， 设计手法较为扁平 。 对于内容型产品来说我认为这样的设计目的在于引导用户更加沉浸在内容里 ， 在做深色模式适配时也应遵循沉浸感的整体体验（即使深色模式自带沉浸属性） 。
对主要界面的层级大致了解后 ， 选择从首页入手通过背景色对深色模式进行层级还原 。 在浅色模式的背景色中 ， 即刻选择在浅灰中加入少许蓝色来表现质感 ， 为了在深色模式中还原这一设计语言 。
在这里我选择material design深色模式的配色方式 ， 更加利于自定义 。 全局背景色选择深灰（#121212）叠加6%不透明度的辅助蓝色（#04A9F5） ， 再在全局背景色基础上叠加不同透明度的白色来配置不同层级的内容背景色 。 带有蓝色的背景色长时间浏览要比纯灰色更舒适 ， 也满足了设计语言的延续 。
（2）视觉特征的一致性
整理基础元素文字、图标、图片等 ， 还有其他元素如毛玻璃背景、加载、空状态、默认图等 ， 在深色模式下这些视觉特征需要单独处理以保证在深色模式下保持和谐 。
1）品牌色
为了让深色模式中的品牌色 ， 我同样采取在每个颜色上叠加不透明度的方式降低饱和度 ， 在界面中就不会显得太扎眼 。
推荐阅读
- 心若磐石|3D建模提升机器人空间感知能力
- 心若磐石|最新AI工具首次实现了“鸟脸识别”，准确率达90%
- 酿酒|即刻抓捕：落网！云南省51岁“女魔头”被逮捕！
- 心若磐石|网友投诉：三星电子售后无法确定手机故障原因
- 心若磐石|本国企业也要打击？特朗普：若国会不行，我将亲自出手限制美科技巨头
- 爱情@不要对一个人太好
- 磐石之心|罗永浩凭什么成为品牌方及粉丝的“香饽饽”？
- 磐石之心罗永浩凭什么成为品牌方及粉丝的“香饽饽”？
- 心若磐石 从苹果这些专利来看苹果AR眼镜功能和技术路径
- 全国党媒信息公共平台|房产过户45分钟，抵押登记20分钟！烟台开发区首创不动产登记全事项即刻办