延迟优化设计：当人工智能速度转化为用户体验

AI延迟是AI产品中最重要的用户体验问题，但几乎没有人将其视为设计工作。那些打造最佳AI体验的团队不再等待更快的模型，而是开始围绕等待进行设计。

以下是行动指南：感知速度的数学原理、五种有效的模式、四种失败的模式、五种拆解分析以及一份发布前检查清单。

AI延迟是一个设计问题，而非工程问题

大多数AI产品感觉缓慢，是因为他们将延迟视为工程问题。工程团队发布了更快的模型，但产品仍然感觉缓慢，因为瓶颈从来不是毫秒级的延迟，而是设计选择导致用户盯着一个加载指示器却无内容可读。

用户不会衡量毫秒数，而是衡量是否有内容在发生。四秒钟的流式文本阅读速度与用户预期的一样快，而模态框延迟1.5秒则会让人感觉页面卡顿。

感知速度的数学原理

四秒钟的流式响应阅读速度与用户预期的一样快。 1.5 秒的响应时间如果导致阻塞，就会显得很慢。感知速度取决于反馈密度，而非经过的时间。这一事实重新定义了人工智能产品中所有关于延迟的决策。

真正重要的数字是到达第一个标记的时间和每秒标记数，而不是总响应时间。到达第一个标记的时间低于 500 毫秒会让人感觉瞬间完成。每秒 30 到 80 个标记的读取速度与人类速度相当。如果从第一个标记开始流畅读取，5 秒的总预算是可以接受的；但如果出现阻塞，则会被打破。围绕这些数字进行设计，即使是速度较慢的模型也能比竞争对手感觉更快。

五种有效的模式

流式文本。乐观的用户界面。渐进式披露。推理界面。后台代理。所有在感知速度方面表现出色的人工智能产品都至少依赖于其中三种，而优秀的产品则依赖于全部五种。

这五种模式相互配合。流式文本为用户提供阅读内容。乐观的用户界面为用户提供视觉体验。渐进式披露让用户有内容可浏览。推理界面让用户有内容可信赖。后台代理让用户有其他事情可做。综合起来，模型只需十秒即可完成，而产品依然充满活力。

流式文本将等待转化为答案

第一种模式是逐个词元渲染。用户在模型写入的同时阅读，等待时间融入到输出中。到达第一个词元的时间成为唯一重要的数字。一旦第一个词元到达，用户就可以开始阅读，而不是等待。

Claude.ai 的流式文本是已发布的最佳示例。第一个词元在不到一秒的时间内到达，其余词元以阅读速度依次到达。在模型完成第二段之前，用户已经读完了第一段的句子。同样的模型，如果以四秒后一次性交付，用户体验将截然不同。

乐观的 UI 在模型返回之前执行操作

第二种模式是在模型完成之前显示结果，然后在响应到达时进行确认。用户并不需要立即得到正确答案，他们需要的是确认。

Linear AI 在接受建议时会执行此操作。结果会立即以微妙的待处理状态出现在问题中，并在后台进行协调。如果模型得出不同的结果，UI 会立即更新，而不会出现任何闪烁。如果失败，UI 会回滚并显示错误信息。无论结果如何，用户都可以继续操作。

渐进式披露：框架、草稿和最终版本

第三种模式是先显示框架，然后是部分草稿，最后是最终输出。结构先于内容显示，这通过为用户提供可追踪的内容来减少感知等待。

v0 版本在其提示到应用界面上实现了这一点。布局框架几乎立即出现，组件随着模型的生成而填充，最终样式预览最后显示。Lovable 也采用了相同的流程。每个阶段都是一个检查点，用户可以在加载下一个阶段的同时阅读相关信息。

推理过程界面将等待时间转化为信任

第四种模式是在模型运行过程中展示其计划或思考过程。观看智能体进行推理比观看旋转指示器要好得多。它还能建立信任，因为用户可以在模型执行操作之前看到其意图。

Cursor 的智能体模式自带计划界面。用户在第一个命令运行之前就能看到预期的步骤。ChatGPT 展示了思考模型的推理轨迹，并附有可折叠的思维概要，其阅读方式如同结构化的散文。15 秒的可见推理过程胜过 3 秒的黑盒演示。

后台智能体允许用户在模型运行时继续工作

第五种模式是将智能体从前台移至侧边栏。用户不会被任何 AI 请求所干扰。智能体在角落运行，而用户可以继续在主画布上进行写作、编码或设计。

