图形元素
注意
此设计指南是为 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”) 。
- 在图形背景中剪裁或不适合的文本。
文本
- 对于辅助功能和本地化，请勿在图形中使用任何文本。 仅将 品牌 和文本表示为抽象概念而制造例外。