有赞产品是如何设置按钮的，按钮：我应该在哪儿？

引言

按钮在我们的产品中是一个再熟悉不过且高频的界面元素了。

表单以及各种窗口中大部分都是存在一个或者若干个行动按钮，往往作为整个表单或者窗口的最终动作，如：提交、保存或者确定等用来完成操作。

在有赞产品中，我们可以看到在不同的情况下，按钮的位置和顺序其实是有所差异的，今天就来讲讲其中的思考逻辑。

主次按钮

一般情况下，我们会将这些按钮分成主要按钮和次要按钮，与之对应的是主要操作和次要操作。

• 主要操作。使用户完成或者继续任务/流程的操作，如：确定、保存、下一步等。因此对应的可以被称为主要按钮。

• 反之，次要操作。使用户撤销或者中断任务的操作，如：取消、重置、返回等。因此对应的可以被称为次要按钮。

一个简单的案例——删除。很多人认为“删除”是一个危险、负向的操作，不推荐用户操作，那么删除按钮应该是一个次要操作。其实不然，如果一个用户正在做删除任务时，那么这个删除是使用户完成这个任务的操作。此时在给予二次确认弹窗提醒的时候“删除”其实是主要操作而非次要。

前面说到按钮往往作为整个表单或者窗口的最终动作，是视觉退出落脚点。所以按钮的位置、顺序以及视觉表达强弱都是会对用户产生相应的影响。我们的目标是能够通过按钮引导用户的视觉动线，使其按照我们希望的设定移动，帮助用户快速找到他所需要的操作，执行想要的结果。

说到浏览动线，就不得不提及经典的 F 模式和 Z 模式。根据人眼视觉习惯，人们在浏览网页时主要分为F模式和Z模式两种方式。

F模式

雅各布·尼尔森（Jacob Nielsen）在其公司进行的眼动追踪研究之后首次提出了这种模式。是指用户沿着左侧垂直浏览而下，先去寻找页面中每个段落开头的兴趣点，如果发现了感兴趣的点，用户就会从该处开始沿水平线方向的阅读，最终结果就是用户的视线呈F型。

Z模式

来源于古登堡图（Gutenberg Diagram），用户的视线会以从左上方扫到右下方，并且每次扫视都沿着一条方向轴开始从左到右看。除非有特别的视觉强调，强弱闲置区都在这条阅读路径之外，很少能被注意到。从上到下，从左到右。

基于两种浏览模式，我们对按钮的位置顺序制定了以下默认规则：

按钮位置

1.常规页面中，新建、导入等对于页面数据来源的操作的按钮置于左上角；

2.表单页面中，保存、取消等操作按钮跟随表单顶对齐基线对齐；

注：现在线上我们的表单是右对齐，按理按钮也应该是跟随表单右对齐基线对齐，但考虑到我们对于标签名的文字长度是不确定的，如果这样做将导致每个表单页面中的按钮位置都不太一样且并不友好。所以我们当时采用了整体居中对齐的方式。

3.窗口中，取消、确定等操作按钮置于窗口右下角；

那么有同学就会问了，为什么需要三条规则这么多呢？我容易混淆，能统一成一条吗？那样岂不是更简单？

1）对于窗口容器来说，桌面端长期养成的习惯认知更多的是标题和按钮做斜对角排列，我们并不希望挑战这一认知习惯。

2）对于表单操作按钮的位置及顺序，相关研究做过眼动测试。这里我截取部分，大致结论为：方案 A、B、D的完成成功率 100%，用户没有犯任何错，其中方案 A 在完成时间上为最佳。只有 C 是表现最差的，有平均26%左右的用户错误的点击了取消。

另一方面，对于表单页面来说大部分的内容更多集中在左侧，右侧其实存在大量留空，所以我们更希望用户能够在填写完成后顺着填写方向向下自然而然就能快速找到操作按钮。而不希望像窗口一样放置在右下角使得用户在填写完成后需要跨越一整个页面宽度才能在右侧找到按钮。

那为什么窗口可以在右下角呢？

窗口是一个临时视图容器，一般容器大小可控，且在给出这样一个容器的时候是需要用户对其内容进行比较全面的浏览然后通过按钮及时离开（也有可能通过右上角的关闭）。所以我们认为对角线的视觉动线相对来说是更为合适的选择。

按钮顺序

根据阅读顺序的习惯，我们很容易定出：

1.按钮根据主次优先级从左至右排序；

但如果我们统一这一种从左至右顺序，那么这样的话线上原来窗口从右至左的用户习惯将被打破，且这个习惯的打破并没有带来足够高的收益。另外根据 Z 模式，我们其实也更希望视觉落脚点能够尽量更贴近右下角，使得用户对于主行动按钮位置有着更为固定的认知。

于是我们在此基础上增加了一条：

1.左对齐按钮根据优先级主次从左至右排序；

2.右对齐按钮根据优先级主次从右至左排序；

特殊场景

当然以上是我们对于按钮位置和顺序的默认规则。有赞的产品是极其复杂的，场景也非常多，一套规则无法覆盖所有情况。所以我们会在后面为无法满足默认规则的场景，给出设计建议允许在一定程度上做自定义。

举个例子，在表单中的上一步和下一步，我们习惯认为上一步或者返回是左侧的，如果此时下一步是我们的主要操作便会带来与普遍认知不一样的按钮顺序，是很容易导致用户操作错误的，所以针对这样一种特殊情况我们做了设计建议：上一步在左，下一步在右，尽管下一步是主要按钮。（此时我们可以将上一步/下一步看出是一个整体按钮组，整体在取消左侧，那么从某种程度上也是不违反默认规则的。）

这不代表这是对设计规范的破坏，因为它仅针对某些特殊场景。

参考

https://www.uisdc.com/web-form-design

https://www.jianshu.com/p/57da96453bad

https://zhuanlan.zhihu.com/p/109644406

罗博乌斯基,卢颐、高韵蓓(译).Web表单设计.清华大学出版社.2010