Win7 按钮设计规范
杰拉斯 | 时间：2012-10-14, Sun | 7,954 views前端开发
命令按钮（Command Button）用于开始一个即时操作。
典型的命令按钮。 当用户按下 Enter 键时会执行“默认命令按钮”。它是由开发人员指定的，但对于任何一个按钮，只要用户将焦点切换到其上，它都会变成默认按钮。
它用在这里合适么？
考虑下列问题以进行判断：
该命令按钮是用来开始一个即时操作的吗？如果不是，则改用其他控件。
链接会不会更合适？如果符合下列情况，则应当使用链接：
该操作是导航至另外的页面、窗口或帮助主题。
例外：向导中使用“后退”与“下一步”按钮进行导航。
按钮被嵌入在文本中间。
该命令实际上是次要的。也就是说，它与该窗口的主要目的没有关系。在这种情况下，轻量级的命令按钮或链接则更为合适。
该命令属于相关链接菜单或组。
标签太长，包含五个或五个以上的单词，这会导致命令按钮看上去显得笨拙。
使用选项按钮与常规命令按钮的组合是不是更合适？当下列条件符合时，往往会用选项按钮与常规命令按钮（确定、取消）的组合来代替一组独立的命令按钮：
存在五个或更多可能的操作。
用户需要在决定前查看附加信息。
用户需要在决定前与选项进行交互（也许是要查看附加信息）。
用户将其视为选项，而非不同的命令。
正确：
在这个示例中，选项按钮与确定、取消按钮一起使用，为选项提供附加信息。
错误：
在这个示例中，用户仅通过命令按钮很难获得进行决定所需的依据。
设计理念
使用省略号
虽然命令按钮用于立即操作，但有时会需要更多的信息来执行操作。应当在按钮标签后添加省略号来表示该命令需要额外的信息（包括需要确认）。
.png "win7 按钮设计规范。")
在这个示例中，“Print...”命令将显示打印对话框以收集更多信息。
.png "win7 按钮设计规范。")
相反，在这个示例中，Print 命令则无需用户任何后续操作，直接在默认打印机上打印一份文档。 正确使用省略号非常重要，它表示用户能够在执行操作之前继续调整选项，或者是完全取消操作。省略号所提供的可视线索使用户能够放心大胆地探索你的软件。 但这并不表示只要弹出另外的窗口就应该使用省略号——仅当需要为该操作提供更多附加信息时。因此，任何暗示会“弹出其他窗口”的命令按钮都不需要省略号，例如“关于”、“高级”、“帮助”（或其他链接到帮助主题的命令）、“选项”、“属性”或“设置”等。 通常，在用户界面中使用省略号表示未完成。显示其他窗口的命令并不是未完成的——它们“必须”显示其他窗口，而并不需要任何附加信息来执行操作。这在当省略号没有价值的时候减少了屏幕混乱。 最重要的一件事： 使用精准、明确、自描述性的标签以清晰描述命令按钮执行的操作，并在需要时使用省略号。
使用模式
命令按钮具有下列使用模式：
| 标准命令按钮 你可以使用标准命令按钮来启动一个立即操作。 |
.png "win7 按钮设计规范。") 标准命令按钮 |
| 默认命令按钮 窗口中的默认命令按钮表示当用户按下 Enter 键时会被激活。 |
.png "win7 按钮设计规范。") 默认命令按钮 用户通过 Tab 键切换到的任何按钮都会变为默认按钮。如果输入焦点位于不是按钮的控件上，那么原本具有默认按钮属性的按钮则会恢复为默认按钮。每个窗口中只能有一个按钮成为默认按钮。 |
| 轻量级命令按钮 轻量级命令按钮和标准命令按钮很像，唯一的不同在于其边框仅当鼠标悬停的时候才会显示。 |
.png "win7 按钮设计规范。") 在这个示例中，只有当用户将鼠标悬停在命令上方时，它才会具有非常轻量级的外观（类似于链接），显示出按钮的边框。 当你想使用标准命令按钮，但又不希望总是显示按钮边框时，则可以使用轻量级的命令按钮。对于你想弱化某个命令按钮，链接又不太合适的情况，轻量级的命令按钮是理想的选择。 |
| 菜单按钮 当需要为一组少量相关的命令使用菜单时，可使用菜单按钮。 |
.png "win7 按钮设计规范。") 包含一组少量相关的命令的菜单按钮 当菜单栏不适合出现在某些场合时应使用菜单按钮，如对话框、工具栏或其他不包含菜单栏的窗口等。一个倒三角形表明，单击该按钮将会展开下拉菜单。 |
| 分割按钮 可使用分割按钮（Split Button）来组合一个命令的一组变化，尤其当其中一个命令特别常用时。 |
.png "win7 按钮设计规范。") 已收起的分割按钮 与菜单按钮类似，一个倒三角形表明单击按钮的右侧部分会弹出一个下拉菜单。 .png "win7 按钮设计规范。") 已展开的分割按钮 在这个示例中，分割按钮用于组合 Open 命令的六种变化。由于大多数情况下使用的都是常规的 Open 命令，因此用户通常无须看到其他命令。使用分割按钮不仅有效地节约了屏幕空间，也提供了丰富的选择。 与菜单按钮不同的是，单击按钮的左侧部分将直接执行标签所示的操作。当特定工具的下次操作往往与上次操作相同时，分割按钮非常有效。此时，标签会根据最后一次操作而改变，例如这个颜色选取器： .png "win7 按钮设计规范。") 在这个示例中，标签显示的是最后一次进行的操作。 |
| 浏览按钮 可使用浏览按钮来显示对话框以帮助用户选择有效值。 |
浏览按钮（Browse Button）弹出的对话框可帮助用户选择文件、文件夹、计算机、用户、颜色等等。它们通常与一个不受限制的控制一起使用，如文本框。其标签通常为“浏览”、“其他”或“更多”，且总是带有省略号以表示需要更多的信息。.png "win7 按钮设计规范。") 带有浏览按钮的文本框 对于包含多个浏览按钮的窗口，可以使用它的简化版本： .png "win7 按钮设计规范。") 简化的浏览按钮 |
| 渐进展开按钮 可使用渐进展开按钮显示或隐藏不常使用的选项。 |
将不常使用的选项隐藏，直到需要时才显示的做法称为“渐进展开（Progressive Disclosure）”。双 V 形（双箭头形）表明了渐进展开方式的使用，其箭头即指向信息显示或隐藏的位置：.png "win7 按钮设计规范。") 单击该按钮后，其标签会发生改变，以表明下次单击会产生相反的效果： .png "win7 按钮设计规范。") 关于更多信息和示例，请参考渐进展开控件. |
| 方向按钮 可用方向按钮（Directional Button）指示操作进行的位置。 |
这里使用单个尖括号代替双箭头形：.png "win7 按钮设计规范。") 方向按钮指示操作进行的方位。 |
设计规范
如果单击命令按钮不会立即产生结果的话，应当显示忙碌鼠标指针。如果没有反馈，用户可能会认为没有单击并会再次单击。
如果同样的命令按钮出现在多个窗口中，试着使用相同的标签文本、访问键及窗口位置。
对于有文本标签的命令按钮来说，应当使用最小按钮宽度和标准按钮高度。更多信息，参见推荐尺寸与间距。
在每个窗口中保持按钮宽度相等。如果这么做不切实际的话，应当将有文本标签的命令按钮不同宽度的数量限制为两种。
当其他控件和一个命令按钮存在互操作时，如带有“浏览”按钮的文本框，应当将该命令按钮以下列三种方式中的一种进行摆放以表示它们之间的关系：
位于其他控件右侧，顶端对齐。
位于其他控件下侧，左对齐。
在互操作的控件之间垂直居中（如两个相关的列表框中间的“添加”和“删除”按钮）。
如果多个命令按钮与同一个控件存在互操作时，在其他控件右侧纵向排列并顶端对齐，或在控件下方横向排列并左对齐。
当命令按钮附属于其他控件时，应当使用上述位置，并在上级控件被选中之前禁用附属的命令按钮。
不要使用过窄、过短或过高的带有文本标签的命令按钮，因为其看起来显得不专业。尽量使用默认的宽度和高度。
正确：
.png "win7 按钮设计规范。")
在这个示例中，按钮使用了标准尺寸，看起来很专业。
错误：
.png "win7 按钮设计规范。")
在这个示例中，按钮太小。
错误：
.png "win7 按钮设计规范。")
在这个示例中，按钮上标签四周的空间太多。
避免在命令按钮上同时使用文本标签和图形。同时使用文本和图标往往会增加不必要的视觉混乱，且无法帮助用户更好地理解。仅当图形用于增进理解的时候才考虑同时使用文本和图形，例如当用于命令的是标准符号或它能够帮助用户形象地了解该命令的结果等等。否则，首先考虑文本，或者单独使用图形。
正确：
.png "win7 按钮设计规范。")
在这个示例中，箭头图形帮助用户形象地了解该命令的结果。
正确：
.png "win7 按钮设计规范。")
在这个示例中，标准符号和文字一起使用以增进理解。
错误：
.png "win7 按钮设计规范。")
在这个示例中，“取消”图形在文本的基础上毫无用处。
不要将命令按钮用于设置状态。应当改用选项按钮或复选框。命令按钮仅用于启动操作。
分割按钮（split button）
将最常用的命令作为默认行为。如果存在多个可能的命令，选择不需要额外信息的一个。
如果最常用的命令是用户上次选择的命令，则应将按钮标签改为上次的选择。
在菜单中将默认命令以粗体方式显示。这么做使用户能够更容易地找到默认命令，尤其当默认命令是动态的或分割按钮使用图形来代替文本标签时。
默认值
在每个对话框上都包含一个默认命令按钮。将最可靠（防止数据丢失或系统访问）且最安全的命令作为默认值。如果可靠性或安全性不是需要考虑的因素，则选择最常用或最方便的命令。
不要将破坏性操作作为默认命令按钮，除非有简单的撤销命令的途径。
推荐尺寸与间距
.png "win7 按钮设计规范。")
用于命令按钮的推荐尺寸与间距
标签
为所有命令按钮添加标签。
如果按钮只有图形标签，那么为其 Name 属性分配合适的文本标签。这使像屏幕阅读器这类的辅助技术产品能够为用户提供关于该图形的额外信息。
.png "win7 按钮设计规范。")
这个示例展示了一些图形按钮；在内部，这些按钮的标签是“上一个(P)”、“下一个(N)”和“复制(C)”。
对于简化的浏览按钮（标签为“...”），其内部标签应当为“浏览”。
例外：
不要将访问键分配给确定和取消按钮，因为 Enter 是默认按钮（通常是确定按钮）的访问键，而 Esc 则是取消按钮的访问键。这么做会使其他访问键更容易分配。
不要为简化的浏览按钮（标签为“...”）分配访问键，因为它无法进行唯一分配。
虽然倾向于使用简短的标签，但仍应当使用足够的文本来对命令进行充分解释。当对象在上下文中不太明显时，应当使用直接宾语（跟在动词后的名词）来描述该对象。理想情况下，用户应当不需要阅读其他任何东西就可以理解标签。
可以接受：
.png "win7 按钮设计规范。")
在这个示例中，如果它的意思在上下文中显而易见的话，简短的标签是可以接受的。
较好：（如果“添加”不明确的话）
.png "win7 按钮设计规范。")
在这个示例中，给动词加上一个名词以帮助用户理解。
最好：
.png "win7 按钮设计规范。")
在这个示例中，该标签是自说明性的。
标签应当以祈使动词起头，清晰描述按钮完成的操作。不要使用句末标点。
例外：下列标准标签在没有动词的情况下使用是可以接受的：Advanced（高级）、Back（后退）、Details（详细信息）、Forward（前进）、Less（更少）、More（更多）、New（新建）、Next（下一步/个）、No（否）、OK（确定）、Options（选项）、Previous（上一步/个）、Properties（属性）、Settings（设置）和 Yes（是）。
最好使用明确的标签，而不是普通的。理想情况下，用户不应该需要阅读任何其他内容来理解该标签。用户更愿意阅读命令按钮标签，而不是静态文本。
例外：如果“取消”有歧义的话，不要修改“取消”按钮的名称。用户不应该需要阅读所有按钮来确定到底哪个按钮可以取消该操作。但是，如果不清楚要取消的是哪个操作，例如有多个即将进行操作时，可以重命名“取消”。
可以接受：
.png "win7 按钮设计规范。")
在这个示例中，确定和取消按钮可以接受，但是标签不够明确。
较好：
.png "win7 按钮设计规范。")
在这个示例中，“Burn CD（刻录 CD）”比确定更加明确。
错误：
.png "win7 按钮设计规范。")
在这个示例中，应当使用“取消”，而非“Don't Burn CD（不要刻录 CD）”。
使用句子大写样式。这么做更加贴合 Windows Vista? 语气。
例外：对于遗留的应用程序，如果需要，你可以使用标题大写样式来避免混合的大小写样式。
如果取消后退回之前的状态（没有任何副作用），则将按钮命名为“取消”；否则，应当命名为“关闭”（如果操作已经完成）或“停止”（如果操作还在进行中）来表示会完整保留当前更改过的状态。
不要在命令按钮的标签中使用“now（立即）”，因为命令当然是立即进行的。
例外：必要时，如果这种立即性并非理所当然的话，可以使用“now（立即）”。
.png "win7 按钮设计规范。")
在这个示例中，单击该命令按钮将打开新窗口或页面以让用户可以下载。
.png "win7 按钮设计规范。")
在这个示例中，单击该命令按钮会直接开始下载。
不要在命令按钮标签中使用“later（稍候）”，如果它暗示不会发生的操作的话。例如，不要使用“Install later（稍候装）”（相对于“Install now（立即安装）”），除非该命令会在一段时间后安装。取而代之，可以使用“Don't install（不安装）”或者“取消”。
- 错误：
.png "win7 按钮设计规范。")
- 在这个示例中，Restart Later（稍后重启）错误地暗示了该命令将在一段时间后自动重新启动计算机。
- 仅为那些与高级用户相关的或需要高级用户知识的选项使用“Advanced（高级）”按钮。不要将高级按钮用于那些技术高级的功能。例如，打印机装订功能不是高级选项，但其颜色管理系统则是高级选项。
- 错误：（如果该选项并不真的高级的话）
.png "win7 按钮设计规范。")
- 在这个示例中，高级存在误导。
- 正确：
.png "win7 按钮设计规范。")
- 在这个示例中，此标签更加明确和准确。
- 对于打开其他窗口的命令按钮来说，应当在其标签文本中包括辅助窗口标题栏文本的部分或全部。例如，标签为“浏览”的命令按钮可能打开一个标题为“浏览文件夹”的对话框。在整个任务中使用相关的术语能够帮助用户随时了解自己所处的位置。
- 如果正在向用户提问，应当使用与问题匹配的标签。
- 正确：
.png "win7 按钮设计规范。")
- 在这个示例中，按钮回答了问题。
- 错误：
.png "win7 按钮设计规范。")
- 在这个示例中，按钮没有回答问题。
- 如果命令需要额外信息才能成功完成，其标签应当以省略号结尾。如果该操作所谓成功完成只是简单地显示另一个窗口时则不要使用省略号，如关于、高级、选项、属性或帮助。
- 例外：图形标签无须使用省略号。
- 正确：（如果显示打印选项对话框）
.png "win7 按钮设计规范。")
- 在这个示例中，当单击该按钮之后，将显示打印选项对话框，从用户那里要求更多的信息。
- 错误：
.png "win7 按钮设计规范。")
- 在这个示例中，当单击该按钮之后，将显示选项对话框，但不需要从用户那里获取更多的信息。
- 对于浏览按钮来说，当一个窗口中有两个以上的浏览按钮时，应当使用简化的浏览按钮（标签为“...”）。当你想在网格表中显示浏览按钮时，应当始终使用简化版。
- 对于有方向性的按钮，应当使用单个尖括号以指示操作将要发生的方向。
文档编写
当提及命令按钮时：
原样引用标签文本，包括其大小写，但无须包含访问键下划线和省略号。不要包含“button（按钮）”字样。
用“click（单击）”一词描述用户的交互行为。
应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。
示例：Click Print to print the document.（单击“打印”以打印文档。） 感谢UXGuide！
转自：栗紹峰的博客
如需转载请注明出处：杰拉斯的博客
当前暂无评论 »