这是用户在 2025-7-9 18:49 为 https://uxdesign.cc/where-should-ai-sit-in-your-ui-1710a258390e 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?
Sitemap
Get unlimited access to the best of Medium for less than $1/week.

UX Collective

We believe designers are thinkers as much as they are makers. https://linktr.ee/uxc

你的 UI 中 AI 应该放在哪里?

描绘新兴的 AI UI 模式以及空间 UI 选择如何塑造 AI 体验

8 min readJun 10, 2025

大型语言模型(LLMs)和 AI 代理的兴起让聊天机器人等熟悉的 UI 模式得到了超级充电,但一波新的界面布局正开始形成。现在真正的机遇在于将 AI 更深入地嵌入到复杂、面向任务的界面中 。从右侧面板助手和无限画布到语义电子表格,这些空间选择不仅仅是设计决策,它们从根本上塑造了用户发现、信任和与 AI 互动的方式。

本文探讨了七种新兴的 UI 布局以及 AI 代理的感知角色,通过可发现性、用户交互模式和代理能力在体验分析每种布局如何影响用户行为和期望。

Zendesk’s chat window provides real-time support, guiding users through automated help or human agent

1. 聊天机器人小部件中的客服代理

右下角的浮动聊天机器人长期以来一直是顾客支持的熟悉且标准的入口点,例如 < a id=0 >Zendesk 和 < a id=1 >Intercom 等平台所示。

  • 可发现性: 右下角的放置使其易于发现,同时不会过于侵扰,作为一个微妙但一致的视觉元素。
  • 交互模式: 聊天机器人小部件充当一个< strong id=1 >次要异步界面 。用户可以根据需要打开或关闭窗口,使其非常适合轻量级的、非侵扰性的支持时刻。
  • 代理感知的角色和能力:AI 的角色期望仍然局限于任务和被动响应。虽然之前仅限于基于规则的流程,但现代 AI 聊天机器人现在能够保持上下文记忆、个性化回复,并自动化后台操作(如订单查询或密码重置),所有这些都不需要人工干预。
  • 局限性: 由于空间有限,它们不适合主动的多步骤推理或创意协作流程。

2. 内联覆盖提示用于精准辅助

内联覆盖提示,例如在 NotionGrammarly AI 中,作为交互式、上下文敏感的建议或操作,直接出现在文本或内容区域,提升用户生产力和编辑效率。

  • 可发现性: 内联提示通常通过下划线、悬停图标或上下文弹出框等微妙提示浮现,并且通常由用户操作(例如输入、悬停、选择)触发。
  • 交互模式: 内嵌提示是一种动态增强工具 。用户可以立即与建议互动,接受、编辑、撤销或内联重新生成内容。低摩擦界面让用户保持控制权,同时维持任务连续性。
  • 代理感知的角色和能力: 代理被视为“ 精准助手 ”,提供微观级支持——重述句子或总结段落,或根据用户的实时输入和意图完成代码片段。 例如 Grammarly 的内联提示具有高度上下文感知能力。它们分析您当前正在撰写的文本,包括语气、风格、受众和目的,以定制建议并生成内容
  • 局限性: 内联代理不适用于开放式创意探索或需要更广泛情境推理或多步骤逻辑的任务。

3. 无限画布上的创意协作者

概念 "无限画布" 由斯科特·麦克劳德在其 2000 年出版的著作 《重新发明漫画》 中推广,他提出数字漫画可以摆脱纸张页面的限制,允许在任何形状或方向上进行无限画布上的故事讲述。

