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
职场有点盐出品 未经授权禁止转载
欢迎分享到朋友圈
部分图片来源于网络,版权归原作者所有
如有疑问,请在后台直接联系。