图形元素

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

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

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

注意： 与 组框、动画、图标以及 品牌 相关的指南，请参阅单独的文章。

这是正确的用户界面吗？

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

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

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

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

屏幕截图

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

• 通信是否有效且没有文本？ 否则，请使用 组框、带标签的分隔符或其他 标签。

使用模式

图形元素有多个使用模式：

元素	描述
图形插图 用于直观传达想法。	图形图与图标类似，不同之处在于它们可以是任意大小，通常不是交互式的。 在此示例中，图形插图用于建议特征的性质。
背景 用于强调或取消强调不同类型的内容。	背景可用于强调重要内容。 红色背景屏幕截图 在此示例中，后台用于强调重要任务。 背景还可用于取消强调辅助内容。 屏幕截图 在此示例中，辅助任务通过将辅助任务定位到任务窗格中来取消强调。
横幅 用于指示重要状态。	与背景相反，横幅主要强调单个文本字符串。 在此示例中，横幅用于指示页面的设置由组策略控制。
Glass 从战略上使用，以减少窗口的视觉权重。	玻璃可以通过专注于内容而不是窗口本身来减少表面的重量。 windows 照片库中鸟的 在此示例中，玻璃将用户的注意力集中在内容而不是控件上。
聚合器 用于在强相关控件之间创建视觉关系。	后导航箭头和前向导航箭头的屏幕截图 在此示例中，聚合器背景用于强调资源管理器中后退和向前按钮之间的关系。 屏幕截图 在此示例中，边界聚合器用于强调控件之间的关系，并使它们感觉为单个控件而不是 8 个控件。
分隔符 用于分隔弱相关控件或无关控件。	分隔符可以是交互式分隔符，也可以是非交互式分隔符。 可调整大小的内容之间的交互式分隔符称为拆分器。 名称按钮屏幕截图 在此示例中，交互式分隔符用于可调整大小的内容。 浏览器信息分隔符屏幕截图 在此示例中，分隔符不是交互式的。
阴影 用于使内容在其背景上直观地脱颖而出。	带阴影的四张照片的 在此示例中，阴影使艺术品在背景上脱颖而出。
句柄 用于指示对象可以移动或调整大小。	句柄始终是交互式的，鼠标指针在悬停时会建议其行为。 使用调整指针大小屏幕截图 在这些示例中，句柄指示可以调整对象的大小。

指引

常规

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

图形设计

• 当图形强化一个简单的想法时，图形最有效。 需要考虑解释的复杂图形效果不佳。 象形文字最适合用于洞穴绘图。

  不正确：

  使用复杂图形警告的屏幕截图

  在此示例中，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”）。
  • 剪裁或不适合图形背景的文本。

发短信

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