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

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

一个典型的命令按钮

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

何时使用该控件?

思考以下问题,再做决定:

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

设计思路

使用省略号

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

此例中,点击按钮会出现需要填入更多信息的“打印”对话框
相应的,在上例中,点击按钮之后并没有后续交互动作,系统直接使用默认打印机打印一份文件

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

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

应用范例

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

标准命令按钮

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

默认态命令按钮

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

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

轻量命令按钮

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

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

菜单按钮示例

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

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

分裂式按钮默认态
分裂式按钮展开态

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

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

Paste_Image.png

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

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

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

简版的浏览按钮

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

展开更多

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

收起

更多详情和案例,请参见 Progressive Disclosure Controls.

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

示例

设计指南

一般情况

  • 如果点击按钮无法立即响应,鼠标要展示等待加载中的状态。 如果没有反馈,用户会以为点击没起到作用,从而再次点击。
  • 如果同样功能的命令按钮在多个窗口上都有设置,尽量使用相同的标签文字和存取键。在每个页面上的位置也尽量设置得一致。
  • 对于有文字标签的命令按钮,宽度尽量小,高度使用标准值。更多详情,参见建议设计尺寸和间距一节。
  • 对每个页面上的命令按钮,尽量都设置成相同的宽度。 如果实现起来有困难,有文字标签的命令按钮宽度规格最多可以有两个。
  • 在还有其他的控件与命令按钮一起执行交互操作的情况下,例如输入框和一个“浏览”按钮,有三种布局方式来暗示这两个对象间的紧密关系:
  1. 按钮与另一控件的右侧对齐且顶对齐;
  2. 按钮在另一控件下方放置,且左对齐;
  3. 按钮放置在其他控件中间,并且竖向居中(如上例中的“增加”和“移除”按钮,放在两个菜单栏中间)。
  • 如果有多个命令按钮作用于同一个控件,排版方式是将它们竖向堆叠排列在控件右边,与该控件顶对齐,或者横向水平陈列在该控件下方,与该控件左对齐。
  • 当命令按钮附属于其他控件时,使用上述的排版规则,且只有在主控件被选择时,其下属的命令按钮才被激活。
  • 不要使用过窄、过短或过高的带标签文字的命令按钮 这样外观的命令按钮看起来不够专业。尽量使用默认长宽尺寸的命令按钮。
正确示例
错误示例1:按钮尺寸过小
错误示例2:按钮尺寸过大
  • 尽量避免在命令按钮上使用图文组合的标签。 图文组合常常会使视觉效果更杂乱,而且这样的设计并不能使用户更容易理解。只有在例如“图像是命令含义的标准默认图标”等确实能有助于用户对命令效果的理解的情况下,使用图文组合的方式设置命令按钮图标。否则,标签使用文字或者图像,二者其一。
正确示例。在上例中,图标确实形象地表达了标签文字命令的效果
正确示例。在上例中,标准图标结合辅助文字,也很好地解释了命令的含义
错误示例。在上例中,取消图标无益于增进用户的理解,是冗余的。
  • 不要使用命令按钮来进行状态的设置。 设置状态的情况,使用单选按钮或者多选框控件。命令按钮的唯一作用就是触发行为。

分裂式按钮

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

默认值

  • 在每个对话框中给出一个默认选中的命令按钮。使用最保险的选项(防止数据和系统存取方面的丢失情况)作为默认选中项。如果此时不需要考虑这一点,使用用户最可能选择或者最为适宜的选项。
  • 除非动作可以被轻易撤销,否则不要使用具有破坏性的选项作为默认选中命令按钮项。

建议设计尺寸和间距

命令按钮的推荐尺寸和间距

标签

  • 每个命令按钮都需要设置标签。
  • 如果命令按钮只有图标标签,需要为它的Name属性设置合适的文字标签。这样在需要使用屏幕阅读器等辅助设备的情况下,用户才能得到更多关于图标标签的信息。
