|教你巧用UI设计中的暗黑模式——Dark Mode( 二 )

本文插图

海拔高度构建层级结构：
如你所知，阴影在黑暗主题中显示效果不好，表达层级结构的更好的方法是使用海拔的亮暗。
背景层应该是最暗的，放置在其顶部的元素应稍亮一些。
正因如此，界面能够更合理的被用户感知。

本文插图

遵循平台准则：
设计一套流畅合理的界面是所有平台的使命。
所有主流平台都有制定规范，可以帮助你来实现黑暗主题（或模式）。
二、iOS人机界面指南的主要规范
专注于内容，在浅色和深色外观中测试你的设计，当你调整对比度和透明度等辅助功能设置（注：accessibility settings ，或称为可访问性设置）时，确保在黑暗模式下的内容清晰易读（上面讲到的技巧将做到这一点）。
颜色：

使用适应当前外观的颜色（使用动态颜色——两个色板）（注：iOS13官方新增动态颜色dynamic color，同样的颜色在dark mode和light mode模式下的色值不一样）。
确保所有外观都有足够的色彩对比。
柔化白色背景的颜色（白色背景–深色调，深色背景–浅色调）。

图标和图像：

尽量使用SF符号（SF Symbols）（可轻松调整为黑暗和明亮模式）。
必要时为明亮和黑暗模式单独设计符号。
确保彩色图标和单色图标清晰易读。

文本：

使用系统提供的标签色（label colors）。
使用系统视图绘制文本字段和文本视图。

三、Material Design的主要原则

用灰色变暗（使用深灰色代替纯黑色）。
带有重音的颜色（应用有限的重音）。
节省能源（较深的颜色可节省使用OLED显示器的设备的功率）。
增强可访问性（使用上一节中提到的原则）。

本文插图

在明暗的环境下进行测试：
你对界面的看法可能会因主题而异，需要进行测试来验证该主题结构是否合理。
你应在夜间的弱光条件下来测试黑暗模式，同时，你也可以白天在户外检查黑暗主题的基本元素是否具有足够的可读性。
这样你才能确保用户将得到一款高质量的产品。

本文插图
【|教你巧用UI设计中的暗黑模式——Dark Mode】

可以自由切换：
允许用户在需要时能够从明亮模式切换到黑暗模式，你也可以根据日照条件使其能够在模式之间自动切换，但它仍应可以手动设置。
切换UI主题在用户眼中是一个重大的变化，应该始终能由他们自己来控制。

本文插图

四、总结
深色主题（或模式）如今非常流行，所有主流平台都开始支持此模式，同时用户也会要求应用界面存在这一功能。
这可是学习其规范并开始在项目中创建黑暗主题的最佳时机。
? 本文译自UXMISFIT.com ，作者：THALION
译者：Tzw_n ，公众号「小阿田的设计笔记」
本文由 @Tzw_n 翻译发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash ，基于CC0协议