出自UXGuide.net

颜色

Color

目录 1 设计理念 1.1 颜色是如何被使用的 1.2 颜色涵义 1.3 颜色可访问性 1.4 用颜色进行视觉强化 1.5 彩色设计 1.6 使用主题或系统颜色 1.7 正确使用主题或系统颜色 1.8 使用其他颜色 1.9 测试颜色 2 设计规范 2.1 常规 2.2 使用主题及系统颜色 2.3 色彩含义 2.4 在数据中使用颜色 3 文档编写

色彩对于大多数用户界面来说都是重要的视觉元素。除了纯粹的美学意义之外，颜色还具有相关的意义并会引起情绪反应。为了避免含义产生混乱，使用颜色时应当保持一致。如果要取得理想的情绪反应，就必须恰当地使用颜色。

颜色往往会是按照颜色空间来考虑的，如 RGB（红、绿、蓝）、HSL（色相、饱和度、亮度）和 HSV（色相、饱和度、值）是最为常用的颜色空间。

RGB 颜色空间可以被形象化为一个立方体。

虽然显示技术使用 RGB 值，并使得开发人员也以 RGB 的方式来处理颜色，但 RGB 颜色空间并不符合人们对颜色的直观感受。例如，如果你给青色加一些红色的话，结果并不是想像中的更红，而只是更亮的青色。

在这个示例中，向青色中加入红色使原来的青色更亮，而不是更红。RGB 颜色空间不符合人们对颜色的直观感受。

HSL/HSV 颜色空间由三个部分组成：色相、饱和度、亮度或值。这两个颜色空间经常用来代替 RGB，因为它们更加接近于人们对颜色的直观感受。

HSL 颜色空间组成了一个双锥形，顶端是白色，底端是黑色，其他中间色则在中部：

• 色相：即色环上的基本颜色，范围从 0 到 360 度，其中 0 度和 360 度都是红色。

色环，红色是 0 度，黄色是 60 度，绿色是 120 度，青色是 180 度，蓝色是 240 度，品红是 300 度。

• 饱和度：指颜色的纯度（与灰暗相对），范围从 0 到 100，其中 100 的饱和度最高，而 0 度是灰色。
• 亮度：指颜色的明亮程度，范围从 0 到 100，其中 100 为最亮（白色，无论是何种色相或饱和度）而 0 是最暗（黑色）。

HSL 颜色空间可以被形象化为一个双锥形。

HSV 颜色空间较为相似，只是它形成的是一个单锥形：

• 色相：即色环上的基本颜色，范围从 0 到 360 度，其中 0 度和 360 度都是红色。
• 饱和度：指颜色的纯度（与灰暗相对），范围从 0 到 100，其中 100 的饱和度最高，而 0 度是灰色。
• 值：指颜色的鲜亮程度，范围从 0 到 100，其中 100 为最鲜亮（相当于 HSL 空间中的亮度的一半）而 0 是最暗（黑色）。

HSV 颜色空间可以被形象化为一个单锥形。

在 HSL 和 HSV 颜色空间中，如果饱和度为 0 的话，那么亮度所指定的都是某种级别的灰色。在 Windows 中，HSL 和 HSV 空间往往被重新映射到 0 至 240 的范围，以使颜色能够用 32 位数值来表示。

注：与字体和无障碍访问（辅助特性）相关的设计规范请参考各自相应的章节。

设计理念

有效使用颜色能够使你程序的用户界面更加高效。颜色可以帮助用户瞬间理解特定的含义。颜色也能够使你的产品看起来更加美观和精致。

不幸的是，颜色很容易被无效地使用，尤其是你缺少视觉设计方面的训练时。对颜色的糟糕使用会使设计看起来不专业、陈旧、令人困惑或就是丑陋。糟糕地使用颜色还不如根本不用颜色。

本节将向你解释为了有效地使用颜色所需要了解的东西。

颜色是如何被使用的

颜色通常在用户界面中用于表达：

