黑暗的用户界面。好和坏。该做什么和不该做什么。 _原型设计

本文概述

当深色UI运作良好时
当黑暗的用户界面无法正常工作时
使用深色UI的注意事项

黑暗的UI生动, 时尚且优雅。但是, 如果设计师选择走在” 黑暗的一面” , 则应该谨慎行事。
设计产品的外观和感觉是设计师的主要职责之一-初始设计决策必须适合产品的目的, 特定情况及其听众。配色方案将产生长期影响, 必须仔细选择-所有这些都始于选择要放置设计元素的背景-“ 画布” 。几乎默认情况下, 通常的选择是白色背景。
选择明亮的背景有充分的理由。其中包括对比度, 文本和可读性以及使用各种微妙颜色的能力。根据许多科学研究, 最佳可读性要求在白色背景上使用黑色文本。品牌宣传也可能会影响决策, 因为公司徽标和颜色不适用于深色调色板。
大多数研究表明, 浅色背景上的深色文字优于深色背景上的浅色文字, 也就是说, 它更易于阅读。在一项著名的研究中, 当受试者在深色背景上阅读浅色字符时, 与浅色背景上的深色字符时相比, “ 视觉疲劳” 明显更大(Bauer, D., Bonacker, M.和Cavonius, C. R. 1983)。
还有一种期望：人们习惯于在与图像一起呈现的白色背景上看到用深色墨水呈现的各种内容。想想报纸和杂志-已有350多年的历史了。再追溯到三千五百年前的旧石器时代(穴居人时代), 我们发现狮子和猛ma象的洞穴图画通常放置在浅色背景上, 并用木炭或燃烧的骨头来描绘。

文章图片
法国Chauvet洞穴中的三万年前史前绘画
不过, 当一个项目需要保证时, 当今的数字产品设计师可能出于多种原因选择使用深色方案。如上所述, 这通常是一种美学选择, 意在传达戏剧效果并引起某种意想不到的情绪, 或者设计师可能希望将设计与品牌融合在一起, 或者确保视觉内容脱颖而出。

文章图片
对于Apple TV, Apple的站点切换到黑暗的UI可获得戏剧性的效果, 因为它的使用通常与夜间娱乐有关。
【黑暗的用户界面。好和坏。该做什么和不该做什么。】但是, 如果设计师选择越过” 阴暗面” , 他们将面临许多挑战。各种可用性问题都在起作用, 主要涉及可扫描性, 可读性和对比度。要考虑的主要方面是文本和背景之间的足够对比。还必须考虑上下文(用例)和环境, 以及可能在其上查看UI的设备。

文章图片
百年灵决定采用黑色背景, 以使其手表设计脱颖而出。
一些深色的UI旨在最大程度地减少” 数字眼睛疲劳” 。随着数字技术的发展, 我们大部分时间都盯着屏幕。数位眼疲劳是一种常见病, 每天会影响数百万人。从过度使用计算机到定期暴露在强光下, 它都可能引起头痛, 颈部疼痛, 视力模糊和灼伤/刺痛眼睛。

文章图片
Bloomberg Anywhere iOS应用程序(由Jeremy Fuerst撰写)。
大多数开发人员使用带有彩色编码语法的黑屏来减少眼睛疲劳。正如srcmini开发人员Kevin Bloch所说：” 黑色背景可减轻眼睛疲劳, 并使自动颜色编码更易于阅读, 一目了然, 从而使编码速度更快。”
顶级开发人员Amin Shah Gilani补充说：” 我个人将我的深色主题用于代码编辑器。我更喜欢深色主题, 因为较暗的背景会使眼睛感觉更舒服, 尤其是因为我要么希望保持灯光昏暗, 要么在晚上工作。”

文章图片
顶级开发人员Atom Shah Gilani的代码编辑器。
游戏应用程序用户界面也倾向于深色主题。黑色的调色板更适合游戏环境和玩家进行游戏的环境。黑色背景设计增强了醒目的视觉效果, 引入了神秘感, 具有更好的对比度, 并支持视觉层次结构。

文章图片
当深色UI运作良好时大多数与娱乐相关的用户界面(智能电视, 游戏机以及电视和电影应用程序)倾向于具有深色主题的用户界面设计, 这是有充分理由的。大多数与娱乐有关的活动都发生在晚上, 从6到10英尺远的地方观看, 并在光线昏暗的房间中观看-换句话说, 屏幕与环境相匹配。此外, 色彩丰富的内容(例如封面艺术和促销)在深色主题的用户界面上非常引人注目。
目的是匹配活动的背景：” 天黑了, 我放松了, 我想看电视。” 类似于数千个微型灯泡, 数字屏幕在存在明亮像素的任何地方都会发出光线；因此, 明亮的UI会照亮整个房间-考虑到活动, 这是不希望的效果。在这种情况下, UI设计试图匹配上下文：设备, 内容, 活动和环境。

