AIGC宇宙 AIGC宇宙

AI Agent 产品交互设计:设计模式与案例分析

作者 | 贾思玉、亢江妹 或许你还记得 ChatGPT 问世时的轰动,第一次使用 DeepSeek R1 的兴奋和激动也历历在目。 AI Agent 发展一日千里,今年以来,几乎每个月都有新的 AI Agent 产品发布,现有产品也不断更新换代,让人目不暇接。 本文将从体验设计视角,来看看当下热门的 AI Agent 产品,如 Manus、Flowith、Gemini Deep Research、Cursor、Devin 等,分析 Agent 产品面临的设计挑战,探讨有效的交互设计模式,以及如何打造高效、易用、友好的 Agent 交互体验。

作者 | 贾思玉、亢江妹

或许你还记得 ChatGPT 问世时的轰动,第一次使用 DeepSeek R1 的兴奋和激动也历历在目。AI Agent 发展一日千里,今年以来,几乎每个月都有新的 AI Agent 产品发布,现有产品也不断更新换代,让人目不暇接。

AI Agent 产品交互设计:设计模式与案例分析

本文将从体验设计视角,来看看当下热门的 AI Agent 产品,如 Manus、Flowith、Gemini Deep Research、Cursor、Devin 等,分析 Agent 产品面临的设计挑战,探讨有效的交互设计模式,以及如何打造高效、易用、友好的 Agent 交互体验。

AI Agent 产品交互设计:设计模式与案例分析

一、 从“工具”到“伙伴”的 AI Agent 产品

回顾 AI Agent 的发展历程,可以看到一条从“工具”到“伙伴”的演进路径。几年前的AI产品多以聊天机器人(chatbot)、AI助手(AI Assistant)的形式存在,提供简单的搜索和问答服务。2022年11月,ChatGPT 发布,刷新了普罗大众对 AI Agent 的认知。此后,AI 智能体跨越式发展,由“我问你答”进阶为“我说你做”。一两句指示,AI Agent 就可以自己生成代码、绘制图像、制作PPT演示文件,甚至处理更复杂的任务——今年3月“横空出世”的 Manus,就具备简历筛选、股票分析、旅行规划等多场景应用能力。

AI Agent 产品交互设计:设计模式与案例分析

当下,AI Agent 正朝着更高阶的 AGI 形态迈进,已经开启 General AI Agent(通用型AI智能体)或 Agentic AI 的阶段。这意味着,AI 不再仅仅是被动响应用户指令的工具,而是能够主动分解任务、调用外部工具、制定执行计划,并在执行过程中进行自我修正的"数字劳动力"。

正是这种能力进阶,使得 AI Agent 的交互设计变得越来越重要。当 AI 从单纯的"工具"转变为"伙伴",用户与 AI 之间的互动方式也需要相应改变。良好的人机交互设计不仅能让用户更容易上手和使用 AI Agent,还能增强用户对 AI 执行过程的理解和信任,从而最大化 AI Agent 的价值。

二、AI Agent 产品交互设计难点

AI Agent 产品的工作流程大体上包括:用户输入需求开启任务、AI Agent 进行任务分解与规划、调用工具/模型执行各步骤,以及生成并展示结果。

以 Manus 的简历筛选案例为例,在收到用户请求后,Manus 自动解压简历压缩包、逐一浏览十几份简历并记录关键信息,最终生成结构化的候选人筛选报告,过程代码和结果报告可供用户浏览、导出。

围绕这一工作流程,要打造流畅的 AI Agent 交互体验,设计师需要解决贯穿其中的多个难点。从用户与 AI Agent 的交互过程来看,我们可以将这些难点划分在启动、过程和结果三个阶段:

1. 启动阶段设计难点

