有时候在工作中，一个小的需求往往隐含着大量细节和事项需要考虑，比如本篇文章里作者列举的这个案例，一个简单的更新按钮的增加，其实背后藏着许多设计细节。一起来看看本文作者的总结和分享吧。

前言

最近接到一个小需求，产品说成绩页面的数据太多了，自动更新对于服务器的压力很大，你加一个更新成绩按钮很快的。在开始着手处理后，我发现这个看似不起眼儿的按钮实际上有很多需要注意的细节。

一、更新数据

更新数据可以分为自动更新和手动更新。

自动更新需要编写定时程序，间隔一定时间自动更新数据，而手动更新需要用户主动点击按钮进行数据同步。

自动更新的优势在于能够减少用户操作，用户可以直接查看到当前最新更新的数据。当数据量较大时，自动更新可能会对服务器造成太大的压力，此时可以采用手动更新。

手动更新的优点除了减少服务器压力，还有一个就是用户可控，将数据更新的决定权交给用户。比如 figma 组件库，当对组件库内元组件修改后，不会自动更新，而是提示用户，更新与否让用户自己判断。figma 是设计师协同软件，如果一键更新所有组件，更新的组件很可能影响到其他人的设计稿，为了避免这种情况，将选择权交给用户。

二、手动更新设计细节

1. 更新内容

根据更新类型将更新内容分为两类：统一更新和部分更新。

对于统一更新，可以提供一个入口，而对于部分更新，需要考虑如何提供选择。比如，单组数据更新的入口位置、统一更新入口位置、在统一更新入口是否需增加需更新内容的选择。

2. 更新行为

1）更新前

在更新前，我们需要先了解两种状态：内容未发生变化无需更新和内容发生变化需更新。其中，无需更新算作默认状态，用户无需关注更新情况。

默认状态对于不同产品的处理也是不一样的，比如完全不展示更新相关内容，或者显示“无需更新”，具体还需根据产品业务诉求而判断。当内容发生变化，则显示“需要更新”，让用户知道当前数据有变化，按需进行更新操作。

例1：figma

默认状态不展示入口，当有更新内容时，增加更新icon。

当有组件更新时，首先会弹出全局提示告知用户，用户可一键更新所有内容或忽略不更新。若用户选择忽略全局提示时，对于单个未更新组件旁也会展示【更新 icon】提示用户该组件有新内容需更新。

这里就可以看到 figma 的设计非常细节，更新 icon 视觉效果做的很弱，因为已经以一次强提示告知用户需更新，是用户主动选择忽略，可理解为用户暂时不想更新，所以对于用户不想在意的功能，无需过度设计强占用户注意力。

对于单组件默认状态下，更新入口隐藏。figma 右侧的功能是特别繁多的，展示禁用的更新按钮增加了一定程度的复杂度，更重要的是会减弱需更新时的效果。

例2：我们产品

背景是在成绩管理页面，为了减少服务器压力，让用户对成绩做手动更新。

a.更新按钮常显。若无更新，更新按钮禁用，当有数据变化时，更新按钮可点击，且使用Popover提示用户。这里的方案其实和 figma 是类似的，都可以获取数据变化信息，做到主动提示用户，区别在于默认状态下更新按钮常显，而figma对于单组件默认状态不展示更新入口。

那么问题来了，这里展示禁用的更新成绩按钮是否必要？答案是有必要，这里的禁用是为了告知用户何时可以被使用。其实figma也一样，统一更新入口常显，哪怕没有需更新的内容。

好像稍微有些乱，先别乱，从更新内容来梳理下。

成绩管理页面的更新入口是统一入口（对应 figma 的统一入口），元内容是每一条成绩（对于 figma 的单个组件）。统一入口的设计都是留有更新按钮功能，哪怕当前不可用，而对于元内容，figma 只有在需更新时展示，成绩则没有。

当然成绩这里没有是因为业务问题无需增加，但思考下如果增加会是什么样的，是只在有变化的成绩旁展示更新按钮好，还是所有都显示，部分禁用更好？一定是当成绩有变化时展示更新按钮更好，状态对比更明显，只强调当前用户需要知道。

b.另一种情况是，无法获取数据变化信息，需用户自己判断是否更新。这里的问题在于如何给出用户判断的依据。

可以从用户的目的以及数据变化频率来考虑。例如，老师需要导出成绩时，他们会确保获取最新的成绩并点击更新按钮，更新成功后完成导出。然而，在下一次查看数据时，如何判断当前是否需要更新呢？可以通过比较上一次更新时间与成绩的更新频率来判断。如果用户看到上一次更新是在10 分钟前，而成绩的更新频率本身较低，那么就没有必要再次点击更新按钮。

2）更新中

点击“更新”按钮后，系统将进入更新状态。如果更新时间过长，可能会让用户失去耐心和信心，所以显示预计时间和当前进度，允许用户暂时离开稍后再回来查看更新进度。

3）更新结果

更新结果分为两种情况：成功和失败。当更新成功，给予用户成功反馈，比如message提示。这里需考虑文案内容是否展示更新成功的内容数量，以及没有新内容需更新时如何展示。

当无法获取新的数据变化时，向用户展示“无新内容”的提示是非常友好的。这样，用户可以了解到当前内容已经是最新版本。

更新失败，需展示失败原因，解决方案，以及给用户重新更新的机会，比如网络连接问题、数据格式错误等。

最后

其实工作中的每一个设计细节点都值得剖析，如果仅是简单的增加一个更新按钮，是可以快速的完成工作任务，但可能会忽略掉很多状态、规则、用户体验点。