一、前言
自 2022 年 11 月 ChatGPT 横空出世以来，世界好像被颠覆了。各类生成式 AI 迅猛发展，其中生成式 AI 帮忙以其独特的创造力和智能性，重新定义了许多产品的运用办法。它通过先进的自然语言处理技术，不仅能明白用户的指令和问题，还能生成回答、撰写文本、甚至创作内容，拓展了人机交互的边界，带给人们极大的便利。
全球的技术巨头和创新型初创公司都纷纷投身于生成式 AI 这一必争之地，各大厂商都在积极探索如何将生成式 AI 帮忙融入到自己的产品和服务中。
本文将从 UX 设计的角度，拆解生成式 AI 帮忙的关键设计要素，思考 AI 帮忙产品的设计原则与体验评估思路，并给出具体业务案例的实践过程，希望能给身处 AI 浪潮中的你，一点帮助和启示。
二、关键设计要素
生成式 AI 帮忙（以下简称 AI 帮忙）的界面设计集中于打造一个直观、友好的交互体验。
目前主要通过文本和语音这两种最自然的交流办法与用户进行互动。它强调友好的提醒和引诱、清晰的输出输出机制，以消除用户运用的陌生感和不安感，同时扩展了多模态交互、个性化设置和辅助功用，适应不同用户的需求。另外，在界面上也注重展现 AI 生成内容的易读性和美观性，运用户在运用时感到轻松愉快。
下文将围绕 AI 帮忙最核心的输出输出页面中的关键设计要素进行拆解和分析，主要包括功用/指令/智能体的应用、输出输出过程以及语音通话等。
1. 功用
AI 帮忙中的功用，指的是 AI 帮忙能够执行的具体任务或操纵。例如，文本明白、语音辨认、翻译、搜索信息等能力。
通过我们的调研，发现很多设计师会把功用的概念与指令和智能体混淆。指令是用户给 AI 帮忙的命令，用来激活或运用特定的功用，而智能体具有一定智能的软件程序，能够执行任务、解决问题或与用户进行交互。在 AI 帮忙中，智能体可能是负责特定任务的实体，如搜索智能体、推荐智能体等。
简单来说，功用是 AI 帮忙已经会的本事；指令是告诉 AI 帮忙你想要它做什么；智能体是 AI 帮忙里面的小帮手，各自负责不同的任务。
2. 功用引诱
AI 帮忙有丰富的功用，受限于产品形态，在功用的引诱上有 3 个区域的触点：
欢迎卡片：做新手引诱和推荐快速指令展现。
输出框上方：推荐快速功用指令。
输出框内部：通过引诱文字推荐功用。
① 欢迎卡片
绝大多数的产品都会在欢迎卡片里供应快速功用，点击后当作快速指令会被填充至输出框（或直接向 AI 提问），通常会加上“可以试着问”、“可以这样问”、“我有以下技能”等等引诱性语句，能清晰的引诱用户运用。
大多数产品都以 2*N（3 居多）的形式展现，尽可能在有限的空间里放下最多的功用入口。存在较多功用，会供应「换一批」的能力，或供应指令中心的入口。快速指令在 UI 设计上，入口 icon 较多运用 emoji，原因是快速功用数量多，且很难用图形展现，因此须要设计成本低且能灵活配置的解决方案。当然如果推荐功用较少，也可以像钉钉文档一样，运用个性化的 icon 处理。
根据不同产品的定位，也可以不展现快速入口，如 Kimi 能分析网址和文件，直接用文字轻量化地引诱用户添加内容，但是没有明确可点击的入口，引诱性较弱。
② 输出框上方
点击后快速指令填充至输出框，因此放在输出框上方能让用户感知到二者的联系，并支持横向滑动展现更多入口，但承载能力有限，且不方便用户感知全部的功用。
③ 输出框内部
采用文字提醒的办法，告知用户可以运用的快速键触发相应的功用，但文字提醒效果没 btn （按钮 button 缩写，下同）明显，导致容易被忽视。
3. 功用中心
随着 AI 帮忙的迭代，功用会越来越多。此时就须要功用中心来聚合全部的功用，并将它们清晰的展现给用户，有三种展现办法。
大模态弹窗：腾讯运用大模态弹窗。让用户在不跳脱出当前层级关系的情况下，也能有清晰的展现空间和筛选能力，方便用户完成功用选择。
独立页面：钉钉运用独立页面，展现面积大，功用过多时可以运用，支持运用清晰的 Tab 分类和快速帧等功用，对功用进行细致的分类。且支持对功用做较详细的图文介绍，方便用户明白功用并建立预期。
浮层：如云一朵，点击功用中心后会调起浮层，支持做简单的 Tab 切换来分类功用，层级关系简单更加轻量化，支持承载数量较少的功用。
以上三种展现办法并无绝对好坏之分，须要设计师根据自身产品的情况来选择合适的办法。
4. 快速指令
指令是用户给出的命令或请求，AI 帮忙根据指令来执行相应的功用。例如，用户可能会说“请翻译这段话”，这里的“翻译这段话”就是一个指令。
快速指令能有效提高用户输出指令的效率和准确性，它供应了一种直观、简洁的办法来与 AI 工具进行交互，运用户能够更轻松地完成任务，并给用户供应了一种跟 AI 沟通的范例。
① 推荐功用
上文提到的推荐功用，往往都会以快速指令的形式填充到输出框内，在功用推荐的卡片上甚至会外显快速指令，让用户有心理预期。
② 猜你想问
通过分析用户的习惯和上下文，AI 工具能够预测用户可能想要提出的问题或需求，并主动供应相关信息或建议。这种主动服务的办法减少了用户的搜索时间，从而提升了用户体验。同时通过供应主动、智能的服务，增强了用户对 AI 工具的依赖和信任。
在设计上猜你想问的触点有两处：首次进入和回答结束。
首次进入：为用户供应一个友好的、有引诱性的开始，帮助用户更快地适应和运用工具。反之，如果推送不准确或不符合用户的实际需求，可能会让用户感到困惑或不满。
回答结束：AI 能够根据用户的反应和上下文进行进一步地推测，这通常能够供应更准确、更相关的建议或信息。这种推送能够让用户感到 AI 工具能够明白他们的需求并供应有价值的信息。
5. 智能体
在 AI 帮忙中，智能体是负责处理特定任务的模块，如语言明白智能体、推荐系统智能体等。
① 智能体中心
和功用中心一样，在智能体中心里聚合了全部的智能体，通过设计清晰的 Tab 分类和检索功用帮助用户查找自己想要的内容。
② 智能体运用
智能体的操纵流程和 AI 帮忙本身的操纵要保持一致，层级关系也须要兼融进 AI 帮忙内。比如豆包，将智能体的聊天记录放在在 AI 帮忙的聊天列表页内，并根据头像和名称帮助用户完成智能体的身份辨认，结构清晰方便用户找到功用并运用。
而 Kimi 支持通过输出框快速运用智能体的能力，选择完成后会外显在输出框上方，此时向智能体提问，原本 AI 帮忙的头像会变成智能体，给予用户正在运用的反应。
6. 输出框
输出框承载了用户与 AI 沟通中“说”的需求，最重要的功用是输出。
① 输出办法
根据 AI 帮忙功用的不同，输出框的输出办法也不同，常见的输出办法如下：
文本输出：最基本的办法，供应一个易用的文本框，让用户可以方便地输出文题或指令。
语音输出：语音输出按钮允许用户通过语音指令与 AI 互动，须要注意语音辨认的反应。
多模态输出：结合文本、语音、图片、附件、槽位等多种输出办法，提升交互的灵活性。
快速输出：根据上下文供应常用的快速回复按钮，方便用户一键选择常用选项或回复。或运用快速键（如“@”或“/”）调出可用的指令或文件等。
7. 功用要素
在输出框中，最低配就是仅有输出区，随着各 AI 帮忙功用的完善，也越来越少见了。而高配就各有特色了，有语音输出、语音通话、文件上传、快速功用、发送、开启新对话这些固定入口，也有根据输出输出过程动态出现的停止生成按钮、槽位框、文案优化按钮等。
① 输出和发送 btn
输出区是输出框最重要的组成部分，支持用户进行文本输出。
同时也是用户引诱的最佳区域，起初用“请输出 XXX”这些基础文案完成了大众的 AI 教育。随后随着大家的认知增强、功用的丰富以及其他引诱区域的不断开辟，现在 Web 端的引诱文案更加偏重更高级功用的引诱，如快速功用调起和换行等。
发送 btn 也是重要组成部分。可以帮用户区分“可用”和“不可用”状态（如多数 AI 帮忙设定为 AI 回答完毕前无法发送）。设计时可以通过颜色差异反应给用户，如果是不可用状态，最好是通过反应告知用户不可操纵的原因。
受限于空间，移动端的发送 btn 通常默认隐藏、输出内容后才显示。
② 语音按钮
当前语音输出在移动端运用较多，受限于电脑的办公场景，语音录入在 Web 或桌面端较少。我们之前发文提到过一个 AI 智能培训的案例，利用键盘的操纵配合语音的录入。
百度云的云一朵也支持语音录入，并供应了两种语音输出办法：
按住空格键录制、松手发送、esc 取消发送。
点击语音键录制、点击发送按钮发送、点击关闭按钮取消发送。
而移动端的语音按钮与 IM 语音输出大致一样，受限于篇幅不再赘述。
③ 上传文件
AI 帮忙的上传文件功用允许用户将本地文件上传到 AI 系统中，以便进行后续的处理、分析或存储。
在状态反应方面，须要注意的是无论在 Web 端还是移动端都须要给用户供应清晰的反应，包括：
进度反应：供应实时的上传进度显示，让用户随时了解文件上传的进度。
状态反应：显示上传成功或失败的信息，供应相应的操纵引诱。尤其是遇到错误时，要给用户供应清晰的提醒信息，如文件格式不支持、文件大小超过限制等，并供应重新上传或取消上传的操纵选项，以便用户根据提醒进行相应的处理。当然，如果存在文件的上传限制，最好在操纵前就给出提醒反应。
在布局方面，已上传的文件与输出框的位置关系须要灵活处理，既不可以影响文本输出，又须要考虑与输出框的邻近性与统一性；此外，还要考虑上传文件数量对于布局的影响。
④ 槽位
在用户给的信息太少，不足以生成可用的答案时，通常须要用户补充一些结构化的信息。这些信息可以通过两种办法录入：答案气泡中或输出框。答案气泡的我们后文讨论，这里讨论下输出框。
在输出框中可以通过槽位来录入，槽位由一个或一组输出框组成，区别于字段化的表单，这些输出框之间往往由一句话或者自然语言来连接。
须要注意的是，槽位可能增加用户的操纵复杂度，尤其是涉及到推荐指令修改时，将槽位误删等情况；可能占用过多空间导致页面局促，让本就不富裕的输出框雪上加霜，影响编辑体验。
考虑槽位适合哪些组件，交互过程不宜太复杂，建议只当「单选选择器」或「输出框」运用。
考虑容错性问题，如误删后挽回办法。
区分槽位与字段的关系，如增强差异化，提升用户的认知。
⑤ 文本优化
文本优化功用是为了提升用户的输出效率、让 AI 更加准确地明白用户意图。
通常在用户输出文本内容后激活，点击可以对已输出的文本进行优化，比如纠正错别字、简化表达、补全提问的维度（比如背景、范围、要求、指令等）。
这其实是 AI 对于用户问题的一次“预明白”，生成的优化文本可供用户进行确认、修改，以此生成更准确的回答，提升对话效率和运用体验。
这里须要注意的是功用入口的可见性以及各状态和对应操纵的设计，将会在后面业务案例部分与大家探讨。
⑥ 清除/新对话按钮
当用户想开启新话题、避免历史信息干扰时，当对话信息过长影响性能时，或仅仅当用户希望界面更清爽时，都可以选择清除对话或开启新对话。
按钮应放置在用户容易找到且不会干扰到主要交互流程的地方。在 Web AI 帮忙中，这些按钮可以放在界面的底部或侧边栏中。须要注意的是，清除/新对话按钮通常与对话管理功用关联出现，用户可追溯之前的历史对话。
8. 回答消息体
在接收到用户的问题或指令后，AI 会生成回答。回答可能是信息、指导、建议、拒绝、互动等，这须要丰富的消息体类型来支持。总体来说，回答消息体包括纯文本、链接、图片、视频、按钮/选项、输出框、编辑器等类型。
① 文本消息
包含纯文本和富文本两种。其中纯文本以直接的文字回复，简洁明了，适用于简单的问答。而富文本则包含链接、加粗、颜色等格式的文本，适合供应更详细的信息或引诱用户进一步操纵。
② 多媒体消息
图片、视频、音频、代码编辑器等，可以丰富用户体验，适合展现产品、供应多媒体内容等。
③ 卡片式消息
包含标题、图片、按钮等元素的卡片，适合展现结构化信息，如新闻、商品、天气等。
④ 交互式表单
类似于槽位，交互式表单也是收集用户结构化信息的一种办法，可以字段化的表单形式出现在回答区域，来获取用户的更详细的信息。
除了一些须要引诱用户逐步填写信息的复杂场景（如预约、注册等），交互式表单通常以更轻量的按钮/选项、输出框的形式出现，用户可以快速选择或输出。用户操纵后信息状态发生变化。
相比于槽位，交互式表单的扩展性、可读性、状态显示与容错性会更好一些。
9. 对话气泡功用
在人与 AI 的对话中，内容通常以气泡的形式来显示，边界清晰，也便于添加功用。功用主要集中在对用户自己发送的指令和 AI 回答的内容做出反应和操纵。
① 展现办法
对话气泡的操纵区域分为常驻和 Hover 两种：
常驻：在 Web 端和移动端都有运用。Web 端经常在全页面采用，因为有足够的空间展现，而且方便让用户及时操纵；而移动端因为无法做出 Hover 效果，所以都采用常驻。
Hover：Web 端中尺寸局促的浮窗或抽屉会运用 Hover，但是 Hover 须要在设计时留出足够的预设空间，因此会造成气泡间的距离过大的问题。同时 Hover 的场景要考虑气泡间的排版问题，早期很多 AI 产品将浮层会出现的位置预留了空间，但是会造成未 Hover 时气泡的上下间距过大，浪费坪效。
现在很多产品都采用了从侧面出现的办法，解决间距问题，但是对气泡的长度有要求限制，不能满足空间较小的场景。个人认为最理想的解决办法是让反应浮层卡在气泡边缘，尽可能的节约空间。
② 反应操纵
用户指令和 AI 回答有不同的反应功用。
用户指令：包括复制、再次编辑和删除等能力，尤其是再次编辑，点击后可以将指令回显到输出框内，减少用户的操纵成本。
AI 回答：包括复制、重新生成、赞、踩、删除等常驻功用，不同产品间一定差异性，如文档类的支持将回答生成文档，从而促进转化。「重新生成」作为最高优的功用，往往放在最左侧，与其它操纵相互区分。
③ 中断操纵
用户有想要终止对话的场景，此时须要「停止生成」按钮来结束对话气泡继续生成文字。关于「停止生成」按钮的运用，不同设备的有一定差异：
Web 端：会在对话气泡下展现停止 btn，但由于下滑位移 btn 会逐渐下移，不易操纵，所以最保险的办法是输出框上方展现停止 btn，并设定安全距离，保证视觉上的平滑。
移动端：屏幕的尺寸较小，会选择节省空间的办法，如将原本的发送 Btn，变为停止 btn。
10. 生成过程交互
AI 帮忙工具的结果生成过程应注重用户的实时反应、结果的清晰展现和优化建议的供应，同时确保生成过程的可中断性和停止后的资源清理等细节问题。这样可以提升用户的运用体验，提高 AI 帮忙工具的效率和可用性。
生成中
即时反应：在生成过程中，AI 帮忙工具应该供应即时的反应，让用户了解当前的生成进度。例如：进度条、IP 动画或文字提醒。同时会反应会拆分成两个阶段。首先是 AI 辨认的过程，反应 AI 正在辨认用户问题，可以外显 AI 查询知识库的行为，如“参考了 10 篇文章”，提升答案的可信度。其次是结果反应的过程，AI 将生成的结果逐步反应给用户。
可中断性：生成过程中应允许用户随时中断，满足用户发现不须要继续生成或想修改的诉求。
避免干扰：生成中的界面应避免过多的干扰元素，如输出框置灰不再支持输出新内容，让用户能够专注于生成过程和结果。
生成后
结果展现：生成完成后，AI 帮忙应清晰、准确地展现生成结果。如文本类，考虑文字的可读性，如分段、关键文字加粗等要求，设计师要规划好文字场景下富文本的展现规范。或是图像类，考虑多图排版的策略，以及超出极限值的折叠或者分页展现策略。
操纵反应：对话气泡会展现操纵区域，帮助用户对回复内容完成操纵。
用户反应：鼓励用户供应对生成结果的反应，以便 AI 帮忙不断优化和改进生成效果。往往通过赞和踩的办法收集用户反应，如果想收集更深入的内容，也可在操纵后调起调查问卷。
优化建议：基于用户反应和算法评估，AI 帮忙可以给出优化建议，帮助用户改进输出条件或调整生成参数，以获得更好的生成效果，如上文提到的“猜你想问”或“你可以这么问”。
停止生成
保存进度：在停止生成时，AI 帮忙应能够保存当前的生成进度和结果，以便用户后续继续生成或编辑。
提醒信息：停止生成后，AI 帮忙可以给出相应的提醒信息，如“生成已停止”、“结果已保存”等，以便用户了解当前状态。
操纵引诱：停止生成后，应该反应下一步的操纵，如「重新生成」。
11. 语音通话
除了以文本为主的对话界面，很多 AI 帮忙都上线了语音通话功用，可以更便捷地满足一些化的场景。
① 通话流程
这个功用来源于手机语音通话，功用运用流程大同小异，可以拆解大概为：①启动-②连接-③人输出-④AI辨认-⑤AI输出-⑥结束。
语音通话功用一般独立于对话界面，通常以电话 icon 的形式作为入口，点击启动语音通话。
连接是功用初始化的过程，AI 辨认则用于信息处理和回答生成，辨认速度越快越接近真人语音通话体验。
一个完整通话通常是③④⑤往复循环，至于接听后是人先说还是AI先说，因产品而异。
② 关键要素
相比真人语音通话，对话对象真人变成了 AI 帮忙，带来两个明显的特征：
AI 不会抢话。所以在人输出的时候，须要告诉 AI“我说完了”。这个“我说完了”可以是 AI 自动辨认的（通常根据用户停顿时间辨认），也可以是用户手动操纵的（通常是点按发送）。
人也无法抢话。也就是说人无法在 AI 输出的时候同时说话。目前不确定是技术限制还是产品设定，总之即使要和 AI 吵架也要等对方说完再说，文明了许多（笑）。当然，各产品还是设计了“打断”功用，可以立即让 AI 闭嘴，换用户自己说。
无论是“我说完了”还是“打断”（尤其是“打断”），都造成了与真人通话显著的体验差异，使本可以解放双手的功用变得有些鸡肋。期待各 AI 厂商早日优化。
同样基于上述两点，界面状态与提醒就变得更为重要，以下是一些示例：
状态提醒：连接初始化时、信号不良时。
人说话前：引诱用户说话，如果有 IP 则作出期待的动作，同时提醒“请说，我在听呢”。
人说话时：主要是声波动效，如果有 IP 则作出倾听的动作，或者提醒“我正在听”或“点按可发送”。
人说话停顿时：主要是声波消失，同时提醒自动发送或点按发送。
AI 辨认时：若辨认时间长会带来体验的间断，须要给用户明确的反应和提醒，降低这种感觉，同时允许用户退出，提醒可中断此过程。
AI 说话时：AI 发出声音就是最直接的反应，如有 IP 则作出说话的状态，同时给出用户提醒“可点击打断”。
对于整个语音通话功用，还有必备的挂断键（点击结束通话）、暂停/继续键（通话中止/继续），以及通话结束后的对话文本详情。不同的产品还有些特色功用，如运用 IP 形象拟真（豆包）、实时字幕（文心一言）、角色选择（讯飞星火）等。
总体来说，各家产品设计都大同小异。在交互细节上有些差异，也还有提升空间。比如状态动效的表意性、状态动效与提醒的对应性、语义的简洁与易明白性等。
三、设计原则
基于 AI 帮忙的特点和概念设计要素，可归纳出生成式 AI 帮忙产品的八条设计原则，对于其他 AI 帮忙产品也同样适用。
自然语言处理能力的可视化
原则：确保用户清楚地知道 AI 帮忙对他们的指令有所回应，并展现出明白能力。
实现：当用户输出后，AI 帮忙立即给出回应，即使未生成答案，也会显示运行状态，例如显示“意图分析中…”、“正在联网查询…”等信息。
上下文感知和连贯性
原则：AI 帮忙须要保持对话的上下文，确保回复的连贯性和相关性。
实现：在对话框中，显示上下文历史或关键对话节点，让用户可以随时回顾并明白 AI 的连续回应。例如，显示过去几轮对话的摘要，或者供应“你刚才提到…”的提醒。
多模态交互
原则：支持多种输出输出形式，满足不同用户需求和运用场景。
实现：在同一个对话框中，允许用户切换或组合运用语音、文本、图片等多种输出办法，AI 帮忙也能以文字、语音、图片、视频、地图等形式回复。例如，在文本对话中插入地图卡片或视频播放窗口。
即时反应与确认
原则：在 AI 帮忙执行操纵或供应信息前后，及时给予用户反应和确认。
实现：用户发出语音指令时，显示即时的文本转换和明白反应。例如，输出框中实时显示语音转文字的内容，并在明白后用不同颜色或下划线标注关键词。
个性化与定制化
原则：根据用户历史行为和偏好，供应个性化的建议和回复。
实现：在对话中显示个性化选项或快速回复，基于用户的历史运用情况和偏好进行调整。例如，“根据你过去的选择，我推荐你这次也选择这个选项”。
透明性与可解释性
原则：让用户了解 AI 帮忙的工作原理，增加信任度。
实现：供应解释功用，当 AI 帮忙给出复杂的建议或决策时，用户可以点击查看详细的解释或背后的逻辑。例如，在供应健康建议时，AI 帮忙可以解释数据来源和分析方法。
误差处理与纠错机制
原则：有效处理误解或错误，并允许用户轻松纠正。
实现：在对话中嵌入纠错按钮或指令，让用户可以快速更正 AI 的误解。例如，当 AI 帮忙误解用户的指令时，供应“重新生成”按钮，让 AI 帮忙重新明白，或供应问题文本复制按钮，让用户修改问题。
情感明白与反应
原则：通过情感辨认技术，使 AI 帮忙更具人性化和情感关怀。
实现：在对话中，AI 帮忙可以辨认并响应用户的情感，例如在用户表达沮丧时供应安慰或鼓励。界面上可以显示情感标识或提醒，帮助用户感知 AI 的明白。
