黑暗的UI。 黑暗的背景的好处。
发布日期:2017-04-25 / 浏览:1208
  

在用户界面的背景中使用深色和阴影的方面仍然属于非常有争议的问题。难怪它是如此实际:选择适当的背景对所有的产品效率至关重要的作用,因为它可以成为一个关键因素增强或反过来,杀死其他设计解决方案的布局和功能。今天我们的文章将致力于在UI设计中使用深色背景的好处和陷阱,让我们在黑暗的一面移动。

在我们前面的文章中,我们已经分析了可以影响一般颜色方案和基本背景颜色的选择的因素,以及在该过程中要考虑的一些重要的点。这一次,我们将更详细地集中在深色设计的强大和弱点,用于网站和移动应用。在Tubik Studio中创建和测试各种用户界面的实际工作经验证明,黑暗的背景可以是强大的,有吸引力的解决方案,提供积极的用户体验。让我们认为它是理所当然的,讨论什么时候,我们可以使它的工作在最大限度。
 
视觉的黑暗感知

其中一个投票的结果发布时间相当长时间以前,在2009年,在ProBlogger已经有一些有趣的点。读者被问到他们在博客上喜欢什么样的背景。几乎一半的读者回答说,光背景是可取的 - 这是合理的,因为博客传统上是文本驱动的,所以可读性的方面胜过其他。然而,10%的受访者回答他们喜欢黑暗的背景,超过三分之一的人提到,选择应该取决于博客的性质和内容。设计者在寻找设计解决方案的过程中不应忽视这么大比例的用户。此外,在诸如网站或应用的数字产品中文本驱动的内容集中较少的情况下,比例可以变得更大。这是一个很好的例子,显示用户研究和调查应该是设计过程的重要部分。知道用户想要什么或至少他们准备好了什么可以推动传统愿景的极限。
 
Richard H. Hall和Patrick Hanna围绕这个问题提供的科学研究强调了关于背景颜色及其性能的视觉感知的重要观点。分析了不同科学家在网页性能和可读性方面做出的实际实验,作者总结:“他们发现,正极性的组合导致更好的性能(即浅色背景上的深色文本)因此,在设计其他方面(特别是布局元素的对比度和可读性)的情况下,深色背景可以与浅色背景一样有效,并且适当测试。该研究包含了许多有趣和有用的信息,基于用户测试不同颜色组合和它们的有效性的角度,所以强烈推荐给设计师。


可读性方面

其中一位着名的用户体验设计专家Jacob Nielsen提到:“使用文本和背景之间高对比度的颜色。最佳可读性需要在白色背景上的黑色文本(所谓的正文本)。黑色背景上的白色文本(负面文字)几乎一样好。虽然对比度与正文相同,但是反转的颜色方案会让人们稍微放松,并稍微减慢他们的阅读速度。可读性对于使文本比纯黑色更亮的颜色方案有更多的要求,特别是如果背景比纯白色更深的话。

事实上,可读性是影响产品性能的重要方面,它不仅处理文本。它超出了复制的限制,意味着所有有意义的符号,包括字母,数字,象形图和图标应该在界面中被容易地注意和识别。因此,设计者选择有利于黑暗背景应该准备特别彻底地选择和测试在不同的设备上的字体,图标和图像。


最佳的网络和应用程序设计实践,例如Awwwards上最好的黑色网站的集合功能的成功设计解决方案的负载,使用深色背景作为颜色方案的基础,仍然没有遭受低可读性。为了避免这个问题,在设计过程中,重要的是要记住:

- 暗背景吸收来自其他元素的光的一些部分,因此在元素之间应该有足够的空白空间或“空气”

- 长度的行可以使复制批量更容易阅读和消费的用户;

- 线间空间设计的问题以及文本行的长度对可读性有很大的影响,特别是在黑暗的背景上,因此应该仔细考虑段落大小,字距和领先;

- 黑暗并不总是意味着黑色,所以在每一个特殊的设计案例中,花一些时间测试不同种类的黑暗背景和呈现内容的颜色,是开放的实验是合理的;

- 阴影,渐变和发光可影响可读性;

- 无衬线字体通常更清晰,而衬线字体看起来更优雅,在实践中应用此因素可以提高内容的可读性。


对比的方面

在视觉感知方面要考虑的另一个有趣的事情是提出的表。 不同颜色组合的对比度和性能水平具有令人感兴趣的事实:表的黑色部分是唯一提供几乎所有颜色的良好对比的部分。 在每个特定情况下仔细测试设计界面,这个因素可以是尝试黑暗背景作为设计解决方案的变体的原因。


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

对比和可读性方面的早期研究表明这样的提示:«有深色背景,确保你没有过度明亮的刻字:降低白色字体为浅灰色,或使用颜色,以减少极端对比度的颜色和眩光;这个原则也用于做幻灯片时:至少5%的灰色用于切割明亮的白色的眩光。有趣的是,这仍然“读”为白色。此外,使文本加粗,所以它有足够的身体不被“吃活的»黑暗。»这个测试以及其他人可以提供新的变体,在网页或应用程序屏幕上提供高效自然的比赛。

还有一件事要提到的是,深色的背景是不知何故更重和更深的通常提供了很好的机会展示图形内容,如图片,照片,插图,海报和广告。良好的组成和遵循视觉层次的原则可以显着增强这种布局元素的视觉感知。这个因