• 意思。消息的意思可以通过颜色来总结。例如，颜色往往用于表达状态——红色表示发生问题或错误，黄色表示注意或警告，绿色表示良好。
• 状态。对象的状态可以通过颜色来指示。例如，Windows Vista® 使用颜色来指示选中和悬停状态。网页上的链接使用蓝色表示未访问，紫色表示已访问。
• 区别。人们认为具有相同颜色的条目之间具有某种联系，因此颜色编码是区别对象的有效方式。例如，在控制面板项中，任务窗格使用绿色背景在视觉上将其与主内容区分开来。还有，Microsoft® Outlook® 允许用户给消息分配不同的彩色标志。
• 强调。颜色可以用于引起用户的关注。例如，Windows Vista 使用蓝色的主标题说明以帮助其从其他文本中突显出来。

当然，颜色在图形中往往是用于纯美学方面的原因。但即使美学因素非常重要，你仍然应当主要基于它们的含义来为 UI 元素选择颜色，而不是基于其外观。

颜色涵义

用户对颜色的理解往往是与文化密切相关的。例如，在美国，新娘的婚纱大体上是白色的，而黑色则与葬礼相关。然而在日本，颜色的象征意义正好相反：白色是葬礼的代表色，而黑色则被认为会给婚礼带来好运。

这就是说，红、黄、绿色在状态方面的涵义在全世界范围内是统一的。这是因为联合国教科文组织：路标与信号维也纳公约（英文）为世界的交通信号灯定义进行的约定（即红表示停止，绿表示通行，黄表示注意）。你在使用这些状态颜色时可以不用担心文化方面的涵义区别。

除了状态颜色之外，Microsoft® Windows® 还基于其他约定为颜色分配了一些含义，这些约定将在本文的设计规范部分给出。确保你的程序中颜色的使用与这些颜色约定相兼容。

颜色可访问性

使用颜色会影响到最广泛的可能受众对你软件的可访问性。盲人或者视力低下的用户可能无法很好地看到颜色，甚至完全看不见。大约 8% 的成年男性具有各种形式的色彩混淆（通常被错误地称为“色盲”），其中红绿色彩混淆最为常见。

正常色彩视觉看到的基色。

红色盲（占男性人口的 1%）看到的基色。

绿色盲（占男性人口的 6%）看到的基色。

蓝色盲（占男性人口的 1%）看到的基色。

更多信息，参见色盲用户能看到你的网站吗？（英文）

用颜色进行视觉强化

对于颜色涵义及可访问性问题的最好解决方案即是将颜色用于对这些主要沟通方式之一的含义进行视觉强化：

• 文本。简要的文本往往是最有效的主要沟通方式——既可以直接出现在用户界面上，也可以通过工具提示来呈现。

在这个示例中，工具提示文本用于表达图标的含义。

• 设计。图标易于通过其设计来加以区别，尤其是其外形轮廓。

在这个示例中，标准图标可以通过其设计轻易地加以区分。

• 位置。相对位置也可以使用，但这种方式不如其他方法。要实现高效，其位置应当标准且为人们所熟知，就像交通灯那样。

白色是许多设计中最明显的属性，它应当始终是冗余的。

彩色设计

可以让你出乎意料的是，最好的彩色设计方式是从没有彩色的设计开始，从线框图或者黑白稿开始，之后再加上色彩。这么做有助于确保信息不会单独通过颜色来传达。它也有助于确保在黑白打印机上的打印稿看上去足够美观。

使用主题或系统颜色

尽管有效使用颜色的复杂因素很多，但在 Windows 用户界面中，选择颜色往往可以归结为根据一些简单的规则轻松选择合适的主题颜色或系统颜色。用户能够按照他们的选择来挑选并自定义这些颜色方案。

这么做不仅可以适应所有用户的色彩偏好，还消除了选择一个完美的、适合所有品味、风格及文化（当然，或许是不可能的）的色彩方案的负担。

最重要的一件事：

通过选择合适的主题颜色或系统颜色来选择颜色。绝不要将颜色用作沟通的主要方式，而应当是作为辅助方式以对其含义进行视觉加强。用线框图或黑白稿进行设计以帮助确保颜色是次要的。

