命令链接 (Windows)

出自UXGuide.net

跳转到:导航, 搜索

命令链接
Command Link

目录


命令链接(Command Link)用于选择对主要说明的响应,并进入任务的下一步。

命令链接具有简洁、轻量级的外观、描述性的标签、一个标准箭头或自定义的图标、以及可选的补充说明。

Aa511455_commandlinks01(en-us,MSDN_10).png

典型的命令链接。

命令链接与选项按钮一样,都用于在一组互斥相关的选项中进行选择。与选项按钮类似,命令链接总是成组出现,绝不会单独使用。在外观上,命令链接具有轻量级的外观,与常规链接类似,没有边框或其他强烈的单击功能可见性(affordance)。命令链接与命令按钮也很相似,既能够成为默认“命令按钮”,也可以被分配访问键(access key)。如同提交按钮(commit buttons),单击它们可关闭窗口(对于对话框)或进入下一页(对于向导或者一组连续页面)。

注:链接布局相关的设计规范请参考各自相应的章节。


它用在这里合适吗?

考虑下列问题以进行判断:

Aa511455_commandlinks02(en-us,MSDN_10).png
个性化控制面板项看上去好像用了命令链接,但事实上那些只是常规链接,因为该 hub page是纯粹用于导航的。
错误:
Aa511455_commandlinks03(en-us,MSDN_10).png
命令链接不能用于属性窗口或选项卡对话框,因为单击命令链接会导致窗口关闭。
Aa511455_commandlinks05(en-us,MSDN_10).png
在这个示例中,Microsoft® Windows® 的自动播放功能使用了列表视图控件。
Aa511455_commandlinks06(en-us,MSDN_10).png
在这个示例中,选择某个选项按钮后可能会动态显示与选项相关的一段说明。
错误:
Aa511455_commandlinks07(en-us,MSDN_10).png
在这个示例中,可以有两种不同的途径来响应主要说明。前一个途径没有使用命令链接,因为它会使得选择次要选项变得困难。
正确:
Aa511455_commandlinks08(en-us,MSDN_10).png
在这个示例中,选项按钮使选项更为清晰,从而使得用户能够选择次要选项。
错误:
Aa511455_commandlinks09(en-us,MSDN_10).png
在这个示例中,为简单命令使用命令链接为对话框增加了不必要的复杂性。
正确:
Aa511455_commandlinks10(en-us,MSDN_10).png
在这个示例中,使用简单的提交按钮显得恰到好处。
不过,自说明性的命令链接与用文本来解释提交按钮总是要好些。
错误:
Aa511455_commandlinks11(en-us,MSDN_10).png
在这个示例中,文本用于解释提交按钮。
正确:
Aa511455_commandlinks12(en-us,MSDN_10).png
在这个示例中,命令链接是自说明的。

注:命令链接需要 Windows Vista® 或更高版本,因此它并不适用于早期 Windows 版本。你可以使用常规链接作为替代品。

Aa511455_commandlinks13(en-us,MSDN_10).png

在这个示例中,命令链接在 Windows XP 中被带有图标及补充说明的常规链接代替。

设计理念

命令链接支持使用更具描述性的文本标签以及可选的补充说明,但这并不表示你应当使用。参考下面的示例:

错误:

Aa511455_commandlinks14(en-us,MSDN_10).png

该对话框存在严重的沟通过度(Over-communicating)问题。

该对话框涉及的只是一个简单的问题,却因命令链接的文本而产生不必要的复杂。用户不想为了这么简单的问题阅读所有的文字。

我们可以根据下列三条命令链接设计规范来简化这个对话框:

有了这些设计规范,我们即可避免不必要的补充说明,将最方便的选项设为默认值,并提供明确的取消按钮。

较好:

Aa511455_commandlinks15(en-us,MSDN_10).png

使用较为简单的命令链接的改进版本。

这个版本确实没有明确说明不保存会引起数据丢失,但几乎不会有用户因为这个信息而改变他们的决定,要在它们之间进行权衡。

如果分析此种情况下命令链接是否真的合适的话,我们甚至可以继续改进这个对话框。提交按钮确实是更好的选择,因为长而描述性的选项并不需要。

最好:

