乐观界面
Optimistic UI
别名:Optimistic UI乐观更新乐观界面先改后等即时假成功先显示后确认
这是什么
用户操作后立即按"预计成功"更新界面,真实请求在后台进行,成功则落定, 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感,特别适合点赞、收藏这类高频轻操作。
交互实验室
试一试,再决定怎么用正在加载实验室…
✓ 适用场景
- 点赞、收藏、关注等高频轻操作
- 弱网环境下仍想保持操作流畅
- 失败可回滚且业务后果轻微
✕ 不适用场景
- 支付、下单等不可逆或高价值操作
- 结果决定后续流程的分支走向
- 回滚成本高,或回滚本身会造成困惑
常见形式
等待确认
Pending
乐观数值带 pending 态,请求返回后落定
失败回滚
Rollback
请求失败撤回更改并给出提示
排队确认
Queued
连续操作依次排队,逐个确认或回滚
实现要点
opacity transitiontransform scaleanimationkeyframes点击瞬间同步更新本地状态并进入 pending 态(降透明度或轻脉冲),请求返回后落定; 失败时恢复原值并弹出回滚提示。连续操作需要请求序列号防止乱序覆盖; 回滚提示可配合撤销操作。pending 动画尊重 prefers-reduced-motion。
相关概念
在视口角落短暂出现、自动消失的小消息条,用来告知操作结果(已保存、已复制、上传完成)。 不打断当前流程,通常附一个操作入口(撤销、查看),停留约 3~5 秒后淡出。
组件搭配使用用"先执行、给反悔窗口"的方式处理高风险操作:删除等动作立即生效并展示结果,同时在底部弹出 带倒计时的撤销条,窗口期内一键恢复,倒计时结束才真正提交。相比弹窗确认,它不打断操作流, 又比"确认一次就完"的弹窗多了一层真正可用的后悔药。
交互模式相似概念用与真实内容结构一致的灰色占位块表示加载状态,通常带轻微的微光扫过或呼吸动画。 它告诉用户"内容马上就位,结构长这样",而不是让用户盯着空白或转圈等待。
交互模式相似概念用一个持续旋转的圆环或圆点表示"正在处理"。占用空间极小、语义全球通用, 适合嵌入按钮内、跟随光标或作为局部区块的轻量加载反馈。 它只表达"忙碌",不表达进度多少,也不预告还剩多久。
动效搭配使用用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。
组件搭配使用