正确使用主题或系统颜色

假设用户是根据个人需要来选择主题或系统颜色的，且主题及系统颜色搭配合理。基于这样的假设，如果你始终根据其设计用途来选择主题或系统颜色，并将前景与其关联的背景成对使用的话，这些颜色则可以保证在所有视频模式下都清晰可见且尊重用户的希望，包括高对比度模式。例如，在系统窗口背景颜色上的系统窗口文本颜色一定是清晰的。

尤其需要坚持的是：

• 根据其用途选择颜色。不要根据颜色当前的外观来选择，因为该外观可能会被用户更改或在未来的 Windows 版本中改变。
• 将前景色与其对应的背景色匹配使用。前景色只有用在对应的背景色上时才能够保证是清晰可辨的。不要混用或将前景色用在其他背景色上，甚至更糟，用在其他前景色上。
• 不要混用颜色类型。这就是说，应当始终将主题颜色与对应的主题颜色匹配使用，系统颜色与对应的系统颜色匹配使用，固定颜色与其他固定颜色一起使用。例如，在固定背景色上使用主题文本色将无法保证是清晰可辨的。
• 如果你一定要使用固定颜色，则应当将高对比度模式作为特殊情况来处理。

最重要的一件事：

始终根据其设计用途来选择主题或系统颜色，并将前景与对应背景色配对使用。

使用其他颜色

尽管 Windows Vista 主题定义了大量主题部件，但你可能仍然会觉得颜色不够用。虽然你可以硬编码这些颜色，但更好的办法是从这些主题或系统颜色中派生颜色。合理运用这一方法，你不但可以使用主题和系统颜色，而且灵活性更强。

例如，假设你需要一个比主题窗口背景颜色更深的窗口背景色。在 HSL 颜色空间中，颜色加深意味着亮度值较低。也就是说，你可以通过下列步骤来生成一个更深的窗口背景色：

1. 获取窗口背景主题色的 RGB 值。
2. 将 RGB 转换为 HSL 值。
3. 降低亮度值（比如说 20%）。
4. 转换回 RGB 值。

通过这种方法，可以确保生成的颜色看起来比原来的颜色要深（除非原来的颜色已经很深了）。

在这个示例中，较深的窗口背景色是从主题色派生而来。

测试颜色

要确定你的程序使用的颜色是否实现了无障碍且没有被用作主要的沟通方式，我们建议使用 Fujitsu ColorDoctor 或 Vischeck 实用程序来：

• 使用灰度滤镜检查总体的色彩依赖性。
• 使用红、绿、蓝色盲滤镜检查具体的色彩混淆问题。

要确定你的程序对颜色使用的编程是否正确，应当在下列模式下对你的程序进行测试：

• 启用主题，使用默认 Windows 主题。
• 启用主题，使用非默认主题。
• 禁用主题（在“个性化”控制面板项中的“主题设置”中选择“Windows 经典样式”）。
• 高对比度黑色（黑色背景上的白色文本）。
• 高对比度白色（白色背景上的黑色文件）。

所有屏幕元素应当都清晰可辨，并以期望的样式显现，甚至是立即更改模式之后。

设计规范

常规

• 不要将颜色用作主要的沟通方式，而是作为辅助方式对要表达的意思进行视觉加强。

使用主题及系统颜色

• 尽可能通过选择合适的主题颜色或系统颜色来选择颜色。这么做能够始终尊重用户的色彩偏好。
• 根据其用途选择颜色。不要根据颜色当前的外观来选择，因为该外观可能会被用户更改或在未来的 Windows 版本中改变。
• 将前景色与其对应的背景色匹配使用。前景色只有用在对应的背景色上时才能够保证是清晰可辨的。不要混用或将前景色用在其他背景色上，甚至更糟，用在其他前景色上。
• 不要混用颜色类型。这就是说，应当始终将主题颜色与对应的主题颜色匹配使用，系统颜色与对应的系统颜色匹配使用，固定颜色与其他固定颜色一起使用。例如，在固定背景色上使用主题文本色将无法保证是清晰可辨的。
• 如果你一定要使用主题或系统颜色之外的颜色：
  • 最好是从某个主题或系统颜色派生，而不要硬编码颜色值。使用在本文的前面“使用其他颜色”部分所述的过程。
  • 以特例方式处理高对比度模式。
