流行的深色UI设计背后的陷阱，哪些情况下我们应该选择深色界面设计？ / 开普饭

界面的配色方案将对设计产生持久的影响，近些年在UI设计界刮起了一股深色UI风潮，今天我们的文章就讲为大家详细讲解深色UI界面的使用场景以及需要注意的技巧。

几乎默认情况下，我们通常的选择界面都是白色背景。选择明亮的背景是有充分的理由，其中包括对比度，文本可读性以及使用各种微妙颜色的能力。根据许多科学研究，最佳可读性是在白色背景上使用黑色文本。品牌宣传也可能会影响背景选择，因为公司徽标和颜色不适用于深色调色板。

大多数研究表明，浅色背景上的深色文本优于深色背景上的浅色文本，即它们更易于阅读。在一项著名的研究中，当受试者在深色背景上阅读浅色字符时，与浅色背景上的深色字符相比，前者的视觉疲劳要大得多。

还有一种原因是满足人们的期望，人们习惯了在与图像一起呈现的白色背景上，看到用深色墨水渲染的各种内容。人们从开始阅读报纸和杂志到现在，已有350多年的历史了。

法国Chauvet洞穴中的三万年前史前绘画

但是当项目需要时，设计师也可能会出于多种原因选择使用深色方案。通常是一种美学或者功能需要的选择，意在传达戏剧性、引起情感，或者设计师可能希望将设计与品牌融合在一起，或者确保视觉内容脱颖而出。

对于Apple TV，Apple的站点切换到黑暗的UI可获得戏剧性的效果，因为它的使用通常与夜间娱乐相关。

设计师选择深色背景，将面临许多挑战，包括可用性问题，比如可读性、易读性和对比度等。要考虑的主要方面不仅是文本和背景之间的足够对比，还必须考虑上下文和环境，以及可能应用的设备。

百年灵产品网站决定使用深色UI使他们的手表设计脱颖而出。

部分深色的UI旨在最大程度地减少眼睛疲劳。随着数字技术的发展，我们在一天中的大部分时间都盯着屏幕。眼疲劳是一种常见病，每天都会影响数百万人。过度使用计算机、长期暴露在强光下，可能引起头痛、颈部疼痛、视力模糊和灼伤/刺痛眼睛。根据一项研究，超过83％的美国人每天使用数字设备的时间超过两个小时，其中60.5％的人报告他们遇到了眼疲劳的症状。

像是SaaS产品和多媒体编辑应用程序因为通常会连续使用了多个小时，所以许多产品均采用深色主题的UI设计，以减轻眼睛疲劳并支持视觉清晰度。但是这种方法同样需要对设计方向进行仔细的前期评估。

Bloomberg Anywhere iOS应用程序（由Jeremy Fuerst撰写）。

而大多数开发人员使用带有颜色编码语法的黑屏来减少眼睛疲劳。正如Toptal开发人员Kevin Bloch所说的那样：“黑色背景可以减轻眼睛疲劳，并使自动颜色编码更易于阅读，一目了然，从而使编码速度更快。”

顶级开发人员Amin Shah Gilani的代码编辑器是Atom编写的。

-01-

深色UI设计适合哪些场景

大多数与娱乐相关的用户界面（智能电视，游戏机以及电视和电影应用程序）倾向于具有深色主题的用户界面设计。这是有充分理由的，大多数与娱乐有关的活动都发生在晚上，从6-10英尺的距离观看，并在光线昏暗的房间中观看，换句话说，屏幕与环境相匹配。此外色彩丰富的内容（例如，封面和促销）在深色主题的UI上非常引人注目。

使用深色UI的目的是匹配活动的背景，“天黑了，我放松了，我想看电视。” 浅色界面下的数字屏幕在存在明亮像素的地方都会发出光线。因此明亮的UI会照亮整个房间，考虑到该活动实际需求，用户自然不希望有这样的效果。在这种情况下，深色UI设计可以很好匹配使用环境和场景：设备，内容，活动和环境。

在正确的环境、应用程序和使用需求中，黑色背景的UI才有意义。使用深色UI始终需要考虑可能使用的场景，选择应取决于内容和上下文：什么时候，什么地方以及什么设备，例如包括：

·为视觉效果带来强烈而生动的外观

·彰显时尚，优雅，奢华和威望的感觉

·营造一种阴谋和神秘感

·以最小的注意力帮助集中和引导用户的注意力

·支持视觉层次结构和信息体系结构

Ramotion的汽车远程控制和诊断概念。

深色UI应与稀疏，精简的文本和分块信息一起使用，并且要特别强调视觉效果即浅色文本。如果使用文本，则该文本应与深色背景形成强烈对比，最好是纯白色或黑色背景上的另一种强烈颜色（不是深灰色）。