Aa511455_commandlinks16(en-us,MSDN_10).png

这个正确版本使用提交按钮,一目了然。

命令链接有很多优点,但如果使用不当则会导致沟通过度。对于对话框来说,应当先考虑使用提交按钮,只有当提交按钮无法胜任的时候才使用命令链接。

如果使用得当,命令链接可以使你的用户界面简约而明确。假如结果完全相反的话,则退回一步,检查所有的可能性,并关注你真正要沟通的内容。

如果你只做一件事:


不要用命令链接进行过度沟通。命令链接应当使沟通更加简单明确,而不是更加复杂。


使用模式

命令链接具有以下使用模式:

页面响应

命令链接用于响应主标题说明并进入下一页。

在这个模式中,命令链接取代了下一步按钮,但取消按钮仍然存在。


页面响应并不意味着进行提交。由于命令链接看起来像是链接,而用户会将链接与在页面流中导航联系起来,因此链接不适用于提交页面。用户应当总是可以返回。

Aa511455_commandlinks17(en-us,MSDN_10).png

在这个示例中,命令链接用于为主标题说明提供描述性的响应。虽然这里用选项按钮也可以,但命令链接只需要用户单击一次。

对话框响应

命令链接用于响应主标题说明并关闭对话框。

在这个模式中,命令链接取代了提交按钮(例如“确定”),但取消按钮仍然存在。


与页面流不同,一旦选择了基于对话框的选项就无法回头。因此,对话框命令链接隐含了提交。

Aa511455_commandlinks18(en-us,MSDN_10).png

在这个示例中,命令链接用于为主标题说明提供描述性的响应。虽然这里用选项按钮也可以,但命令链接只需要用户单击一次。

细节响应

包含详细信息的页面或对话框响应。

用户偶尔会需要更多详细信息以选择响应方式。

Aa511455_commandlinks19(en-us,MSDN_10).png

在这个示例中,由于使用了详细命令链接,用户可以作出有根据的选择。缩略图和文件详细信息帮助用户进行选择。


设计规范

交互


呈现

错误:
Aa511455_commandlinks20(en-us,MSDN_10).png
在这个示例中,该对话框好像是向用户提供选择,但其实此处只有一些说明。这应当改用信息对话框
错误:
Aa511455_commandlinks21(en-us,MSDN_10).png
在这个示例中,“Don't exit”命令按钮应当改为取消按钮。
Aa511455_commandlinks22(en-us,MSDN_10).png
在这个示例中,第二个命令链接指出用户可以进行选择,但它能做的就是取消。不过,它是以与第一个命令链接有什么不同的方式来描述的。


图标

错误:
Aa511455_commandlinks23(en-us,MSDN_10).png
在这个示例中,自定义图标无法被立即识别。
Aa511455_commandlinks24(en-us,MSDN_10).png
该示例中使用的是 32x32 像素的自定义图标。
Aa511455_commandlinks25(en-us,MSDN_10).png
该示例中使用的是 48x48 像素的自定义图标,并叠加了安全盾牌图案。


默认值


推荐尺寸与间距

Aa511455_commandlinks26(en-us,MSDN_10).png


标签

注:因为命令链接是对应于主标题说明的,所以在确定所有选项之前,你需要仔细推敲出好的主标题说明


命令链接标签

错误:
Aa511455_commandlinks27(en-us,MSDN_10).png
在这个示例中,第二个与第三个选项有什么区别?你是不是觉得这里的取消按钮很别扭?

提示:你可以通过这种方式来评估命令链接:想像是你的一位朋友在说主标题说明,而你用命令链接来回应。如果命令链接给出的回应可能会显得不自然或不自在的话,应当对命令链接甚至是主标题说明进行修改。


补充说明

Aa511455_commandlinks28(en-us,MSDN_10).png
在这个示例中,补充说明描述了该选项的影响。


命令链接分组标签


文档编写

当提及命令链接时:

示例:

To copy the picture, click Copy and Replace.

单击“复制并替换”以复制图片。

Click Reset the network adapter. (For a command link labeled "Reset the network adaptor adaptor name".)

单击“重置网络适配器”。(用于标签为“重置网络适配器 <适配器名称>”的命令链接。)

导航
工具箱