windows:Visuals/standard-icons

<div class="breadcrumb">
[[windows:home|Windows 用户体验交互设计规范]] » [[windows:home#视觉设计|视觉设计]] »
</div>

<h1>
    标准图标
    <div class="en">Standard Icons</div>
</h1>

__TOC__


“标准图标”指错误、警告、信息及问号图标，它们是 Windows Vista&reg; 的一部分。

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons01(en-us,MSDN_10).png


标准的错误、警告、信息和问号图标

标准图标的含义如下：
* <b>错误图标：</b>该用户界面（UI）所呈现的是已经发生的错误或问题。
* <b>警告图标：</b>该 UI 所呈现的是可能在未来引发问题的情形。
* <b>信息图标：</b>该 UI 所呈现的是有用的信息。
* <b>问号图标：</b>该 UI 表示一个帮助入口点。
标准图标非常显著，因为它们内置于很多 Windows 应用程序编程接口（API）中，如[[windows:windows/dialog-boxes|任务对话框]]、[[windows:Message Box|消息框]]、[[windows:controls/balloons|气球状提示]]和[[windows:messages/notifications|通知]]等。它们在[[windows:In-place Message|就地信息]]和[[windows:controls/status-bars|状态栏]]中也很常用。

<div class="external">

<b>注：</b>与[[windows:aesthetics/icons|图标]]相关的设计规范请参考各自相应的章节。

</div>


== 设计理念 ==

在选择合适的标准图标时有几个考虑因素，其中一些解释了为什么它们常常被错误地使用。最常见的错误包括：
* 为小错误使用警告图标。警告并非“弱化”了的错误。
* 在不使用图标更好的情况下使用了标准图标。并不是每个消息都需要图标。
* 通过给出警告来提醒用户那些小问题或是将常规的问题用警告来呈现。这么做使用程序看起来危机重重，而且削弱了那些真正严重的问题。
本节的剩余部分解释了应当如何考虑标准图标以避免这些常见的错误。


=== 消息类型 vs. 严重程度 ===

基于消息类型来选择标准图标，而不是背后的问题的严重程度。消息类型包括：
* <b>错误：</b>已经发生的错误或问题。
* <b>警告：</b>可能在未来引发问题的情形。
* <b>信息：</b>有用的信息。
因此，错误信息可以使用错误图标，但绝不是警告图标。不要将警告图标用来“弱化”那些小错误。因此，尽管严重程度不同，但“错误的字体大小”是一个错误，而“继续该操作将会烧着你的房子”是一个警告。


=== 确定适当的消息类型 ===

有些问题既可以被呈现为错误，也可以被呈现为警告或是信息，这取决于强调的重点及措辞方式。例如，假设一个网页在当前 Windows&reg; Internet Explorer&reg; 设置下无法加载未签名的 ActiveX 控件：
* <b>错误：</b>“该页面无法加载未签名的 ActiveX 控件。”（表述为已经存在的问题。）
* <b>警告：</b>“该页面可能不会具有预期的行为，因为 Windows Internet Explorer 配置为不允许加载未签名的 ActiveX 控件。”或是“是否允许该页面安装未签名的 ActiveX 控件？对不受信任的源这么做可能会损害您的计算机。”（两者均表述为未来可能引发问题的情形。）
* <b>信息：</b>“您的 Windows Internet Explorer 已经配置为阻止未签名的 ActiveX 控件。”（表述为事实的陈述。）
<b>要确定适当的消息类型，应将重点放在用户需要知道或采取行动的问题的最重要的方面。</b>一般而言，如果一个问题阻止了用户继续操作，它应当是一个错误；如果用户能够继续，它应当是警告。基于那个重点仔细推敲[[windows:text/ui-text#主标题说明|主标题说明]]或其他相关文字，然后选择与文字相匹配的图标（标准图标或其他）。主标题说明文本与图标应当始终匹配。


=== 严重程度 ===

虽然在选择是使用错误、警告、还是信息标准图标时，严重程度并不作为考虑因素， <b>但它却是根本上决定标准图标是否应该被使用的因素。</b>

图标用于视觉传达的效果是最佳的。（注：出于无障碍访问的考虑，这种视觉传达应当始终与文字或声音等其他形式重复使用。）用户应该能一目了然地辨别信息的性质以及他们响应的后果，因此我们必须区分关键和非关键错误和警告。关键错误和警告具有下列特征：
* 它涉及以下一种或多种可能发生的情况：
** 丢失重要的资料，如财务或其他数据。
** 无法访问系统或系统受损。
** 泄露隐私或失去机密信息的控制。 
** 用户时间（大量时间，例如30 秒或是更多等）。
* 其后果不可预料。
* 需要立即采取正确措施，因为问题无法被轻易修复，而且很可能无法恢复。 
为了区分关键与非关键错误和警告，通常情况下，非关键消息显示时不附带图标。这样做是为了突出关键消息，使关键消息和非关键消息在视觉上得到区分，同时和 [[windows:text/style-and-tone|Windows Vista 语气]] 保持一致.

并非每个消息都需要图标。图标不是用来装饰消息的。

下面是关键警告的良好示例，因为它符合之前定义的特征。

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons03(en-us,MSDN_10).png


在这个示例中，关键警告消息提示用户其数据的丢失可能是无法恢复的。

但是，接下来的示例是非关键消息，因为它有可能是有意为之且很容易撤销。

<b>错误：</b>

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons04(en-us,MSDN_10).png


在这个示例中，这个[[windows:messages/confirmations|确认信息]]是非关键消息，因为它有可能是有意为之且很容易撤销。

在典型的用户界面中，大部分错误是和用户的输入错误有关的。大部分用户输入错误是非关键的错误，因为它们容易被改正且在用户继续之前必须被改正。此外，过份关注小的用户错误，与 Windows Vista 的鼓励式语气背道而驰。因此，通常情况下，小的用户输入错误显示地时候不附带错误图标。为了强化其非关键性质，我们把这些非关键错误归结为用户输入问题。

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons05(en-us,MSDN_10).png


在这个示例中，因为这个小的用户输入问题是非关键的，所以当其显示在对话框中时并不需要附带图标。

=== Avoid overwarning ===

We overwarn in Windows programs. The typical Windows program has warning icons seemingly everywhere, warning about things that have little significance. In some programs, nearly every question is presented as a warning. Overwarning makes using a program feel like a hazardous activity, and it detracts from truly significant issues.

The mere potential for data loss alone is insufficient to call for a warning icon. Additionally, any undesirable results should be unexpected or unintended and not easily corrected. Otherwise, just about any incorrectly answered question could be construed to result in data loss of some kind and merit a warning icon.

To focus warning icons on truly critical issues:
* Make sure that the issue warrants heightened user attention. [[windows:messages/confirmations|Routine confirmations]] and questions shouldn't have warning icons.
* Are users likely to behave differently as a result of the warning icon? Are users likely to consider the decision more carefully?
: 
: <b>Incorrect:</b>
: 
: http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons06(en-us,MSDN_10).png
: 
: 
: In this example, are users likely to answer this question differently because of the warning icon?
* Is there some significant action to do or decision to make? Warnings without actions just make users feel paranoid.
: 
: <b>Incorrect:</b>
: 
: http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons07(en-us,MSDN_10).png
: 
: 
: Why is this notification a warning? What are users supposed to do (beside worry)?


=== Context ===

Context is also a consideration in using standard icons because the context itself communicates information. Specifically:
* While dialog boxes (including task dialogs and message boxes) and notifications don't need icons for non-critical errors, in-place errors always need error icons. Otherwise, such non-modal feedback would be too easy to overlook.
* In-place warnings always need warning icons to distinguish them from regular text.
* Dialog boxes, notifications, and balloons don't need information icons because they are clearly presenting information. By contrast, banners need 16x16 pixel information or other icons because such non-modal feedback would be too easy to overlook.
Because context is a significant factor in icon usage, the standard icon guidelines in this article are given in terms of their context.


=== Evaluating standard icon appropriateness ===

When evaluating your UI text, read any standard icons as well. Read error icons as "error!", warning icons as "warning, be very careful here!", and information icons as "attention!". Then continue to read the remaining context, such as the main instruction, content area, and commit buttons. Make sure the meaning and the tone of each standard icon matches the meaning and the tone of its context. If they don't, you've found a problem.

<b>If you do only one thing...</b>

Make sure the meaning and the tone of each standard icon matches the meaning and the tone of its context. If they don't match, change or remove the icon.


== Guidelines ==

<b>Note:</b> For the following guidelines, "in-place" means on any normal window surface, such as within the content area of a wizard, property sheet, or control panel item page.


=== General ===

* 基于消息类型来选择标准图标，而不是背后的问题的严重程度。
** <b>错误：</b>已经发生的错误或问题。
** <b>警告：</b>可能在未来引发问题的情形。
** <b>信息：</b>有用的信息。
* 如果一个问题跨越了不同的信息类型，则应关注于用户需要处理的最重要的方面。
* 图标必须与主标题说明或其他相关的文字相匹配。
: 
: <b>Correct:</b>
: 
: http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons08(en-us,MSDN_10).png
: 
: 
: <b>Incorrect:</b>
: 
: http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons09(en-us,MSDN_10).png
: 
: 
: In the incorrect example, the standard warning icon doesn't match the main instruction (which gives an error).


=== Icon size ===

<ul>
<li><b>Choose the standard icon size based on the context:</b>
{| class="wikitable"
! Context
! When to use
|-
| Dialog boxes
| Use 32x32 pixel for content area icons; 16x16 pixel for footnote area icons.
|-
| In-place
| Use 32x32 pixel for error pages; 16x16 pixel icons for all others.
|-
| Notifications
| Use 16x16 pixel icons.
|-
| Balloons
| Use 16x16 pixel icons.
|-
| Banners
| Use 16x16 pixel icons.
|}
</li>
</ul>


=== Error icons ===

<ul>
<li><b>Use error icons only when an error or a problem has occurred:</b>
{| class="wikitable"
! Context
! When to use
|-
| Dialog boxes
| Use for critical errors only. (Don't use standard icons for non-critical errors.)

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons10(en-us,MSDN_10).png
|-
| In-place errors
| Use for all errors.

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons11(en-us,MSDN_10).png
|-
| Notifications
| Use for critical errors only. (For [[windows:messages/notifications|action failures]].)

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons12(en-us,MSDN_10).png
|-
| Balloons
| Don't use. Balloons shouldn't be used for critical errors, and they don't need error icons for non-critical errors.
|-
| Banners
| Don't use. Banners shouldn't be used for errors.
|}

通常来说，非关键的用户输入问题不需要使用错误图标。但是，就地错误信息是需要图标的，否则这种基于上下文的反馈很容易被忽视。</li>
<li><b>For task dialogs, don't use error footnote icons.</b> Error icons must be presented in the content area only.</li>
</ul>


=== Warning icons ===

<ul>
<li><b>Use warning icons only when a condition might cause a problem in the future:</b>
{| class="wikitable"
! Context
! When to use
|-
| Dialog boxes
| Use for all warnings.<br>http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons13(en-us,MSDN_10).png
|-
| In-place warnings
| Use to identify the text as a warning.

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons14(en-us,MSDN_10).png
|-
| Notifications
| Use for all warnings. (For [[windows:Non-critical System Events|non-critical system events]].)

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons15(en-us,MSDN_10).png
|-
| Balloons
| Use for [[windows:controls/balloons|special conditions]].

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons16(en-us,MSDN_10).png
|-
| Banners
| Use to draw attention to the banner.

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons17(en-us,MSDN_10).png
|}

</li>
<li><b>不要用警告图标来“弱化”非关键错误。</b>错误不是警告——应当改用错误图标设计规范。</li>
<li><b>对于问题对话框，应当仅为有严重后果的问题使用警告图标。</b>不要为常规问题使用警告图标。

<b>Correct:</b>

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons20(en-us,MSDN_10).png


<b>Incorrect:</b>

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons23(en-us,MSDN_10).png


In the incorrect example, a warning icon is incorrectly used for a routine question.</li>
<li><b>For task dialogs, you can use a warning footnote icon to alert users of risky consequences.</b> However, use a warning icon either in the content area or the footnote area, but not both.

http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons24(en-us,MSDN_10).png


In this example, a yellow security shield is used in a footnote.</li>
</ul>


=== Information icons ===

<ul>
<li><b>Use information icons only when the context isn't obviously presenting information:</b>
{| class="wikitable"
! Context
! When to use
|-
| Dialog boxes
| Don't use.
|-
| In-place
| Don't use. Use either plain static text or a banner instead.
|-
| Notifications
| Don't use.
|-
| Balloons
| Don't use.
|-
| Banners
| Use to draw attention to the banner.<br>http://storage.uxguide.net/wiki-imgs/Aa511277_StandardIcons25(en-us,MSDN_10).png
|}

Information icons aren't needed in dialog boxes, notifications, and balloons because their context sufficiently communicates that they are providing users with information.</li>
<li><b>For task dialogs, don't use information footnote icons.</b> Footnotes are sufficiently visible and it goes without saying that they are information.</li>
</ul>


=== Question mark icons ===

* <b>Use the question mark icon only for Help entry points.</b> For more information, see the [[windows:windows-environment/help|Help entry point]] guidelines.
* <b>Don't use the question mark icon to ask questions.</b> Again, use the question mark icon only for Help entry points. There is no need to ask questions using the question mark icon anyway—it's sufficient to present a main instruction as a question.
* <b>Don't routinely replace question mark icons with warning icons.</b> Replace a question mark icon with a warning icon only if the question has significant consequences. Otherwise, use no icon.