00's Adventure

基本交互控件[1]:命令按钮(Buttons)

基本交互控件第一篇,我们来整理命令按钮的设计要点~

(为什么要写这个系列?请看之前的文章 “学习交互设计的语言”)

一、这是什么

命令按钮按钮主要用于:

  • 指示当前页面、对话框中重要的操作命令(可能包含多个相似命令)
  • 触发即时的操作结果
  • 也可以用作需要强调的页面跳转链接

常见类型包括:

二、命令按钮的组成

三、设计要点

同样的命令出现在不同的页面上,文字、样式和位置应保持一致

如下图,新浪微博在不同页面的微博发布按钮保持一致。

命令按钮主要用于触发操作结果,而设置状态应该由单选按钮、复选框等实现

如下图,win7中的防火墙设置窗口,选择选项由单选按钮完成,出发操作结果由按钮完成:

按钮被点击后,如不能即时响应,需提供正在处理的反馈提示

如下图,在facebook发布状态,点击“post”按钮后,文本框右上角有通用的处理中提示:

在对话框中区分主要命令和次要命令,危险命令和安全命令

如下图,新浪微博删除某条微博的二次确认对话框,确定按钮为主要命令,取消按钮为次要命令:

命令按钮和其他相关控件的位置关系

  • 命令按钮位于其他控件右侧,顶端对齐;
  • 命令按钮位于其他控件下方,左对齐;
  • 在控件之间垂直居中对齐

如果按钮隶属于其他控件,当这个控件未激活时,按钮也应该是不可用状态

如下图,新浪微博发布框,如果没有任何文字输入,发布按钮处于不可用状态:

如果使用对话框向用户进行提问,按钮文字应当与问题匹配

如下图,QQ关闭多个会话窗口时的二次确认,问题是“确定……吗?”,按钮对应的文字是“确定”和“取消”,符合当前情况:

明确区分按钮与链接,按钮上的文字,不应增加下划线或鼠标经过的效果

下图的按钮中的文字,错误地混合了链接的样式

慎用“图标+文字”按钮,如果图标不能很好地促进理解,宁愿只用文字

分隔按钮的设计要点

  • 将最常用命令作为默认命令;
  • 默认命令出现在下拉列表中首位,使用粗体以区别于其他命令;
  • 如果最常用的命令是用户上次选择的命令,则将默认状态改为上次的选择,如颜色选择器;
  • 使用信息提示说明当前按钮的用途

按钮文字的设计要点

  • 给每一个按钮(包括图标按钮)起名,让读屏软件可以读取;
  • 明确表达操作结果,如“保存草稿”要好于“保存”;
  • 如果点击按钮不是触发立即的操作,不要使用“马上/立即xxx”。例如“下载”按钮可以指向跳转页面,“立即下载”则应在当前状态触发下载

四、讨论

与链接相比,按钮更适用于

  • 触发一个即时响应的操作,并且这个操作是当前页面/窗口的主要目的;
  • 在窗口中收集用户输入信息和做出选择;
  • 操作可能引起显著的、有风险的结果,无法撤销;
  • 描述命令的文字较少;
  • 命令不被包含在整段文字中

按钮什么时候应该与单选按钮结合使用(单选按钮进行选择,按钮进行确定):

  • 可选的操作项超过5个;
  • 用户在操作前需要查看相关信息,或者要进行更多的交互;
  • 用户将选项理解为选择而不是命令

五、Check list

当在设计中使用到命令按钮时,可以对照这个列表检查设计是否合理:

□ 是否应该使用按钮而不是其他控件
□ 使用纯文字or纯图标or文字+图标?为什么
□ 按钮文字是否能够准确描述所触发的动作
□ 是否指定了“正常—经过—按下—聚焦—不可用”等5种状态
□ 是否给出了合适的title/tooltip/infotip信息
□ 何时需要指定按钮不可用状态
□ 是否需要指定快捷键
□ 是否需要指定默认回车键触发
□ 按钮是否触发即时结果,如需等待是否有足够反馈
□ 点击按钮后各种情况的反馈如何
□ 与周围其他控件是否对齐,是否有从属关系
□ 一个页面是否出现了多个按钮,是否需要指定主要按钮
□ 与其他页面、位置同样功能的按钮在样式、文字上是否一致?

 

————————- 去看看同一系列的纠结文章 ————————–

前言:学习交互设计的语言

基本交互控件[2]:链接(Links)

kidult00 wechat
扫码关注 00 的公众号
支持原创,五毛钱不嫌少~