跳到主要内容
界面图谱Interface Atlas
☰
EN
交互模式Feedback / Interaction

乐观界面

Optimistic UI

别名:Optimistic UI乐观更新乐观界面先改后等即时假成功先显示后确认

这是什么

用户操作后立即按"预计成功"更新界面,真实请求在后台进行,成功则落定, 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感,特别适合点赞、收藏这类高频轻操作。

交互实验室

试一试,再决定怎么用

正在加载实验室…

✓ 适用场景

  • 点赞、收藏、关注等高频轻操作
  • 弱网环境下仍想保持操作流畅
  • 失败可回滚且业务后果轻微

✕ 不适用场景

  • 支付、下单等不可逆或高价值操作
  • 结果决定后续流程的分支走向
  • 回滚成本高,或回滚本身会造成困惑

常见形式

等待确认

Pending

乐观数值带 pending 态,请求返回后落定

失败回滚

Rollback

请求失败撤回更改并给出提示

排队确认

Queued

连续操作依次排队,逐个确认或回滚

实现要点

opacity transitiontransform scaleanimationkeyframes

点击瞬间同步更新本地状态并进入 pending 态(降透明度或轻脉冲),请求返回后落定; 失败时恢复原值并弹出回滚提示。连续操作需要请求序列号防止乱序覆盖; 回滚提示可配合撤销操作。pending 动画尊重 prefers-reduced-motion。

相关概念

轻提示Toast

在视口角落短暂出现、自动消失的小消息条,用来告知操作结果(已保存、已复制、上传完成)。 不打断当前流程,通常附一个操作入口(撤销、查看),停留约 3~5 秒后淡出。

组件搭配使用
撤销操作Undo Action

用"先执行、给反悔窗口"的方式处理高风险操作:删除等动作立即生效并展示结果,同时在底部弹出 带倒计时的撤销条,窗口期内一键恢复,倒计时结束才真正提交。相比弹窗确认,它不打断操作流, 又比"确认一次就完"的弹窗多了一层真正可用的后悔药。

交互模式相似概念
骨架屏Skeleton Loading

用与真实内容结构一致的灰色占位块表示加载状态,通常带轻微的微光扫过或呼吸动画。 它告诉用户"内容马上就位,结构长这样",而不是让用户盯着空白或转圈等待。

交互模式相似概念
加载指示器Loading Spinner

用一个持续旋转的圆环或圆点表示"正在处理"。占用空间极小、语义全球通用, 适合嵌入按钮内、跟随光标或作为局部区块的轻量加载反馈。 它只表达"忙碌",不表达进度多少,也不预告还剩多久。

动效搭配使用
按钮Button

用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。

组件搭配使用

参考来源

Markdown 版(给 Agent) · JSON