保存、提交、加载列表、上传:用户必须知道未改动、进行中、成功、失败,以及失败后怎么走。
改项目名称时,界面要跟着事实走
点了保存,用户要立刻分清五件事:未改动、编辑中、保存中、已保存、失败。状态就是页面此刻的真实情况;不能点完就假装成功。状态管「现在卡在哪一步」;按钮管「谁发起这次操作」(见按钮术语)。
场景:把项目名称从「春日市集」改成「春日市集 · 修订版」并保存。先选模拟成功或失败,再点保存;改一下、保存、失败、重试,看界面怎么跟着事实变。
项目名称未改动
与服务器一致 · 无需保存
对照服务器上的值,名称未改动——下一步无需保存;先编辑才会进入编辑中。
管状态时要盯这些
离开这页后,用下面五件事检查一次保存流程是否诚实。交互只是证明手段,不能代替这些关注点。
- 五态分得开,且同一时刻只有一种未改动、编辑中、保存中、已保存、失败是五件不同的事;同一时刻只应有一种,靠文案和物件样式区分,不只靠颜色。
- 未改动时不让你白保存输入与服务器一致时,保存应禁用或提示「无需保存」,避免发出没意义的请求。
- 保存中能否重复点请求进行中要禁用或忽略再次点击,避免一次操作发出两次保存。按钮文案也要说清「保存中…」。
- 失败是否保留输入并可重试失败不清空用户刚改的名称;提供「重试保存」,而不是只亮红灯然后结束。
- 成功证据是什么成功要靠时间戳或明确文案(例如「刚才 14:32 已写入」),不能只靠变色或勾选图标。
什么时候认真管状态,什么时候别堆状态
页面事实服务用户判断,不是为了把界面画得热闹。
只换按钮颜色、不记录真实请求结果;或为纯装饰动画发明一堆互不相干的状态名。按钮控件本身见「按钮」术语。
同一「保存项目名」任务:正例与反例
目标都是把「春日市集」改完并保存。差别只在状态是否跟着事实变。
未改动时禁用保存;编辑中显示已改;保存中禁用按钮;成功显示时间戳;失败保留输入并给重试。
每一步都有可读证据;失败可恢复。一点保存立刻显示「已保存」,或保存中仍可连点;失败时清空输入,或空列表与加载失败共用同一个 isLoading。
用户无法判断真相;下一步应拆开五态并补重试。快速自测
请求还没返回时,保存流程最合适的表现是什么?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。