iOS和Android都在2019年布局了系统级的深色模式，深色模式可获得出色的视觉体验，尤其是在弱光环境中
1、什么是深色模式？
2、为什么我们需要深色模式？
3、Dark Mode 不是夜间模式！
4、Dark Mode并非简单的反色处理
(1)界面层级 (2)色彩 (3)文字 (4)图形
5、结语
虽然各种软件界面的色调和颜色会有所不同，但是对深色模式的处理方式都是在深色背景上显示明亮文本和界面元素的配色方案。相比之下，在浅色背景上显示深色文本和界面元素的配色方案，在这里我们称之为浅色模式。
而事实上，深色模式比浅色模式早了几十年。在其最初的阶段，深色模式并不是一种有意的解决方案，而仅仅是当时计算显示设备是阴极射线管（CRT），且只能显示单色的显示，屏幕看上去就是黑的，黑底白字或者黑底绿字就是计算机行业的早期状态。
直到1980年代彩色显示器发明后，微软视窗系统上线之后，黑底显示才退出主流。苹果在1984年推出“麦金塔”个人电脑，第一次发布采用图形用户界面，由此开启了计算机屏幕白底显示的主流之路。
浅色模式出现的确切时间很难确定，但可以追溯到施乐Parc图形用户界面，它也极大地影响了早期苹果的“麦金塔”和其他操作系统，该界面使用了以白色背景为主的深色文本和界面元素。它与显示技术的进步和现代图形用户界面的出现密切相关。这种能够显示色彩的且更先进的RGB CRT显示器拉开了浅色模式的序幕。
由于电子设备的屏幕是主动发光式的，它们发出的光线会比我们生活中接触的物品更具刺激性，而深色模式可以显著降低屏幕的整体视觉亮度，减少眼睛的视觉压力。在深色模式下，所有的界面元素都退居幕后，使得我们真正与之交互和操作的内容可以被凸显出来，这也是为什么众多专业的图像、视频等编辑软件普遍采用深色界面作为默认外观。其实深色模式不仅仅可以被那些专业生产力工具所用，对任何想要追求专注和沉浸式使用体验的用户来说，深色模式都将会使他们获益匪浅。
同时随着OLED屏幕的普及，支持深色模式更有了一定的现实意义：省电！由于OLED屏幕中每个像素都是自主发光而非LCD由整个一块背光面板发光，所以在显示深色元素时像素所消耗的电流更低，在纯黑色下像素点可以完全关闭达到省电的效果。
Youtube同一界面深浅两种模式下屏幕的电流对比，可以看到同样的界面，最高亮度下深色模式降低了60%的耗电量。
除此以外深色模式如此备受厂商热衷的另一个原因：酷炫！没错，酷炫！我们在科幻电影中看到的颇具未来感的概念界面多数都是以深色为主，这也潜移默化的影响了我们的审美。同时自从扁平化风潮流行起来以后，千篇一律的素白界面也很容易让用户产生审美疲劳，对与各家系统OS厂商来说，增加一个系统全局性的深色模式可以无需对UI进行大刀阔斧改革的同时达到让用户耳目一新的效果，这一点对于你自己的App来说也是一样的。
很多国内的App总是把深色模式理解为夜间模式，认为用户在夜间喜欢更暗更低对比度的界面，然而这陷入了一个误区，用户确实需要夜间使用不刺眼，但达到这一目的并不意味着需要放弃对比度。其实在深色模式下当页面的背景由白色反转为黑灰色时，我们已经极大减少了电子屏幕发出的光亮，而配合设备的环境光传感器自动亮度调节已经可以使界面整体的亮度满足用户在暗光环境下的使用。而且系统级的深色模式下，各个App之间保持相对统一的对比度对用户的实际体验也更好，否则当下的很多App夜间模式由于对比度太低用户看不清文字，反倒不得不调高屏幕亮度，而一旦跳到其他没有夜间模式的App更是会被亮瞎眼。
另外前面已经提到，用户使用深色模式的理由有很多，在暗光环境下减少视觉疲劳只是其中一种，即使在白天很多用户也会长期打开深色模式。这意味着在深色模式下你的界面设计依然必须考虑可读性，依然需要满足WCAG 2.0（Web内容可访问性指南）中规定的AA级标准即最低4.5:1的对比度。
WCAG中对对比度的标准可以很好的帮助设计师检查自己设计界面的可读性，尤其是对于那些本来就患有视力障碍的用户来说，低于AA级标准4.5:1对比度的正文可读性非常差。我们可以使用色彩对比度计算器来检查自己的配色是否符合AA级标准。
color.review界面
iOS目前已经在设置里提供一个叫做智能反转的选项，可以把除媒体以外的界面元素颜色按其对比色全部自动反转，但实际效果却差强人意。因为深色模式并非对浅色界面的简单反转，如浅色界面下的深色阴影，在深色模式下该如何处理呢？直接反色成为浅色光晕吗？然而这样做会打破UI原有的视觉层级和空间感。如果使用与浅色模式下相同的阴影在深色模式往往又达不到足够的深度感。这些问题都需要我们在深色模式下采用一套新的视觉设计规范，由于iOS目前还没有关于深色模式的设计规范，但Google在Android P推出后，在Material Design官网上已经更新了他们在设计深色模式时的一整套设计规范，并且苹果在macOS的视觉规范中也已经更新了深色模式相关的内容，这些都可以成为我们的参考，为iOS即将到来的深色模式做好准备。在这里我整理了各家视觉规范中的一些要点，希望对大家有所帮助：
作为UI设计师我们都知道UI中视觉层级的重要，那么在深色模式下如何确保视觉层级依然有效呢？Material Design在浅色模式时使用在白色卡片下投射阴影的形式来模拟现实世界的空间深度感，而在深色模式下，尤其是当背景已经很深时如何表现深度呢？记住一个原则：元素层级越高，其承载面的颜色越浅。
让我们假想界面上方有一盏光源，离这盏光源越近，界面元素的层级越高，它的表面也将被照得越亮。因此在不同层级间应用不同级别的灰度，可以使界面层级更加突出。使用深灰而不是纯黑也可使得阴影更容易发挥作用。
Material Design 中推荐的深色模式默认最低层颜色为#121212，而在这之上的层级则使用不同透明度的白色透明层遮罩获得层级区分。深色主题的最底层颜色应该达到15.8：1的对比度级别，因为这可以确保即使当应用于最高层的表面时，正文文本仍能通过WCAG的AA标准至少能达到4.5：1对比度。注意事项
深色模式下的色彩需要与背景有足够的对比度,当用于正文字号时，在任何界面层级中都至少需要保证满足WCAG 2.0 AA级标准即至少4.5:1的对比度。
在浅色模式下我们使用的一般都是高饱和的颜色，然而在深色的背景承载下，这些较为浓重的颜色无法满足4.5:1的最低对比度标准。高饱和的颜色在深色的背景下也容易产生视觉抖动，从而导致人眼疲劳。所以在深色模式下我们应当选择更低饱和的颜色以达到更好的可读性。
当前Google在Android P以及苹果在macOS中都已经加入了在同色系下深浅模式自动适应两套配色方案的相关API，在iOS 13中苹果也很可能加入类似的功能。这意味着今后设计师将需要为自己的App色板定义深浅两套方案，在这个语境下一种色彩不再之只对应一个色值，每个颜色都将有高饱和和低饱和的两种版本。开发者应该使用语义化的颜色名称而不是绝对色值，剩下的就交由系统自动适配吧。
在某些情况下，色彩需要特殊对待：
为了保证品牌VI的一致性，品牌色可保持原饱和度不变，但对应用范围应当及其克制，仅限于在个别元素如品牌Logo或品牌性的按钮上，但界面中的其余部分仍应遵循低饱和的配色规则。
如果我们一直采用无色倾的深灰色作为背景，用户很容易就会感到乏味。我们可以尝试把品牌色融入到背景中去营造氛围感，把品牌色用极低的透明度与系统默认的深色模式背景色叠加，得到的结果就可以用来作为氛围色运用到设计中。但切记，这个氛围背景色需要足够暗，才可以保证在最高的层级中依然可以保证满足4.5:1的最低对比度。
Material Design 中推荐作为底层背景的颜色至少需要与文字有15.8:1的对比度，才能保证在MD规范下最高也是最浅的层级满足4.5:1的最低比对比度标准。
深色模式的界面应整体以深色为主，在浅色模式下使用大面积色彩的元素，如导航栏、工具栏等在深色模式下应避免使用彩色，因为在深色模式下这些色彩可能会显得刺眼，对比过于强烈，破坏深色模式的沉浸感。
在浅色模式下我们有时会使用深色的元素，比如Toast提示等。在深色模式下为了让这样的模块依然足够突出，我们可以少量的使用浅色底作为模块的背景，但仅限于这类面积很小，且需要特别强调的模块中。
不要在深色模式下使用纯白色的文字作为正文，因为深色模式下纯白色的对比会非常强烈，很容易造成视觉疲劳。当然为了保证合适的对比度，文字颜色也不宜过浅。推荐的做法是在文字层级上使用透明度，这样可以使文字与在不同的氛围背景色上更和谐，或者使用HSB模式下调整B值的方法确定文字的固定色值。
在浅色模式下使用的一些线性图标，如果直接反转拿到深色界面下来用，你可能会发现图形的形状感和体积感都损失了很多，这是因为白色背景可以更好的表现出形状，人的大脑可以将白色脑补成图形的一部分。然而在深色模式下，这种作用消失了，人脑更倾向于认为这些空白的部分是镂空的。所以在深色模式下建议把线性图标反转为面性图标，不过具体的情况可以综合产品实际的设计风格和深色模式下的具体视觉效果再做判断。
以上就是为大家总结的深色模式设计中的一些重要的点，当用户开启系统全局的深色模式后突然出现一个不支持的App，你的App就会显得特别刺眼，甚至有些用户可能会不得不去寻找支持这一模式的替代品。这意味着今后设计过程中设计师们不得不关注两套模式下的不同效果，确定一套适配规范让系统自动调整你的App外观，并在某些情况下为部分界面单独设计，设计组件化在此刻也显得无比重要了。
Powered by Froala Editor
自由，是高墙外的倾盆大雨
3
作品
23
粉丝
23
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册