Windows桌面应用程序设计指南（控件篇3-命令按钮）

2017-03-13 本文已影响0人烈焰虾米

用户使用命令按钮，触发一个即时行为。

一个典型的命令按钮

默认情况下，用户点击回车键可以触发当前聚焦的按钮执行命令。这是开发者设置的默认操作，用户按tab键，可以在按钮之间跳转聚焦。

何时使用该控件？

思考以下问题，再做决定：

是不是需要表示即时触发的行为？如果不是，考虑其他的选择；
使用链接会不会更合适？在以下情况中，优先使用链接：
1.当前行为会跳转至另一个页面、窗口或者帮助主题。（wizard navigation中使用的“上一步”“下一步”按钮除外）；
2.操作命令出现在一段文字当中。
3.命令的权重默认是次级的，也就是说它不是当前窗口的主要操作。在这种情况下，使用外观上较为轻量级的按钮、或者直接使用链接会比较合适。
4.命令属于相关链接下展开的菜单或组。
5.标签文字太长，超过五个单词长（英语中），这时使用命令按钮并不美观。
一组单选钮和一对命令按钮的组合是不是更合适？在下面任意情况中，一组有明确含义的命令按钮常被结合了确认、取消命令按钮和单选项目的按钮组合代替：
1.可选的操作多于五个；
2.用户在决定操作前需要看补充信息；
3.用户需要在确认操作前和选项交互（例如查看补充信息）；
4.用户把操作项视作一组选项，而非一组含义各不相同的的命令项。

正确示例

不利于用户做出选择的错误示例

设计思路

使用省略号

尽管命令按钮是一个触发即时动作的控件，但是也会有需要展示更多动作详情的情况。如果要表示当前动作需要展示额外信息（包括确认），在按钮的标签末尾加上省略号。

此例中，点击按钮会出现需要填入更多信息的“打印”对话框

相应的，在上例中，点击按钮之后并没有后续交互动作，系统直接使用默认打印机打印一份文件

恰当地使用省略号很重要。它能暗示用户在执行操作前还需要做进一步的选择，甚至直接取消整个操作。省略号的视觉暗示能让用户放心地探索你的软件产品。
但这不意味着你应该在任何会打开新窗口的按钮上都使用省略号—只有当新窗口上的补充信息对执行目标操作必不可少的时候才需要这样做。 并不是任何含有“会打开新窗口”暗示的按钮都需要附加省略号, 例如关于、高级、帮助（或其他链接到帮助主题的按钮）、选项、属性和设置等等。
一般来说，用户界面上的省略号表示不完整性。只是需要打开其他窗口的命令不是不完整的--它并没有展示执行操作必须的补充说明，它只是必须另开窗口来使界面更加整洁清楚。在这种情况下，使用省略号就没有必要了。

需要明确：使用简洁清晰的标签说明命令按钮的操作，在合适的情况下使用省略号。

应用范例

命令按钮有以下几种类型：
标准命令按钮 用来表示即时触发的动作

标准命令按钮

默认选中命令按钮 这种状态的命令按钮，用户点击enter键就能触发操作。

默认态命令按钮

用户点击标准命令按钮，就会使之变成默认选中状态。如果输入焦点当前不在按钮上，则带有默认按钮属性的命令按钮将成为默认值。一个窗口中只能有一个命令按钮是默认的。

轻量命令按钮 轻量命令按钮和标准命令按钮很像，但它的按钮边框只有在鼠标hover的时候才会出现。

轻量命令按钮

在上例中，这个按钮的外观非常不明显（看起来像一个链接）。但用户hover过它的上方，会出现按钮边框。
轻量命令按钮可以用在所有适用于标准命令按钮的情况下，使用它可以避免按钮形态的千篇一律。轻量命令按钮在表达重要性不高的选项、且用链接的形式不合适的情况下十分理想。

菜单按钮 当需要展示一系列相关选项时，使用菜单按钮。

菜单按钮示例

在对话框、工具栏、或其他没有菜单栏出现的窗口中，使用菜单按钮来代替菜单栏的功能。一个向下的小三角暗示点击按钮会展开菜单。

分裂式按钮 用分裂按钮来集合同一个功能命令的不同细节选择，特别是在某种选择特别常用的情况下可以使用。

分裂式按钮默认态

分裂式按钮展开态

在上例中，分裂按钮集合了打开命令的六种可选项。默认的直接打开选项最为常用，所以用户通常并不需要打开去看其它选项。使用分裂式按钮不仅节省空间，也能提供许多可选项供用户选择。

