视觉设计 » 8个技巧做好深色主题设计

8个技巧做好深色主题设计

发表于: 视觉设计. 评论
Sponsor

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

1. 避免纯黑色

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

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

材质设计建议#121212作为深色主题表面颜色。

深色主题表面颜色建议#121212

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

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

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

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

由于饱和色会在深色表面上产生视觉上的震动,要避免在深色主题上使用饱和色。浅色调(颜色在200-50范围内)在深色主题表面(在所有标高上)具有更好的可读性。

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

确保你的内容在深色模式下仍然清晰易读。深色主题表面必须足够深,以显示白色文本。谷歌材质设计推荐在文本和背景之间使用至少15.8:1的对比度。

使用颜色对比工具来测试对比度。

https://uxpro.cc/toolbox/accessibility/color-accessibility/

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

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

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

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

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

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

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

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

5. 考虑设计的情感方面

当涉及为现有的APP设计一个深色主题时,你或许想要在深色模式下传达相同的情绪。但最好不要这样做。因为

不同的背景对颜色的感知也不同

这意味着深色主题不能像浅色主题一样传达信息。因此,深色和浅色主题总是会唤起不同的情感。与其试图解决这个问题,不如利用它来确定产品的特性。

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

Shift Dashboard—— Sergey Zolotnikov设计的深色模式

6. 深度沟通

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

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

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

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

更高的标高,更浅的表面

表面越高,覆盖层就越坚固明亮。

由Martin Mroč设计的音乐播放器界面

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

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

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

‘深色主题’的UI控件

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

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

参考:

Dark theme (Material Design)深色主题 (材质设计)
https://material.io/design/color/dark-theme.html

封面:Kostia Varhatiuk
译者:SKYUI(公众号:SKYUI创新体验)
原文作者:Nick Babic
原文地址:https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }