出自UXGuide.net

图形元素

Graphic Elements

目录 1 这样的用户界面是否正确？ 2 Usage patterns 3 Guidelines 3.1 General 3.2 Graphic designs 3.3 Backgrounds and banners 3.4 Glass 3.5 Separators 3.6 Shadows 3.7 High DPI support 4 Text

“图形元素”用于呈现关系、层次和视觉强化，包括背景、横幅、玻璃、聚合、分隔符、阴影及手柄等。

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

图形元素通常是不可交互的。不过，分隔符是用于调整内容尺寸的，而手柄则是显示交互性的图形。

注：与分组框、动画、图标和品牌宣传相关的设计规范请参考各自相应的章节。

这样的用户界面是否正确？

虽然图形元素是强有力的表现关系的视觉手段，但过度使用会增加视觉混乱并减少界面上的可用空间。应当有节制地进行使用。

Microsoft® Windows® 的一个设计趋势是通过减少不必要的图形和线条来创建更简单、整洁的外观。

要确定一个图形元素是否必要，可以考虑下列问题：

• 如果没有这些元素，该设计的呈现和表达方式是否同样清晰有效？如果是，则将其移去。
• 能否仅通过布局来有效地表达关系？如果能，则应改用布局。你可以将相关的控件放在一起，给不相关的控件增加额外的间距。你还可以使用缩进来显示层级关系。

在这个示例中，仅用布局来展示控件之间的关系。

• 如果没有文字，是否仍能有效地进行表达？如果不能，则应使用分组框、带标签的分隔线、或其他标签。

Usage patterns

Graphic elements have several usage patterns:

Graphic illustrations Use to communicate an idea visually.	Graphic illustrations are similar to icons except that they can be any size and usually aren't interactive. In this example, a graphic illustration is used to suggest the nature of a feature.
Backgrounds Use to emphasize or de-emphasize different types of content.	Backgrounds can be used to emphasize important content. In this example, a background is used to emphasize an important task. Backgrounds can also be used to de-emphasize secondary content. In this example, secondary tasks are de-emphasized by locating them in a task pane.
Banners Used to indicate important status.	In contrast to backgrounds, banners emphasize primarily a single text string. In this example, a banner is used to indicate that the page's settings are controlled by Group Policy.
Glass Use strategically to reduce the visual weight of a window.	Glass can reduce the weight of a surface by focusing on the content instead of the window itself. In this example, glass focuses the user's attention on the content instead of the controls.
Aggregators Use to create a visual relationship between strongly related controls.	In this example, an aggregator background is used to emphasize the relationship between the Back and Forward buttons in Explorer. In this example, a boundary aggregator is used to emphasize the relationship among the controls, and make them feel like a single control instead of eight.
Separators Use to separate weakly related or unrelated controls.	Separators can be either interactive or non-interactive. Interactive separators between resizable content are known as splitters. In this example, an interactive separator is used for resizable content. In this example, the separator isn't interactive.
Shadows Use to make content stand out visually against its background.	In this example, shadows make the artwork stand out against the background.
Handles Use to indicate that an object can be moved or resized.	Handles are always interactive and their behavior is suggested by the mouse pointer on hover. In these examples, handles indicate that an object can be resized.

Guidelines

General

• Don't convey essential information through graphic elements alone. Doing so presents accessibility issues for users with visual disabilities or impairments.

Graphic designs

• Graphics are most effective when they reinforce a single simple idea. Complex graphics that require thought to interpret don't work well. Hieroglyphics are best left for cave drawings.

Incorrect:

In this example, a complex graphic from Windows XP ineffectively attempts to explain a complex trust decision.

• Don't use arrows, chevrons, button frames, or other affordances associated with interactive controls. Doing so invites users to interact with your graphics.
• Avoid swaths of pure red, yellow, and green in your designs. To avoid confusion, reserve these colors to communicate status. If you must use these colors for something other than status, use muted tones instead of pure colors.
• Use culturally neutral designs. What may have a certain meaning in one country, region, or culture may not have the same meaning in another.
• Avoid using people, faces, gender, or body parts, as well as religious, political, and national symbols. Such images may not easily translate or could be offensive.
• When you must represent people or users, depict them generically; avoid realistic depictions.

Backgrounds and banners

• To emphasize content, use dark text on a light background. Black text on a light gray or yellow background works well.

In this example, the link gets the user's attention because it is on a yellow background.

• To de-emphasize content, use light text on a dark background. White text on a dark gray or blue background works well.

In this example, the dark background de-emphasizes the content.

• If a gradient is used, make sure that the text color has good contrast across the entire gradient.
• Always use a 16x16 pixel icon to draw attention to the banner. Banners are too easy to overlook otherwise. For more guidelines and examples, see Standard Icons.
• Use backgrounds and banners with caution. While the intent of the background or banner may be to emphasize content, quite often the results are the opposite—a phenomenon known as "banner blindness."

Glass

• Consider using glass strategically in small regions touching the window frame without text. Doing so can give a program a simpler, lighter, more cohesive look by making the region appear to be part of the frame.
• Don't use glass in situations where a plain window background would be more attractive or easier to use.

Separators

• Use vertical and horizontal lines for separators. Be sure to have sufficient space between the separators and the content being separated.
• For separators between sizable content (splitters), display the resize pointer on hover.

In these examples, resize pointers are shown on hover.

Shadows

• Use only to make your program's most significant content or objects being dragged stand out visually against its background. Consider shadows to be visual clutter in other circumstances.

High DPI support

• Support 96 and 120 dots per inch (DPI) video modes. Detect the DPI mode at startup and handle DPI change events. Windows Vista is optimized for 96 and 120 DPI, and uses 96 DPI by default.
• Prefer to provide separate bitmaps rendered specifically for 96 and 120 DPI over scaling graphics. At least provide 96 and 120 DPI versions for the most important, visible bitmaps, and either center or scale the others. Such applications are considered "high-DPI aware" and provide a better overall visual experience than programs that are automatically scaled by Windows Vista.
  • Developers: You can declare a program high-DPI aware (and prevent automatic scaling) setting the DPI aware flag in the program's manifest, or by calling the SetProcessDPIAware() API during program initialization. You can use macros to simplify selecting the right graphics. For Win32 bitmaps, you can use SS_CENTERIMAGE to center or SS_REALSIZECONTROL to scale.
• Check your program in both 96 and 120 DPI for:
  • Graphics that are too small or too large.
  • Graphics being clipped, overlapped, or otherwise not fitting properly.
  • Graphics that are poorly stretched ("pixilated").
  • Text that is clipped or not fitting in graphic backgrounds.

Text

• For accessibility and localization, don't use any text in graphics. Make exceptions only to represent branding and text as an abstract concept.