示例是图标标签的命令按钮。在代码层,它们的标签分别被设置为Previous, Next和 Copy
  • 对于简写的浏览命令按钮(标签是“...”),代码上的标签文字应该设为 Browse。

  • 存取键 access key的设置是唯一的。设置规则,请参照 Keyboard
    特例
    1.不要为确认和取消按钮设置存取键。因为Enter键是默认选中命令按钮(通常是确认键)的存取键,而Esc键是取消按钮的存取键。这样设置为其他存取键的设置预留出了两个字母键位。
    2.不要为简写的浏览命令按钮(标签是“...”)设置存取键,因为浏览命令按钮没法设置存取键。

  • 尽量使用准确的、而不是通用的标签。理想情况下,用户不需要阅读其他内容来对标签进行理解。用户更大可能性倾向于阅读标签上的文字,而非另外一段静态的文字说明。
    特例
    1.就算“取消”按钮的含义不那么准确,也不要使用其它的文字。不应该让用户阅读完所有的标签,再去思考到底哪一个按钮含有取消操作。但是,当取消行为的作用对象不够清晰(例如有好几个动作的情况下),可以对取消按钮重命名。

合格的标签设置
优化的标签设置
错误示例
  • 用动词开始标签描述,清楚地描述标签的行为。不要使用标点符号结尾。
    特例
    1.以下没有动词的标签也是可以使用的:Advanced, Back, Details, Forward, Less, More, New, Next, No, OK, Options, Previous, Properties, Settings, 和 Yes。
合格示例
更好的示例
最优示例
  • 遵循句式大小写规则。这样做能使产品更加符合Windows气质 Windows tone,也有助于在命令按钮上设置合适的短语标签。
    特例
    针对应用系统,为了避免有可能出现的大写规则混淆,可以参考 title-style capitalization

  • 不要在命令按钮上使用“现在”,因为命令按钮就自带有即时执行的含义。
    特例:
    当有必要的时候,使用“现在”字眼,将开始任务的按钮从执行动作的按钮中区分出来。

在上例中,点击下载按钮,用户会去到一个允许用户进行下载的窗口或页面。
在上例中,点击命令按钮意味着立即开始下载动作。
  • 在一个任务流中,只能出现一个含有“立即”字眼的命令按钮。例如,一个“立即下载”按钮之后,不可能还接着另一个“立即下载”按钮。
  • 不要在标签中加入“稍后”字样来表示一个不会发生的操作。例如,除非真的是要表示一段时间之后再执行安装命令,若表示不要安装,不要设置标签文字为“稍后安装”来对应“立即安装”按钮。直接设置为“不要安装”或者“取消”。
错误示例
  • 高级设置按钮的含义,是指和高级用户相关的选项设置,或者指用户的操作需要更高级更进一步的知识指导。不要使用高级设置按钮来表示在技术上看起来更高级的功能。例如,打印机的装订设置选项并不是高级选项,但它的色彩管理功能是高级选项。
错误示例。这里的“高级选项”会让人产生误解
正确示例。这样的标签设置表意更加清晰准确
  • 对于会打开其他窗口的命令按钮,在标签上使用部分或全部要打开的二级窗口名称。例如,浏览按钮打开的对话框,标题也应该是“浏览”或者“文件夹”。在整个任务流程中使用一以贯之的语言描述,能够让用户有方向感。
  • 当命令按钮是对问题作出回答时,标签要符合问题描述。不要用确定/取消按钮来回答是/否问题。
正确示例
错误示例
  • 需要进一步获取其他用户信息的命令按钮,以省略号结尾。
    特例:
    图像标签不带省略号。
正确示例。点击该按钮后,会出现需要填写详细信息的打印对话框
  • 如果动作结尾只是简单地要展示另一个窗口,不要在标签中使用省略号。以下命令按钮一般不要使用省略号:关于、高级、选项、属性和帮助。
错误示例。选项窗口并不需要获取其他信息
  • 对于缺少动词的命令按钮标签,为了避免表意不明,按钮的标签文字应该是用户最可能做出的动作。如果用户只是需要查看新窗口的内容而不需要交互操作,就不要使用省略号。
正确示例
  • 如果一个窗口上有多于一个的“浏览更多”按钮,标签可简写为省略号“...”。网格中的浏览按钮也要使用简写版。
  • 对于有方向性的命令按钮,使用单箭头括号,箭头方向指向动作的发生方向。

以下是常用命令按钮的标签和用法:

表格不好做,不想翻译了,应该都能看懂

确认按钮的标签设置 (OK, Cancel, Yes/No, Close, Stop, Apply, Next, Finish, Done),请参照 User Interface Text.

说明

在提到命令按钮时,请注意:

  • 使用准确的标签文字,大小写也要注意,但不用写出标有下划线或省略号的存取键。不需要加上“按钮”这样的文字说明。
  • 使用“点击”描述用户的交互动作。
  • 在可能的情况下,使用粗体书写标签文字。在需要避免误解的情况下,使用双引号包围标签文字。
    例如:点击打印以打印文件。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容