Color

注意

此设计指南是为 Windows 7 创建的，尚未针对较新版本的 Windows 进行更新。 大部分指南原则上仍然适用，但演示和示例并不反映我们 当前的设计指南。

颜色是大多数用户界面中重要的视觉元素。 除了纯粹的美学之外，颜色具有相关的意义，并引发情感反应。 为了防止混淆的含义，必须一致地使用颜色。 若要获得所需的情感反应，必须正确使用颜色。

颜色通常采用颜色空间，其中 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 位值表示颜色。

注意： 与 字体 和 辅助功能 相关的指南在单独的文章中提供。

设计概念

有效使用颜色可以使程序的用户界面 (UI) 更有效。 颜色可帮助用户一目了然地了解某些含义。 颜色还可以使产品看起来更美观和精致。

遗憾的是，使用颜色太容易了，效果不佳，特别是如果你没有接受过视觉设计方面的培训。 颜色使用不当会导致设计看起来不专业、过时、混乱或只是普通丑陋。 颜色使用不当可能比根本不使用颜色更糟。

本部分介绍有效使用颜色需要了解的内容。

如何使用颜色

颜色通常在 UI 中使用来传达：

• 意义。 可以通过颜色来总结消息的含义。 例如，颜色通常用于传达状态，其中红色是问题或错误，黄色表示警告或警告，绿色表示良好。
• State。 可以通过颜色来指示对象的状态。 例如，Windows 使用颜色来指示选择状态和悬停状态。 网页中的链接使用蓝色表示未访问，使用紫色表示访问。
• 分化。 人员假设相同颜色的项之间存在关系，因此颜色编码是区分对象的有效方法。 例如，在控制面板项中，任务窗格使用绿色背景直观地将它们与main内容分隔开来。 此外，Microsoft Outlook 允许用户为邮件分配不同的颜色标志。
• 重点。 颜色可用于吸引用户的注意力。 例如，Windows 使用蓝色main说明来帮助他们从其他文本中脱颖而出。

当然，颜色通常用于图形纯粹出于美学原因。 虽然美学很重要，但应主要根据 UI 元素的含义而不是外观来选择 UI 元素的颜色。

颜色解释

用户对颜色的解释往往依赖于文化。 例如，在美国中，新娘的婚纱主要与白色相关，而黑色与葬礼相关。 然而，很久以前在日本，颜色象征意义正好相反：白色是葬礼上的主要颜色，黑色被认为是一种为婚礼带来好运的颜色。

也就是说， 对状态的红色、黄色和绿色的解释在全球是一致的。 这是由于 联合国教科文组织《维也纳道路标志和信号公约》，该公约界定了红绿灯 (红色表示停止，绿色表示继续，黄色表示谨慎) 。 可以使用这些状态颜色，而无需考虑文化相关的解释。

除了状态颜色之外，Windows 会根据约定为颜色指定含义，如本文的指南部分所述。 请确保程序的颜色用法与这些颜色约定兼容。

颜色辅助功能

颜色的使用会影响软件对尽可能广泛的受众的可访问性。 失明或视力低下的用户可能根本看不出颜色。 大约8%的成年男性有某种形式的颜色混淆， (经常错误地称为“色盲”) ，其中红绿色混淆是最常见的。

正常颜色视觉时看到的主要颜色。

原色 (1%的男性人口) 。

与 Deuteranopia 看到的原色 (6% 的男性人口) 。

三叉星的原色 (男性人口的1%) 。

有关详细信息，请参阅 Color-Blind用户能否看到您的网站？

使用颜色在视觉上增强

颜色解释和辅助功能问题的最佳解决方案是使用颜色在视觉上强化以下主要通信方法之一的含义：

• 文本。 简明文本通常是直接在 UI 上或通过工具提示进行最有效的主要通信。

在此示例中，工具提示文本用于传达图标的含义。

• 设计。 图标很容易通过设计进行区分，尤其是它们的轮廓形状。

在此示例中，标准图标可以根据设计轻松区分。

• 位置。 也可以使用相对位置，但此方法比替代方法弱。 为了有效，该位置应是标准和众所周知的，就像红绿灯一样。

虽然颜色是许多设计中最明显的属性，但它必须始终是冗余的。

颜色设计

