图形元素

注意

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

图形元素 直观地显示关系、层次结构和强调。 它们包括背景、横幅、玻璃、聚合器、分隔符、阴影和句柄。

包含多种类型的图形元素的示例。

图形元素通常不交互。 但是，分隔符对于可调整大小的内容是交互式的，句柄是显示交互性的图形。

注意： 与 分组框、 动画、 图标和 品牌 相关的指南分别在单独的文章中介绍。

这是正确的用户界面吗？

虽然图形元素是指示关系的强视觉手段，但过度使用它们会增加视觉混乱，并减少图面上的可用空间。 应谨慎使用它们。

Microsoft Windows 中的设计趋势是通过消除不必要的图形和线条，实现更简单、更简洁的外观。

若要确定是否需要图形元素，请考虑以下问题：

• 没有 元素，设计演示和沟通是否同样清晰有效？ 如果是，请将其删除。
• 能否单独使用布局有效地传达关系？ 如果是，请改用 布局 。 可以将相关控件彼此放在一起，并在不相关的控件之间放置额外的间距。 还可以使用缩进来显示分层关系。

在此示例中，布局单独用于显示控件关系。

• 在没有文本的情况下通信是否有效？ 如果没有，请使用 分组框、带标签的分隔符或其他 标签。

使用模式

图形元素具有多种使用模式：

元素	说明
图形插图 用于直观地传达想法。	图形插图类似于图标，只是它们可以是任意大小，并且通常不是交互式的。 在此示例中，图形插图用于建议特征的性质。
背景 用于强调或取消强调不同类型的内容。	背景可用于强调重要内容。 在此示例中，背景用于强调重要任务。 背景还可用于取消强调次要内容。 在此示例中，通过在任务窗格中查找辅助任务来取消强调次要任务。
横幅 用于指示重要状态。	与背景相反，横幅主要强调单个文本字符串。 在此示例中，横幅用于指示页面的设置由组策略控制。
玻璃 战略性地使用 来减少窗口的视觉权重。	玻璃可以通过聚焦于内容而不是窗口本身来减轻表面的重量。 在此示例中，glass 将用户的注意力集中在内容上，而不是控件上。
聚合器 用于在强相关控件之间创建视觉关系。	在此示例中，聚合器背景用于强调资源管理器中后退按钮和前进按钮之间的关系。 在此示例中，边界聚合器用于强调控件之间的关系，并使它们看起来像一个控件，而不是八个控件。
分隔器 用于分离弱相关或不相关的控件。	分隔符可以是交互式的，也可以是非交互式的。 可调整大小的内容之间的交互式分隔符称为拆分器。 在此示例中，交互式分隔符用于可调整大小的内容。 在此示例中，分隔符不是交互式的。
阴影 使用 使内容在其背景上直观地脱颖而出。	在此示例中，阴影使插图在背景中脱颖而出。
句柄数 用于指示可以移动对象或调整其大小。	句柄始终是交互式的，其行为由鼠标指针在悬停时建议。 在这些示例中，句柄指示可以调整对象的大小。

准则

常规

• 不要仅通过图形元素传达基本信息。 这样做会为有视觉障碍或有障碍的用户提供辅助功能问题。

图形设计

• 图形在强化单个简单想法时最为有效。 需要深思熟虑的复杂图形效果不佳。 象形文字最好留给洞穴绘图。

  不正确：

  

  在此示例中，Windows XP 的复杂图形无法解释复杂的信任决策。

• 请勿使用箭头、V 形、按钮框或与交互式控件关联的其他功能。 这样做会邀请用户与图形交互。

• 在设计中避免使用纯红色、黄色和绿色。 为了避免混淆，请保留这些颜色以传达状态。 如果必须将这些颜色用于状态以外的其他颜色，请使用静音音而不是纯色。

• 使用文化中立的设计。 在一个国家、地区或文化中可能具有特定含义的内容在另一个国家、地区或文化中可能不具有相同的含义。

• 避免使用人、人脸、性别或身体部位，以及宗教、政治和国家符号。 此类图像可能不容易翻译或可能具有冒犯性。

• 当必须表示人员或用户时，请一般描述他们; 避免逼真的描述。

背景和横幅

• 若要强调内容，请在浅色背景上使用深色文本。 浅灰色或黄色背景上的黑色文本效果良好。

  

  在此示例中，链接会引起用户的注意，因为它位于黄色背景上。

• 若要取消强调内容，请在深色背景上使用浅色文本。 深灰色或蓝色背景上的白色文本效果良好。

  

  在此示例中，深色背景取消强调内容。

• 如果使用渐变，请确保文本颜色在整个渐变中具有良好的对比度。

• 始终使用 16x16 像素图标来吸引人们对横幅的注意。 否则，横幅太容易忽略了。 有关更多指南和示例，请参阅 标准图标。

• 请谨慎使用背景和横幅。 虽然背景或横幅的意图可能是强调内容，但结果往往相反，一种称为“横幅盲”的现象。

玻璃

• 请考虑在接触没有文本的窗口框架的小区域战略性地使用玻璃。 这样做可以让程序看起来是框架的一部分，从而为程序提供更简单、更轻、更连贯的外观。
• 在普通窗口背景更具吸引力或更易于使用的情况下，请勿使用玻璃。

分隔器

• 对分隔符使用垂直线和水平线。 请确保分隔符与要分隔的内容之间有足够的空间。
• 对于可调整大小的内容 (拆分器) 之间的分隔符，请在悬停时显示调整大小指针。

在这些示例中，悬停时显示了调整指针的大小。

阴影

• 仅用于使程序最重要的内容或被拖动的对象在其背景上直观地突出。 在其他情况下，将阴影视为视觉混乱。

高 dpi 支持

• 支持每英寸 96 和 120 点 (dpi) 视频模式。 在启动时检测 dpi 模式并处理 dpi 更改事件。 Windows 针对 96 和 120 dpi 进行优化，默认使用 96 dpi。
• 首选提供专为 96 和 120 dpi 呈现的单独位图，而不是缩放图形。 至少为最重要的可见位图提供 96 和 120 dpi 版本，并居中或缩放其他位图。 此类应用程序被视为“高 dpi 感知”，比由 Windows 自动缩放的程序提供更好的整体视觉体验。
  • 开发人员：可以声明程序高 dpi 感知 (并阻止自动缩放) 在程序清单中设置 dpi 感知标志，或在程序初始化期间调用 SetProcessDPIAware () API。 可以使用宏来简化选择正确的图形。 对于 Win32 位图，可以使用SS_CENTERIMAGE来居中或SS_REALSIZECONTROL缩放。
• 在 96 和 120 dpi 中检查程序，了解以下情况：
  • 太小或太大的图形。
  • 正在剪裁、重叠或无法正确贴合的图形。
  • 拉伸不良的图形 (“pixilated”) 。
  • 在图形背景中剪裁或不适合的文本。

文本

• 对于辅助功能和本地化，请勿在图形中使用任何文本。 仅将 品牌 和文本表示为抽象概念而制造例外。