3 个 AI 产品交互设计案例分析

从真实 AI 产品案例拆解信任、生成式 UI 与画布交互的设计思路。

从 Perplexity 到 Claude 到 Flowith，拆解当前头部 AI 产品的设计思路

一、先说结论：界面设计比模型更重要

用 AI 产品多了，你会发现一个规律：有些 AI 产品感觉像工具，有些感觉像玩具。差别往往不在模型，而在于模型周围的界面设计。

一个 AI 对话界面的三个独特挑战：

  • 回复是生成的，不是检索的——同一问题会得到不同答案
  • 回复需要时间，逐 token 流式输出——这是最大的 UX 差异
  • 回复可能完全自信地犯错——幻觉是现实，界面需要帮助用户验证

二、Perplexity：引用设计，信任优先

Perplexity 的核心定位是"答案引擎"，而不是"聊天机器人"。它的设计语言围绕一个核心：让 AI 的回答可以被验证。

引用设计（Citations）

Perplexity 在每个回答下方直接展示来源链接，实现了"答案 → 证据 → 下一步"的完整闭环：

  • 构建信任：引用让 AI 回答变得可验证
  • 减少幻觉焦虑：用户可以即时核查原始来源
  • 提升可学习性：追问建议引导用户继续探索

追问建议

每个回答底部提供 3-5 个追问，这是 UX 设计的经典应用：

  • Hick 定律：有限的追问降低了选择过载
  • Miller 定律：3-5 个选项在工作记忆限制内
  • Recognition over Recall：用户不需要自己组织下一个问题

设计上的不足

  • 所有追问都是系统生成，用户无法修改意图或方向
  • 不同权威级别的来源（学术 vs 博客）视觉上一致，高权威来源没有突出显示
  • 缺乏引导用户控制追问类型的功能（如"简化""对比""反驳"）

三、Claude：Generative UI 的先行者

Claude 给人最直接的感受是"严谨、专业、克制"。这背后是一套完整的设计决策。

排版设计：衬线体营造专业氛围

Claude 使用衬线字体（而非黑体），米白色的底色更容易让人沉下心阅读：

  • 在长对话输出时，加粗、分割线与图标点缀都很克制
  • 阅读体验明显更精致，适合深度创作场景
  • 整体氛围显得严谨、专业且高级

Generative UI：结构化输入控件

当用户的需求需要澄清时，Claude 不会在纯文本对话里追问，而是用 Q\&A 卡片——一个内嵌的表单组件：

  • 把"用户需要回答的问题"从纯文本对话里抽离出来
  • 变成可点选、可填写的 UI 组件
  • 这是 Generative UI（生成式 UI）的典型应用：AI 根据语境动态生成最合适的交互组件

对话式澄清

以"基于产品文档生成 PPT"为例，Claude 会用 2-3 轮 Q\&A 卡片逐步确认：受众是谁、演示场景是什么、核心目标是什么。这种方式比纯文本追问更高效，也更不容易遗漏关键信息。

四、Flowith：画布式交互的新思路

Flowith 提出了一个反直觉的问题：和 AI 互动的最佳模式，真的是上下滚动的聊天记录吗？

核心创新：无限画布

Flowith 把线性聊天记录转变为无限画布：

  • 底部仍有输入框，但交互发生在画布上
  • 每次提问产生一个新的"节点"
  • 节点可以发散和引用，串成不同的线

节点机制

用户提问 → 节点A（AI回答）↓节点A → 节点B（追问1）↓节点A → 节点C（追问2）↓节点B → 节点D（对追问1的再追问）

这非常适合头脑风暴类场景——当你需要探索一个问题的多个方向时，画布的分支结构比线性聊天更直观。

与线性聊天的对比

维度线性聊天画布式
信息组织按时间线性排列按逻辑关系分支
适合场景单线问答、任务执行头脑风暴、多角度探索
历史追溯需要翻页空间上直观可见
认知负荷追问越多越难回溯画布大时需要缩放

五、三个产品的共同趋势

尽管设计思路不同，当前头部 AI 产品有以下共识：

1. 流式输出成为标配

逐 token 输出已经成为标准体验，让用户感知 AI 在"思考"。

2. Markdown 渲染

代码块、表格、加粗、列表——AI 回答的专业性需要 Markdown 呈现来配合。

3. 快捷指令

把高频行为外置为可点击的按钮/标签，降低用户输入成本。

4. 记忆功能

Claude 的项目记忆、Perplexity 的搜索历史，都在建立长期用户价值。

5. 引用与信任设计

在幻觉问题无法根除的前提下，引用设计成为建立信任的核心手段。

六、对设计师的启示

从这三个案例，设计师可以学到：

  1. 先想清楚产品定位：Perplexity 做答案引擎，Claude 做创作助手，Flowith 做探索工具。定位不同，界面设计完全不同。
  2. 模型能力趋同后，体验设计是差异化核心：到了 2026 年，各家基础模型的通用能力差距正在缩小，用户选择用谁，越来越取决于"谁更好用"。
  3. Generative UI 是下一个设计前沿：让 AI 根据对话语境动态生成最合适的 UI 组件，而不是用固定表单限制用户——这是 Claude 正在探索的方向。
  4. 信任设计是 AI 产品的第一优先级：引用、澄清、预期管理——帮助用户正确使用 AI，比让 AI 更聪明更重要。

参考来源