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

3. 保存按钮的对齐方式

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

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

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

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

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

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

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

与弹窗逻辑保持一致

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

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

个别表单的特殊性

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

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

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

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

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

4. 按钮的颜色大小

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

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