【译文】关于“确定”和“取消”的思考

一个典型的网站或APP（或对话框）通常都会有许多选项。但用户更常看到的是两个选项，一个对于用户当前的任务而言是更加重要的，而另外一个相对次要（比如说当用户想要撤回消息的时候，用户可以选择确认撤回或则取消）。

在这篇文章中我们将从UX的角度对操作按钮进行较为全面的思考，并解释了设计师心中疑惑较多的问题（比如”确认”或则”取消”哪一个按钮应该放在前面？）

1、避免错误

像Jakob Nielsen关于易用性曾提过：“精心的设计可以使问题防患于未然”。你应该努力去减少因为用户意外选错了选项而导致的异常情况。 

视觉强度

要使两个选项有更加明显的区别，你必须使用不同的视觉强度来设计。视觉强度更强的按钮，将获得更多的关注。

清楚且容易区别的标签

一个好的对话框，不仅是为了知道哪一个选项用户更加喜欢，更重要的是每一个选项都要清晰易懂，所以让选项标签更加容易区别是非常重要的。一个清楚的标签就像雪中送炭，可以让用户更加相信自己的选择是没有错误的。 

• 按钮的标签应该解释这个按钮是干什么的而不仅仅只有一个普通的“确定”

• 相比”yes“和“ok”，应该尽量使用动词。 

下面就是一个很好的例子：

还有一个对话框的例子：下图中左边的那个，用户无法理解no代表的含义是什么，将执行怎样的操做。而右边使用“cancel”和“discard”，则明显清楚了很多。

当主要的按钮代表着积极的含义（如发送或提交）

当在一个表单中使用主要按钮时，需要赋予该按钮更强的视觉强度，而次要按钮则弱一些，因为降低次要按钮的视觉强度，可以降低潜在的犯错几率并引导用户更好的达成目标。

当主要的按钮代表着消极的含义（如替换或删除）

在这种情况下，赋予更强的视觉强度给那些将导致不可逆结果的按钮，将会是十分危险的，因为用户会误以为选择了一个安全选项。比如用户想要替换一个文件的时候，操作的效率并不是最重要的，而能否让用户选择一个合适的选项才是关键。

删除和清空选项需要额外的关注。想想有多少次因为错误的删除了文件而发现再也无法恢复？用户很多时候都会忽视文案而直接操作。但有时候即使读了也有可能出错。

你可以通过特定颜色的区分，为用户提供一个单一且明确的确认按钮，这样用户就不会产生怀疑。

假如涉及到重要的用户信息时，你甚至可以提供一个文本框，要求用户在输入了“删除”以后再点击确认按钮进行删除。

2、次要按钮为禁用态时

当你希望用户了解这个按钮只有在某些情况下才可用时，未激活（禁用态）是一个很有效的做法。像下面的例子，即使文案中没有提及，用户也可以了解到按钮啥时候可用。

还有一个很好地关于未激活按钮的例子，就是某些情况下使用的逃生按钮或撤销按钮，这种按钮的使用，对于可用性而言确实是非常大的进步，因为当用户想要逃离某个状态时，他们更愿意使用返回按钮。

3、“确定-取消”还是“取消-确定”

关于“确定”和“取消”先后顺序的讨论，在设计师中是十分火热的。显然不同的顺序在用户的习惯上或交互表现上都是有很大差别的。 

苹果、谷歌和微软的设计规范

参考平台的规范是考虑这个问题一条非常重要的思路。但微软、谷歌、苹果的设计规范在“确定和取消”这个问题上都各有各的做法： 

微软的设计规范是遵循下面的排序规则：OK/do it/yes—Don’t do it/no—cancel

所以取消总是排在确定的后面。

苹果的设计规范则指出“开始进一步的按钮应该放在右边，而取消应该放在该按钮的左边”所以对于苹果产品的用户而言，更习惯于取消在确定的左边。

安卓的设计规范中提到的是：“一个对话框中次要的按钮一般都要左边，用来返回之前的状态，而相对积极的按钮则放在右边，因为这个按钮一般都是用来继续某个进程以达成目标。”所以这表明对于安卓而言，取消一般在确定按钮的左边。

如果你正在为某一个平台设计产品，你的选择应该是很明显的——按照规范中要求的去做。为什么呢？因为使用统一的规范可以节省用户的时间，虽然有的时候有更好的设计方案，但与整体规范不一致将增加用户忽视或则误用按钮的可能性。

 

在web平台上

如果你正在设计一款web平台的应用，思考上述问题可能会更加困难一点，大多数人可能会根据用户更加熟悉的使用习惯来决定。你可以通过web数据分析来找出用户更加熟悉哪种规范，但不管怎么说这个按钮的顺序还是需要你来决定，可以基于可用性的理论去得出结论。

确认在左边的顺序符合阅读的习惯以及西方文化里的句式结构，当我们问一个问题的时候，会说：“你觉得我说的对吗？——对或不对”。积极的选项通常放在前面，而消极的放在后面。而且相比取消，用户使用确定按钮的频率显然要高许多，这对于经常使用键盘操作的用户而言，将使他们少一次按键的操作。

 

但另一方面，确认在右边的顺序却又更加符合逻辑上的顺序，因为阅读对话框中的文案时，通常结束的地方都位于文案的右半部分，所以主要的按钮放在右半部分将更加符合整体的一个逻辑顺序。

所以说两种方案都有它有利的一面，而且两种方案的使用都不会再可用性上产生较大的影响。

4、总结

按钮实际上是为了引导用户进行你想要他们进行的流程，这也是为什么在设计按钮时应该使他们更加易于辨认且清晰易懂的。试想一下当用户在匆忙的情况下进行操作，按钮将扮演着多么重要的角色。

网易云新用户大礼包：https://www.163yun.com/gift

本文来自网易实践者社区，经作者胡震宇授权发布。