和菜单按钮不同的是，点击分裂按钮的左边部分是直接执行当前标签上的动作行为。在需要使用特定工具完成操作、且这次用户的选择很大几率会和上次相同的情况下，分裂式按钮是很好的选择。在下面示例中，取色器按钮就保存了用户的上次选择：

Paste_Image.png

浏览按钮 点击浏览按钮展示对话框，对话框中提供用户可以选择的有效值。
由浏览按钮触发的对话框能帮助用户在文件、文件夹、计算机、用户名和颜色等等多种对象中作出选择。浏览按钮通常带有一个不严格限定的输入控件，例如文本框。浏览按钮的标签一般是“浏览”、“其他”或者“更多”，而且文字后通常带有省略号，用以暗示需要进行更多内容的补充。

一个带有浏览按钮的文本框

如果窗口上有很多浏览按钮，你可以使用简版形式：

简版的浏览按钮

渐进展开按钮 渐进展开按钮可以用来展示或者隐藏不常用的选项。
渐进展开是指，默认隐藏不常用的选项，当需要选择时再展开。渐进展开的标志暗示是双箭头，箭头的方向即是将要展开或隐藏选项的动作将要发生的方向：

展开更多

点击上面的按钮之后，标签文字会随之改变，暗示下一个点击动作的效用与之前相反：

收起
更多详情和案例，请参见 Progressive Disclosure Controls.

方向按钮 方向按钮用来指明动作发生的方向。
方向按钮使用的不是双箭头，而是一个单箭头角括号：

示例

设计指南

一般情况

如果点击按钮无法立即响应，鼠标要展示等待加载中的状态。 如果没有反馈，用户会以为点击没起到作用，从而再次点击。
如果同样功能的命令按钮在多个窗口上都有设置，尽量使用相同的标签文字和存取键。在每个页面上的位置也尽量设置得一致。
对于有文字标签的命令按钮，宽度尽量小，高度使用标准值。更多详情，参见建议设计尺寸和间距一节。
对每个页面上的命令按钮，尽量都设置成相同的宽度。 如果实现起来有困难，有文字标签的命令按钮宽度规格最多可以有两个。
在还有其他的控件与命令按钮一起执行交互操作的情况下，例如输入框和一个“浏览”按钮，有三种布局方式来暗示这两个对象间的紧密关系：

按钮与另一控件的右侧对齐且顶对齐；
按钮在另一控件下方放置，且左对齐；
按钮放置在其他控件中间，并且竖向居中（如上例中的“增加”和“移除”按钮，放在两个菜单栏中间）。

如果有多个命令按钮作用于同一个控件，排版方式是将它们竖向堆叠排列在控件右边，与该控件顶对齐，或者横向水平陈列在该控件下方，与该控件左对齐。
当命令按钮附属于其他控件时，使用上述的排版规则，且只有在主控件被选择时，其下属的命令按钮才被激活。
不要使用过窄、过短或过高的带标签文字的命令按钮 这样外观的命令按钮看起来不够专业。尽量使用默认长宽尺寸的命令按钮。

正确示例

错误示例1：按钮尺寸过小

错误示例2：按钮尺寸过大

尽量避免在命令按钮上使用图文组合的标签。 图文组合常常会使视觉效果更杂乱，而且这样的设计并不能使用户更容易理解。只有在例如“图像是命令含义的标准默认图标”等确实能有助于用户对命令效果的理解的情况下，使用图文组合的方式设置命令按钮图标。否则，标签使用文字或者图像，二者其一。

正确示例。在上例中，图标确实形象地表达了标签文字命令的效果

正确示例。在上例中，标准图标结合辅助文字，也很好地解释了命令的含义

错误示例。在上例中，取消图标无益于增进用户的理解，是冗余的。

不要使用命令按钮来进行状态的设置。 设置状态的情况，使用单选按钮或者多选框控件。命令按钮的唯一作用就是触发行为。

分裂式按钮

默认情况标签展示最常用的选项。 如果常用选项不止一个，选择一个不需要更多附属信息来解释的。
如果最有可能的选项是用户上一次的最后操作项，那就把默认标签选项设置为用户的上次选择项。
默认展示出的标签选项，在下拉菜单中用加粗字体表示。 这样有助于用户辨认出方便地找到默认值，特别是在默认命令项是动态内容、或者分裂式按钮使用图片而不是文本表达选项含义的时候。