UI设计师需要学习的保存功能设计总结

3. 保存按钮的对齐方式

按钮该左对齐，右对齐还是居中，你有纠结过吗?

Luke Wroblewski 于2010年在《Web表单设计作者》一书中提到，他为评估哪一种主动作和次动作的排布方式效果最好，对23个人做了6种方案的用户测试(如下图)。测试结果是：方案A、B、C、D、F的成功率100%，且完成时间和满意度都较好。

Luke 本人更倾向按钮左对齐的方案，理由是用户视觉的动线最短。有很多网站在保存的设计上参考了这一习惯，这里就不多言了。

不过也有很多产品参考的是右对齐，比如 Zendesk。

右对齐我认为有几点合理性。

与弹窗逻辑保持一致

表单里很多弹窗的操作区域都是右下角，体现了一种从左上到右下的视觉动线。如果这种动线对于用户成立，那么表单的操作按钮在右下角也挺合理。从统一性的角度，按钮在右下角与弹窗保持了一致，用户的心智也比较统一。

个别表单的特殊性

很多表单功能是更适合右对齐的。比如价格结算这样的功能表格，核心数据(比如价格)都在右侧展示，用户的主要视线会从右侧从上往下滑动。最终的提交按钮也就自然地选择在了右侧。因此这些产品会考虑整体都将按钮放于右侧确保统一性。

居中对齐也是一种对齐方式，有些产品出于中立的角度选择了居中的对齐方式，保持了视觉的对称性，常用于弹窗。

关于对齐方式总结一下：设计师在设计对齐方式可以自行选择对齐方式。但在设计中要尽可能考虑一致性和易用性。尽可能地用最少的对齐方式满足用户体验和业务需求。

4. 按钮的颜色大小

保存按钮被忽视的另一个原因就是不够明显。除了明显的颜色以外，按钮也需要在规范允许的情况下尽可能的大而不易被遮挡。在客户反馈中，我们遇到过按钮固定底部且右对齐的时候，用户的输入法功能条挡住了按钮的情况(就像下图)。我们无法控制桌面系统插件的一些遮挡，所以我们需要将按钮设计得尽可能明显。