AI知识库

53AI知识库

学习大模型的前沿技术与行业应用场景


AI产品设计指南——基于人机交互模型的AI界面设计范式【Ant Design】
发布日期:2024-12-31 07:54:24 浏览次数: 1692 来源:大醒说


上周和蚂蚁的设计小伙伴进行了一次关于AI界面设计范式的交流,几位设计师为爱发电,在忙碌的业务需求之余,查阅资料、文献,结合业务场景,总结了《RICH AI界面设计范式》,希望给遍地开花的AI产品,提供一些小小的指导,共同打造更好的AI产品体验~ 

0. 到底该如何设计AI产品?

在诸多AI 产品设计实践中,我们也经常冒出类似的困惑:

  • 图形界面操作不好吗?一定要用会话的方式吗?
  • 什么样的产品适合用会话交互完成?
  • 会话交互跟图形界面交互可以融合吗?
  • AI 产品设计的体验受到哪些因素的影响?
  • 如何去系统性的思考一个 AI 产品的设计?
  • ……

在 AGI 时代,机器已经可以理解更复杂、模糊的人们意图,也可以用几乎完全类人的方式与用户交流。这项变革的技术将引领我们不得不从过去的设计经验中跳脱出来,去尝试定义一个新的人机交互界面的范式,从而寻找体验的最优解。

RICH 正是我们提出的适用于当下 AGI 人机交互界面设计时代的一种范式的假设,它包含了四个设计要素:

  • Intention 意图
  • Role 角色
  • Conversation 对话
  • Hybrid UI 混合界面

每一个设计要素都在牵引着我们设计者需要关注的具体问题。


与AI共舞并非一蹴而就,就像我之前分享的内容:微软Copilot——设计背后的故事,提到的一样,AI更像是一个副驾驶一般的存在,在共同”驾驶“的过程中,离不开人&AI的多次交互,并非”一键完成“。

人机交互的本质是用户通过执行某种动作或行为输入给机器,机器理解并完成诉求后产出结果给用户,用户评估是否符合要求,如果符合,一个交互单元就完成了闭环。

↑ 唐纳德·诺曼提出的人机交互模型


AI 时代,体验还取决于机器是否听得懂我的意思,是否讲话比较好听等等一系列隐形的体验。因而针对这样一种新的交互特征,关键设计要素需要被重新抽象和定义,确保我们的设计关注点走在正确的方向上。

RICH 范式正是我们尝试定义的 AI 时代应该关注的设计要素集:

  • Intention 意图:
    AI 能够听懂并理解用户的意图,协助用户自动完成方案计划和步骤拆解,进而推动执行

  • Role 角色:
    AI 扮演了某种身份角色,来匹配用户的意图,也保障与用户的互动是顺畅、符合预期的

  • Conversation 会话:
    用户的模糊意图通过会话来逐步与 AI 对焦、拆解,用户的指令也结合其中

  • Hybrid UI 混合界面:
    用户的执行动作和机器的结果输出与反馈承载在融合了多种交互方式的界面当中



1. 意图设计 Intention

在人工智能领域,意图通常被定义为用户希望达成的目标,如查询天气情况、办理银行业务、预约服务等。这些意图并不总是直接表达出来,而是隐含在用户的言行之中。

在不同的领域和维度,意图也有不同的分类,如按照用户意图清晰度可分成意图清晰与意图模糊;按照用户与系统的交互目的可分为咨询信息类与执行任务类。

通过调研我们发现:大部分用户对于 AI 产品存在认知盲区,即不清楚 AI 能帮我实现哪些意图,以及往往没有能力准确表达意图,这在一定程度上阻碍了 AI 的有效应用。因此,如何提升用户对 AI 能力的认知,并设计出让用户能轻松准确表达意图的界面,成为当前 AI 设计领域待解决的重要课题。


1.1 明确意图类型

在意图设计的概览中,我们提及了意图可依据不同领域与维度进行分类。

  • 从用户意图清晰度,可分为意图清晰与意图模糊。
    通常来说意图模糊,通过对话的方式,能更加高效洞察与满足意图;而意图清晰的用户,通过简单的操作即可完成用户的目标,例如点击按钮或者图标等。
  • 从用户与系统间交互目的,可分为咨询信息类与执行任务类。
    咨询信息类意图主要关联用户的查看与搜索行为,体现了用户对于信息的获取意图;执行任务类意图主要关联用户的操作与管理行为,体现了用户希望系统执行特定任务或操作的意图。

  • Do 适合内嵌式:
    以界面操作为主,偶尔唤起AI快捷指令,更适合意图上清晰与行为上做管为主的。
  • Chat 适合独立式:
    以自然语言为主,几乎没有界面操作。更适合意图上模糊与行为上查看搜索为主的。
  • Chat+Do 适合助手式:
    自然语言和界面操作均衡配合使用。较强通用性更加适合以上 2 种交叉的场景。

