大家应该都见到过弹窗、表单里的"确定"和"取消"按钮吧，这两个按钮大家还记得会放在页面中的哪个位置吗？"确定"按钮是完成任务的主要操作，而"取消"按钮是辅助操作，它主要的作用是用于返回到起点屏幕而放弃任务。那么，根据它们的功能，最佳的按钮顺序是什么？"确定"按钮应该放在"取消"按钮之前还是之后呢？

如果某种设计惯例对用户来说是有害的，那么设计师是否应该盲目遵循它，仅仅因为要追求一致性？

现在网上有很多组件和参考，都被设计师天天借鉴和广泛使用，因为它们适用于大部分用户。但关键在于，设计永远不应该满足于墨守成规的选择设计的一致性，将其作为做设计的唯一理由，我们关键还是要理解为什么应该以某种方式而不是其他方式来设计用户界面。

按钮的位置非常重要

这时候有的设计师可能会主张通过赋予操作按钮更多的视觉重量和清晰明了的标签来突出界面中的操作按钮，而不是仅关注按钮的位置，虽然操作按钮的视觉重量和标签是需要考虑的重要设计方面，但它们并不是唯一的方面。

开发者平台管理后台-版本记录.png 对于设计师来说，最难的是确定主要操作和次要操作的最佳放置方式。这就是我为什么关于"确定"/"取消"按钮的位置进行说明的原因。

为什么"确定"按钮在右侧效果更好

当我们在使用设计组建框架前进行考虑时，你可能会开始明白哪个位置会对用户效果更好一些，我们可以通过分析设计对用户的影响来解决这个问题。

有些设计师认为，将主要操作放在左侧，在次要操作之前，对用户来说更好，因为它更近，所以点击所需时间更少，这看起来好像有点道理，但我们不能忽视一个问题，即在选择要执行的操作之前，用户会查看所有选项，这意味着大多数用户不会在不查看旁边的次要操作按钮的情况下盲目地点击主要操作按钮。

他们将首先看到左侧的主要操作，然后再看右侧的次要操作，然后他们会将视线转回主要操作按钮进行点击。这里总共涉及到三个视觉注视点，在多个方向上分散了用户的注意力。

与将主要操作放在左侧相比，将主要操作放在对话框的右侧，将次要操作放在左侧，用户只需注视每个按钮一次，并在主要操作按钮上结束。这样一来，视觉注视的数量就减少了，并且在一个方向上产生了更流畅的视觉流动。

用户只关注每个按钮一次，并最终停留在主要操作按钮上，将主要操作放在左侧可能会使用户更容易点击，但从用户的心理过程和视觉注视速度来看，将主要操作放在对话框的右侧实际上更快。

当用户点击“取消”操作按钮时，他们期望的是产品不进行任何操作，而是将他们返回到起始屏幕位置，因此，"取消"按钮的功能类似于"返回"按钮。

当用户点击“确定”操作按钮时，他们期望产品进行按钮所表示的操作，并将他们带到下一个屏幕。因此，"确定"按钮的功能类似于"下一步"按钮，将次要操作按钮放在左侧，将主要操作按钮放在右侧，可以与用户期望的"后退"和"下一步"按钮功能相匹配。

这类似于分页按钮的放置方式，将用户带到下一页的按钮位于右侧，将用户带回先前页面的按钮位于左侧。这种按钮位置的安排是有效的，因为它与用户从左到右的阅读和导航方向相吻合，其中右侧是前进方向，左侧是后退方向。

对话框中的"确定"和"取消"按钮应该遵循类似的交互模式，因为它们的功能类似于分页按钮，另外这种左右方向模式也是用户熟悉的。将主要操作放在右侧，将次要操作放在左侧，可以使对话框按钮对用户更易于理解和使用。

将按钮放置在对话框的右下角更容易被用户点击，因为这符合【古腾堡图表】。在古腾堡图表中，右下角区域是终端区域，用户在扫视后的最终目的地。

将按钮放在终端区域可以使用户在视觉扫描时看到他们最后需要执行的主要操作，这不仅改善了视觉流动，还改善了任务流程。用户在扫视过程中不会错过主要操作按钮，当他们经过时，他们的目光会停留在上面，从而可以立即点击它。

扫视对话框并采取行动变得更快更容易，因为用户的目光最终会落在主要操作按钮上。

当用户需要阅读重要消息或需要采取重要操作时，会经常使用对话框，所以我们放置按钮的顺序会直接影响用户的选择操作。当我们以对用户清晰有效的顺序放置按钮时，才能防止用户选择错误的操作。

将主要操作放在对话框的右侧，将次要操作放在左侧，可以减少用户的视觉注视，与用户期望的按钮功能相匹配，并提供更高效的任务流程。