UI设计师需要学习的保存功能设计总结发布者：本站     时间：2021-12-07 13:12:28

保存是后台产品中很通用的操作，它司空见惯到我们误认为保存一般不会有体验上的问题。但笔者在工作中观察发现：即使再通用，用户也可能会在保存功能上遇到疑惑，甚至忽略了它的存在。这是为什么呢?保存功能应该如何设计呢?我想分享一下我的一些经验。

围绕保存，我觉得从机制上来分解，可以从手动保存、自动保存、保存兜底三个维度递进思考，最终找到合理的保存设计方式。

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

一、手动保存

手动保存，即依赖用户做额外操作才可以达成的保存行为。此类保存，我们往往依赖保存按钮。我会从保存按钮的位置个数，对齐方式和视觉样式来讨论如何设计它。

1. 保存按钮的位置

保存按钮一般位于内容的下方，因为用户一般从页面上到下确认完内容后再进行保存。这也符合用户浏览路径方便点击。 如果配置内容较短，保存按钮一般紧跟内容，用户更容易发现。

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

但如果表单内容过长且超过一屏，保存按钮还紧跟内容的话它就不会在第一屏展现。此时用户必须把页面滑动到底部才可发现按钮。首次填写表单的话还好，但日后只对某几项内容修改的时候，用户就很容易忽略按钮。而且即使用户意识到保存按钮在底部，操作效率也是比较低的。

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

为了解决这个问题，很多产品通过在页面底部提供一条不可滚动的固定区域展示按钮。这样用户一眼便可以看到核心按钮，并且日常修改内容的时候不需要滑动页面，可以直接保存。

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

不过刚才也说了这种样式一般用于内容较多并超过一屏的情况。如果内容很少，用户的视线就需要越过一大片空白区域寻找按钮。下图模拟了这样的情况，你是否也觉得按钮不容易被发现，操作距离也比较远呢?

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

总结一下：较短的表单建议考虑保存按钮紧跟内容;内容超过一屏的长表单建议用固定悬浮在底部的保存按钮。

2. 按钮的个数

其实在一个表单内不一定只有一个保存的。如果表单内容可以被清晰划分成多个功能模块，且各模块可以独立生效，那么表单可以为每一个模块单独配置一个保存按钮。这样，用户在编辑某个模块的时候，由于内容较少就可以清晰看到保存按钮了。这种设计是通过拆分一个保存为多个保存，解决页面较长单个保存不易发现的问题。

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

不过，如果划分得太细碎会造成操作成本太高的问题，同时太多的按钮也会让页面的视觉层级混乱，冲淡用户对表单内容的关注。使用的时候请注意这点。