认识达内从这里开始

深色系的应用是大多数UI设计师都应该熟练掌握的一个设计能力，下面我们就通过案例分析来简单了解一下，深色系设计应用常见问题分析。

1.避免纯黑色

深色主题不一定是纯黑色背景上的纯白色文本。事实上，这种高对比度对用户可能很痛苦。

使用深灰色作为组件的主要表面颜色比使用纯黑色更安全。深灰色界面可减轻眼睛疲劳，深灰色表面上的浅色文本比黑色表面上的浅色文本对比度低。深灰色表面可以表达更广泛的颜色、高度和深度，因为它更容易在灰色上看到阴影，而不是真正的黑色。

2.避免在深色主题上使用饱和色

饱和色在浅色表面很适用，但在深色表面上会让人产生视觉上的振动，使其更难阅读。去饱和度原色，使对比度足以与深色界面形成对比。

使用较浅的色调(颜色在200-50范围内)，因为它们在深色主题表面上具有更好的可读性。浅色变体不会降低用户界面的表达力，还能帮助你保持适当的对比度，且不会造成眼睛疲劳。

调色板中饱和度较低的颜色可以提高可读性，减少视觉震动。

3.符合无障碍色彩对比标准

确保你的内容在深色模式下仍然清晰易读。深色主题表面必须足够深，以显示白色文本。

4.文本使用“打开”颜色

“打开”颜色出现在组件顶部和关键表面的“打开”颜色。通常用于文本。

深色主题默认的“打开”颜色是纯白色。但是#FFFFFF是亮色，在深色的背景下会产生视觉“震动”。所以材质设计推荐使用稍暗的白色:

高度强调的文本的不透明度应为87%。

中等强调文字的比例为60%。

禁用文本使用38%的不透明度。

快速提示：深色背景下的浅色文本比浅色背景下的文本更醒目。这就是为什么要在深色模式中使用更浅色的字体。

选择稍暗的白色以防止背景与周围的深色内容形成鲜明的对比

5.考虑设计的情感方面

当涉及为现有的APP设计一个深色主题时，你或许想要在深色模式下传达相同的情绪。但不要这样做。因为不同的背景对颜色的感知也不同这意味着深色主题不能像浅色主题一样传达信息。因此，深色和浅色主题总是会唤起不同的情感。与其试图解决这个问题，不如利用它来确定产品的特性。

深色模式并不总是从现有的浅色主题派生出来。

6.深度沟通

与浅色主题设计类似，在创建深色主题用户界面时，必须创建层次结构并要强调布局中的重要元素。

标高(Elevation)是我们用来传达元素层次结构的工具。

在浅色模式下，我们使用阴影来表示高度。表面越高，阴影就越宽。同样的方法在深色主题中是行不通的。在深色背景下很难看到阴影。

在用材料建造的深色主题中，抬高的表面和组件使用叠加着色。一个表面的标高越高，表面颜色就越浅。

更高的标高，更浅的表面

7.允许用户从普通模式切换到深色模式

让系统决定何时打开或关闭深色主题是具有诱惑力的。这种设计决策会导致用户体验非常糟糕。所以让用户那里获得了控制权，让系统为他们做出决定。

这就是为什么不要使用自动启用深色主题。允许用户使用用户界面控件打开(或关闭)深色主题。用户能够根据自己的需求手动选择模式。你需要定位和设计切换器模式。

8.测试你在浅色和深色外观的设计

查看用户界面在这两种情况下的外观，并根据需求调整设计以适应每种情况。可以考虑在日落之后用白炽灯测试你的产品。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。