1.2 提供意图预期

在用户与 AI 的交互过程中,一个普遍存在的挑战是用户对 AI 所具备的能力缺乏了解,这往往导致用户在提问时感到迷茫,既不清楚如何开启对话,也不确定提问的合理范围。鉴于这一现状,对用户的意图进行有效引导显得尤为重要,旨在帮助用户明确AI的能力边界,从而建立符合 AI 可实现范围的意图预期。

当用户首次踏入 AI 产品的世界时,可通过提供 AI 可实现意图预期的方式了解 AI 的强大能力以及具体用法。


1.3 引导意图表达

用户意图表达常倾向于口语化的方式,导致 AI 无法高效识别与理解,并反过来影响了用户体验。为了引导 AI 与用户双方意图的准确匹配,我们在设计侧引入了「槽位设计」这一概念。

  • 意图与槽位精准匹配: 若用户意图的可靠度高且所有必填槽位均已成功填写,系统将直接发送指令到下游服务,执行用户请求。

  • 意图匹配到多个类似槽位: 当用户意图或关键槽位的可靠度较低时,系统将回复意图或槽位确认信息,以请求用户进一步澄清或提供额外信息,确保信息准确无误。

  • 意图未匹配到槽位: 当遇到无法直接处理的用户意图时,采用对话转移或回复兜底话术策略,确保用户得到合理引导或回应。


除了「槽位设计」类似填空的体验之外,我们也可以通过提供「模板」等,明确用户意图,简化用户操作。


↑ 豆包截图




2. 角色设计 Role

角色设计让 AI 扮演了某种身份角色,来匹配用户的意图,进而保障与用户的互动是顺畅、符合预期的。角色设计让 AI 产品里隐形的体验得到优化和定义。


2.1 真实一致

为了增加角色的可信度和真实感,角色的视觉表达以及性格等特征需要在不同的场景中保持一致。具体来说,角色的行为模式和语言风格都应该符合我们对角色的基础背景设定。在与用户的互动中,不同的对话环境下,保持角色前后的一致性,避免用户产生跳出感,从而持续获得符合预期的互动体验。

角色设计,更多是通过Prompt的方式进行设计,如何写好Prompt可以参考:跟AI说话,不能作 —— 如何写好一个Prompt