Cursor 的后台智能体是目前最简洁的版本。用户启动一个耗时较长的任务，并在前台持续编辑，而智能体则在侧边栏中工作。GitHub Copilot 的编码智能体也对类似拉取请求的任务执行相同的操作。这种模式只有在用户还有其他事情要做时才有效，而在任何实际工作流程中，用户总是会有其他事情要做。

四种失败的模式

大多数感觉运行缓慢的 AI 产品都采用了以下四种失败模式的某种组合：纯粹的加载指示器、循环文本提示、模态阻塞对话框以及完全没有进度信号。即使响应速度很快，每一种模式都会降低用户感知到的速度。

纯粹的加载指示器隐藏了用户所需的一切

没有进度信号的加载指示器就像一个黑盒子。用户没有任何可以关注的内容，而且等待时间比带有令牌流的相同等待时间更慢。加载指示器会让用户把目光移开，这与 AI 界面应该做的恰恰相反。

删除加载指示器。提供令牌流、框架或推理轨迹。如果响应太短无法实时显示，请发送一个乐观状态。如果模型正在执行不可见的任务，请发送一条状态信息来说明任务内容。

循环显示思考状态的文字是无意义的噪音

循环显示思考状态的文字比加载指示器更糟糕。它暗示着实际上并不存在的任何进展。用户只需两次会话就能学会忽略它，这扼杀了界面接下来发送任何真正状态信息的可能性。

用真正的状态信息替换循环显示。例如：正在搜索三个源。正在读取文件。正在撰写响应。状态信息才是真正的信息。循环显示的内容只是伪装成信息的噪音。

模态阻塞对话框会将等待变成障碍

在模型运行时阻塞其他用户界面的模态框是造成延迟最严重的错误。它会将等待变成一种被困住的状态。用户无法滚动页面，无法复制之前的答案，也无法进行任何其他操作。

删除模态框。将响应信息以内联方式、侧边栏或非阻塞式提示框的形式发送。用户不应因某个 AI 请求正在处理中而失去对产品其他功能的访问权限。

没有进度信号会让用户放弃

没有进度信号的 AI 界面会让用户误以为请求失败。他们会在响应到达之前点击返回按钮。最糟糕的情况是，他们会刷新页面，从而丢失请求。

任何耗时超过 500 毫秒的 AI 界面都需要进度信号。流式文本是最佳选择。其次是框架。对于更长的等待时间，可以使用推理跟踪。状态栏适用于其他所有情况。必须提供进度信号。

五个真实的产品拆解案例

五个将延迟转化为用户体验的 AI 界面。

Claude.ai，以流式处理作为整个交互方式

Claude.ai 的流式处理是延迟即功能的最佳示例。在预热会话中，首次令牌响应时间远低于一秒，文本以流畅的阅读速度显示，等待时间也融入到输出中。

设计策略的核心在于完全专注于信息流。没有加载指示器，没有思考文本，没有框架，只有响应逐个落下，每个标记依次显示。产品在20秒的生成过程中感觉流畅，是因为用户在其中19秒都在阅读信息。

Cursor，计划-运行循环

Cursor 通过首先显示代理的计划，并以可见的进度跟踪每个步骤，以及在差异落地时提交差异，将延迟转化为信任。即使任务耗时数分钟，用户也能感受到其意义所在，因为他们可以阅读计划，观察每个步骤，并在差异提交时进行查看。

设计策略的核心在于对等待时间进行排序。首先是计划。每个步骤都是一个检查点。差异作为最终输出。每一层都承载着信息，因此即使任务运行数分钟，用户也不会盯着一个黑框。

⟦品牌1⟧ AI，内联渐进式披露

⟦品牌2⟧ AI 将渐进式披露嵌入到现有界面中。AI 不会占据前台。草稿建议会直接显示在问题中。摘要会直接显示在项目内。等待不会阻碍用户的实际操作，因为用户已经在执行 AI 正在增强的工作。

嵌入到用户已熟悉的产品中的 AI 绝不应该以模态框或接管的形式出现。内联披露才是正确的模式，延迟成本隐藏在用户正在进行的操作中。

想要一款即使模型运行缓慢也能流畅运行的 AI 产品吗？聘请 Brainy。UXBrainy 提供延迟审核和流式 UI 重新设计，AppBrainy 提供完整的 AI 产品交付，而 ClaudeBrainy 提供提示和技能层，从而降低流式传输成本。将其与 AI代理UI设计模式 结合使用，即可确保代理层以相同的精湛工艺交付。

