android深色模式适配,如何适配深色模式？给UI设计小伙伴的《简易版入门指南》...

3月9日，微信团队表示：下一个 iOS 版本将适配深色模式。毫无疑问，深色模式正在成为应用的标配，其他应用也很快会遵循这一模式。

至此，我们可以这么理解，微信适配深色模式，恰是平台方和开发者持续构建喜大普奔生态及用户体验的结果，这也是微信团队微博提到「微信与苹果达成合作，共同探索微信在 iOS 系统的暗黑模式体验」的原因了。

刘学文，公众号：爱范儿微信不适配「暗黑模式」就被苹果下架？真相不是这样子的

适配深色模式的工作可不简单。盐姐发现了一篇很有用的译文，希望能帮到各位 UI 小伙伴。

作者 |Pierluigi Rufo

来源 |Medium.com

原标题|Design for the Dark Theme

在这篇文章中，作者以自己团队开发的应用为例，解释了如何从浅色 UI 适配深色 UI。

优化颜色

▋调色板

为了突出图片内容，作者所在团队开发的这款 APP以单色为主。主色用于导航栏，5种辅色标签将图片注释与对应的类别联系起来。

▲ Shutter Points 界面中的主色和辅色

比起饱和度高的颜色，亮色和低饱和度的颜色在深色模式中更受欢迎。但是要确保亮色元素易于阅读，暗色背景的对比度也要适中。

使用谷歌提供的颜色编辑器[1]，可以创建一个自定义色板，然后从中选择合适的颜色。根据谷歌设计规范[2]建议，最好将色值范围保持在200左右。

深色界面的对比度非常重要，按 WCAG 的 AA 级标准来说，文字与背景的对比度至少要达到4.5 : 1。

▲ 从品牌颜色中选取一种浅色为深色模式配色

▋界面颜色

有了新的配色方案，就可以调整界面的颜色了。深色模式一般默认以深灰色 #121212为基准。

在组件上添加不同透明度的白色，代表不同层级。

点击播放 GIF 0.0M

▲叠加的层次范围从0%到16%

注：深色模式中的高度 [ elevation ]，其实是一个样式代码，用来设置界面权重，比如 android:elevation=”1dp”，层级就在 android:elevation=”0dp” 之上了。

为了表示不同的层级高度，需要调整这2个值：

投影属性

叠加的透明度

无论使用哪种主题，正确的高度可以让元素的视觉层次保持一致。想知道透明度该用多少？看这个表：

▲详细内容：https://material.io/design/color/dark-theme.html#properties

通过使用不同透明度的白色覆盖，来保持组件在深色主题中的高度一致。

▋避免大面积颜色

只是将颜色由亮变暗，不一定会得到满意的结果。

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

遇到这样的情况，最好选用深色的背景，保留次级颜色用于标题等小面积元素。

▲大面积的高饱和度颜色不适合用于深色模式

文本优化

▋文字颜色

谷歌设计规范主要强调了 3 种文本颜色，主要是通过修改白色或黑色的不透明度作为颜色值。

强调文本-> #FFFFFF(87% opacity)

中等文本-> #FFFFFF(60% opacity)

次级文本-> #FFFFFF(38% opacity)

▲不同重要级和不同大小的文本传递出了层次结构

▋注意对比度

所有的文本内容应该易于阅读并符合标准规范。网页标准 WCAG 2.0 中规范 AA 级别的文本，普通文本与背景的对比度为4.5 : 1，大标题文本为3 : 1。

直接把浅色背景下的标签颜色带到深色模式中，文本开始变得很难阅读。为了得到合适的对比度，所有的标签文本需要修改到深色，识别度会更高。

▲彩色元素上的文本需要改变颜色以保证易读

谷歌做了一款测试工具[3]，帮助确定在哪个颜色值时需要将白色文本改为黑色文本。

推荐一款插件：Stark。可以测试出你设计的界面可用性，在 Sketch 和 Adobe XD 中均可使用。

插画和动效

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

如果插画有「背景」和「主题」，最好是将背景的饱和度降低，以保证对于主题的关注。

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

▲深色主题插画同样让用户关注到插画的主题内容

总结

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

深色主题并不是仅仅做简单的反色，设计师和开发者必须明确以下几点：

所有的 UI 元素必须符合标准的可用性原则；

组件的可视层次结构在不同的颜色主题内应该是保持一致的；

品牌识别不应该受到主题颜色变化的影响。

[1] 谷歌提供的颜色编辑器：

https://material.io/resources/theme-editor/

[2]谷歌设计规范：

https://material.io/design/color/dark-theme.html#ui-application

[3] 测试工具地址

https://material.io/design/color/the-color-system.html#tools-for-picking-colors

职场有点盐出品 未经授权禁止转载

欢迎分享到朋友圈

部分图片来源于网络，版权归原作者所有

如有疑问，请在后台直接联系。