AI 产品不能只做结果页,前端要把“等待过程”设计出来

1 阅读3分钟

很多 AI 产品现在有一个共同问题:

用户点了按钮,然后页面开始转圈。

转 3 秒还好。 转 10 秒开始焦虑。 转 30 秒用户就不知道发生了什么。 如果任务跑 2 分钟,很多人会直接关掉页面。

传统产品里,loading 只是过渡。

AI 产品里,等待过程本身就是体验。

因为 AI 产品正在从短回答走向长任务。

以前用户问一句,AI 回一句。

现在用户会让 AI 分析文件、生成报告、处理代码、整理数据、对比方案、执行 Agent 任务。

Google Search 正在把 Agent 能力带进搜索,让用户通过提问触发更复杂的任务;Codex cloud 也能在后台并行处理软件工程任务。

任务变长之后,前端不能只设计结果页。

还要设计等待过程。

因为用户等待时,真正想知道的不是“加载中”。

而是:

现在到哪一步了? 是不是卡住了? 我能不能取消? 有没有中间结果? 失败后能不能重试? 是否需要我补充信息? 这个任务还值不值得等?

一个简单的 AI 任务状态可以这样定义:

type AITaskStatus =
  | "queued"
  | "reading_context"
  | "planning"
  | "generating"
  | "validating"
  | "waiting_for_user"
  | "completed"
  | "failed"
  | "cancelled";

然后定义任务步骤:

type AITaskStep = {
  id: string;
  name: string;
  status: "pending" | "running" | "completed" | "failed";
  summary?: string;
  startedAt?: string;
  finishedAt?: string;
};

type AITask = {
  id: string;
  title: string;
  status: AITaskStatus;
  steps: AITaskStep[];
  progress?: number;
  partialResult?: unknown;
  error?: {
    code: string;
    message: string;
    retryable: boolean;
  };
};

这比一个 loading spinner 有用得多。

比如用户让 AI 分析一份 30 页文档,页面可以显示:

正在读取文件。 正在识别章节结构。 正在提取关键观点。 正在整理风险点。 正在生成摘要。 正在等待你确认是否导出。

用户看到这些,就知道系统在做事。

前端可以做一个 TaskProgress 组件:

function TaskProgress({ task }: { task: AITask }) {
  return (
    <section>
      <h2>{task.title}</h2>

      <ol>
        {task.steps.map(step => (
          <li key={step.id}>
            <span>{step.status}</span>
            <strong>{step.name}</strong>
            {step.summary && <p>{step.summary}</p>}
          </li>
        ))}
      </ol>
    </section>
  );
}

等待过程里最重要的是三个能力。

第一,取消。

如果任务还在跑,用户应该能停。

type TaskAction = "cancel" | "retry" | "continue" | "view_partial_result";

不是所有任务都值得等。用户发现方向错了,应该能取消,而不是被迫等完。

第二,中间结果。

AI 长任务不一定非要最后一次性给结果。

分析文档时,可以先显示提纲。 写报告时,可以先显示结构。 生成代码时,可以先显示修改计划。 整理资料时,可以先显示已识别的主题。

type PartialResult = {
  type: "outline" | "summary" | "plan" | "table" | "diff";
  content: unknown;
  isFinal: boolean;
};

第三,用户补充信息。

有些任务跑到一半,AI 发现信息不够。

比如预算缺失。 目标用户不清楚。 文件格式不完整。 权限不足。 风险过高。

这时候状态不应该一直 loading,而应该进入 waiting_for_user。

function UserInputRequired({ question }: { question: string }) {
  return (
    <div>
      <p>{question}</p>
      <textarea placeholder="补充信息后继续" />
      <button>继续任务</button>
    </div>
  );
}

这才像一个真正的 AI 工作流。

很多 AI 产品现在给人的感觉,是把复杂过程藏起来,只把结果扔出来。

但用户不一定喜欢黑盒。

尤其是长任务。

等待过程设计得好,用户会觉得系统可靠。 等待过程设计得差,用户会觉得系统卡了、乱了、不可信。

如果团队要比较不同模型在长任务拆解、中间结果表达、状态更新上的能力,可以用 gpt1998.com 跑同一组任务,看哪个模型更适合生成步骤、哪个更适合输出 partial result、哪个更容易进入可视化任务流。

但前端不能把体验完全交给模型。

你要主动设计这些状态:

排队中。 读取中。 规划中。 生成中。 校验中。 等待用户。 已完成。 失败。 已取消。

AI 产品未来不会只有聊天框。

会有任务面板、进度条、时间线、中间结果、人工确认、失败恢复。

谁把等待过程设计好,谁就更像一个真正的生产力工具。

AI 产品不能只做结果页。

结果之前发生了什么,也应该被用户看见。