【译】UI 的黑暗面!暗色背景的优势

简介: 本文讲的是【译】UI 的黑暗面!暗色背景的优势,在用户界面的背景中是否选择使用暗色调依然是一个具有高度争议的问题。
本文讲的是【译】UI 的黑暗面!暗色背景的优势,

在用户界面的背景中是否选择使用暗色调依然是一个具有高度争议的问题。毋庸置疑,这个问题是很实际的:选择一个合适的背景在所有的产品功效上都起着至关重要的作用,因为它可能会是改善或是反而毁掉设计方案中布局和功能的关键因素。在今天,我们的文章将致力于讨论在 UI 设计中使用暗色背景的好处和缺陷,所以让我们前往 UI 的黑暗面吧。

在我们之前的文章中我们已经分析了一些可以影响选择通常的配色方案和基本的背景颜色的因素,也提到了一些在这个过程中要考虑的重点。这一次我们将更多的关注暗色设计的网站和移动应用的优缺点。我们在 Tubik Studio 中创建并测试了不同的用户界面,这些实际的工作经验证实了暗色背景会是强大而有吸引力的、能提供积极用户体验的解决方案。所以,理所当然的,让我们来开始讨论应该在何时何地怎样让它最大程度的发挥效果吧。

对于暗色的视觉感知

很久之前,在 2009 年曾有过一个公开的投票调查结果,ProBlogger 基于此已经公布了一些有趣的观点。读者被问及他们更喜欢哪种颜色的博客背景。几乎一半的读者回答更喜欢亮色背景 - 这对于传统的文本驱动型博客来说是十分合理的,在可读性方面如此可以胜过其他方案。然而,有 10% 的受访者回答他们更喜欢暗色背景,并且有超过三分之一的人提到选择的依据应该取决于博客的性质和内容。设计师在寻找设计方案时是不能忽略占有如此大比例的用户的。此外,在具有更少的文本型驱动内容的数字产品情况时,如网站或应用程序中,持上述观点的人数比例应该还会增加。这个例子很好的说明了用户研究和调查应该是设计过程中的重要组成部分。了解用户想要什么或是至少了解他们所能够接受的是什么,这能够将传统视觉的限度推向一个极致。

Richard H. Hall 和 Patrick Hanna 对于这个问题提供的科学研究中强调了视觉感知的背景颜色和效果的关键点。在分析了不同研究者之前对网络页面效果和可读性方面的实际试验后。作者们总结了:「他们发现正向对比(即白底黑字)会有更好的效果,并与之前提到的研究结合,说明颜色组合之间的对比度越大效果越好。」因此在合适的设计和测试下,在其他方面深色背景也可以像浅色背景一样具有好的效果,尤其是在对比性以及布局元素的易读性上。在用户测试角度上这项研究基于不同颜色组合和效果下包含了很多有趣及有用的信息。所以在此强烈推荐给设计师们。

Ribbet 的用户界面来自 Tubik Studio

可读性方面

用户体验设计的著名大师之一 Jacob Nielsen 曾提到过:「在使用高对比度颜色的文本和背景时。最优的易读性方案是要求使用黑色文字和白色背景(所谓的正向文本)。而白色文字和黑色背景(反向文本)几乎也是一样好的。尽管这在对比度上与正向文本是一样的,但倒配色方案会让人们略微有些迷惑并会稍微降低他们的阅读速度。易读性相当受配色方案的影响,像文本比纯黑稍亮的颜色,尤其是背景色比纯白稍暗的配色,易读性会变得很差。

的确,可读性是产品效果表现上的重要指标并且它不仅只针对文本。它超越了文本的限制并且意味着所有有意义的象征,包括字母,数字,象形符号和图片都应该被留意到并轻易的在界面中识别出。因此,设计师在选择深色的背景时应该准备更额外深入的选择并测试不同设备上的字体、图标和图像。

SwiftyBeaver 的着陆页,来自  Ludmila Shevchenko

最好的网页和应用程序的设计实践,例如 Awwwards 上最好的黑色网站合集上的例子,这里展现了大量使用深色背景作为基础配色的优秀设计方案,这些方案都没有以牺牲可读性为代价。为了避免低可读性这个问题,在设计过程中重要的是要记住:

  • 深色背景会吸收一部分其他元素的光线,所以应该在元素之间留有足够的空间或"气";
  • 行的长度可以让文本区块对用户更具可读性并易于理解;
  • 行间距的空间设计,以及文本行的长度问题都会对可读性具有很大的影响,在深色背景下尤甚,所以段落的大小,字距和行间距都需要仔细考虑。
  • 深色并不总是意味着黑色,所以在每一个特定情况的设计中,去花费一些时间测试不同种类的深色背景和颜色所呈现的内容是十分合理的,在试验中尽情的尝试吧;
  • 阴影,渐变和光晕都会影响可读性;
  • 无衬线字体通常比较清晰,而衬线字体看起来更加优雅,在实践中应用这个因素可以增强内容的可读性。

