DarkMode(1):产品应用深色模式分析

为什么Dark Mode变得越来越流行

2018 年的 macOS Mojave 率先支持了深色外观,紧接着 Windows 10 在 2018 年的 10 月份大版本更新中,也引入了 Dark Mode。

iOS 13 的发推出了深色模式(Dark Mode),不仅可以大幅减少电量的消耗,减弱强光对比,还能提供更好的可视性和沉浸感。

 Android Q 重点推出了Dark Mode

目前主流的操作系统也都在逐步支持 Dark Mode。

像Facebook 、Slack、WhatsApp、Chrome 等等软件都支持Dark Mode

那么,增加暗黑模式的目的是什么呢?

夜间使用时不那么刺眼

Google 提出了「Digital Wellbeing(数字健康)」的概念,注重在科技设备与使用者之间,找到一个健康的平衡点。

夜览模式让屏幕在晚上减少蓝光,帮助我们更好地睡眠;

隐式推送减少了各类通知打扰我们的次数,使手机不会频繁打断我们的注意力

虽然有许多 app 已经支持了夜间模式,但还远远不够。首先,每个 app 的支持程度不尽相同,同时由于缺乏系统级的 API 支持,每个 app 的开发适配工作也比较烦琐。

让使用者沉浸于内容

将 Dark Mode 翻译为「夜间模式」,是因为前者的使用场景更广,因此使用「深色模式」这样的翻译更恰当。

黑色更有利于我们沉浸于内容本身,无论是生产内容还是消费内容。如果你细心观察,你会发现许多专业级的多媒体内容生产软件,一直以来都是黑色的界面。不管是 Adobe 系列的软件,还是苹果的 Final Cut Pro,或者是 Pixelmator、Affinity 系列软件,都是深色的主界面基调。同样的道理,你会发现许多视频网站或者影音播放工具,都是使用深色作为主基调。

OLED 屏幕节电

大多旗舰机的手机屏幕都抛弃了 LCD 材质,转而使用 OLED 材质的屏幕,例如,从 iPhone X 到 iPhone XS,搭配 Dark Mode,这样就能更加省电。

LCD 屏幕分两层:像素层不发光,另外有背光面板照亮像素。

OLED 屏幕只有一层,像素本身是自发光的。这样,在显示黑色时,OLED 的屏幕像素只需要关闭,就是纯正的黑色了。

在 macOS 的深色模式中,基底色并不是纯黑,而是带有一定灰度的黑色。

在 iOS 上,苹果设计 Dark Mode 的基底色就是纯黑,这样一方面来可以省电,另一方面也与「刘海」的衔接更加自然。

Dark Mode 的设计难点在哪?

既然 Dark Mode 有不少吸引人的优点,为什么 Google 和苹果,一直等到2019年才正式推出系统级的 Dark Mode

Dark Mode 并不像想像中的那么简单。

Dark Mode 并不是简单的颜色反转

在界面色彩复杂一些的情况下,直接的颜色反转就完全没法用了。以下面的桌面为例,绿色的反转色是粉色,红色的反转色是青蓝色,而原本就是黑色的桌面被反转成了白色,最终得到的效果惨不忍睹。

任意颜色可以由三原色组成,在电子设备上,一个色彩也可以表示成 RGB 值,即红绿蓝三种颜色的比例。每种颜色的取值范围是 0-255 之间,例如,白色可以表示为(255,255,255),黑色可以表示为(0,0,0)。那么,颜色反转实际上,是把一种颜色(R,G,B),自动变换到它的对立面,成为新的颜色(255-R,255-G,255-B)。

更多相关内容推荐阅读:《色彩空间RGB/CMYK/HSL/HSB/HSV/Lab/YUV基础理论及转换方法:RGB与YUV》、《水煮RGB与CMYK色彩模型—色彩与光学相关物理理论浅叙》、《三色视者与四色视者身后的理论基础:色彩原理

所以Android与iOS的开启颜色反转,并不能开启暗黑模式。

要重新考虑色彩对比度

内容与背景之间的色彩对比度问题,两者之间必须保持才能使内容具有可读性。要衡量这一点,其实是有一个明确的指标的:

