使用深色系UI,有哪些点你需要注意?

3 评论 10233 浏览 42 收藏 15 分钟

选择深色系的 UI设计,本身是为了帮助现代人缓解数字产品所带来的视觉疲劳,那么,在使用深色系UI,有哪些点你需要注意?

设计师的主要职责之一,就是为产品定制合理的视觉,基于目标用户的特征和产品的设计目标,给用户特定的感觉。UI和UX设计师需要在这个过程中通力协作,而 UI设计师更是要确保产品的 UI 和视觉最终落地。

在设计过程中,有诸多因素会影响 UI 给用户的感受。其中,色彩是最重要也是最明显的一个部分。

许多设计师会在选择配色方案的时候,会使用浅色的、明亮的背景色彩。其实,大众和设计师的这个倾向是有科学依据的。在白色的背景上使用黑色的文本,可读性是最佳的。在不同的测试和研究当中,浅色背景上的深色文本,比起深色背景上的浅色文本,阅读性更强。

在一项著名的研究当中,受试者面对深色背景阅读浅色文本的时候,视觉疲劳的现象表现得更加明显。(Bauer, D., Bonacker, M., and Cavonius, C. R. 1983)

而另外一方面,人们习惯了在白色背景上查看图片,阅读深色的文本。这种状况已经延续了上百年。而在中国,这种状况更是延续了几千年。向上追溯到35万年前的旧石器时代,当时的原始人类同样是使用木炭在浅色的墙壁上书写。

而如今,许多 UI界面的设计并没有一直遵循这种规律。一方面,采用深色系的设计风格,只要确保对比度,本身的可用性和易用性并没有太大的问题,另一方面,这样的设计在美学上也有着独有的优势,让界面呈现出一种独特的戏剧性,同时还能让一些品牌拥有更加有趣和引人入胜的视觉。

Apple TV 就采用了深色系UI。比如最新的 macOS Mojave 中加入的深色系主题,就是用户呼吁了很多年之后的结果。

不过,真的要深入到 UI 设计的「黑暗面」,设计师还需要跨越很多挑战。和平时设计的浅色为主的主题不同,深色系的UI 需要处理不一样的可用性问题——主要是可读性和对比度上的问题。此外,还需要关注用户所使用的环境,以及设备本身的一些属性。

Breitling 为他们的手表加入黑色背景,和竞争对手做差异化区分。

其实,选择深色系的 UI设计,本身是为了帮助现代人缓解数字产品所带来的视觉疲劳(之前的实验是做的深浅两种色彩下的单纯定量对比)。随着现代人对于数字内容的日渐沉迷,每天都会花费大量的时间看屏幕,而屏幕和数字内容所带来的视觉疲劳,不可避免地大幅增加。数字视觉疲劳如今已经被定性为一种常见病了,每天都会有大量的普通人受到这种病症的困扰,因为视觉疲劳所带来的并不只是眼部的不适,还伴随着头疼和颈部疼痛,眼部的症状则呈现为视力下降,视野模糊和灼伤感、刺痛感。

事实上,类似的病症和定义还有不少,比如计算机视觉综合征(CVS)。一项研究表明,83%的美国人每天使用数字设备的时间超过2小时,60.5%的人表示他们出现了和CVS 类似的症状。

大量的 B2B的程序, SaaS类产品,以及媒体类数字产品,如今大都配备了深色系主题,让用户在合适的时候从浅色主题下切换过来,用来调整和修正视觉模式,降低视觉疲劳。不过,这些深色系的UI,需要通过合理的设计和调整之后,才能够合乎需求。

目前,长时间使用电脑的人群当中,开发者占据了不小的比例,而他们也是深色系主题的最大粉丝之一。因为需要长时间面对代码编辑器,视觉疲劳是不可避免的。正如同 Toptal 的开发人员 Kevin Bloch 所说:「黑色背景下查看代码,亮度相对更低,高对比度下面对不同色彩的代码更容易阅读,也更容易理解其中的信息。」

而 Toptal 的另外一名开发者 Amin Shah Gilani 则补充道:「我会长时间使用深色系主题,也更加喜欢它,因为眼睛其实会更容易适应,尤其是在灯光黯淡的情况下,或者晚上工作的时候。」

△ Toptal 开发者Amin Shah Gilani 使用 Atom 编辑代码

游戏 APP 中的 UI设计也大多是深色系的,游戏玩家大都更加倾向于黑色系配色所带来的沉浸式环境,黑色的背景让视觉效果更加醒目,明暗更强,对比度更明显,视觉层次感也更加丰富。

适合使用深色系 UI 的地方

绝大多数涉及到娱乐的 UI界面,大都会有一定的倾向使用深色系主题,无论是智能电视、游戏机还是电影类应用,这其实不仅仅和对比度有关系,它和用户的日常使用环境和时间也有着极深的关联:绝大多数的娱乐活动都发生在晚上,并且大家会愉悦地享受相对昏暗的房间环境。丰富多彩的视觉内容,也同样会在深色系的UI 上显得更加炫目。

