翻译：穆卡 审校：Rolin | UXRen翻译组 #327 译文
表单按钮的排布通常会被忽视，或是优先按照怎么好看怎么摆。
但是，按钮的放置可以成就一个好表单，也可以破坏一个好表单，好的表单和坏的表单进而成就或破坏优秀的用户体验。这就是为什么要按照正确的方式放置按钮的必要原因。
听起来这很有挑战，因为这事关我们所讨论的按钮和表单两个元素。
这要求我们必须全面分析不同的表单。否则我们最终可能会在不同的位置出现相同按钮，造成不一致和混乱。
这里，我将会根据研究成果和最佳实践来讲解如何在不同的表单里放置按钮。
#原则1：
将主按钮与输入区域左对齐
左：右对齐按钮(不建议)。右：左对齐按钮（好）
Luke Wroblewski在他的眼动研究报告里说，主按钮应该跟输入内容左对齐：
“为完成任务指明一条清晰的路径。将输入和操作强制垂直对齐，可以清楚地传达如何完成表单填写。”
这种布局也有助于用屏幕放大镜的用户阅读，不用平移。
左：屏幕放大时看不到右对齐按钮。右：当屏幕放大时，左对齐按钮仍然可见
#原则2：
把返回按钮放在表单上方
左：返回按钮在主按钮旁边(不建议)。右：放回按钮在整个表单的上方(好)。
一些表单或问卷会有多页，而有些人想返回检查或更改他们的回答。
不幸的是，一些用户并不信任浏览器的后退按钮，因为他们体验过设计不当的表单，会在点击后退时丢失数据。解决方式是提供专用于表单的返回按钮。
由Mick Couper、Reg Baker和Joanne Mechling进行的研究表明，将后退按钮放在主按钮的右侧会造成混淆，应将其移到左侧或下方。
放在下方是更可取的，因为它让主按钮的位置保持一致，并且让键盘用户能从最后一个输入框使用 tab 键将焦点移到它。
但他们的研究并未包括后退按钮在页面顶部的情况。
在政府数字服务部工作的设计师Joe Lanman，将后退按钮放在“注册投票”数字服务示例页的顶部。现在它已成为所有政府服务网站的标准方式。
这是注册投票服务里的一个问题页面，显示了后退链接在页面的顶部。
Joe说把后退按钮放在顶部的效果很好，因为：
- 跟大部分浏览器放置后退按钮的位置类似
- 最有可能在用户进入到看起来错误的页面或者想检查他们刚刚输入的内容时用到
- 一旦用户填写完表单后可能不再需要——如果他们填写完表单并点击后退，可能会丢失之前的填写内容
这种方法清晰地将后退按钮和主按钮区分开来，这应减少用户继续操作所花费的时间。并在需要时未其他按钮流出空间，稍候我会讲到。
#原则3：
与表单平级（平行任务）的操作按钮，请放置在表单上方
左边：“忘记密码“链接在表单内（不建议）。右边：”忘记密码“链接在表单外（建议）。
一些表单的操作并不会提交数据，而只是与表单本身有关。
举个例子，登录表单中的“忘记密码”链接使用户可以重置密码——但它不是登录过程本身的一部分。
你通常会在密码输入框旁边看到“忘记密码”链接，但这是有问题的，因为用户：
- 期望使用tab键将焦点移到下一个输入框/按钮
- 可能需要滚屏查找链接
- 在点击链接之前，可能会浪费时间输入他们的邮箱地址
将链接放在表单上方可以解决以上所有问题。
#原则4：
根据功能放置额外的按钮
有多个按钮的表单是有问题的。
决策时间随选项数量和复杂性的增加而增长，因此额外的按钮会增加额外的选择和时间。
并且，当键盘用户按下“enter“按键提交表单时，他们不能确定哪个操作将会发生。
也就是说，有时多个按钮是必要的。
思考按钮的功能，可以更容易地决定把它们放在哪里。
让我们看看以下 3个示例是如何进行不同处理的,。
4.1 把“取消”按钮放在主按钮下
左边：取消按钮在主按钮旁（不建议）。右边：取消按钮在主按钮下（好）
Luke Wroblewski的研究表明，取消按钮应该在主按钮右侧，并且使用不太突出的链接样式。
但把取消按钮放在主按钮下有几个优势：
- 首先，它符合表单专家Caroline Jarrett的规则，这使得查找破坏性按钮变得更加困难
- 其次，正如后退按钮和附加链接部分所述，取消按钮与表单本身并不直接相关，因此将其放在主按钮下方是有意义的
- 最后，它腾出了空间，使其他直接相关的按钮位于同一行。如果你在一行放置很多按钮，那么用户是很难判断出哪个是最重要的
4.2 把“添加其他”按钮放在主按钮上
左边：“添加其他”在主按钮旁（不建议）。右边：“添加其他”在主按钮上（好）。
有时候用户需要添加额外的信息。比如，在预订时添加家庭成员的名字。
把“添加其他”放在主按钮上有以下的好处：
- 用户不必越过主按钮即可选择它，这符合Caroline Jarrett的规则，按合理的顺序放置按钮
- 如前所述，主按钮始终位于左侧
- 正如Erik Kennedy在《局部特性3大法则》(The 3 Laws of Locality)中解释的那样，它位于影响变化的位置——就在被克隆的字段旁边
4.3 把“保存并退出”按钮放在主按钮旁边
左边：“保存并退出”按钮在主按钮上方（不建议）。右边：“保存并退出”按钮在主按钮旁边（好）。
有时用户可能需要在长表单中保存进度。
把“保存并退出”放置于主按钮上方暗示着它更加重要，事实上它并不是。
将它放在下面可能会使堆叠的按钮列表变得笨拙，并占用了为“取消”按钮保留的位置。
这使我们可以把它放在主按钮旁边，这很有意义，因为操作与表单直接相关。
#原则5：
单个单行输入的表单，将按钮放在输入框旁边
左边：按钮在搜索框下方（不建议）。右边：按钮在搜索框旁边（好）
极少数情况下，您可将按钮放在输入框旁边，这在站点标题的全局搜索表单中很常见。
虽然把按钮放在输入框下方并没什么错，但把它放在旁边可以节省空间，并且看起来更加整洁。
但不要在只有一个字段的标准表单上这样做，这样不一致的也非常规。
#原则6：
把多选/复选按钮放在表单之上
左边：多选按钮在列表之下（不建议）。右边：多选按钮在列表上方（好）。
多选/复选表单让用户可以一次选择并操作多个项目。比如，在Gmail里，你可以选择多封邮件并一次性存档。
在这种特殊情况下，把按钮放在表单上方。
这是另一个使用Erik Kennedy规则的例子，如果一个控件影响整个区域的更改，请将其置于该区域上方。
将按钮置于列表上方可使它们更容易被发现，并在底部留出分页控件的空间，而分页控件通常是此类界面所必需的。
总结
在本文中，我们研究了一系列不同表单中操作按钮的放置位置。
无论是标准表单中的1个按钮，还是多选表单中的多个按钮，按钮的放置都是至关重要的，需要适当的注意。
检查清单：
- 将主按钮与输入区域左对齐
- 把返回按钮放在表单上方
- 与表单平级（平行任务）的操作按钮，请放置在表单上方
- 根据功能放置额外的按钮
- 只有单个单行输入的表单，将按钮放在输入框旁边
- 把多选/复选按钮放在表单之上
非常感谢Caroline Jarrett帮助我完成这篇文章的撰写。
原文来源：https://adamsilver.io/articles/where-to-put-buttons-in-forms/（Adam Silver，16 SEP 2019）
版权声明：该文章在UXRen公众号（cnUXRen）首发后方可转载，转载时请注明出处及译者、审校者信息，如有违背，UXRen社区保留侵权追责的权力。