「深色模式」的前世今生，都在这一篇里了

从2019年半年iOS 13的发布开始，「Dark Mode」越来越多地现在大众的视野中，期更是随着微信的适配再引热议。那么这样一个系统模式到是从何而来，又对设计师的工作、生带来了哪些影响呢？今天就我们一起来探个究竟！

「Dark Mode」才是一切的起源

实际上，在计算机诞生的早期，这巴掌大的方寸之屏一直被「深色模式」占据。

这是因为在20世纪60~80年代的计算机显示屏使的还是只支持单色显示的阴极射线管（CRT），黑绿字的展示方式就成为了当时的态。

即使是80年代之后，彩色CRT显示器逐渐流行普及，但当时流的DOS并没有么「图形界面」的概念，依然延续了先前黑的习惯。直到1984年，苹果发布了个人计算机Macintosh，普及了图形户界面（Graphic User Interface）的概念，从而开启了白色为色的图形交互时代。

没想到，苹果开创的历史，现如今又被它自己改了。

但即便此，程序们还是对深界面情有独钟。早在2005年就有为Textmate编辑器设计的深主题存在，甚至在10年前，他们就在Reddit上开启对「深界面」的讨论：

在他们看来，深的背界面能让颜显得更亮，以及更地被聚焦，但白背在阳光直射的场下有更的表现。由此见，对「Dark Mode」的思考，从来不仅仅停留在「夜间模式」那么简单。

「Dark Mode」是如何进入大众视野的

我们可先在Google Trends里看一「Dark Mode」全球被搜索量的变趋势：

可看到2016年前「Dark Mode」几乎无人问津，而最的搜索峰值现在2019年10月，正是iOS 13这一支持「深色模式」系统的发布时间。

看看百度指数的录：

关键词「夜间模式」自2013年就已出现，并持着为平缓的热度，直到微信适「Dark Mode」出现值。关键词「暗黑模式」相之热就较为惨淡了。奇怪的是Apple的官方翻译「深色模式」及「Dark Mode」并未被百指数收录，故图中没有相的数据。

由此推测，「Dark Mode」的逐步流行，很大程度受到主流的移动设备操系统的影响，例苹果新系统的，以及微信类主流应用对系统变化的响应。除此以外，2013年中国移动互联网的飞速展，也产生更不同的手机/电脑使用场。

从这2018年的《移动互网行业析报告》中可以出，越来越多的人选择在夜间/较为昏暗的景下使用机，短视频的出现更是让人不舍得入睡：

夜间使用景的增加助长了大家对于深色模式的需求，毕竟谁也不想在被窝被各种色背景亮瞎双眼。但正如前文所说，「Dark Mode」要做的，并不是简地足用户在夜晚的使用需求，切换了深色模式后所带来的视觉沉浸，也是提升人使用欲望的一大因。

关于这，在去年 WWDC 大会上，苹交互团队设计师 Raymond Sepulveda 也 macOS 「深色模」使用场景做了进步解释：

他指出，只阅读浏览或内创作型 App 需启用深色模式，比如文字或码编辑。它们会借黑底白字的高对比度特性让用户视线保持集中，这概就我们对深色模式感到「真」的原因之一。

与此同时，越来越长的屏幕使时间升了我们对于设备续航的要求，而「深色模式」在这一点上表现俗。目前的中端手机大多采OLED屏幕，这一材质自发光的特性使得屏幕够独立控制单个像素是否发光，根据谷歌官方数据来看，采OLED屏幕的手机在「深色模式」，耗电可降达63%。

除此之外，随着移设备在流群体中逐渐饱和，边缘的视障群体随之得到了更多的注。虽然对于「深色模式」到是否够起到「护眼」的作，大还各执一词，但人们确实需要「深色模式」，正因如此，它越来越多地现在了人们的生场景中；从此，白天懂了夜的黑。

「Dark Mode」是如何被应用的

说道「深色模式」具体应当如何被应，必然躲开苹果和谷歌这两大流操作系统的规范。先来看看它们在各自的设计档中是如何描述这一模式的：

Human Interface Guidelines描述道，「深色模式」应当随着系统设置变而变，否则你的应就会看起来像了bug。由此我们可看苹果对于整个操作场景系统统一性的要求，但分App将「深色模式」作为一种可择的肤存在，一定程上为户供了更多的择。

此外，在光照充的场下证「深模式」的用与在夜一样重要，在任何的场以及任何的界面介质上（无论是扁平、拟物还是毛玻璃或者其它风），要证内容的读。落到具的操上，我们不仅要关注正常视力的人群，也要关注有视力损伤的群里。对自定义的前与背，尤其是在使用小字号文字的时（根据个人经验，大约以20号字为界）最能持7：1的对比度。

除此之外，苹果还提出「Dynamic System」的概念，国内大翻译为「语义化颜」，即不设定固定的值，而是用其所使用的场来对颜进行描述：

举个例子，同样是系统背（System Background）一定义，在「浅模式」下指的是#000000，在「深模式」下则指的是#FFFFFF，样一来，颜就能更地适用所存在的场，根据它对设计目标的优先级来进行动态的整。

