赞助商
立即赞助

想使用深色系UI,这些注意事项你一定要了解

UI设计3年前 (2021)发布 流光
2.7K 0 0

设计师的主要职责之一,就是为产品定合理的视,基目标用户的特征和产品的设计目标,给用户特定的感。UI和UX设计师需要在个程中通力协,而 UI设计师更是要确产品的 UI 和视最终落地。

设过程中,诸多因素会影响 UI 给用户的感受。其中,色彩重也明显的一部分。

许多计会在选择配色方案的候,会使用浅色的、亮的背景色彩。其实,大众和计的这个倾向是有科学依据的。在色的背景上使用黑色的文本,可读性是最佳的。在不同的测和研究当中,浅色背景上的深色文本,比起深色背景的浅色文本,阅读性强。一项著的研究当中,受试者面对深色背景阅读浅色文本的时候,视觉疲劳的象表得加明显。(Bauer, D., Bonacker, M., and Cavonius, C. R. 1983)

而另外一方面,人习惯了在色背景上查图片,阅读深色的文本。这种状况已经延续了上百年。而在中国,这种状况更是延续了千年。向上追溯35万年前的旧器代,当的始人类同是使用木炭在浅色的墙壁上书写。

想使用深色系UI,这些注意事项你一定要了解

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

想使用深色系UI,这些注意事项你一定要了解

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

过,真的要深入到 UI 设计的「黑暗面」,设计师还需要跨越很多挑战。和平时设计的浅色为的题同,深色系的UI 需要处一样的可性问题——要是可读性和对上的问题。此外,还需要注户使的环境,及设备本身的一些属性。

想使用深色系UI,这些注意事项你一定要了解

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

其实,选择深色系 UI设计,本身是为了帮助现代缓解数品所带来视觉疲劳(前实验是做深浅两色下单纯定量比)。随着现代于数内容日渐沉迷,天都会花费大量时看屏幕,而屏幕和数内容所带来视觉疲劳,不可避免地大幅增加。数视觉疲劳如今已经被定性为常见病了,天都会有大量普受到这病症困扰,为视觉疲劳所带来并不是眼部不适,伴随着头疼和颈部疼痛,眼部症状则呈现为视力下降,视野模糊和灼伤感、刺痛感。

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

的 B2B的程序, SaaS类产品,以及媒体类数字产品,如今都配备了深色系主题,让用户合的时候从浅色主题下切换过,用调整修视觉模式,降低视觉疲劳。不过,这些深色系的UI,需通过合理的设调整之后,能够合乎需求。

想使用深色系UI,这些注意事项你一定要了解

目,时间使用电脑的人群当中,发者占据了不小的比例,他们也深色系主题的粉丝之一。因需时间面对码编辑器,视觉疲劳不可避免的。如同 Toptal 的发人员 Kevin Bloch 所:「黑色背景下查看码,亮度相对低,高对比度下面对不同色彩的码易阅读,也易理解其中的信息。」

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

想使用深色系UI,这些注意事项你一定要了解

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

游戏 APP 中的 UI设计大多是深色系的,游戏玩大都更倾向于黑色系配色带来的沉浸式环境,黑色的背景视觉效果更醒目,明暗更强,对更明显,视觉层次感更丰富。

想使用深色系UI,这些注意事项你一定要了解

适合使用深色系 UI 的地方

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

想使用深色系UI,这些注意事项你一定要了解

想使用深色系UI,这些注意事项你一定要了解

想使用深色系UI,这些注意事项你一定要了解

昏暗的境让人放松和沉浸,太亮的背则让人紧,也是深系UI的设计来源和基础:设备、内容、活动和场。

确了深色系UI 的使用时间、场景、用户特征以及所用设备之后,接下明确 UI设的目标:

  • 要让视效果明显且具有戏剧;
  • 营造出时、优、奢华价感;
  • 制造神秘和阴谋;
  • 最小的干扰来帮助户集中注意;
  • 支持可视化层结构和晰信息架构。

想使用深色系UI,这些注意事项你一定要了解

△ Ramotion 的汽车遥控概念计

深色系的UI 是有明确适范围和设计方向的。大的本在深色系UI 阅读体验浅色系背景要差一些(之前的实验已经验证过了),在深色系UI 中,本适合小的形式呈现,并且对和亮应该控制在一个相对较的水平,通使的深灰色在这里肯定适。

想使用深色系UI,这些注意事项你一定要了解

△ CINEMATEK 使深色系的UI来创戏剧感

不适合使用深色系 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,这些注意事项你一定要了解

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

下周就是春节了,想用这个春节长假做什么呢?不妨在回家的路上、旅行的途中,利用碎片化时间,给自己制定一个小小的充电计划...
书单推荐
Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为「启发式」,因为它们是广泛的经验法则,而不是特定的可用性...
交互设计
网易UEDC – 朱子健、蒋蕊遥 :良好的交互规范可以很好的帮助企业、团队提高产出,保证用户体验。 一. 规范很重要 规范和秩序...
交互规范
编者按:本文网易设计师用「FishDesign企业级UI组件库」项目为例,通过在网易七鱼产品中的应用,来介绍一个企业级 UI 组件库...
B端设计
随着技术的发展,我们常常会觉得,如果想要做好产品必须遵循新的规则。实际上,这并不是真的。人类本身并没有我们想象中变化...
Eugen Eşanu
设计师对于世界的影响是否是巨大的?这一点是毋庸置疑的。但是即便是优秀的设计,也通过大量的日常积累,一个又一个小步骤上...
Eugen Eşanu
对如今的 UX 设计师来说,会点动效基本已是常规操作了。作为 UX 设计师,动效可以辅助的产出可以涵盖界面交互动效、项目宣传 ...
AE动效
动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更...
动效设计