当用户开始使用 AI Agent 时,首先面临的是如何清晰高效地表达需求和进行初始设置:

  • 模型/模式切换困难:一个 AI Agent 可能提供多种模型或工作模式,对于非熟练用户而言,不仅难以理解,而且切换入口也不够直观。例如,flowith 首页对话框上下,既有多种模式(如联网搜索模式、图片视频生成模式)卡片,也有智能体(如 Claude、ChatGPT、Gemini)切换下拉菜单,以及 Oracle 模式开关,很难一下这些选项间的区别和关系;
  • 上手门槛高:一些 AI Agent 的首页或任务开启界面追求创新,比如 flowith 或 Refly,采用画布加思维导图的设计,对用户而言学习成本较高,上手操作需要摸索一番;
  • 复杂任务需修修补补:对于需要调用工具、多步决策的复杂问题,用户很难通过一次性的、简短的提示词(prompt)让 AI Agent 完全、准确理解其需求,也就谈不上获得最佳结果。以 Manus 为例,用户通过文本指令启动任务,但对于具体内容、形式(如“生成交互式网页”)要么得在下达任务时事无巨细地描述,更多时候则需要等任务执行结束后,再不断修补调整。

2. 过程阶段设计难点

在 AI Agent 执行任务的过程中,用户面临着如何理解、监控和干预的挑战:

  • 多模块信息难对应:如上文所说,AI Agent 通常整合对话、任务进度、结果和代码日志等多种元素,但多个模块缺乏清晰的对应关系,用户难以跟随理解,更谈不上及时发现和纠正问题;
  • 过程透明度不足:一些 AI Agent 不能清晰披露为何做出某种决策,以及对信息源的权威性、可靠性缺乏判断,这导致结果质量难保证,影响用户对 AI 的信任。比如“简历筛选”的依据,学历、工作经历、教育背景等多个维度的权重是如何分配的?为何这样分配?过程仿佛一个“黑盒”;
  • 用户介入不灵活:当前 AI Agent 产品一般并不允许中途暂停。任务一旦开启(甚至有时用户指令尚未输入完整,因点击回车而误开启),用户只能等全部执行完毕后,再输入反馈和重新运行。过程中的暂停、修正、继续或重新运行机制亟待建立。

3. 结果阶段设计难点

当 AI Agent 完成任务后,用户需要进行结果浏览、使用和优化,由此产生了一系列问题和设计难点:

  • 结果呈现割裂:AI Agent 最终可能输出文档、报告、图表、网页、代码等各种形式的结果。这些结果常分散在多个窗口甚至多个平台中,需要下载、跳转查看,另外也难以嵌入用户后续的工作流(如导入 Github 或加入已存在的 PPT 中);
  • 结果修改受限:当用户对结果不满意,应该为他们提供简便、高效的修改方式。但当下,用户大多需要在对话框中输入评价和修改意见,而无法直接在结果上面标注和编辑;
  • 质量自检空白:一个任务有没有完成、结果质量如何、有哪些可以优化的地方?AI Agent 目前还不能自主进行成效评估,而依赖用户来评判和指出下一步方向,这是 AI Agent 能力和设计上都存在的尚未解决的难题;
  • 版本管理缺失:AI Agent 执行完任务后,用户可能需要持续注入反馈或补充指令,经过一次次迭代才能获得满意结果,而目前缺乏历史版本的管理,用户难以追溯、比较和回滚。

AI Agent 产品交互设计:设计模式与案例分析

以上这些难点直接影响了用户与 AI Agent 协作的效率和结果满意度。不过,AI Agent 产品发展日新月异,一些产品已经开始探索解决之道,摸索出有效的设计模式,接下来让我们详细探讨。

三、AI Agent 产品交互设计模式及应用案例

1. Agent 产品设计三大原则

为解决 AI Agent 交互设计的诸多挑战,设计师需要以几个核心原则为指引:

  • 透明化和可解释性:如何让用户清晰看到 Agent 的工作过程和决策依据?如何增强用户信任?
  • 认知减负:如何简洁有效地呈现信息,帮用户减少干扰、减轻记忆负担?如何高效地互动沟通,让用户轻松理解 Agent 的工作状态、及时发现和预防偏差?
  • 人在环路(Human-in-the-loop):如何保证 Agent 工作过程可控、支持用户灵活介入?如何平衡 Agent 自主性和用户控制权?

