跳到主要内容

AI 交互设计

流式输出的 UX 设计​

流式输出（Streaming）是 AI 产品中最重要的交互范式之一。由于 LLM 推理耗时较长，逐 Token 流式返回显著改善了用户的等待体验。

"打字机"效果实现​

打字机效果（Typewriter Effect）指文字逐字或逐词出现，模拟实时生成的视觉效果：

  • 技术实现：使用 Server-Sent Events（SSE）或 WebSocket 接收流式数据，前端按 chunk 追加文本
  • 渲染频率：通常每 50-100ms 渲染一次，避免过于频繁的 DOM 更新影响性能
  • 光标动画：在当前输出位置显示闪烁光标，强化"正在书写"的感知
  • Markdown 实时渲染：对流式输出的 Markdown 进行增量解析，避免页面频繁跳动

进度感知设计​

除打字机效果外，还需让用户感知到整体进度：

  • 步骤指示器：Agent 场景下显示"思考中 → 搜索资料 → 生成答案"的步骤状态
  • 字数/Token 计数：已生成字数 vs 预估总字数（如模型支持预测）
  • 预估剩余时间：基于当前生成速率动态估算，但要注意避免频繁跳变

Loading 状态设计​

AI 思考中的视觉反馈是降低用户放弃率的关键。

Loading 动画选择​

  • 三点跳动（Dot Animation）：最常见，适合对话场景的等待状态
  • 波形动画：模拟声音/思维波动，适合语音 AI 场景
  • 骨架屏（Skeleton Screen）：预先展示内容区域的轮廓，适合 AI 生成卡片/文章的场景
  • 进度条：当任务有明确进度时使用（如文件处理、批量生成）

Loading 文案设计​

避免使用无意义的"加载中..."，改用有语义的文案：

  • "AI 正在分析您的问题..."
  • "正在检索相关资料（已找到 12 篇）..."
  • "正在生成报告，预计需要 20 秒..."
  • "思考中，这个问题比较复杂..."

超时处理​

  • 15 秒：显示"仍在处理，请稍候"的额外提示
  • 30 秒：提供"继续等待"或"取消并重试"的选项
  • 60 秒：自动视为超时，提示用户重试，并记录超时事件

错误状态设计​

AI 产品的错误比传统软件更复杂，需要区分不同错误类型并提供对应处理策略。

错误类型与处理​

技术错误（网络超时/服务不可用）

  • 展示友好的错误提示，避免暴露堆栈信息
  • 提供一键重试按钮
  • 自动重试时显示重试进度（第 1/3 次重试中...）

质量问题（AI 输出不符合预期）

  • 提供"重新生成"按钮
  • 允许用户修改 Prompt 后再次提交
  • 记录用户的重新生成行为用于模型改进

降级处理（AI 不可用时的 Fallback）

  • 轻功能降级：AI 摘要不可用时展示原始文本
  • 提示用户当前处于降级模式
  • 预定义的 Fallback 内容（常见问题的固定答案）

置信度展示​

何时展示置信度​

不是所有场景都需要展示 AI 置信度，需权衡信息量与用户认知负担：

  • 医疗/法律等高风险场景：必须展示，防止用户过度信任
  • 事实性查询：建议展示，搭配信息来源
  • 创意写作：无需展示，AI "创作"本身没有对错

置信度呈现方式​

  • 颜色编码：高置信度（绿色）→ 中等（黄色）→ 低置信度（橙色/红色）
  • 文字描述：避免精确百分比（87.3% 容易产生虚假精确感），改用"可信度高/中/低"
  • 免责声明：在低置信度输出下自动附加"AI 可能存在错误，请自行核实"

来源引用展示​

来源引用是增强 AI 可信度的重要手段，尤其在 RAG（检索增强生成）场景中。

引用展示模式​

  • 内联引用：在文本中以上标数字标注（如"根据最新研究¹..."），底部列出参考文献
  • 侧边面板：点击引用数字后，侧边展开对应的原始文档片段
  • 悬浮预览：鼠标悬停在引用数字上，浮层展示来源摘要

引用质量控制​

  • 只引用真实存在且可访问的来源
  • 展示引用文档的发布日期，帮助用户判断时效性
  • 当无法找到可靠来源时，明确说明"此内容为 AI 推理，无直接文献依据"

用户反馈机制​

用户反馈数据是持续改进 AI 模型的核心燃料。

反馈入口设计​

  • 基础反馈：每条 AI 回复后的 👍/👎 按钮，降低反馈门槛
  • 详细反馈：点击 👎 后弹出多选（不准确/有害内容/无关/其他）
  • 文字标注：允许用户选中 AI 输出的特定片段并标记错误类型
  • 复制追踪：用户复制 AI 输出内容视为隐式正反馈信号

反馈数据使用​

  • 负反馈触发人工复核队列
  • 反馈数据用于 RLHF 训练数据筛选
  • 高频负反馈的 Prompt 类型优先进入 Fine-tuning 优化

编辑与修正入口​

AI 输出内容不是最终结果，用户应能方便地修改：

  • 内联编辑：直接点击 AI 生成的文本进行编辑，而非复制到别处
  • 局部重新生成：选中一段 AI 输出，右键"重新生成此段"
  • 修改指令重新生成：输入框提供"调整要求"快捷入口（"让它更简短/更正式/加入示例"）

"停止生成"按钮​

长时间生成必须提供中止能力：

  • 显示时机：流式输出开始后立即显示，结束后隐藏
  • 位置：紧靠输出区域底部，醒目但不干扰阅读
  • 停止后的状态：保留已生成内容，提示"已停止，您可以继续提问或重新生成"
  • 快捷键：支持 Escape 键停止生成

多轮对话 UX​

多轮对话是 LLM 产品的核心交互范式，UX 设计需关注：

  • 历史记录展示：清晰区分"用户"和"AI"的消息气泡，时间戳辅助参考
  • 上下文长度提示：当对话接近 Context Window 上限时，提示用户"历史记录较长，可能影响 AI 理解"
  • 对话分支：允许用户从历史消息处重新编辑并创建新分支
  • 对话标题自动生成：根据对话内容自动生成标题，方便历史记录检索

空状态引导​

首次使用 AI 功能时，空状态（Empty State）设计决定了用户的第一印象：

  • 示例 Prompt：展示 3-5 个精心设计的示例问题，降低用户的"不知从何问起"焦虑
  • 功能分类：按场景分组展示（写作/分析/编程/问答），帮助用户找到切入点
  • 新手引导：可选的引导流程，让用户通过完成一个简单任务快速体验 AI 能力
  • 动态示例：根据用户角色、历史行为个性化推荐示例 Prompt