昏暗的环境让人放松和沉浸,太亮的背景则会让人紧张,这也是深色系UI的设计来源和基础:设备、内容、活动和场景。

确定了深色系UI 的使用时间、场景、用户特征以及所用设备之后,接下来要明确 UI设计的目标:

  1. 要让视觉效果明显且具有戏剧性;
  2. 营造出时尚、优雅、奢华和价值感;
  3. 制造神秘感和阴谋感;
  4. 以最小的干扰来帮助用户集中注意力;
  5. 支持可视化的层次结构和清晰的信息架构。

△ Ramotion 的汽车遥控概念设计

深色系的UI 是有明确适用范围和设计方向的。大段的文本在深色系UI 下阅读体验比浅色系背景下要差一些(之前的实验已经验证过了),在深色系UI 中,文本适合以小块的形式呈现,并且对比度和亮度应该控制在一个相对较高的水平,通常使用的深灰色在这里肯定不适用。

△ CINEMATEK 使用深色系的UI来创造戏剧感

不适合使用深色系 UI 的地方

大量的文本内容不适合在深色系UI 中展示,而只有最简单的文本内容,强交互性的信息,视觉化的元素,才是它的最佳搭配。为了确保整体的用户体验,必须确保对比度和可读性,因此如果数据量和内容类别太多的 UI,也很难使用深色系UI。设计师真正要做的工作并不是单纯的更换配色,否则大量文本和多属性强内容的界面,会被深色系UI主题给毁掉。

换句话来说,深色系的UI 中,可用的色彩变少了,空间利用率也相对不会那么高。

在这个案例当中, UI 元素的对比度不足,对于体验的损耗很明显。

说一个真实的案例吧。我曾经参加过一个 B2B Saas的项目,公司的 CEO 坚持认为,如果想在视觉上就做到与众不同,就必须使用深色系的 UI主题设计,这样才能够和公司的品牌相匹配。对于 CEO 的这提案,设计团队和产品经理对此没少开会,直到多次的磋商和调整之后,大家才算是勉强走出这个灾难性的提案。

由于平台使用了一组标准的 SaaS 应用程序 UI 组件,因此数据呈现会借助大量的不同类型的表单、小组件、下拉列表、信息图表以及各种图标,此外还有相当多的文本和数字内容。想要协调如此之多类型的内容,单是调整对比度和统一配色就已经很难了,此外还需要考虑导航、布局和实际功能。在这样的 B2B 平台中,完全借用深色系UI 设计,几乎是不可能完成的任务。

为了确保产品的基本可用性,最好的选择其实是将深色和浅色系的 UI元素混合搭配起来使用。比如较为复杂多变的小组件、表单、数据表格、大段文本和数字都在浅色背景上来进行设计,而展示性的信息图、分析报告和结果呈现等比较聚焦的信息,则在深色系的背景下呈现。

为什么苹果直到今年才在自家的 Mac系统中加入深色系主题,我们可以想见这当中的难度。至少,在 Mac系统中,即使是在深色主题之下,也没有全局采用深色系背景。

深色系仪表盘 UI 中, 分析和信息图在深色背景下良好地呈现,但是仍需要仔细处理才能确保足够的对比度。

深色系 UI 的设计注意事项

最后,需要强调的是,深色系UI 在具体处理的时候,要非常的小心。设计师不应该单纯的为了做的不一样,或者为了复制某些配色而使用深色系的配色。深色系的UI 应该是正确的决策流程之下(考虑用户需求、使用场景、内容和设备等)作出的决策,有充分的理由而非凭感觉或者主观倾向。

这是一个很微妙的设计决策,因为它有很多优势,但是陷阱和它的优势一样多。

在以下情形下可以使用深色系 UI:

  • 单品牌配色和深色系UI 一致的时候;
  • 当布局内容稀疏、极简且元素类型较少的情况下;
  • 当 UI 的使用环境和需求合适的情况下,比如夜间使用,或者明显的娱乐向;
  • 当使用深色主题是为了减少视觉疲劳的时候;
  • 为了创造引人瞩目的戏剧性视觉效果的时候;
  • 为了营造奢华感和高级感的时候;
  • 当产品的信息架构和视觉层次支持的时候。

在以下情况下要尽量避免使用深色系 UI:

  • 当有很多文本内容的时候;
  • 当屏幕上有很多种不同的 UI控件的时候;
  • 当界面中包含大量的表单的时候;
  • 当界面中涉及到大量不同的色彩的时候。

总之,设计师需要对待这种 UI界面的「黑暗面」,面对充满陷阱和不成熟的决策,要谨慎选择使用深色系UI。

 

作者:Miklos Philips

译者:陈子木

来源:https://www.uisdc.com/dark-uis-good-and-bad

本文由 @陈子木 授权发布于人人都是产品经理,未经作者许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 很棒的文章

    来自广东 回复
  2. 刚好做设计练习要用到深色,就看到你的文章~感谢!

    来自广东 回复