基于这些原则,我们总结了七个关键设计模式,也可以作为日后 AI Agent 产品的设计策略:

2. 七大关键设计模式

模式 1:注意力引导(Attention Guidance)

  • 核心理念:引导用户将注意力放在正在发生的、最关键的或需要协作处理的信息区域,减少无关信息或干扰用户理解 AI 工作的元素。
  • 设计要点:渐进式展示而非一次性呈现所有信息;非高频/重要窗口隐藏折叠;信息分层及视觉效果区分,如高亮正在执行重要操作的模块;同类元素的交互和视觉样式保持一致。

模式 2:就地澄清(In-Place Clarification)

  • 核心理念:允许用户在任务执行的环境中直接提供反馈和修正,而不会脱离上下文。
  • 设计要点:提供灵活、定位准确的编辑入口,避免多个窗口或操作位置之间的转换;保持编辑区域与结果预览的一致性;用户修改完成后,提供明确的保存/更新反馈。

模式 3:自动建议(Auto-Suggestion)

  • 核心理念:用选择代替输入,少用开放式提问,邀请用户协作而非依赖人工。
  • 设计要点:在关键决策点、需要用户意见时,提供范围适当的选项数量;指出错误的同时给出解决方案选项;允许用户在选项之外自由输入;根据使用历史、用户偏好推荐最优选项。

模式 4:思考外显(Think-Aloud)

  • 核心理念:让 AI 外显其思考过程、计划和决策依据,增强透明度和可解释性。
  • 设计要点:AI 工作状态和进度始终清晰可见;使用自然语言与用户互动;允许用户调整推理、执行过程展示的详细程度;使用适当的可视化手段(如思维导图、流程图)解释工作过程。

模式 5:上下文/知识匹配(Context/Knowledge Match)

  • 核心理念:主动识别相似问题,自动调取历史信息和知识资源,减轻用户记忆负荷,避免重复输入。
  • 设计要点:记录用户选择或决策以简化未来任务执行;标注正在记忆或使用的上下文/知识;提供修改或移除自动引用上下文的选项;隐私敏感场景下的调用需向用户确认。

模式 6:暂停-反馈-继续(Pause-Feedback-Continue Flexibility)

  • 核心理念:任务执行过程中允许用户暂停、提供反馈并决定后续操作,始终保证用户控制权。
  • 设计要点:提供明显的暂停按钮;允许中止并保存已完成内容;设置关键决策点的自动暂停;提供操作简便的继续/重启/放弃选项;用户操作可撤销/可逆。

模式 7:环境/工作流适配(Environment/Workflow Adaptability)

  • 核心理念:AI Agent 可以与现有工作环境或工作流程适配融合,帮用户减少腾挪的麻烦。
  • 设计要点:任务启动位置和方式灵活;为用户提供多种结果使用方式,贴合实际工作习惯;工作环境中,支持跨平台同步,向用户清晰展示同步结果。

AI Agent 产品交互设计:设计模式与案例分析

3. 模式应用场景举例

AI Agent 产品设计模式并非孤立存在,而是在 AI Agent 工作的不同使用阶段相互配合、综合应用,共同提升用户体验。让我们进一步探讨这些设计模式如何在已有的 AI Agent 产品中得到应用,或者未来有哪些应用机会,以解决特定的交互难题。

(1) 入口设计和任务开启阶段

在用户开始使用 AI Agent 的阶段,重点是降低上手门槛,帮助用户高效表达需求:

① 就地澄清 & 自动建议应用:在用户下达任务后,ChatGPT Deep Research 会就模糊的地方提问确认,Gemini Deep Research 则根据用户指令先进行任务拆解规划,再提供“修改方案”按钮,允许用户较早参与协作,但二者都需要用户在对话框中输入文本。更优的设计是提供选项加快决策,或允许用户“就地”在方案计划上直接编辑。

