CHAO AI LEARNING PATH

AI 知识库

从基础认知到真实项目,把零散知识整理成可以持续学习的路径。 继续学习 边生成边展示:流式体验怎么设计
22学习模块 119已上线课程 100%当前章节
LEARNING MODULES

选择学习方向

指令表达与输出控制边生成边展示:流式体验怎么设计

指令表达与输出控制

边生成边展示:流式体验怎么设计

当你开始调用 AI API 做自己的产品时,会遇到一个很实际的问题:为什么 ChatGPT 的答案是一点一点出现,而有些 AI 产品要等很久才一次性出现?这背后就是流式输出。

一句话回答

流式输出 = AI 生成一点,前端就展示一点。它不一定让模型真正生成得更快,但能让用户更早看到结果,明显减少等待感。

等待体验已打包成 Skill

让 AI 审计应用里每一处让用户等待的地方

已复制,去贴给你的 Agent
为什么同样等 15 秒,体验会完全不同? non streaming vs streaming
非流式 全部生成完,再一次性返回
发送问题 等待…… 继续等待 完整答案出现

用户盯着空白页面,很容易觉得:是不是卡住了?

流式 生成一点,就展示一点
发送问题 第一句话出现 继续生成 完成

用户很快看到内容,会感觉:AI 已经开始工作了。

Streaming 的底层逻辑不是魔法,而是连续交付 generate send display
AI 模型 生成一小段 发送给前端 页面显示 继续生成

Streaming 本质上是边生成、边传输、边展示。

好的流式体验,不只是文字打出来 process feedback
帮我分析这个产品为什么转化率下降。

这个问题可以先从流量质量、页面表达和转化路径三个方面看……

正在分析你的问题 正在查找相关资料 正在整理答案 即将生成正文
Agent 场景更需要过程可视化 agent progress

长任务不要只显示一个加载圈

Agent 可能要理解任务、搜索网页、读取资料、调用工具、分析结果,再生成报告。过程越长,越要让用户知道系统正在推进。

已理解任务 已找到 8 个相关结果 正在分析资料 正在生成最终报告
不要把后台黑话直接扔给用户 human readable status
Vector Search Running... 正在查找相关资料……
Tool Call Executing... 正在查询最新数据……
Token 已生成 387 正在生成答案……

用户不需要知道底层调用了什么,只需要知道 AI 没有卡住,而且正在处理自己的任务。

流式输出最好允许停止生成 stop generation

AI 正在生成第 3 段内容,可以随时停止。

方向错了,就不要让用户等到底

用户看了前几段发现方向不对,可以立刻停止,再补一句“改成面向新手的版本”。这比等长答案全部生成完更省时间。

不是什么内容都适合流式展示 fit or not

适合流式

给人看的长内容,可以边生成边阅读。

AI 聊天 写文章 总结资料 翻译 长文本生成 代码生成

需要谨慎

给程序处理的数据,更关注最终结构完整。

JSON 输出 表单数据 API 结果 自动化字段 程序继续处理的数据
一套完整的 AI 流式体验 complete experience
用户发送 立即反馈 显示处理状态 边生成边展示 允许停止 完成操作
已复制到剪贴板

适合用户想把结果带走,继续放到文档、飞书或客户沟通里使用。

本节练习

设计一个 30 秒 AI 报告生成体验

不要只放“加载中”。把它拆成立即反馈、过程状态、流式正文、停止生成和完成操作五个阶段。

立即反馈告诉用户已经开始处理 过程状态展示关键阶段 流式正文先出现可读内容 停止生成方向错了可中断 完成操作复制、导出、继续追问

本节小结

  • 流式输出是边生成边展示。
  • Streaming 主要减少等待感,不一定让模型生成更快。
  • 好的流式体验需要立即反馈、过程状态、停止生成和完成操作。
  • 给人看的长内容适合流式展示,给程序处理的 JSON 更关注最终结构完整。