Explore, learn, enjoy

苹果在 2018 年 WWDC 上发布的 Mojave 系统中增加了一个新功能:Dark Mode 深色模式。当然在很多手机 App 里已经有类似的“夜间模式”了,但这是第一次有了系统级的支持。之前为飞地设计深色模式的时候,我需要整理出所有用到的颜色,再一一调整出对应的夜间模式下的颜色,是个非常折磨人的活。如果仅仅是做一些细微改动就能应用深色模式真的是减少了很多工作量。苹果将来很有可能把这个功能带到 iOS 上来。

Alt Text!

在 WWDC 的演讲里,苹果的设计师们讲了他们是如何设计深色模式的,背后的不少细节考虑很值得学习。我很惊讶过了快半年时间中文设计圈竟然还是没人写——也可能是我没找到。于是我根据那场演讲整理出深色模式的设计原则,希望能对你有所帮助。本文图片基本来自 Introducing Dark Mode 里的 keynote。

我们对深色界面的认识很大一部分来源于科幻电影。里面的人操作的经常是深色界面,它也的确给人专业、新潮的感觉。试着想象一个黑客的形象,他是不是正对着一片黑色的命令行界面敲代码?

Alt Text!
图为区块链投资受害者

其实之前就有一些应用采用深色界面,通常以内容为绝对核心。比如 Adobe 系列的默认界面(除了 XD)、QuickTime,这样设计的确对专注于内容有帮助。

有了系统支持,Mac 应用应该都去适配,不然在深色模式下的一个明亮界面会很突兀。但除非必要,一般应用不需要只提供深色模式。还是应该把这个选择权交给用户。

设计原则

深色模式不仅仅是反色

一般人可能很容易想到,把黑色变白色,白色变黑色,深色变浅色,浅色变深色就可以了。实际上你需要更仔细的检查你的设计,找出视觉传达的真实目的。

拿这一组按钮举例。

light mode button
浅色模式下,按钮的按下状态会更深一点
Alt Text!
深色模式下,按下会更亮

这个规则在大多数情况下都适用。

如果是一组按钮呢?

Alt Text!
浅色模式的按钮后面的背景,更像是刻出来的
Alt Text!
而深色模式则更像是自发光

尽管有着不同的处理方法,但核心的视觉目标都是一个:为了使元素显得相关。

另一个例子是层叠窗口。Mac 用阴影表现窗口之间的层级,体现深度。但如果使用浅色阴影,你将失去对深度的感知。况且你也没有见过发光的阴影吧。

对此苹果的做法是采用两层阴影,一个漫射阴影(diffused shadow)一个边缘阴影(rim shadow)。模糊参数与浅色模式保持一致,将不透明度调高,让边缘更明显。此外还加了一个内边框使窗口凸显出来。

所以深色模式采用了一样的设计准则,但进行了相当细致的微调。

内容优先

尽管很多手机应用把深色模式称之为夜间模式,但在 Mac 上深色模式并不是为夜间使用设计的。真正的夜间模式叫夜览。深色模式的核心目标其实是凸显内容,这也是贯穿始终的设计准则。

在亮色模式下,有时候你很难发现内容在哪,尤其是很多窗口的时候。因为内容大多是浅色的。黑暗模式下背景很暗,窗口融入背景,内容成为注意力焦点。通常有三种处理方法。

第一种是完全的黑暗。Finder 是典型。其内容为各种 icon。深色的背景有助于突出 icon。

finder

第二种是保持内容区域不变。比如 Pages,你不能把文字背景变暗,因为白色的背景实际上是内容的一部分。

pages

第三种是遵循用户选择。邮件内容区域可以依照用户喜好,而窗口仍然遵循系统。
这三种方法都是为了让内容成为核心让窗口成为次要。

mail

如何处理背景

苹果使用了一种叫 desktop tinting 的技术来处理窗口背后的背景色。首先将窗口背后的颜色取平均,再加上一层灰。

Alt Text!

这个处理是动态的,所以你移动窗口,颜色也会随之改变。对于某些特殊应用,也可以选择关闭这个功能。

这是应用 desktop tinting 的对比:

Alt Text!

设计方法

这里省去关于颜色的一些内容,我觉得没必要讲。这里主要说一下两种模式下 icon 的区别。

黑白icon的区别

显然,icon不能仅仅简单的转换,尤其是那个诡异的笑脸。深色模式的icon需要重绘:

仅对于这种 line-style icon 来说,最大的区别就是浅色模式下描绘的是轮廓,深色模式下描绘的是形状

有时候在深色模式下的 icon 需要表现出不同的层级,这就需要增加分隔区域。

有时候也可以为了更明显的显示层级,可以使用不同灰度的颜色。

总结

深色模式不仅仅是将颜色反转,它需要更细致的思考和调整。目的也不是为了夜间护眼(夜间还是睡觉比较好),而是为了突出内容。

对于开发者来说,适配深色模式并不需要琐碎的工作,一些简单的调整就可以。具体的方法可以见苹果的网站


知识共享许可协议
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。