• 处理主题更改事件。具有标准窗口边框的窗口及通用控件会在主题更改时自动进行处理。对于使用自定义窗口边框的、包含自定义或自绘控件、以及以其他方式使用颜色的窗口则必须显式在主题更改时进行处理。
  • 致开发人员：你可以通过处理 WM_THEMECHANGED 消息来响应主题更改事件。

色彩含义

• 尽管你应当尽可能地使用主题和系统颜色（以派生颜色），但应当确保其他对颜色的使用与下列 Windows Vista 的颜色使用方式相兼容。

  色相	含义	Windows 中的使用
  蓝/绿色	Windows Vista 品牌	背景：Windows Vista 品牌宣传。
  玻璃效果、黑色、灰色、白色	中性	背景：标准窗口边框、开始菜单、任务栏、边栏。 前景：普通文本。
  蓝色	开始、提交	背景：默认命令按钮、搜索、登录。 图标：信息、帮助。 前景：主标题说明、链接。
  红色	警告、停止、易受侵害的、关键的、立即注意、受限的	背景：状态、停止的进度（进度条）。 图标：错误、停止、关闭窗口、删除、需要输入、丢失、不可用。
  黄色	警告、注意、可疑	背景：状态、暂停的进度（进度条）。 图标：警告
  绿色	前进、继续、有进度、安全	背景：状态、普通进度（进度条）。 图标：前进、完成、刷新。
  紫色	已访问	前景：已访问的链接（用于 Windows Internet Explorer® 及文档中的链接）。

• 为避免表达前面那些含义，应当选择饱和度从中高到低、高亮度或低亮度的颜色。用户通常会将前面所述的含义与具有完全饱和度或高饱和度的、中等亮度的颜色联系起来，因此你可以通过选择不同的影调来避免这些联系。 在这个示例中，有三种不同影调的黄色，但只有高饱和度、中等亮度的一级才表示警告，黄色的文件夹图标并没有警告的感觉。

在数据中使用颜色

• 如果有用的话，为数据分配颜色以帮助用户进行区分。注意，用户会认为颜色相似的数据具有相似的含义。
• 默认分配那些易于区分的颜色。通常来说，如果颜色在 HSL/HSV 颜色空间中差别很大，与背景色保持高对比度的话，则易于区分：
  • 选择颜色时，应当使用间色或补色，而不是邻近色。

在这个示例中，如果第一个颜色是红色，则下一个颜色应当是蓝、绿或青色，而不是品红、紫、橙或黄。

• • 如果颜色在色相、饱和度或亮度上存在巨大差别的话，则具有高对比度。

在这个示例中，浅蓝基色与背景在色调、饱和度及亮度上分别有较大的差异。

• • 使用白色或很浅的背景色能够使与之对比的前景色易于区分。

在这个示例中，白色及浅色背景色使得前景色易于区分。

• 允许用户自定义颜色分配，因为颜色选择是主观性的，且与个人喜好相关。如果存在大量基准颜色，应当允许用户通过配色方案来进行整体更改。
• 允许用户为颜色分配添加标签。这么做可以帮助他们更好的区分及寻找。
• 与 UI 颜色不同，数据颜色不会随系统颜色更改而更改。

文档编写

• 用 UI 元素的名称来对其引用，而不要使用其颜色。这种引用违背无障碍要求且系统颜色可能改变。如果某个 UI 元素的名称并不被人们熟知或者描述性不够强的话，通过屏幕截图来说明。

正确：

错误：

在错误的示例中，该消息提及 Windows Internet Explorer 信息栏时使用的是颜色而不是名称。