其实是笔记 :）

好久不见，想念UI中国的小伙伴。这次想和大家一起探索最近关注的设计上的一个趋势——APP dark mode design，暗色模式设计。

2019年9月份苹果发布了iOS13，最大的亮点(至少在UI眼中)在于他们引入的暗色模式；

到2019年年底的几个月内，暗色模式设计逐渐被行业更多地重视起来到并发展成一种趋势，不少平台设计开发都在积极筹划适配方案上线；除此之外，Windows、Android、Google等在自己的设计体系里早已有暗色模式设计；对设计可用性比较敏感的设计工具adobe、sketch等都有自己的暗色界面。

由此可见iOS对暗色设计的展开不算早。曾有传闻苹果宣布截止2020年某时间点未适配深色模式的APP可能无法在APP store上架，目前没有找到该言论的有力论证资料。但就体量较大的APP而言，不妨着手考虑实施适配方案，试想不远的未来夜晚，当用户沉浸在几个暗色模式的APP中突然切换到一个没有暗色模式的APP，“眼前一亮”的瞬间必定意味着糟糕的用户体验。

目前手机体验暗色模式的条件：

1. Android10/Android9部分机型/iPhone X及以上iOS13系统设置

2. 已支持暗色模式的应用。（三方应用中已有微信、淘宝(内测)、QQ、百度网盘、QQ音乐、网易云音乐、知乎、豆瓣、爱奇艺等）

暗色模式被认可的必要性与优势：

1. 专注于内容、舒适的用户浏览体验（成熟的适配方案为前提）；

2. 省电（智能设备工业升级，屏幕越来越成为耗电主因）；OLED分析的相关研究；

3. 为用户提供多一种个性选择的新鲜感（并非只在夜间才能使用暗色模式）；

如何应对：

UI设计应对暗色模式趋势，能协同开发同学具体做些什么、怎么做、如何制定有效方案等问题，有必要思考总结或至少能了解大概。

根据部分平台分享的经验，在实际业务场景下，设计师需要单独分析具体的产品特性，结合业务本身制定相应的方案。大致可列举两种情况：

1. 产品界面中信息的层级本身差异较大，在元素显示重要性上有明显偏向，追求信息的高效传达；

2. 产品注重界面整体的阅读体验流畅性，需要用户沉浸式阅读，即信息层级无较大差异；

以上两种场景下的暗色模式设计的思路就不尽相同。

一般来说，暗色模式的设计主要针对UI界面中元素颜色对应的转换规则；大致看过一些开发人员写的博客，主要考虑颜色和图片两个适配点。

我们可以先总结基本的设计原则，再细化设计和工作中的具体做法。

一、根据Google的建议，我得到的几点原则：

1. 避免使用纯黑#000作主色调背景；出于无障碍设计的考虑，与纯黑#000相比，接近纯黑的深灰色的底不仅可以保证暗黑模式可读性，而且可以兼顾更舒适的阅读体验。
2. 暗色背景与文本颜色对比度控制在WCAG2.0AA级标准以上（Google具体的建议在15.8:1以上）；
3. 彩色元素的饱和度适当地调低，以确保整体色彩之间对比度符合WCAG2.0的对比度标准，即4.5:1以上。
4. 避免大面积使用高饱和度、高明亮度的色彩，可小面积用作点缀——减少视觉冲击。
5. 关于图标：亮色模式下的线性图标，放在暗色模式下时建议反转面形，视觉效果更形象。

二、对iOS相关规范的解读：

1. 彩色保留原色系基础，适当增加对比度，降低明亮度/饱和度；
2. 暗色背景与文本颜色对比度控制在7:1以上（这点比Google宽松一些，测试对比度的工具：Contrast-ratio.com），越重要的文字，与背景的对比度越高（颜色透明度越低）。
3. 柔化白色背景，调整白色的不透明度变成浅灰色。
4. 支持用户自由切换模式，给出切换开关。
5.语义化颜色：界面元素自动适配当前模式，设计制定两个模式下的颜色组合，由开发实现转换。

结合以上内容作结论：

1. 避免使用#000纯黑作为主色调背景，选用深灰色；
2. 柔化白色背景，选用浅灰色；
3. 保证「文字/字体icon」与「背景」之间的对比度>4.5:1；使用对比度的高低来体现信息的重要程度，重要级别越高，对比度越高；
4. 主题色可以小面积保留原色值，其他彩色元素的饱和度适当调低；
5. 尽量避免大面积使用高饱和度彩色，可小面积作点缀；

工作中的具体做法：

1. 设计稿在文字/字体icon、背景、卡片、分割、按钮、等元素用色上，尽量遵循原有的设计规范，在规范系统的色彩库里选择颜色使用，方便暗色模式对应替换颜色的时候，找到参考基准；

2. 将原有的浅色模式设计规范中的色彩库做暗色模式的对照替换，给出完整的对应的色值对照表，由开发遵循；具体原则在以上总结中；

3. 尽量避免对深色背景上的元素添加阴影；

4. 图标：字体icon单色图标可以与文字文本的处理方式归为一类（下面会写）；定制化的图标最好是可以一套方案适配两种模式，无法合理适配时可以做的更细，比如浅色模式下的线性icon，为了更舒适的体验，转换到暗色模式可能要出一套反转面形的icon；

5. 文字/字体icon大致分为两种场景：当文字/字体icon出现在彩色实心按钮/彩色卡片上，建议根据背景色值选用文字色值，可以使用谷歌的选色工具来判断不同彩色色值适合使用文字的深/浅，tools for picking colors；出现在暗色背景上（标题/正文），则建议选用浅色色值；

6. 背景层级可分为2-3层：Z轴上的层级越高，背景颜色越浅，色值依据原浅色系设计规范一一对照；

7. 目前对于设计师产出的「具有插画/背景纹理的高饱和度彩色」并切图交付的卡片，我暂时没有遇到合理的适配方案，这类的卡片/banner最好在设计的时候严格好控制尺寸；

8. 特殊界面（相机、音频、通话等）可直接保留原样式；

9. 插画、缺省页、状态页可以通过直接调整不透明度的方式适应暗色模式；

10. 定下暗色模式规范之后，尝试各种类型的界面测试颜色对比度是否达标；

11. 给出自由切换模式的开关；

12. 出稿无需手动适配亮/暗两版，但设计验收依然要走流程兼顾两种模式；

13. 在夜晚关灯场景下进行浏览测试；

--------------------

从个人角度看，目前对暗色模式的普及是有期待的，相信这个诉求能改善当下的用户体验。

“一件事值得做，就值得认真做。”

知识总是来自大家的经验总结，希望这篇笔记能为我们在工作中提供有效的思路。

Powered by Froala Editor