布鲁塞尔的电影资料馆CINEMATEK使用黑色背景来产生戏剧效果。

-02-

深色UI无法使用的情景

如本文前面所述，对于大量文本和大量数据的内容，或者在使用多种内容类型（文本，图像，视频，数据表，下拉列表，字段等）时，深色主题的UI都是一个不好的选择。在Design Community中，普遍的共识是除非你要处理简单的内容并且只是散布文字，否则深色UI是设计面临的巨大挑战。

试图保持足够的对比度是一种挑战，也会影响设计的整体效果：可读性与可用性相关，而可用性会影响UX。通常所有颜色都在白色背景上工作，而在深色背景上，可用的颜色范围会大大减少。

在此示例中，某些UI元素的对比度不足，影响了UX（由GUOHAO.W进行）

上图是一个何时不使用深色主题的UI的真实示例：在这个B2B SaaS项目中，CEO坚持认为为了使产品“与众不同”，需要使用深色主题用户界面。该平台使用了一组标准的SaaS应用程序UI组件，因此包含很多表格、小部件、下拉菜单、象形图和图标以及表格中的文本和数字数据。在想要获得足够的对比度和一致的配色方案的同时，统一管理导航、布局和功能将变得非常困难。总之，要使所有这些都与深色主题的UI一起使用几乎是不可能的。

根据应用程序的适当性，一个较为正确的选择是提出一个混合的深色和浅色的用户界面。例如带有窗口小部件、表单和数据表的设置页面可以设计为浅色背景，带有图表的分析页面可以设计为较暗的颜色方案。

仪表板UI，分析和信息图表在黑暗的UI上可以很好地工作，但仍应“小心处理”以确保足够的对比度。

-03-

使用深色UI的注意事项

最后，需要谨慎选择使用深色UI的决定。设计师不应出于错误的原因而这样做，例如为了追随设计潮流，与众不同或复制他人的设计。设计师必须考虑上下文，内容（对比度和可读性），设备和用例，并拥有充分的选择理由，这一点至关重要。这是一种微妙的平衡行为，因为它可能有很多好处，但也有很多陷阱。

如果可以使用深色UI，应尽量具备以下操作：

·当品牌配色方案有保证时

·当设计稀疏且极简的内容类型很少时

·适用于上下文和使用时，例如夜间娱乐应用程序

·为了减少眼睛疲劳，例如长时间使用的分析页面

·引起一种情感，例如一种阴谋诡计的感觉

·创造醒目的戏剧性外观

·营造奢华感和威望感

·支持视觉层次

以下情况最好尽量远离深色的用户界面：

·当文本很多时（在深色背景上阅读很困难）

·屏幕上有很多混合内容时

·对于具有大量表单，组件和小部件的B2B应用程序

·当设计需要多种颜色时

即使是游戏，许多混合内容类型也不适合深色调色板。

深色界面设计就是一把双刃剑，建议在做出可能充满陷阱的潜在危险决定之前，进行更深入，更彻底的研究和分析。一旦设计师走了这条路，就很难回头。建议设计师在双脚跳入之前考虑所有方面，好的和坏的，应该做的和不应该做的。

- 一堂课全面解读深色UI制作技巧 -

物理学家说，黑色并不是真正的颜色，就是没有光。从移动屏幕到大型电视，人们都可以看到Dark UI设计的应用范围很广，且深色UI已经成为了越来越受欢迎的一种设计趋势，可以说具有深色UI（与功能，优雅和神秘感相关联）的数字产品是未来的一种趋势。黑暗主题可以表达力量、奢华、精致和优雅，但是这也为Dark UI设计带来很多挑战，并且如果实施不当也无法满足期望。本周UXD将开设深色UI专题课程，帮助同学们全面了解深色界面制作的核心技巧。

讲座时间

4月17日周六

15:00-16:00

该讲座仅对内部学员开放

主讲人

Heize

英国拉夫堡大学

Design Innovation

UXD常驻金牌导师

毕业于英国拉夫堡大学设计创新专业硕士，本科为工业设计背景。UXD全职讲师，负责UXD产品、交互、创新技术方面课程的教学和开发，同时负责海外课程、资讯的引进和发布工作。

▎优秀学生经验谈

UXD交互工业产品设计学院是尤克斯国际旗下的一家专注于交互、服务、工业、产品设计专业的顶级设计学院。除了一对一设计课、基础技能课程、小组课题、设计评图、联合教学外，我们提供不定主题的公开课和内部小组课，教学计划课程由三大部分组成，包括基础软件技能教学、设计理论系统讲座、申请必备知识解析等。

LOCATION

上海市徐汇区西岸创意园2栋六楼

TEL：13641963425

流行的深色UI设计背后的陷阱，哪些情况下我们应该选择深色界面设计？