具有讽刺意味的是，设计颜色的最佳方式是先使用 线框 或单色设计，然后再添加颜色。 这样做有助于确保不会仅使用颜色来传达信息。 它还有助于确保打印输出在单色打印机上看起来很棒。

使用主题或系统颜色

虽然有效使用颜色有许多复杂因素，但在 Windows UI 中，选择颜色通常归结为根据一些简单规则选择适当的 主题颜色 或 系统颜色 。 然后，用户可以选择并自定义这些配色方案。

这样做不仅可以满足所有用户的颜色偏好，而且消除了选择适用于所有口味、风格和文化的完美配色方案的负担， (这当然是不可能) 。

如果你只做一件事...

通过选择合适的主题颜色或系统颜色来选择颜色。 切勿将颜色用作主要通信方法，而应将其用作辅助方法，以在视觉上强化含义。 使用线框或单色进行设计，以帮助确保颜色是次要的。

正确使用主题或系统颜色

假设用户根据其个人需求选择主题或系统颜色，并且主题或系统颜色构造得当。 基于此假设，如果始终根据主题或系统颜色的预期用途选择主题或系统颜色，并将前景与其相关背景配对，则保证这些颜色在所有视频模式（包括 高对比度模式）中清晰可读并尊重用户的意愿。 例如，窗口文本系统颜色保证与窗口背景系统颜色一样清晰。

具体而言，始终：

• 根据用途选择颜色。 不要根据其当前外观选择颜色，因为该外观可由用户或 Windows 的未来版本更改。
• 将前景色与其关联的背景色匹配。 前景色保证只能与其关联的背景色一起清晰显示。 不要将前景色与其他背景色混合和匹配，更糟的是，不要混合和匹配其他前景色。
• 不要混合颜色类型。 也就是说，始终将主题颜色与其关联的主题颜色、系统颜色与其关联的系统颜色以及硬连线颜色与其他硬线颜色匹配。 例如，主题文本颜色不保证在硬连线背景上清晰可读。
• 如果必须硬线颜色，请处理高对比度模式作为特殊情况。

如果你只做一件事...

始终根据其预期用途选择主题或系统颜色，并将前景与其关联的背景配对。

使用其他颜色

虽然 Windows 主题定义了一组全面的主题部分，但你可能会发现程序需要主题文件中未定义的颜色。 虽然可以硬连线此类颜色，但更好的方法是从主题或系统颜色派生颜色。 战略性地使用此方法可为你提供使用主题和系统颜色的所有优势，但具有更大的灵活性。

例如，假设你需要一个比主题窗口背景颜色深的窗口背景。 在 HSL 颜色空间中，颜色较深意味着亮度较低的颜色。 因此，可以使用以下步骤派生较深的窗口背景色：

• 获取窗口背景主题颜色 RGB。
• 将 RGB 转换为其 HSL 值。
• 将 (亮度值降低 20%) 。
• 转换回 RGB 值。

使用此方法，派生的颜色保证被视为原始颜色 (较深的阴影，除非原始颜色开始时非常深。)

在此示例中，较深的窗口背景色派生自主题颜色。

测试颜色

若要确定程序对颜色的使用是否可访问且未用作主要通信方法，建议使用 Fujitsu ColorDoctor 或 Vischeck 实用工具检查：

• 使用灰度筛选器对颜色的总体依赖性。
• 使用 Protanopia、Deuteranopia 和 Tritanopia 筛选器的特定颜色混淆问题。

若要确定程序对颜色的使用是否正确编程，请在以下模式下测试程序：