再来Material Design对「深色模式」的优点描述：

减少屏幕度、减轻眼睛负担、提升视觉效率、节量，如第二段中提的，这些都是选择「深色模式」的理由。那在体的应用中该怎做呢？

和苹设计风格不，Material Design引入了Z轴概念，于是在界层级深度上需要更为灵活展示范围。与苹设定纯黑背景不，Material Design选择了深灰色作为展示大范围区域主色，时有节制地选用能够适配于「深色模」强调色，并过满足比度要求提升页可用性。此，于需要更高效利用能品（如OLED屏幕），它鼓励使用「深色模」来延长电池续航时。

Material Design下「深色模」主题，需要满足以下几个属性：

• 对比度：深区域与纯白字的对比度至少要达到15.8：1；
• 层深度：使用更浅的表层颜色来表示有更高层位置的素；
• 去饱和度：主色调需要降低饱和度，以让正文本比度到4.5：1Web Content Accessibility Guidelines（WCAG）AA标准。
• 用色节制：面积使用深色背景的时候，节制使用提亮色（如浅色，低饱色、明亮色，或高饱色）这因高饱度的颜色往往易深色背景产眩光，降低页面的可用性。

了解了主流系统于「深色模」规范后，我们可以再来看看以iOS为例，有哪些App已经适配了暗黑模：

大致看来，深色模趋势大多是先从生力工具（自己单独用）、到群体类工具（和有社交关系起用）、到富内容大众型平台（和千起用）广开，而在这些app，近期最具有讨论热度莫过于微信了。

作一富内的社交具，「深色模式」首先影响的就其多样的内态。例如公众的深色配图文案「蜜汁消失」，表包也变了「视力测验」：

所以这类富内的应用平台，出去那些已被辈牛们分析得十分透彻的颜色、对比度问题，如何针对不同场景下的内展示，例如图片丰富的场景，如何考虑颜色的极限显示，发布时行限，还由平台行统一的后调整，都需设师去重点考虑的。

除了微信之外，相信有些友已经注意到了，淘宝和京东期进行了深色模式的适配，那么当电商平台遇上深色模式，会擦么样的火呢？

由这两张截图我们可看到电商界面的特点：

• 商品图居多，且部分了保证日间模式下的界面清爽程度，都会选用白底商品图主；
• 有很多饱和较、态效果丰富的氛围图存在；

此外，实际的页面链中，往往会涉及到多种不同类型页面的跳转，例如从首页入商详页、店页、搜索集合页，不必每丰富多样的促活动，这些页面的内类型展示信息偏好都各不同，也就给电商应用的深色模式配了极的挑战。

此外，从色彩心的角上来说，虽然深色背景够为户带来更强的浏览沉浸感，但在大分现实中的购物中心还是更偏好于使明更的颜色作为商场的色，这一方面是于与同受众的店铺、牌色、灯光颜色进行搭配，空间感知上更具有膨胀感；另一方面明亮的颜色和场景更好地吸引户的注意，调户购物的积极性。

但在移动设备的场中，涉及到电子屏幕光的反射，明度高的颜就很容易引用户的视疲劳感。针对此复且大量的彩转换需求，淘宝和京东针对自身平台的品牌特质，进行对应的整：

除了基本的组件颜色变，在未来的迭代中，是否可根据深色模式进行智的商图适配（例如使较白的，更具有氛围感的单图），都是我们可考虑的方向。但归到最原本的发点，暗黑模式在电商购物场景是否为户带来更好的体验，还是数据来检验。

参考资：

• Human Interface Guidelines：
  https://developer.apple.com/design/human-interface-guidelines/iOS/visual-design/dark-mode/
• Material Design：
  https://material.io/design/color/dark-theme.html#usage
• 你在iOS13看到的「深模式」，其并不能护眼：
  https://zhuanlan.zhihu.com/p/69492765
• 写给设计师的指南：如何为即将到来的Dark Mode做好准备
  https://mp.weixin.qq.com/s/zDAroP9Rx3LqrOk-gbLJxQ
• 黑暗模式背后，这些不知道的「黑历史」：
  https://36kr.com/p/5301007
• 2013-2014年国移动互联网调查研究报告：
  http://www.cac.gov.cn/2014-08/28/c_1112261178.htm
• 千呼万唤！这是你要的歌深色主题计规范：
  https://www.uisdc.com/material-dark-theme
• 写给设计师的指：iOS 13 Dark Mode 深度析：
  https://zhuanlan.zhihu.com/p/69887721
• 晚上放心剁手，淘宝App黑暗模式来了：
  https://tech.sina.com.cn/digi/2019-12-20/doc-iihnzahi8935326.shtml
• 必须了解的色彩变——饱度&亮度：
  http://www.woshipm.com/ucd/1729140.html
• 京东APP将出「暗黑模」 打造护眼低功耗物环境：
  https://zhuanlan.zhihu.com/p/114714773
• Ask Proggit: Are you using dark themes on your editors/IDEs? Is that any more eye friendly：
  https://www.reddit.com/r/programming/comments/9abst/ask_proggit_are_you_using_dark_themes_on_your/

欢迎关注「京东设中JDC」的微信公众：