页面布局之 - 在表单上如何放置按钮
今天主要想介绍一下平常前端表单上的按钮放置问题，希望可以一起学习。🤔🤔
表单上的按钮位置通常会被忽略，或者根据外观的感觉来确定优先级。
但是按钮的放置可以形成或破坏表单，并且可以增加或破坏用户的体验，这就是为什么我们必须正确处理表单上的按钮位置。
实际上，这比看起来的更加具有挑战性，因为这取决于所涉及到的按钮(buttons)和表单(form)。
我们不可能在不同的场景都显示相同位置相同样式的按钮，这会造成不一致和混乱。因此，我们需要全面地对不同的场景进行分析。
将主按钮对准输入框的左边缘
我们不推荐右对齐按钮，推荐左对齐按钮。这里介绍一篇关于眼动力研究的文章: primary button should be aligned with the left-hand edge of the input
其中有一句话就是介绍为啥左对齐看起来更不错：
将输入和操作与垂直的垂直轴对齐可以清楚地传达如何完成表单，为完成工作指明了一条清晰的道路
同时我们可以想象一下，当将屏幕不断放大，我们一直在左边完成表单，而不需要左右滑动来点击最后的主按钮。如下图所示：
将返回按钮放在表单的上方
有时候会存在表单显示在多个配置页面上，因此我们需要加上返回按钮。不幸的是，有些用户不信任浏览器的后退按钮，因为他们体验过设计不良的表单，当他们单击后会丢失数据。解决方案是提供特定于表单的后退按钮。
专家表明将后退按钮放在主按钮的右侧会造成混淆，应该将其移到左侧或下方。同时一些 UI 设计者也表示可以将返回按钮放在表单的顶部，目前我们看到一些带有返回的按钮基本上都是在顶部。
将与 Input 相关的动作放在表格上方
这一点介绍可能会存在一些疑问，因为目前我们接触的很多网站的注册登录方式都是类似于上图中的左边设计的，这样可能是因为看起来更整齐，也看起来更具有设计感。
但是，我们需要理解的是登录表单上的“忘记密码”链接使用户可以重置密码，但这不是登录过程本身的一部分。同时我们还需要理解一下几点：
- 用户期望Tab键可聚焦到下一个字段/按钮/输入框（你可以手动尝试一下，左边的方式，会先tab到忘记密码，在tab到密码输入框）
- 用户可能需要滚动才能找到链接
- 用户在点击“忘记密码”链接之前，可能会浪费时间输入其电子邮件地址（想一想输入了很多，然后看到“忘记密码”才想起来忘记密码，或许一开始提示会更好）
将链接放在上方，上面的问题都可以避免。
根据其功能放置其他按钮
这里多按钮情况我们需要考虑按钮位置的场景。
将取消按钮放在主按钮下方
取消按钮应位于主按钮的右侧，并且应以不太醒目的样式作为链接。这其中主要考虑了一下两点：
- 如“后退按钮”和“附加链接”部分所述，“取消”按钮与表单本身并不直接相关，因此将其置于主按钮下方是有意义的
- 同时，它释放了空间，让其他直接相关的按钮位于同一行。如果连续放置许多按钮，那么用户很难确定哪一项是最重要的。
将“添加其他”按钮放在主按钮上方
- 用户不必经过主要按钮即可选择它
- 如前所述，主按钮始终保持在左侧
将“保存并退出”按钮放在主按钮旁边
在某些单一字段表单中，将按钮放在输入旁边
这个场景我们很能想到，平常的查询按钮就是这么设计。
在表单上方的多选表单上放置按钮
多选表单使用户可以一次选择并操作多个项目。例如，在Gmail中，我们可以选择多封电子邮件并将其一次性存档。
这种情况下，我们将按钮放在列表上方可以使它们更容易发现，并在底部留出了用于分页控件的空间，而分页控件通常是此类界面所必需的。
总结
上面对于表单中的按钮放置做了一定的总结和梳理，我们可以了解到设计中的按钮位置具有一定的道理。希望这篇文章能给你带来收获，下次我们在写表单的时候也能借鉴借鉴！🤗🤗🤗