• 使用默认 Windows 主题启用主题。
• 使用非默认主题启用主题。
• 个性化控制面板项) 中的主题设置中禁用了主题 (“Windows 经典样式”。
• 高对比度黑色主题 (黑色背景上的白色文本，在Windows 11) 中称为“水生”。
• 高对比度白色主题 (白色背景上的黑色文本，称为“Windows 11) 上的沙漠”。

所有屏幕元素都应清晰可读，并按预期显示，即使在模式更改后也是如此。

准则

常规

• 切勿将颜色用作主要通信方法， 而应将其用作辅助方法，以在视觉上强化含义。

使用主题和系统颜色

• 尽可能 通过选择合适的主题颜色或系统颜色来选择颜色。 通过这样做，你始终可以尊重用户的颜色偏好。
• 根据用途选择主题和系统颜色。 不要根据当前外观选择颜色，因为用户或 Windows 的未来版本可以更改该外观。
• 将前景色与其关联的背景色匹配。 前景色保证只能与其关联的背景色一起清晰显示。 不要将前景色与其他背景色混合和匹配，更糟的是，不要混合和匹配其他前景色。
• 不要混合颜色类型。 也就是说，始终将主题颜色与其关联的主题颜色、系统颜色与其关联的系统颜色以及硬连线颜色与其他硬线颜色匹配。 例如，主题文本颜色不保证在硬连线背景上清晰可读。
• 如果必须使用不是主题或系统颜色的颜色：
  • 首选从主题或系统颜色派生颜色，而不是硬排其值。 使用本文前面使用其他颜色中所述的过程。
  • 将高对比度模式作为特殊情况进行处理。
• 处理主题更改。 主题更改由具有标准窗口框架和常用控件的窗口自动处理。 具有自定义窗口框架、自定义或所有者绘制控件的 Windows 以及颜色的其他用法必须显式处理主题更改。
  • 开发 人员： 可以通过处理WM_THEMECHANGED消息来响应主题更改事件。

颜色含义

• 虽然应使用主题和系统颜色 (或派生颜色) ，但请确保任何其他颜色使用都与 Windows 中以下颜色用法兼容。

色调	含义	在 Windows 中使用
蓝色/绿色	Windows 品牌	背景：Windows 品牌。
玻璃，黑色，灰色，白色	中立	背景：标准窗口框架、“开始”菜单、任务栏、边栏。 前台：普通文本。
blue	start，commit	背景：默认命令按钮、搜索、登录。 图标：信息、帮助。 前台：main说明、链接。
红色	错误、停止、易受攻击、严重、立即关注、受限	背景：状态、已停止进度 (进度条) 。 图标：错误、停止、关闭窗口、删除、必需输入、缺失、不可用。
yellow	警告， 谨慎， 可疑	背景：状态、暂停进度 (进度栏) 。 图标：警告
green	go， 继续， 进度， 安全	背景：状态、正常进度 (进度条) 。 图标：转到、完成、刷新。 前景：搜索结果) 中 (的路径和 URL。
purple	访问	前台：访问的链接 (Windows Internet Explorer 中的链接和文档) 。

• 为避免传达上述含义，请选择颜色具有高中低饱和度以及高或低亮度。 用户将上述含义与具有完全或高饱和度和中等亮度的颜色相关联，因此你可以通过选择不同的色调来避免这些关联。

在此示例中，有三种不同的黄色阴影，但只有高度饱和的中级亮度阴影传达警告。 黄色文件夹图标看起来不是警告。

对数据使用颜色

• 如果有帮助， 请为数据分配颜色以帮助用户区分它。 请注意，用户将假定具有相似颜色的数据具有类似的含义。

• 默认情况下分配易于区分的颜色。 通常，如果颜色在 HSL/HSV 颜色空间中彼此相距较远，则很容易区分它们，同时保持与背景的高对比度：

  • 选择颜色时，首选三合音或互补色调，而不是相邻色调。

    

    在此示例中，如果第一个颜色分配为红色，则下一个颜色应为蓝色、绿色或青色，但不是洋红色、紫色、橙色或黄色。

  • 如果颜色的色调、饱和度或亮度存在较大差异，则颜色具有高对比度。

    

    在此示例中，浅蓝色基色与色调、饱和度或亮度差异较大的背景形成对比。

  • 使用白色或非常浅的背景使对比的前景色更易于区分。

    

    在此示例中，白色和浅色背景色使前景色更易于区分。

• 允许用户自定义这些颜色分配， 因为颜色选择是主观的，是个人首选项。 如果有许多协调的颜色，则允许用户使用配色方案将其更改为一个组。

• 允许用户标记这些颜色分配。 这样做有助于更轻松地识别和查找它们。

• 与 UI 颜色不同，系统颜色更改时不应更改数据。

文档

• 按名称而不是颜色引用 UI 元素。 此类引用不可访问，系统颜色可能会更改。 如果 UI 元素的名称不为人所知或描述性不够，请显示屏幕截图以阐明。

正确：

不正确：

在不正确的示例中，该消息按其颜色而不是名称引用 Windows Internet Explorer 信息栏。