MICRO-INTERACTION
乐观更新Optimistic Update
用户一操作界面就立刻变更（不等服务端），同时在角落转一个小进度环；失败再回滚并提示。感知速度的决定性细节。
效果预览
自动部署推送后立即上线
适合用在哪
低风险的开关/点赞/勾选等操作。高风险操作（支付、删除）不要用乐观更新。
容易踩的坑
- 失败回滚没有任何提示，用户以为设置已生效直到下次刷新才发现。
- 连点 3 次发出 3 个请求，乱序返回导致最终状态与界面不一致。
- 对支付、删除这类不可逆操作也乐观更新，失败时无法真正还原。
设计提示词 · Prompt
乐观更新（Optimistic Update）：用户点击后立刻把开关滑到新位置（0.2s 过渡）、界面按新状态渲染，同时在行尾显示一个 12px 的小转圈。请求成功后转圈淡出并可直接不提示；失败则先播一次回滚动画（开关滑回原位 + 行内提示「操作失败，已还原」），必要时用 aria-live="polite" 播报。要点：状态切换必须是可逆的纯函数式更新，且要防止用户连点造成竞态（请求未结束时禁用或合并）。
Optimistic Update: right after the user clicks, slide the toggle to its new position (0.2s transition) and render the UI in the new state, while showing a 12px small spinner at the end of the row. On request success, fade the spinner out, with no further notice needed; on failure, first play a rollback animation (the toggle slides back + an inline notice "Action failed, reverted"), announcing via aria-live="polite" if needed. Key points: state changes must be reversible pure functional updates, and prevent race conditions from rapid repeated clicks (disable or coalesce while a request is pending).
常见搭配
同一页面里经常和「乐观更新」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="mi-opt">
<div class="mi-opt__body"><b>自动部署</b><span>推送后立即上线</span></div>
<i class="mi-opt__sp"></i>
<span class="mi-opt__tg"><i></i></span>
</div>
</div>