基本交互控件第一篇，我们来整理命令按钮的设计要点~
（为什么要写这个系列？请看之前的文章 “学习交互设计的语言”）
一、这是什么
命令按钮按钮主要用于：
- 指示当前页面、对话框中重要的操作命令（可能包含多个相似命令）
- 触发即时的操作结果
- 也可以用作需要强调的页面跳转链接
常见类型包括：
二、命令按钮的组成
三、设计要点
同样的命令出现在不同的页面上，文字、样式和位置应保持一致
如下图，新浪微博在不同页面的微博发布按钮保持一致。
命令按钮主要用于触发操作结果，而设置状态应该由单选按钮、复选框等实现
如下图，win7中的防火墙设置窗口，选择选项由单选按钮完成，出发操作结果由按钮完成：
按钮被点击后，如不能即时响应，需提供正在处理的反馈提示
如下图，在facebook发布状态，点击“post”按钮后，文本框右上角有通用的处理中提示：
在对话框中区分主要命令和次要命令，危险命令和安全命令
如下图，新浪微博删除某条微博的二次确认对话框，确定按钮为主要命令，取消按钮为次要命令：
命令按钮和其他相关控件的位置关系
- 命令按钮位于其他控件右侧，顶端对齐；
- 命令按钮位于其他控件下方，左对齐；
- 在控件之间垂直居中对齐
如果按钮隶属于其他控件，当这个控件未激活时，按钮也应该是不可用状态
如下图，新浪微博发布框，如果没有任何文字输入，发布按钮处于不可用状态：
如果使用对话框向用户进行提问，按钮文字应当与问题匹配
如下图，QQ关闭多个会话窗口时的二次确认，问题是“确定……吗？”，按钮对应的文字是“确定”和“取消”，符合当前情况：
明确区分按钮与链接，按钮上的文字，不应增加下划线或鼠标经过的效果
下图的按钮中的文字，错误地混合了链接的样式
慎用“图标+文字”按钮，如果图标不能很好地促进理解，宁愿只用文字
分隔按钮的设计要点
- 将最常用命令作为默认命令；
- 默认命令出现在下拉列表中首位，使用粗体以区别于其他命令；
- 如果最常用的命令是用户上次选择的命令，则将默认状态改为上次的选择，如颜色选择器；
- 使用信息提示说明当前按钮的用途
按钮文字的设计要点
- 给每一个按钮（包括图标按钮）起名，让读屏软件可以读取；
- 明确表达操作结果，如“保存草稿”要好于“保存”；
- 如果点击按钮不是触发立即的操作，不要使用“马上/立即xxx”。例如“下载”按钮可以指向跳转页面，“立即下载”则应在当前状态触发下载
四、讨论
与链接相比，按钮更适用于：
- 触发一个即时响应的操作，并且这个操作是当前页面/窗口的主要目的；
- 在窗口中收集用户输入信息和做出选择；
- 操作可能引起显著的、有风险的结果，无法撤销；
- 描述命令的文字较少；
- 命令不被包含在整段文字中
按钮什么时候应该与单选按钮结合使用（单选按钮进行选择，按钮进行确定）：
- 可选的操作项超过5个；
- 用户在操作前需要查看相关信息，或者要进行更多的交互；
- 用户将选项理解为选择而不是命令
五、Check list
当在设计中使用到命令按钮时，可以对照这个列表检查设计是否合理：
□ 是否应该使用按钮而不是其他控件
□ 使用纯文字or纯图标or文字+图标？为什么
□ 按钮文字是否能够准确描述所触发的动作
□ 是否指定了“正常—经过—按下—聚焦—不可用”等5种状态
□ 是否给出了合适的title/tooltip/infotip信息
□ 何时需要指定按钮不可用状态
□ 是否需要指定快捷键
□ 是否需要指定默认回车键触发
□ 按钮是否触发即时结果，如需等待是否有足够反馈
□ 点击按钮后各种情况的反馈如何
□ 与周围其他控件是否对齐，是否有从属关系
□ 一个页面是否出现了多个按钮，是否需要指定主要按钮
□ 与其他页面、位置同样功能的按钮在样式、文字上是否一致？
————————- 去看看同一系列的纠结文章 ————————–
前言：学习交互设计的语言
