Every Action Needs Feedback
The user clicks and something on the screen has to change. With no change, their default assumption is that the click didn't register.
What you will run into
- 用户连点三次提交，后台收到三条重复数据
- 点了之后过两秒才有反应，中间那两秒他以为坏了
- 操作成功了，但页面上看不出哪里变了
Three Layers of Feedback
| 层 | 什么时候出现 | 它回答的问题 |
|---|---|---|
| 即时反馈 | 手指抬起的瞬间 | 我点上了吗。按钮变色、变成加载态、涟漪效果 |
| 结果反馈 | 操作完成时 | 成功了还是失败了。轻提示、状态标签、错误信息 |
| 状态反馈 | 操作完成之后一直存在 | 现在是什么状态。列表里的数据真的变了、标记变了 |
Pick the Form by Duration
Optimistic Updates
Some operations don't need to wait for the server: likes, bookmarks, todo checkboxes. Handle them as success in the UI first; if the request fails, roll back and show a hint.
- Good fit: lightweight, high-frequency, low-cost-to-roll-back actions. Mis-tapping a like and rolling it back costs the user nothing.
- Bad fit: actions involving money, irreversible actions, or actions whose result needs server-side computation. Place an order, pay, delete—wait for the real result.
- On failure, roll back and explain. Silently rolling back is worse than not doing optimistic update at all—the user thought it succeeded, and later finds out it didn't.
Note for the AI
CLAUDE.md · Feedback rules
## 操作反馈 任何会触发请求的操作，都要实现三层反馈： 1. 即时：点击瞬间按钮进入 loading 态并禁用，防止重复提交。 2. 结果：成功或失败都要有明确提示。失败的提示要包含 原因和下一步（见提示语规范）。 3. 状态：操作完成后，页面上相关的数据必须同步更新， 不能只弹提示不刷新列表。 按耗时选形式： - < 0.1s 不显示加载态 - 0.1~1s 局部加载态（按钮内），不要遮罩整页 - > 1s 骨架屏或进度条 - > 10s 允许后台运行，给出可离开的入口 乐观更新只用于点赞、收藏、勾选这类轻操作， 且失败时必须回滚并提示。涉及金额、删除、 不可逆的操作一律等待服务端结果。