UI设计中“取消按钮”的使用分析详解 _UI设计

按钮，无论是在 Web 还是 App 上都被广泛地使用，而很少有设计师会注意到按钮当中的细节，导致在设计过程中出现一些低级的错误，使得用户在完成任务的过程中产生阻碍，无法顺利达成目的。
在许多优秀的产品中，关于按钮的设计已经有了一套相应的规范去执行。作为设计师，应该总结这些规范，并产出一套适用于自家产品的设计规则。这也是我写「按钮规范」系列文章的目的。
今天主要先与各位聊聊「取消按钮」的设计思路。
关于「取消」，大多数人对其理解还停留在 PC 端，认为「取消」的目的就是让用户停止操作上的流程。但时至今日，「取消按钮」的设计已经有许多解法与思路，如果不仔细研究与分析，可能会忽略一些用户行为上的细节。
所以我们从下面三个大点来聊聊「取消按钮」的设计：
1.按钮中的「召唤行为」（理清按钮设计的概念）
2.其背后的控制权（关于按钮的权重信息）
3.「取消按钮」的正确解法（重点）
按钮中的「召唤行为」
通常，我们在产品中会为了达成某种指标，需要在界面上引导用户去完成我们希望其完成的操作。且这类操作是可以达成某种目的的，我们把这类操作称为「召唤行为」，即从元素的角度引导用户完成任务。
这类「召唤行为」最常出现的，是在按钮设计的过程中。
用户如何将元素理解为按钮？就是通过对形状和颜色的控制，使该元素看起来像一个按钮。

文章插图
它唯一的作用就是让用户点击，并且是主动让用户点击。
我们经常在各类设计中见到这样的按钮设计，或许还有更多样式，如：

文章插图
它们的目的一致，都是召唤用户进行点击，至于类型的选择一般根据功能界面的上下文情况进行判断。
其重要程度也是以此顺序排列：凸起 > 扁平 > 边框 > 文本。
这类设计的结果就是：无需让用户思考要点哪里，而是直接判断下一步是否进行。帮助用户简化一个思考点。
注：因为判断是否进行的操作还取决于功能本身以及文案的提示，与我们今天要聊的不是一回事。所以我们跳过这块，直接聊「召唤行为」与「取消按钮」的关系。
这段内容各位只要记住：按钮的行进与回退，基本遵循「召唤行为」的思路来设计。
这个概念知道了，我们就可以对后面的内容继续进行拆解了。
背后的控制权
接下来我们从多个角度来挖一下「取消按钮」的设计，分析其不同地位。
a. 安全性后退
「取消」在多数情况下，意为安全性地后退，并将界面恢复到原有的内容上，不对界面与功能本身造成破坏，防止对系统进行不必要地更改的「安全措施」。
所以正常来说，「取消按钮」不是「召唤行为」。以至于通常在设计上会被弱化，以表示该按钮在功能的流程中，不是主要的，且是提供给用户作为回退余地的操作。
如：

文章插图
在这张图里，「登录」是「召唤行为」，所以突出显示。根据风格定义，用了扁平按钮。而取消在这个场景里属于「安全性后退」的操作，于是将其弱化。
这是多数产品采用的设计方式。
比如美团的这个页面：

文章插图
产品希望用户登录，就会强化「登录」行为的按钮，弱化「回退」行为的按钮。
同样，我们在微信朋友圈的设计里也能见到这样的设计：

文章插图
我们总是希望用户持续操作下去，但也要给用户提供回退的行为，所以在这些设计中，「取消按钮」会被弱化，「行进按钮」会被强化，因为「取消按钮」在这里不是产品人员期望的「召唤行为」。
这是一直以来的设计共识，但如今也发生了些许变化。「取消按钮」也开始具备「召唤行为」的属性。
b. 强化「取消按钮」
当我们不希望用户退出某个界面，或停止某个流程时，往往会选择将「取消按钮」强化。
如：