AI + Design，探索 AI产品界面设计范式（下）

在 AI 产品的交互中，一个关键节点就是用户向 AI 发出请求后，到它给出回复之前。这个短暂的等待过程，用户体验的好坏往往就藏在这些细节里。如何让用户清晰地感知到系统正在“干活”，而不是卡住了，这是设计上需要认真对待的一环。

设计目标

处理过程的反馈，核心在于通过流式输出等方式，给用户一个及时的回应。这种反馈要让用户能清楚地“看到”AI 的工作状态，从而建立起合理的等待预期。更关键的是，在一些业务场景中，完整地展示 AI 的思路和处理阶段，能有效降低系统的“黑盒感”，从而提升用户对系统的信任和理解的深度。

内容动态加载

动画加载

系统在接收到用户请求后，需要立刻触发一个状态反馈。一个轻量的动画效果，就足以告知用户“系统已收到，正在处理”。这个动画必须即时触发、设计得简洁克制，让用户感受到明确的响应，同时又不能喧宾夺主，造成视觉上的干扰。

流式输出

这是 AI 处理文本内容时最直观的实时反馈形式。默认情况下，打字机光标的逐字打出效果能让用户感知到生成的节奏。但注意，当模型响应速度极快时，直接展示完整内容反而是更好的选择，避免动画成为等待的负担。核心原则是保持输出内容可读，让用户能实时阅读已生成的部分。

进度展示

适用于异步生成场景。通过百分比进度条或阶段提示，告知用户当前任务进展到哪一步。尤其是对于那些耗时较长的任务，如果能提供一个预估的完成时间，对用户建立心理预期、减少焦虑感非常有帮助。

异常状态展示

生成失败

当请求处理失败时，需要及时明确地展示失败原因，并给出用户可采取的措施。失败提示信息要做到醒目但不刺激，文案简洁，同时提供重试等后续操作建议。

生成终止

这包括了用户主动中断和系统自动终止两种情况。无论哪种情况，系统都应保留已生成的内容，并清晰提示当前状态。如果是系统自动终止，还要说明原因并提供下一步的建议。

思考过程展现

展示思考阶段

方便用户理解 AI 的处理逻辑和进展，这对于建立信任至关重要。在耗时较长的场景（比如深度搜索）中，可以展示完整的处理步骤；而在耗时较短时，只需要简洁地展示当前思考状态即可。

展示思考细节

通过可展开/收起的形式，呈现 AI 推理的具体步骤和依据。这个设计既要满足想要深入了解决策过程的用户需求，又要避免信息过载给普通用户带来困扰。这是一个很好的平衡点。

反馈｜结果应用

在 AI 呈现生成结果后，需要给用户提供一套快捷操作能力，包括复制、重新生成、反馈等基础功能，帮助用户高效地使用和处理内容。

设计目标

结果应用组件必须结合实际场景，提供必要且便捷的内容处理能力。通过合理的操作项布局和及时的状态反馈，让用户能够轻松地使用和管理 AI 生成的内容，从而提升整体交互体验和效率。

复制

这是最常用的内容应用方式。点击后立即将内容复制到剪贴板，同时图标切换为完成状态给予反馈。复制的范围包括文本、代码等，要保证格式的完整性。

重新生成

用于优化或改进当前结果。点击触发重新生成请求，最好能支持多版本结果的切换对比。新生成的内容需要在界面中平滑切换，保持良好的过渡体验。

反馈

通过点赞/点踩来收集用户对内容的评价。操作后图标应立即反映选择状态，清晰展示用户的评价结果。在特定场景下，还可以通过弹窗收集更具体的反馈，提供快捷选项的同时保留自由输入的方式。

删除

用于移除不需要的回答内容。考虑到操作的不可逆性，应使用警示色进行提醒，并设置二次确认机制避免误操作。确认删除后，内容要平滑地移除。

朗读

将文本转换为语音输出。点击开始播放，再次点击则停止。

引用

快速将 AI 回答作为新对话的引用内容。点击后自动填充到输入区域，方便用户基于已有回答继续对话。引用时要保持原文格式，确保上下文的连贯性。

反馈｜结果展示

AI 处理完成用户需求后，需要以结构化、易读的方式呈现各种类型的回答内容。

设计目标

结果展示需要合理规划信息层级，让重要内容和结构化信息更易识别。针对文本、图片、代码等不同类型的内容，应采用恰当的展示形式。既要保持视觉风格的统一性，又要充分考虑长文本的阅读体验，避免信息过载影响理解。

文本内容

作为最基础的展示形式，需要处理好单行文本、多行文本和结构化文本（如列表、标题段落等）的呈现。通过合理的间距、字号和段落划分，提升长文本的可读性。对重点内容可使用高亮、加粗等样式突出，但需控制使用频率，避免干扰。

图片内容

展示 AI 生成或处理的图片结果。默认以合适尺寸展示，支持预览大图和缩放细节。多图场景需注意排版美观，加载时提供占位图以避免布局跳动。

代码内容

为展示代码片段设计专门容器。使用等宽字体，支持代码语法高亮以增强可读性。提供代码复制功能，方便用户使用。代码过长时支持横向滚动，保持代码格式完整性。

交互卡片

用于特定场景下需要用户操作的结构化内容，如表单填写、参数调整等。卡片内可包含按钮、输入框等交互元素，操作需提供明确的反馈。

其他

用于展示表格、数学公式等特殊格式内容。可以与普通文本内容混合展示，保持整体视觉一致性。特殊内容的展示需考虑性能和兼容性，必要时提供降级方案。

内容折叠

针对超过一屏的长内容，提供折叠功能以提升浏览效率。默认展示预览内容，用户可根据需要展开查看完整信息。折叠状态需有明确提示，展开/收起过程动画需流畅。

内容参考来源展示

在 RAG 等需要提供引用依据的场景下使用。参考来源默认收起以减少干扰，用户可以通过 hover 或点击方式查看详细引用内容。来源信息需简洁清晰，增强内容可信度。