AI Agent 产品交互设计:设计模式与案例分析

② 环境/工作流适配应用:Gemini 针对 Google Workspace 设计了一整套解决方案,可以嵌入用户工作环境中,适时主动出现。当用户使用 Google Docs 时,Gemini 会提供与当前文档相关的 AI 使用建议;此外,用户打开 Gemini 首页后,可以选择上传 Google Drive 里的文件资料,再基于文件提出任务指令。

AI Agent 产品交互设计:设计模式与案例分析

③ 上下文/知识匹配应用:目前一些 AI Agent 产品允许用户建立和管理自己的知识库,比如 flowith 的“知识花园”、Devin 的“Knowledge”,目的是把短期记忆转化为长期记忆,以储存固定规则、用户偏好等,加强未来行动决策的效率和准确性。另外一个案例是 Thoughtworks 为客户搭建的一个 DevOps 领域的 AI Agent,当用户开启新任务时,AI Agent 产品可以自动搜寻和关联相关“知识”,以标签形式呈现并允许用户增删编辑。

AI Agent 产品交互设计:设计模式与案例分析

(2) 过程呈现与人机协作阶段

在任务执行过程中,设计重点是增强透明度、支持用户灵活介入,以及避免认知超载:

① 注意力引导应用:AI Agent 界面通常由以下核心元素构成:1)用户输入与对话框;2)对话记录和 AI Agent 工作过程展示区域;3)任务步骤与进度指示;4)结果预览/代码脚本窗口。像 Manus、Gemini Deep Research 等 AI Agent 产品,将对话记录、任务进度、代码和结果多个模块整合在一个界面,并会通过窗口缩小、折叠等方式弱化非核心信息,但多模块间的对应关系不甚清晰,而 Cursor 和 Devin 这类编程助手的设计可圈可点。Cursor 采用高亮的形式,将对话记录中的分解步骤与具体代码对应上,绿色代表新加或延用,红色代表删除的代码;Devin 则提供”Follow Devin”窗口,用户可通过下方进度调定位到任意步骤查看详情。

AI Agent 产品交互设计:设计模式与案例分析

② 思考外显应用:目前 AI Agent 产品都很重视思考、行动过程的透明化,信息源标注已相当多元,包括注释、超链接、悬停浮窗等设计样式,网页读取过程也做到实时透明化;此外,同一界面内多模块之间的对应关系开始被关注,比如 Grok 用纵向进度条展示分解步骤,它同时起到锚点或导航菜单的功能,用户点击其中一个步骤可以在右侧打开查看详情;GenSpark 在文字样式上把对话内容和执行情况进行区分,用户可点击“View”按钮在右侧预览窗口查看工具调用、引用信息等详情。

AI Agent 产品交互设计:设计模式与案例分析

③ 暂停-反馈-继续应用:用户通过对话框下达指令后,Genspark 提供暂停按钮,用户可随时中止、继续任务,用户输入修改意见后,任务会从头重新运行;Devin 在编程过程中时遇到需要共同决策的关卡时,比如 API 调用、数据存放方式等,会暂停询问用户意见,也会主动建议用户添加为“知识”下次使用;Cursor 则在关键节点提供“Accept”和“Reject”按钮,让用户知悉和确认代码改动情况。

AI Agent 产品交互设计:设计模式与案例分析

(3) 结果展示与结果迭代阶段

任务完成后,关键是让结果易于浏览、使用和改进:

① 就地澄清应用:如果利用 v0 和 Cursor 等代码生成类 AI Agent 搭建网页、手机APP等产品,通常可以实时预览效果和源代码,而无需打开或跳转到新标签页,提高了用户协作的效率和准确度。在 Cursor 中,用户可以在主窗口直接编辑AI生成的代码,无需通过对话框输入修改意见,也不必重启整个任务。v0 甚至支持用户选中界面上某一局部(比如一个图表或卡片)进行修改或局部重新运行。借鉴这一设计,对于 AI Agent 产出的文档、报告等成果,都可以允许用户在原地编辑,或选中某一行打开对话浮窗进行编辑修改。