对比度方面

webdesign.about.com 用表格展现了一个有趣的视觉感知方面需要考虑的展现效果。该表展示了不同的颜色组合之间的对比和效果水平并提供了一个有趣的事实:表中的黑色部分是唯一一个可以为几乎所有颜色提供良好对比度效果的颜色。因此在设计界面的每一个特定情况下去仔细试验,这一因素可以作为尝试使用深色背景的理由之一。

在可读性方面,对比度能是使内容更容易识别和清晰的因素之一。

关于对比度和可读性的这种提示信息在之前的一个早期的调查中有说过:「在深色背景下,确保你没有包含相当明亮的字体:使用柔和的白色到浅灰色字体,或使用单调的色彩来最小程度的减少巨大的反差和眩光;这个原则在做幻灯片时也同样适用:用至少 5% 的灰度来减少眩光的亮白。有趣的是,这样仍然在「阅览」时会被认为是白色的。同样的,将字体加粗,可以让字体有足够的大小让人不觉得文字被深色背景所「吞噬」」这个试验以及其他试验能够提供不同类型的调色法,而这些调色法能够为网页和应用页面提供高效、自然的内容。

还有一件事就是深色背景在某种程度上通常显得更沉重以及能更深入的呈现图形的内容如图片,相片,插图,海报和广告。良好的构图并遵守视觉层级原则可以显著的增强这种布局元素的视觉感知。这个因素在当界面基于更多图形材料而非文本时会使深色背景更高效并且具有吸引力。

一款分析应用来自  Ludmila Shevchenko

情感感知方面

色彩心理学也是在选择背景颜色时需要考虑到的,这不仅只是包含在所展现的有效范围中,还包含内容自身所承担的信息载体。黑暗的颜色通常与优雅和神秘感有关。此外,黑色往往与优雅,礼节,声望和权利有关。这或许是为什么许多强大的品牌都会使用黑白色调的主题,用深色来主导、用亮色来展示承载的信息,使用这样的方案来构建视觉展现效果。界面设计在这方面可以为其他设计解决方案和一般的产品展示提供额外的支持。

Tubik Studio | 博物馆 来自  Ernest Asanov

深色背景的优势

根据上述各点,我们可以总结得到在用户界面应用深色背景可以提供以下实际好处,包括:

  • 格调及优雅
  • 神秘感
  • 奢华显赫的外观
  • 可以广范围的运用对比
  • 支持视觉层次的展示
  • 反映内容的深度
  • 视觉吸引力。

Tubik Studio | Vinny 的面包店 来自  Ernest Asanov

考虑要点

在另一方面,深色背景需要彻底的关注和分析最微小的细节,如果它们没有以合适的方式呈现,那么这些细节则可能会在布局中变得模糊。因此我们应该考虑:

  • 用户研究 实际调查,理论研究和试验数据是针对目标用户十分重要的数据资源,他们的需求是选择有效和有吸引力的设计方案的基础。
  • 竞争研究 对关系密切的竞争对手进行市场研究,可以理解已经被市场上其他对手使用的设计方案,并且这一因素会影响到原始设计的选择从而使产品更加明显。
  • 用户测试 深色背景在可读性和易读性方面是十分脆弱的,所以应当在各种类型的设备和分辨率下严格的去测试。
  • 环境因素 去分析典型条件下将被用于目标用户的产品,可以为选择或反对深色背景提供其他的理由。
  • 大量的内容 元素和块的数量需要在屏幕或网页上达到能影响周围背景的决策:深色的背景如果在元素间留下了太少的空间会为视觉造成极大的困难。
  • 内容的性质 相比于大量的文本区块,深色背景可以为基于图形元素的界面提供更好的展示效果。




原文发布时间为:2016年07月06日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
7月前
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
303 0
|
5月前
|
异构计算 Python
30行代码实现一个带UI界面的图片背景移除工具:并附带web网页
人工智能技术正处于蓬勃发展中,移除图片背景的方法众多,涵盖了各式各样的实现途径和模型。然而,这些方法往往在安装和配置环境方面稍显复杂。今天,介绍一种极其简便的方法——大约30行代码,就能实现这一功能。虽然相比之下可能稍显简单,但对于不太苛刻的需求来说,这种方法颇为方便实用。
|
Android开发 数据格式 XML
Pretty UI Design For Android -- 滑动背景、透明列表
本文是从国外一个网上看到的效果,感觉很不错,就简化了一下代码,拿来用了,先看下效果图: 效果还是很不错的,下面让我们看看是如何实现的: 看看文字来源,很简单,是一个数组: If I could save time in a bottle th...
711 0
|
22天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
2月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
128 3
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
97 8
|
7月前
|
Android开发 缓存 双11
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
|
2月前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
72 1
|
2月前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。