基于这一理念,无限画布工具已发展成为提供用户近乎无限二维工作空间的数字应用。像 TLDrawFigmaMiro 这样的工具采用无限画布模式,以支持视觉思维和探索性工作流程。

  • 可发现性:AI 功能通过上下文触发器展现,例如当用户悬停或选择画布对象(如便利贴、文本、形状)时。
  • 交互模式: 用户可以通过针对特定元素的本地化、异步提示输入来调用模型,而不会打断更广泛的创意流程。(例如:生成文本、重命名图层、建议布局) 此外,与基于聊天的交互不同, 多个并行 LLM 调用可以在画布上共存。 例如 Make.TLDraw,用户可以直接将草图、文本提示和标签添加到画布中,并在周围内容上多次调用 AI
  • 感知到的角色和能力: 在此,AI 扮演“ 创意合作者 ”的角色,根据空间上下文而非线性流程进行响应。它支持诸如创意生成、内容优化、布局建议和视觉增强等任务,并将画布本身视为提示表面。
  • 局限性: 这种方法在构建 Lovable 应用或需要全局文档意识(如 Grammarly)时,对严格版本控制的需求并不理想。基于画布的代理通常在本地对象集群上操作,这使得它们更难对整个工作空间保持情境感知。

4. 中心舞台 通用助手

这种界面模型将 AI 置于用户体验的中心,通常表现为一个全宽、垂直堆叠的面板,由文本输入和对话线程锚定。常见于 ChatGPT、Perplexity 和 Midjourney(通过 Discord)等工具,它支持以提示为先的自由形式交互风格。

  • 可发现性: 界面有意保持极简,重点在于输入框。用户通过自然语言发起交互,通常由占位符文本、过去的聊天记录或示例来引导探索。
  • 交互模式: 提示是核心交互方式。用户通过开放式查询驱动会话,通过后续追问、澄清或提示工程迭代优化输出。它支持灵活的节奏和自我导向的探索。
  • 代理感知的角色和能力:AI 被定位为“ 通用助手 ”,能够回答问题、生成内容并在写作、编码、设计或研究等不同领域执行任务。其感知优势在于广度、适应性和创意支持。
  • 局限性: 不适合结构化、多步骤的代理工作流,如应用构建、表单填写或长上下文决策
Tools like Lovable uses agentic workflows as the primary mode of interaction, enabling users to create complex, creative outputs such as web applications through iterative AI-assisted steps

5. 左侧面板的战略创意伙伴

在这个布局中,AI 助手被放置在一个持续性的左侧面板中,作为生成内容、代码或结构化输出的协作引擎。
ChatGPT CanvasLovable 这样的工具采用这种设计来支持复杂、迭代的流程。

  • 可发现性: 为了强调共同创作,将聊天窗口放置在左侧面板与主导的从左到右“F 形状 ”扫描一致。这个面板通常包含聊天界面、提示控制和会话记忆,使其功能持续可访问。
  • 交互模式: 这种布局支持多轮共同创作 。用户在持续的反馈循环中提示、完善和测试输出,更改会反映在相邻的右侧工作区。聊天和输出之间的分离鼓励对话式的设计过程。
  • 代理感知的角色和能力:AI 被视为“ 战略合作伙伴或共同创作者 ”,通过来回互动帮助用户构思、构建和演进复杂输出。这些代理通常展示出高级推理和规划能力,以提供有意义、上下文感知的协助。
  • 局限性: 对于轻量级任务或在屏幕空间受限的移动界面使用效果较差。模糊的提示可能导致无意且不可见的行为( 例如 Lovable 等 AI 代码生成工具中的错误 )。
Tools like GitHub Copilot acts as a helper for users engaged in a primary complex tasks such as writing, emailing or coding

6. 右侧面板上的深度上下文专家

这种布局将 AI 置于可折叠的右侧面板中,作为沉浸于复杂主要任务的用户的按需助手。例如 Office 应用中的 Microsoft CopilotGitHub Copilot、Gmail Gemini 或 Cursor

  • 可发现性: 放置在右侧边缘面板,允许用户专注于中央画布,同时保持助手易于发现且不具侵入性。
  • 交互模式: 用户可在特定时刻调用 AI 来协助执行任务,如总结、起草、转换或调试。与主动式覆盖层不同,它尊重用户节奏,仅在请求时提供帮助。
  • 感知的角色和能力: 助手被视为一个“ 深度上下文专家 ”,能够提供有针对性的、推理驱动的支持——例如自动生成演示文稿、管理通信或支持企业级编程,而不会主导体验。
  • 局限性: 不太适合以提示为中心的 AI 优先体验。其微妙的存在可能被新手用户忽视。