色彩对比率(Color Contrast Ratio),它能够提供两种颜色之间,相对亮度的一个衡量关系

色彩对比率的取值范围在 1:1 到 21:1 之间,数值越大,表示对比度越强烈,内容的可辨认度越高

Web 标准制定组织 W3C 在其 Web 内容无障碍指南(WCAG)中建议

对比一般的文本,其对比率应该不小于 4.5:1

对于图像和界面元素来说,对比率应该不小于 3:1

要如何计算色彩对比率呢?

它的计算相对比较复杂,感兴趣的同学可以在这个页面搜索「Contrast Ratio」查看具体的计算方法。一般情况下,你可以使用各种现成的工具,只需要数入两种颜色的数值,就可以直接看到最终的计算结果了。

界面的层级与明暗关系

除了色彩对比度的关系外,还有一个更深层次的界面层级带来的问题,是通过颜色反转无法解决的。

论是浅色还是深色外观下,我们都应该在界面层级中,让离用户在逻辑关系上更近的颜色更亮一些。

再让我们看一看实际 iOS 13 版本中 Dark Mode 的效果。你会发现,Dark Mode 的界面配色,并不是简单的颜色反转,可操作区域的颜色更浅一些,而背景色才是全黑的。这样,不管是浅色还是深色外观下,始终都保持了逻辑上的统一:离用户逻辑关系上越近的层级,颜色越浅越亮一些。

界面层级与明暗的逻辑关系,本质上是与颜色反转不兼容的。

苹果是如何为 iOS 设计 Dark Mode 的?

苹果在今年 WWDC 的「What's New in iOS Design」专题中,花了不少的篇幅专门用来介绍如何升级适配 Dark Mode。

引入语义色彩(semantic color)

在以往的界面设计与开发过程中,需要单独针对每一个元素,指定一个颜色。既然不能简单地通过颜色反转来实现 Dark Mode,那么最简单的方式就是:为浅色外观和深色外观分别设计两套配色方案

然而,这样的做法带来了一系列问题,尤其是 iOS 作为一个平台,需要考虑平台化的统一标准,以及尽可能地方便第三方开发者的适配工作。如果单纯地使用两套配色方案,那么每改动一处界面,都不能忘了要改动两个颜色值。同时,界面和界面之间,同样的页面元素,需要重复地指定具体的颜色,也造成了不必要的工作。

因此,苹果引入了语义色彩(Semantic Color)这个概念。如同字面意思一样,不再通过 RGB 的值来描述一个颜色,而是通过 LabelColor、SeparatorColor 这样的文字描述,来说明这里应该使用文字标签的颜色、分隔线的颜色……例如,在深浅两种模式下,系统界面的背景色会自动地去对应 SystemBackground,在浅色外观下 SystemBackground=#FFFFFF(白色),在深色外观下 SystemBackground=#000000(黑色)。

语义色彩带来了两个显而易见的好处:

语义色彩带来了两个显而易见的好处:

趋动设计师规划全局的配色方案:在 Dark Mode 的设计难点中我们提到了,一套完整而悦目的 Dark  Mode,需要设计师深入地调整明暗关系下色彩的搭配。通过引入语义色彩,设计师可以自上而下地进行框架性设计,首先定义好界面中一共存在哪些元素,然后,为这些元素规划好相应的配色方案,以确保在深浅外观中都获得最佳显示效果。

更容易复用:通过语义色彩,无论是对于设计师还是程序员,都可以实现「一次声明,处处使用」。通过语义色彩,设计师可以整理出配色模板,程序员可以在不同界面的同类型元素中,直接使用语义色彩,而不用重复地去指定相同的颜色。

苹果在系统层面整理出了一套配色方案,其中包含了背景色、文字标签色、填充色等等,大多提供了四种不同醒目程度的层级,从应用在标题上的一级,到提示或说明性文字的四级。当然,除了系统内置的这些色彩,开发者也可以根据自己的需要创建和声明新的语义色彩。

背景色区分基底色(Base)与提亮色(Elevated)

在设计难点中我们提到了,层级上离用户越近的区域,应该在视觉上更明亮一些。苹果在设计 Dark Mode 时,也充分考虑到了这一点。

