国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

深色主题设计的8个技巧

发布时间:2019/08/02标签:   APP设计    点击量:

原标题: 深色主题设计的8个技巧

深色主题是过去几年中最需要的功能之一。苹果和谷歌都将深色主题作为用户界面设计重要的组成部分。深色主题降低了界面亮度,ui知名设计师,在深色环境中给用户提供了适度安全感,也最大限度减少了用户的眼疲劳。

下面是在设计产品的深色主题时需要了解的 8 个技巧。
1. 避免纯黑色
深色主题不一定是纯黑色背景上的纯白色文本。事实上,这种高对比度对用户可能很痛苦。 使用深灰色作为组件的主要表面颜色比使用纯黑色(#000000)更安全。深灰色界面可减轻眼睛疲劳,深灰色表面上的浅色文本比黑色表面上的浅色文本对比度低。深灰色表面可以表达更广泛的颜色、高度和深度,因为它更容易在灰色上看到阴影,而不是真正的黑色。 材质设计建议#121212作为深色主题表面颜色。

深色主题表面颜色建议#121212
2. 避免在深色主题上使用饱和色
饱和色在浅色表面很适用,但在深色表面上会让人产生视觉上的振动,使其更难阅读。去饱和度原色,使对比度足以与深色界面形成对比。 使用较浅的色调(颜色在200-50范围内),因为它们在深色主题表面上具有更好的可读性。浅色变体不会降低用户界面的表达力,还能帮助你保持适当的对比度,且不会造成眼睛疲劳。

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

由于饱和色会在深色表面上产生视觉上的震动,要避免在深色主题上使用饱和色。浅色调(颜色在200-50范围内)在深色主题表面(在所有标高上)具有更好的可读性。
3.?符合无障碍色彩对比标准 确保你的内容在深色模式下仍然清晰易读。深色主题表面必须足够深,以显示白色文本。谷歌材质设计推荐在文本和背景之间使用至少15.8:1的对比度。 使用颜色对比工具来测试对比度。

https://uxpro.cc/toolbox/accessibility/color-accessibility/?source=post_page—————————
4.?文本使用“打开”颜色
“打开”颜色出现在组件顶部和关键表面的“打开”颜色。通常用于文本。 深色主题默认的“打开”颜色是纯白色(#FFFFFF)。但是#FFFFFF是亮色,php开发神器,在深色的背景下会产生视觉“震动”。所以谷歌材质设计推荐使用稍暗的白色:

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

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

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

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

选择稍暗的白色以防止背景与周围的深色内容形成鲜明的对比
5.?考虑设计的情感方面
当涉及为现有的APP设计一个深色主题时,你或许想要在深色模式下传达相同的情绪。但最好不要这样做。因为 不同的背景对颜色的感知也不同 这意味着深色主题不能像浅色主题一样传达信息。因此,深色和浅色主题总是会唤起不同的情感。与其试图解决这个问题,不如利用它来确定产品的特性。 深色模式并不总是从现有的浅色主题派生出来。

Shift Dashboard——?Sergey Zolotnikov设计的深色模式
6.?深度沟通
与浅色主题设计类似,在创建深色主题用户界面时,ui设计爱好者,必须创建层次结构并要强调布局中的重要元素。 标高(Elevation)是我们用来传达元素层次结构的工具。 在浅色模式下,我们使用阴影来表示高度。表面越高,阴影就越宽。同样的方法在深色主题中是行不通的。在深色背景下很难看到阴影。最好是照亮每一层表面。 在用材料建造的深色主题中,抬高的表面和组件使用叠加着色。一个表面的标高越高,表面颜色就越浅。 更高的标高,更浅的表面

表面越高,覆盖层就越坚固明亮。
版权信息Copyright ? IT技术教程 版权所有??? ICP备案编号:鲁ICP备09013610号