Tools like AnswerGrid turns a free-form prompt into a table of results, using multiple AI agents to search the web and databases for relevant information

7. 网格界面中的分布式研究代理

一种新的范式正在兴起,传统的电子表格网格变成了用于查询、研究和语义交互的智能表面。像 AnswerGrid Elicit 这样的工具将熟悉的表格布局转化为动态的、由代理驱动的系统,用于数据生成和综合。John Maeda 讨论了 “语义电子表格” 的愿景,在这种愿景中,电子表格不仅仅是一个静态的公式网格,而是一个理解内容和上下文的动态单元格网络。在这种模型中,每个单元格有点像电子表格中的 智能代理

  • 可发现性: 这些界面保留了经典的电子表格布局,具有行、列和单元格。AI 输入通常从一个顶层提示或查询字段开始,之后单元格会自动填充结构化结果。
  • 交互模式: 与线性问答或基于聊天的流程不同,AnswerGrid 中的用户通过提供提示或细化列定义进行交互。在后台, 多个 AI 代理异步工作,抓取数据、解析来源并动态填充表格 。电子表格本身成为提示画布和输出查看器。
  • 代理感知的角色和能力:AI 可被描述为嵌入表格中的“ 分布式研究代理 ”。在 AnswerGrid 等工具中,模型从网络获取实时数据,按上下文填充每个单元格。Elicit 从科学文献中构建“活文档”,自动跨行进行综合 。每个单元格都像是一个微型代理,共同构成一个智能整体。
  • 局限性: 这些系统是新兴的界面,似乎最适合用于研究、分析或结构化内容编译。它们需要用户对期望输出的结构有清晰的理解,并且可能让不熟悉电子表格或数据管理流程的人感到不知所措。

Conclusion

LLMs 不只是被查询的工具,它们是一种新的计算媒介 ,我们才刚刚开始理解它。正如 GUI、网络和移动界面在过去几十年里重塑了设计一样,LLMs 要求我们重新思考智能如何在我们的产品中存在 ,不仅在于它说什么,还在于它所处的位置、如何被触发以及如何引导用户

像聊天机器人、侧边栏、语义网格、无限画布这样的空间布局并非纯粹的美学选择。它们定义了用户对 AI 角色形成的心理模型,而它的位置会塑造可用性、功能性和信任度。随着我们进入这个新纪元, 设计 AI 如何呈现出来将和设计它能做什么一样关键

UX Collective
UX Collective

Published in UX Collective

We believe designers are thinkers as much as they are makers. https://linktr.ee/uxc

Sharang Sharma
Sharang Sharma

Written by Sharang Sharma

Product Design + Research in Conversation AI, XR & Robotics. Previously worked for teams at IDEO, Miko Robotics, Diamler www.sharangsharma.in

Responses (9)

芝士
芝士

What are your thoughts?

我发现关于'无限画布'概念的讨论非常有趣,特别是像 TLDraw 和 Figma 这样的工具如何利用它进行视觉思考。AI 在这样的空间中充当'创意合作者'的想法真正具有创新性。空间 UI 选择如何如此有效地塑造 AI 交互令人惊叹。

18

干得漂亮。在我关于 AI 企业解决方案 UI 的书里,我主要关注用例与用户体验的匹配。有时候,内联是最合适的,甚至是一个结合内联然后是“更多详情”视图的混合方法……

2

在 AI 放置中考虑用户信任和理解对于成功的 UI 设计至关重要。

2