AI Agent 产品交互设计:设计模式与案例分析

② 环境/工作流适配应用:AI Agent 生成的结果,往往并不是用户工作的终点,后面多半要将代码、报告、图标数据等成果集成到日常工作流中,或需要根据其他平台工具中的反馈,回到 AI Agent 进一步修改成果。上文提到,Gemini 已融入 Google Workspace 之中,如 AI 基于 Google Doc 生成的内容,可以直接保存到 Google Drive 或插入打开的文档中,不必费时费力地手动迁移。再比如,Devin 支持跨平台对话能力,当有人在 GitHub 中针对某一段代码留言后,Devin 一方面会在 GitHub 显示已收到反馈,同时会在 Devin 环境中知会用户,并提供链接供点击查看。

AI Agent 产品交互设计:设计模式与案例分析

四、结语

随着 AI Agent 从简单的问答工具向协作伙伴、数字生产力转变,技术逐步走向成熟,设计获得更大的发挥空间,正成为这类产品的差异化竞争点,以及用户群能否扩大的制胜关键。

通过对 Manus,Cursor,Gemini 等产品进行分析,可以看到,AI Agent 的交互设计在遵循以下原则的基础上仍在进行演变:

  • 透明化和可解释性:让用户看到 AI Agent 的工作过程、信息来源和决策依据,降低 AI 幻觉、算法偏见以及数据滥用等隐私风险,从而提升用户信任;
  • 认知减负:通过合理的信息架构、界面布局和视觉引导,让产品易懂易用,减轻用户认知负担;
  • 人在环路(Human in the Loop):在自主高效与用户可控之间寻找平衡点,支持用户协作和持续迭代;

未来,随着技术的发展,我们期待看到更多创新的交互模式,如多模态融合(融合语音、文本、视觉等多感官交互)、情境感知(根据使用场景自动调整内容元素)、个性化适应(根据用户习惯定制交互流程,提供情感化和个性化体验)等。这些设计将进一步模糊 AI 与人之间的界限,让 AI Agent 真正成为用户的合作伙伴。

相关资讯

模型吞噬代码,Agent重构世界:当AI Agent与模型协同进化

大家好,我是肆〇柒。 AI 圈的进化速度之快,已是不争的事实。 去年,MCP(模型上下文协议)发布,随后 AI Coding 赛道愈发热闹,Cursor、Cline、Devin、MGX 等产品层出不穷。
5/29/2025 9:57:38 AM
肆零柒

全网爆火的Manus到底能做什么?超多演示案例来了!

关注科技 AI 圈的同学,在 3 月 6 号这天都被 Manus 刷屏了,那么他是个啥呢? 和 DeepSeek 和 Open AI 有什么区别呢? Manus 官网上是这样说的“Manus 是一个通用的人工智能代理,它连接思想和行动:它不仅会思考,还会提供结果。
3/11/2025 12:54:46 AM
益达

速通BOSS需求!零基础AI Agent高效工作流设计指南

此次会连载一套 AI-Agent 构建的系列,主要分为三部分,首先是速通 AI-Agent 构建的工作流基础,然后是通过 ComfyUI 作为案例来复盘如何快速上手工作流平台,最后则是借助 Agent 平台构建一个 AI Agent 案例,本系列意图主要是帮助大家贯通工作流的搭建形式,并尝试思考为自己的工作搭建一些可用的 AI 助手,或是提供构建的方法指引。 无论你是产品经理还是设计师,你会发现商业场景的 AIGC,几乎都没有办法通过一段需求描述或是简单的 Agent 对话就搞定的,你需要更专业更复杂的 AIGC 过程,那么如何理解复杂? 实现专业?
3/18/2025 8:22:14 AM
泡泡bing
  • 1