iOS 深色外观的背景色,是纯正的黑色(#000000),苹果称之为基底色(Base)。不过,这个背景色会随着界面层级的变化,而变成提亮色(Elevated)。下图就是一个例子:在左边的通讯录 app    中,背景色就是纯正的黑色。而到了右边的电话 app 中,有些操作会需要弹出浮层供你选择联系人,这时候浮在上方的界面背景色,就变成了亮一些的提亮色。

材质(Material)与系统控件的原生支持

苹果在介绍 Dark Mode 时,还提到了材质(Material)。在我们常见的说法中,就是自 iOS 7    中引入的毛玻璃效果,常用于系统的文件夹、下拉菜单、通知、Dock 栏等处。苹果为这些材质设计了深浅两套配色方案,并提供了从厚到薄的四种感观效果。

更重要的是,苹果还为材质上的内容颜色进行了单独的鲜活化(Vibrancy)处理。以下图为例,第一行的文字「Solid    Color」为固定色彩,随着背景颜色的变更,到最后两幅图中几乎不可辨识了。第二行的「Vibrant」则为经过了鲜活化处理的文字效果,在背景色变亮时,也能保证文字的可读性。

此外,苹果还更新了 UIKit    中的系统级控件,以适配深浅两种颜色外观。值得注意的是,在浅色模式下,许多元素是存在投影的,例如开关按钮、拖动条的拉动点……而到了深色外观中,这些投影被统统移除了,这也是苹果设计的细微精致之处。

引入字体化图标

在 iOS 13 中,苹果还为了 Dark Mode 引入了多达 1500 余个字体化图标 SF Symbols。

前面我们已经看到了,苹果通过语义色彩解决了界面与内容的色彩管理,同时通过更新一系列的系统级控件确保适应两种不同的配色方案。然而,界面中还存在着一个重要元素,就是图标。如果我们希望获得良好的效果,往往需要针对深浅外观重新填充图标的颜色,准备两套图标素材。

而字体化图标彻底解决了这个问题,还带来了一系列的优势。什么是字体化图标呢?简而言之,你可以对文字进行的处理,也可以针对图标做到。所以,字体化图标可以像文字一样修改颜色、粗细、大小、对齐。前面提到的语义色彩、鲜活化处理等技术,也一样可以运用在图标上。

以上四点,就是苹果如何为 iOS 设计 Dark Mode 的。你可以在这里下载苹果官方提供的    iOS 13设计模板的 Sketch 文件,其中包含了 iOS 13 的最新范式、内置语义色彩、材质等元素。

Dark Mode 在 iOS 13    上的呈现感不错,但距离完美还有一定距离。这其中既有客观因素,也有系统的主观原因。例如,iOS 的 Dark Mode 针对图像不会进行特别的处理,如果你的备忘录中有一张白色的照片,就会变得十分刺眼。而 Instapaper    在深色外观下,会自动暗化(Dimmed)处理内容中的图片元素。

此外,从客观因素上来说,许多网页还没有针对 Dark Mode 进行适配,导致打开时会一片惨白刺眼。同时,在 Power+ 1.0 中的《深色模式对视疲劳和效率的影响》这篇文章,对 Dark Mode    也提出了许多非常有深度的论述。例如,深色模式其实未必适合文字的阅读,以及即使开启了深色模式,在昏暗环境中使用电子设备对视力的伤害也不容小觑。

但不管怎么说,Dark Mode 都给我们提供了额外的选择,数字健康(Digital Wellbeing)不仅仅只体现在硬件的迭代与软件的更新上,更应该成为每一位使用者与开发者的主动意识,借此也希望所有的 app 和 web 开发者,尽早适配 Dark    Mode。

参考文章:

Dark Mode 的设计要点 https://zhuanlan.zhihu.com/p/141465632

写给设计师的指南:如何为即将到来的Dark Mode做好准备 https://zhuanlan.zhihu.com/p/67583152

转载本站文章《DarkMode(1):产品应用深色模式分析》,

请注明出处:https://www.zhoulujun.cn/html/webfront/style/darkMode/8557.html

推荐阅读更多精彩内容