如何适配深色模式？用一个 APP 改版案例让你学会！

一个 app 改版案例，深入浅地告诉大如何适配深色模式，同时给出了确错误的示范，相信对于目流行的深色设趋势，非常的实用了。

Google  2019 度 I/O发者会宣布，安卓将会从系统底层支持深色模式。同时，我们也会看到多支持深色 UI 的应用推出。

深色 UI 很快将成为一种见的模式，他应很快会遵循这一模式。

在篇文章中，我将以我们的应用 Shutter Points 为例，释何从浅 UI 适深 UI。

优化颜色

1. 调色

Shutter Points UI 的要颜色是单色为，目的是为了突图片容。色调于导航栏，标签中使 5 种辅色将图片注释与对应的类别联系起来。

△ Shutter Points 中的色和辅色及在界面中的应截图

当应用深模式时，亮和低饱和度的颜相比饱和度高的颜更受欢迎。使用亮的时要确元素易阅读，并合一个对比度适中的暗背。

使用歌提供的颜色编辑器（https://material.io/resources/theme-editor/）可以为每个品牌颜色创建一个定义色板，然后从中选择适的颜色。

根据谷歌设计规范（https://material.io/design/color/dark-theme.html#ui-application）议，在使用深色模时，个好经验法则是将调色板色值范围保持在 200 左右。

（彩云注：谷歌提供的颜色规范中 100-900 数的具体意义，感趣的请见知乎的回答：https://www.zhihu.com/question/26340807，这里就不深入解读了。）

任何一个深色界面都需一合的对比度，按 WCAG 的 AA 级标准，界面中的文字与背景的对比度至少达到 4.5 : 1。

△ 品牌颜色中的一浅色被选深色模式配色

2. 界面颜色

了新的配色方案手，时候改变界面的颜色了。深色主题中的所界面都以默认的深灰色 #121212 作基准的。

在 UI 组件上添同透明的白色，根据同的层级搭配同的透明。

△ 叠的层次范围从0%到16%

（彩云注：深模式中的高度 [ elevation ]，准确的含义其是 Android 开中的一个样式代码，用来设置界面的权重的，比 android:elevation=”1dp”，级就在 android:elevation=”0dp” 之上。）

为了表示不同的层高度，需要在组件的式中调整 2 个值：

• 投影属
• 叠加的透度

无论使用哪种主题，应用正确的高度将确元素持在一个一致的视次。想道应用中透明度该用少？里有一个表：

（彩云注：我把规范中的表帮大家截图出来，贴在里，想看更详细内容请见：https://material.io/design/color/dark-theme.html#properties）

组件中通使用不同透明度的白覆盖来持它们在深主题中的高度一致。

3. 避免大面积颜

在某情况下，仅仅将颜由亮变暗并不得到一个的结果。

例如在 app 的引导页中，浅色模式下使用次要颜色能突出内容，但在深色模式下，整个背景都是高饱和度的颜色，却会让界面显得非常的刺眼。

于这些情况，最好是选择个深色背景，然后保留级颜色用于标题等小积元素。

大积高饱和度颜色不适合用于深色模。

文本优化

1. 文字颜色

歌计规范主要调了 3 种文本颜色。

这里主要是过改白色或黑色不透明度作为颜色值。

• 调文本 -> #FFFFFF（87% opacity）
• 等文本 -> #FFFFFF（60% opacity）
• 次级文本 -> #FFFFFF（38% opacity）

△ 不同重要和不同大的文本在整个UI中传递出了层次结构，这个理也适用于深色主题。

2. 注对比度

所有的文本内容应该易于阅读并符标准规范。网页标准 WCAG 2.0 中规范 AA 别的文本，普通文本背景之间的对比度为 4.5 : 1，大标题文本这个比例为 3 : 1。

在我们 App ，接把浅色背景下标签颜色带到深色模，文本开始变很难阅读。为了到个好比度，所有标签文本需要改到深色，识度会更高。

△ 色元素上文本需要改变颜色以保证易读。

谷歌了一款测试具，帮确哪颜色时需将白色文本改黑色文本，具的址（https://material.io/design/color/the-color-system.html#tools-for-picking-colors）

（彩注：彩亲测，还挺方使的，建议电脑端打开这个页面试一，对于配色纠结症患者，有良好的治愈效果。）

小建议：推荐一款在 sketch 和 Adobe XD 中使的小插件叫 Stark，可方的测试你设计的界面可性。

插画和动效

如果应包含插画和图形元素，这些需要做好深色适配工作。

果插画有「背」和「主题」，最是将背的饱和度降低，以证对主题的关注。

Lottie 动画可以通过在 AE 中的源文件来重新导出 json 文件，来调整动画的暗适配，方便。

△ 深色主题插画同让用户关注插画的主题内容。

总结

随着深色主题被引入操作系统别，应用将需要在不破坏任何有体验的情况下做出适配优化。

深色主题并不是仅仅做简单反色。

设师发者必须明确以下几点：

• 所有 UI 元素必须符合标准可用性原则；
• 组件的可视层次结构不同的颜色主题内应该保持一致的；
• 牌识别应该受到题颜色变的影响。

原文链接：《Design for the Dark Theme》

注译者的微信公众号：「彩云译设计」