Granola，从录制到摘要的级联流程

Granola 将数分钟的模型运行时间隐藏在一个四阶段级联流程背后。录制内容首先以原始波形的形式呈现。转录文本随后以可滚动文本的形式呈现。草稿笔记以要点结构的形式排在第三位。最终总结以润色后的散文形式最后呈现。每个阶段都对下一阶段的完成至关重要。

三分钟的模型工作感觉就像三十秒，因为第一个有用的成果在十分钟内就出现了。文字记录本身就很有价值。笔记本身也很有价值。总结完善了整个体验，而不会限制用户获取价值。

Perplexity，实时资源流

Perplexity 在答案出现之前先流式传输资源。引用列表首先显示，并在模型检索和排序每个资源时自动填充。答案在用户阅读资源的同时显示在下方。等待的过程感觉像是在进行研究，而不是在加载。

这种设计策略是在结果出现之前展示工作过程。阅读资源列表的用户不会感到等待。如果总响应时间相同，但资源在答案准备就绪之前隐藏，用户会感觉慢两到三倍。等待期间的信息密度决定了用户对速度的感知。

发布前延迟检查清单

在任何人工智能界面发布之前运行此检查。十二项检查，全部可量化。

1. 在热会话中，首次令牌响应时间低于 500 毫秒。

2. 在目标模型上，流式传输能够维持每秒 30 到 80 个令牌。

3. 每次等待时间超过 500 毫秒时，都会显示进度信号。

4. AI 界面上任何位置均无纯粹的加载指示器。

5. AI 界面上任何位置均无循环的思考文本。

6. 模型运行时无模态阻塞对话框。

7. 乐观的 UI 能够在用户意图发出后 100 毫秒内执行可见操作。

8. 对于任何超过两秒的响应，骨架图会在内容之前渲染。

9. 对于任何超过十秒的任务，推理过程都会公开。

10. 长时间运行的代理程序在侧边栏中运行，而不是在前台运行。

11. 用户可以在请求处理期间滚动、复制和阅读之前的输出。

12. 每个多阶段响应都会显示用户可以查看的中间阶段。

该列表位于设计评审模板中，并且每次运行都会加快速度。

常见问题解答

AI 产品中最重要的延迟指标是什么？

首次响应时间。总响应时间不如用户等待阅读内容的时间重要。低于 500 毫秒即可视为即时响应。

流式处理总是比阻塞式处理更好吗？

对于文本而言，是的。低于 500 毫秒时，阻塞式处理是可以接受的，因为等待是无感的。对于任何更长的延迟，流式处理在所有感知速度指标上都优于阻塞式处理。

何时应该使用乐观 UI，何时应该使用流式处理？

当输出是答案时，例如散文、代码或结构化生成内容，应使用流式处理。当模型做出用户预期中的决策时，例如改进后的草稿或已接受的建议，应使用乐观 UI。两者可以结合使用。

如何显示需要几分钟才能完成的代理的进度？

推理界面和侧边栏进度流。首先显示计划，其次显示当前步骤，最后显示运行结果。用户可以阅读计划，观察步骤的执行情况，而不会感到被拒之门外。

如今人工智能产品中最糟糕的延迟错误是什么？

带有加载指示器的阻塞式模态框。它将所有四种失败模式都集中在一个屏幕上，让用户觉得人工智能是需要等待的，而不是可以使用的。

针对人工智能延迟进行设计的真正意义

针对人工智能延迟进行设计并非是为缓慢的模型寻找替代方案。它是一种设计策略，可以让速度较慢但性能更佳的模型在用户真正关心的所有指标上都胜过速度较快但性能较差的模型。

目前领先的团队不再追求原始速度，而是开始设计用户感知到的速度。他们致力于流式处理，添加了乐观的用户界面，构建了 200 毫秒的框架，并将代理移至侧边栏。每一次等待都蕴含着信息。

如果你的 AI 界面仍然显示加载指示器、思考循环或阻塞式模态框，那么瓶颈不在于模型本身，而在于设计。结合 AI代理UI设计模式、AI产品入门 操作手册、AI原生产品设计 和 视觉层级，确保每个阶段都清晰易懂。

如果你想要一款即使模型运行缓慢也能流畅运行的 AI 产品，请参考 聘请 Brainy。UXBrainy 提供延迟审核和流式 UI 重新设计，AppBrainy 提供完整的 AI 产品交付方案，而 ClaudeBrainy 则提供降低流式传输成本的提示和技能层。