文章图片
Hulu

文章图片
奈飞

文章图片
苹果iTunes应用
在正确的上下文, 环境, 应用程序和使用中, 黑色背景的UI才有意义。始终考虑可能使用该接口的上下文。但是, 它所涉及的范围还远远超过了-与其搭配使用的选择应取决于内容和上下文：什么, 什么时候, 什么地方以及什么设备。

为视觉效果带来强烈, 戏剧性的外观
彰显时尚, 优雅, 奢华和声望
营造一种好奇和神秘感
以最小的注意力帮助集中和引导用户的注意力
支持视觉层次和信息架构

文章图片
Ramotion的汽车远程控制和诊断概念。
深色UI仅应与稀疏, 最少的文本和” 块状” 信息一起使用, 并且强烈强调视觉效果-浅色文本。如果使用文本, 则该文本应与深色背景形成强烈对比, 最好是纯白色或黑色背景上的另一种强烈颜色(不是深灰色)。

文章图片
布鲁塞尔的电影资料馆CINEMATEK使用黑色背景来产生戏剧效果。
当黑暗的用户界面无法正常工作时如本文前面所述, 对于大量文本和大量数据的内容, 或者使用多种内容类型(文本, 图像, 视频, 数据表, 下拉列表, 字段等)时, 深色主题的UI都是不好的选择。 )。在设计社区中, 普遍的共识是, 除非你要处理简单的内容并且只是四处散布文字, 否则深色UI是设计面临的巨大挑战。
挑战是试图保持足够的对比度, 这会影响总体挑战：可读性与可用性相关, 而可用性会影响UX。通常, 所有颜色都在白色背景上工作, 而在深色背景上, 有用的颜色范围会大大减少。

文章图片
在此示例中, 某些UI元素的对比度不足, 影响了UX(由GUOHAO.W撰写)
这是一个何时不使用深色主题的UI的真实示例：我参与了一个B2B SaaS项目, 该首席执行官坚决主张为了” 与众不同” , 他想使用深色主题的UI。用户界面-与公司品牌相匹配的整个平台。为了一切。经过几次会议之后, 通过召集设计团队和产品经理来支持这项事业, 我们能够说服他摆脱这种潜在的灾难性决定。
该平台使用了一组标准的SaaS应用程序UI组件, 因此充满了表格, 小部件, 下拉菜单, 象形图和图标以及表格中的文本和数字数据。导航, 布局和功能在实现足够的对比度和一致的配色方案时将变得难以管理。总而言之, 要使所有主题都使用深色主题的UI几乎是不可能的。
根据应用程序的适当性, 也许正确的选择是建议使用浅色和深色UI。例如, 可以在浅色背景上设计带有小部件, 表单和数据表的设置页面, 而在带有图表的分析页面上可以设计成较暗的配色方案。

文章图片
仪表板UI, 分析和信息图表在黑暗的UI上可以很好地工作, 但仍应” 小心处理” 以确保足够的对比度(作者Alex Gilev)。
使用深色UI的注意事项最后, 需要谨慎选择使用深色UI的决定。设计师不应出于错误的原因而这么做-时髦, 与众不同或复制他人的设计。设计人员必须考虑上下文, 内容(对比度和可读性), 设备和用例, 并有充分的选择理由, 这一点至关重要。这是一种微妙的平衡行为, 因为它可能有很多好处, 但也有很多陷阱。
可以使用深色界面时：

当品牌配色方案需要时
当设计稀疏且极简的内容类型很少时
适用于上下文和使用时, 例如夜间娱乐应用程序
为了减少眼睛疲劳, 例如长时间使用的分析页面
引起情感, 例如阴险和神秘感
营造醒目的戏剧性外观
营造奢华感和声望
支持视觉层次

最好远离黑暗的用户界面：

当文本很多时(在深色背景上阅读很困难)
屏幕上有很多混合内容时
对于具有大量表单, 组件和小部件的B2B应用程序
当设计需要多种颜色时

文章图片
即使是游戏, 许多混合内容类型也不适合深色调色板。
越过” 阴暗面” 应格外小心。建议在做出可能充满陷阱的潜在危险决定之前, 进行更深入, 更彻底的研究和分析。一旦设计师走上了这条路, 就很难回头。建议设计师在双脚跳进去之前考虑所有方面-好的和坏的, 做的和不做的。
? ? ?
在srcmini设计博客上进一步阅读：