2.2 流畅自然

    角色在与用户互动时展现出人类交流的流畅性和真实性。这涉及到语言表达的自然流畅,使用贴近人类日常对话的词汇和语法,避免机械和生硬的表达。同时,角色的行为反应也应自然合理,能够根据用户的输入做出恰当的、符合情境的回应。



      2.3 有人情味

      情感化是指在塑造 AI 角色时,赋予其理解和表达人类情感的能力,以便与用户建立更加深入和人性化的互动。这包括识别用户的情绪状态,并通过富有同理心且丰富的语言表达、个性化的关怀以及情感适应性以及富有感染力的视觉表现来响应用户的需求。

        角色的情感化设计在众多场景中显得尤为关键,特别是在那些追求高度用户参与度、建立情感连接或需处理敏感信息的环境中。通过角色情感化,可以更好地满足用户在情感交流、陪伴关怀、个性化体验等方面的需求,提升人机互动的质量和效果。






        3. 会话设计 Conversation

        在明确用户的意图和 AI 角色定位之后,便可以着手设计对话流程了。这一过程既涉及了对用户意图的深入理解,根据用户意图,有助于设计出更加针对性和有效的对话;又涉及对 AI 角色的精确把握,根据 AI 角色性格,可以选择合适的语言风格,构建更加真实和有说服力的对话场景。

        对话交互组件是构建人机对话系统的核心内容,它们基于用户提出的问题,依据预设的规则生成响应。这些组件旨在准确传达语义、行为和意图,以促进用户目标的实现,构成了对话交互的基础单元。

        使用不同的对话交互组件可以形成多样化的对话表达方式:

        • 通过选择和组合不同的对话交互组件,可以构建出多种对话表达策略。这些策略不仅能够覆盖广泛的语言风格和语境,还能够适应用户的个性化需求和偏好。


        对于同一个用户请求,可以通过不同的对话设计组件组合,形成同一语义,不同风格的对话:

        • 语义一致性与风格多样性:即便面对相同的用户请求,通过灵活运用不同的对话设计组件,可以创造出在语义上保持一致,但在风格上各具特色的对话响应。这种设计允许AI在保持信息传递准确性的同时,也能够提供多样化的用户体验。



        对话交互的通用性原则

        1. 信息充分真实


        2. 话术清晰易懂


        3. 自然友好尊重用户


        3.1 开始

        当用户第一次与 AI 交流时,AI 应该用热情的问候开始,并迅速展示其能力,以留下积极的第一印象。目标是让用户迅速感到自信,觉得自己能够掌控对话,同时帮助他们了解 AI 能为他们做些什么,而不是给他们一种正在接受教程的感觉。首要任务是迅速设定正确的期望,引导用户发现 AI 的功能,并将对话的主动权交还给用户。


        3.2 追问

        在 AI 对话交互过程中,若用户所提供的信息不足以支撑 AI 完成既定的任务目标,AI 必须采取主动措施,通过精心设计的询问来引导用户提供额外的槽位信息。这种策略不仅能够确保任务的顺利完成,还能够提升用户体验,避免因信息不足而导致的误解或错误。例如,如果用户在预订酒店时只提供了入住日期,而没有提供退房日期,AI 可以礼貌地询问:“您需要在这里住多久?”这样的询问既明确又具体,有助于获取所需信息,同时保持了对话的流畅性。


          3.3 提示

          会话式界面的核心优势在于其易用性,用户无需额外学习即可上手使用。AI 应利用自然语言处理的能力来理解用户的多样化表达,而不是限制用户必须使用特定的词汇或命令。用户可以更轻松、更自然地进行对话,而无需记忆特定的指令。这种方式不仅提高了用户体验的流畅性,也有助于建立用户对AI的信任和满意度。相反,如果用户必须说出精确的命令才能得到响应,这将限制他们的交互自由,降低界面的直观性,从而影响用户的整体体验。


          3.4 确认

          在对话设计中,确认设计是一种交互设计策略,它允许用户在与 AI 系统交流时验证其输入内容的解析结果。这种设计不仅提升了用户对输入信息准确性的信心,而且通过建立对话共识,增强了用户在与 AI 互动中的安全感和信任感。此外,确认设计通过维护对话的上下文连贯性,有助于推动对话的深入发展,确保交流的流畅性和效率。通过这种方式,AI 系统能够更准确地理解用户的意图,同时用户也能够即时纠正任何错误或误解,从而提高整体的交互质量。


          3.5 错误

          尽管 AI 在自然语言处理领域有显著进步,但在实际应用中仍可能遇到对话无法继续的情况,这可能导致错误。常见的错误类型包括:

          • AI 无法解析用户的输入内容;
          • 用户提供了无效的输入;
          • AI 当前的功能无法满足用户的请求。

          针对这些错误情况,必须实施有效的错误处理机制,以引导用户回到正确的交流轨道。错误响应的方式对用户体验至关重要,一个处理不当的错误可能会给用户留下深刻印象,甚至超过多次成功的交互。相反,如果错误得到妥善处理,用户可能根本不会意识到曾经出现过错误。

          为了优化用户体验,错误处理机制应当:

          • 及时识别并明确指出问题所在;
          • 提供清晰的指导,帮助用户纠正错误或提供有效的替代方案;
          • 保持友好和专业的语气,以减少用户的挫败感;
          • 记录错误情况,以便不断改进 AI 的理解和响应能力。

          通过这样的措施,可以最大限度地减少错误对用户体验的负面影响,同时提升 AI 系统的可靠性和用户满意度。


          3.6 结束

          AI 在对话过程中,应以优雅的方式结束交流。通过精心设计的结束语,AI 不仅能够展示其社交智慧,还能确保用户在对话结束时感到满意和受尊重。在对话即将结束时,AI 应提供有益的总结或明确的后续步骤建议,使得对话的收尾既流畅又富有成效,为用户留下积极的印象,并为未来的互动奠定良好的基础。



          4. 混合界面 Hybrid UI

          在人工智能(AI)时代下,用户行为的变化是:由原来人主要的执行行为(DO),可以增加人为 AI 来提供意图信息(Chat),让 AI 去执行任务,人可以感知 AI 做的过程和结果,并做辅助决策。


          基于用户不同意图,PD 或设计师可以快捷定位产品倾向的界面模式。

          • Do 为主:
            以界面操作为主,偶尔唤起 AI 快捷指令。例如 Quick Bar、固定指令式、内嵌生成式等。
          • Do + Chat 均衡:
            自然语言与界面操作均衡配合。例如双区联动交互、交互式操作气泡等。
          • Chat 为主:
            以自然语言为主,几乎没有界面操作。例如侧边式 Copilot、独立 Web Bot 等。

          • 唤醒阶段:用户要了解 AI 产品的能力与用法。
            设计目标是吸引用户,让首次接触的用户快速理解 AI 能做什么,告知用户 AI 可实现的意图范围和预期。
          • 表达阶段:用户向 AI 准确表达意图。
            设计目标是让用户知道如何快捷且正确的表达意图、并看清自己发送的内容。
          • 确认阶段:用户等待 AI 完成任务。
            设计目标是让用户知道该任务的AI执行运转情况。
          • 反馈阶段:用户核查 AI 完成结果并应用。
            设计目标是让用户清晰看到并信任AI任务完成的情况、并快速应用AI生成结果。


          4.1 唤醒 | AI标识

          人工智能需要一些具有代表性的视觉符号,以便与人类头像或其他图标区分开来。

          网页端:固定在浏览器拓展栏、悬浮在页面右下角、跟随场景出现入口、可以出发的智能工具栏。

          手机端:AI原声应用、固定在产品底部导航栏、悬浮在产品侧面、跟随场景出现入口、Quick Bar等。


          4.2 唤醒 | 欢迎提示

          欢迎&提示组件适用于【唤醒AI阶段】,让首次接触 AI产品的用户快速理解AI能做什么,可以清晰传达给用户AI可实现的意图范围和预期功能。使用合适的欢迎推荐组件,可以有效降低用户学习成本,让用户能够在短时间内对 AI 的各项能力有一个清晰的认知,并掌握其正确的使用方法,让用户快速了解并顺利开始。


          4.3 表达 | 用户发送

          用于承载用户侧发送的对话内容,以结构化、易读的方式展示各种类型的用户发送内容。


          4.4  确认 | 生成过程

          在用户向 AI 表达意图后等待 AI 回复的过程中,需向用户展示 AI 处理请求、生成内容或执行任务的进程与状态。

          处理过程反馈需要通过流式输出等方式给予用户及时响应,让用户清晰感知 AI 的工作状态,建立恰当的等待预期。在部分业务场景中,需要完整展现 AI 的思考过程和处理阶段,减少黑盒感,提升用户对系统的信任度和理解度。

          ↑ 进度展示

          ↑ 生成失败

          思考过程、思考细节的展示等。

          通过可展开/收起的形式呈现 AI 推理的具体步骤和依据。在设计时需要满足用户查看决策过程细节,同时避免信息过载。


          4.5 反馈 | 结果应用

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

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


          4.6 反馈 | 结果展示

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

          包含常见的文本、图片、代码等

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

          内容参考来源展示

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


          更多设计UI范式内容也可以参考国外设计师的总结:The Shape of AI






          大醒说

          随着AI能力在各个产品中的遍地开花,很难得有一组设计师能够潜心沉淀设计指南,基于最原始的人机交互,打造智能时代AI人机交互的新范式~ 

          RICH指南内容更多是针对目前行业内相对成熟产品的总结,但我相信,随着业务的发展,产品越来越成熟,我们会看到更多更创新的人机交互新范式!


          我们也会发现,设计师的产出内容早就不是基于绘图软件的产出了,我们需要定义AI角色形象,例如,通过输出Prompt来定义AI体验,与模型、算法有了更深的融合,对于产品功能定义,场景有了更深的绑定。

          同时,作为设计师的我也在思考?——伴随着AI x People的人机新交互的逐渐成熟,AI交互与包容性设计的结合 ❤️


          53AI,企业落地应用大模型首选服务商

          产品:大模型应用平台+智能体定制开发+落地咨询服务

          承诺:先做场景POC验证,看到效果再签署服务协议。零风险落地应用大模型,已交付160+中大型企业

          联系我们

          售前咨询
          186 6662 7370
          预约演示
          185 8882 0121

          微信扫码

          与创始人交个朋友

          回到顶部

           
          扫码咨询