淘宝B端场景下的AI智能助手交互设计，居然有这么有意思

本文授权转自：UXD笔记 （ID： UX_zixuan）

如今AI如一股狂澜般为我们工作生活带来颠覆性的变革和机遇。其中AI技术作为人们工作或生活场景下的智能助理无疑是当下大模型最激动人心的发展主线，AI不仅能扮演日常生活中的各类角色，也将最终赋能社会的各行各业。

这一年，淘宝在面向商家经营场景的AI能力上持续发力，推出业内首个多Agent协作的AI产品，希望通过全新的工具、服务带来经营效率及效果的跃迁。

新技术浪潮下的B端体验创新也给设计团队带来了新命题——如何搭建与电商经营场景相匹配的体验形态，以帮助商家快速上手、适应并接受这场技术革新？我们期望商家与AI的交互更加自然、个性且智能，最终让用户真切地感受到智能与科技带来的经营新体验。

▲ 电商经营AI Agent设计思路

#01

AI产品交互框架建立

1.1 AI人机协同的产品模式及交互形态

生成式AI正在蓬勃发展，调研目前公开的学术资料及研究发现，可以将当下生成式AI的人机协同分为3种产品模式：Embedding（嵌入式）、Copilot（副驾驶）、Agent（智能代理）。这3种模式下，人与AI的协作流程也各不相同：

· Embedding产品模式：由人类完成大部分工作，AI帮助用户完成指定性的操作或任务，所有操作都是程序设定好的确定性输出；

· Copilot产品模式：人与AI协同工作，可通过自然语言输入生成多模态的结果，但只会响应不会主动行动。

· Agent产品模式：AI完成大部分工作，基于目标AI可自行计划、拆解和自动执行，可全权代理并自主完成用户目标。

▲ AI人机协同的3种产品模式

这3种产品模式也分别具有3种不同的人机协同的交互形态：

· Embedding交互形态：在目前的图形界面中嵌入AI操作完成指定任务，核心是通过行为点击与AI交互（例如“Google Pixel”拍照一键换脸功能）；

· Copilot交互形态：AI作为合作伙伴协同参与用户的工作流程，核心通过自然语言及行为操作与AI交互（例如微软Copilot的全新工作方式）；

· Agent交互形态：AI可全权代理并自主完成用户设立的工作目标，这种状态下不管是硬件还是基于全新硬件系统的软件界面都可能被重新思考，同时结合图形界面的混合用户界面将会成为下一代用户界面的范式（例如AI Pin/Rabbit R1等产品都是这个场景下的创新尝试）。

* 参考文献：《AI Is First New UI Paradigm in 60 Years》

▲ AI人机协同对应的3种交互形态

1.2多轮会话设计标准

商家的AI智能助理正是基于Copilot向Agent产品模式发展过程中的面向商家经营的全新服务。因此在交互形态上我们基于IM的通用框架进行布局，并结合商家经营场景，重点对交互框架进行了以下设计。

1）主页面布局上包括：会话设置（群聊及单聊切换）、多轮会话（会话及结果/结果反馈/结果操作）、意图输入（结果追问/文字语音输入/工具）；

2）将会话卡片设计成了通栏从而提升商家的阅读体验及整体坪效；

3）框架设计的重点：意图输入区（需要引导好用户如何向AI提问）及结果生成区（电商场景下的生成结果场景多、样式复杂，因此需要将进行场景归类、样式统一）。

▲ 多轮会话的基础框架设计

A. 意图输入

在用户进行意图输入的不同场景下，通过以下设计手段帮助用户更好地与AI沟通或提问：

1）对于新手用户的第一次提问，通过帮用户问的方式。只需选择预设问题便可完成提问；

2）对于再次提问场景，通过底栏上的问题参考帮助用户继续追问；

3）我们也将高频问题沉淀到AI指令集中，用户只需修改模板便可完成日常的快速提问；

4）此外也提供了辅助工具帮助用户通过语音/图片等多模态的形式进行提问。

▲ 意图输入模块设计

B. 结果生成

基于电商场景我们将输出模块进行场景分类并形成设计规范：

1）纯文案；2）文案+图片/视频；3）文案+电商卡片；4）系统提醒。

此外输出模块的高度需小于800px，大于此高度将默认进行收起，从而确保用户的阅读坪效。

▲ 输出模块场景分类及设计规范

设计规范在各AI助理中的应用效果如下：

▲ AI助理的线上效果

但随着技术的发展，之后意图输入的方式会越来越简单，结果输出则会更复杂多样，所以基于IM的框架形态也必然会导致会话卡片越来越臃肿。因此我们也还在进一步探索基于语音等多模态意图输入方式下的混合用户界面的结果范式。

▲ 多模态混合界面框架探索

#02

AI助理人格化心智塑造

2.1 AI助理人格具象化

上文提到了AI人机协同有3种产品模式，在Agent模式下AI不仅可以会话还能自主采取行动完成用户目标，人们对AI的认知将更趋近于人，因此通过人格化的设计也会让AI与人在协作中变得更亲切自然。

AI的人格化构建核心围绕形象（性别、外貌、着装…）、气质（声音、话术、个性…）、能力（职业、技能…）等元素进行设计。

首先我们确定了商家AI智能助理的统一形象——活力且时尚的亚洲青年。

▲ AI助理人格具象化设计

并根据AI助理的不同职业（个人助理、店铺运营、内容小编、图像设计、数据分析）分别赋予了对应的人设Persona。

▲ AI助理Persona设计

并将人格化的形象在应用内的各个场景中进行传递及透出。

▲ 人格化形象的应用效果

此外为了增加AI助理的丰富度及垂直度，我们让三方的生态开发者也可以共同参与到AI助理的建设上，形成AI人才市场。因此我们也设计一套面向三方生态的AI助理的规范及标准。

▲ 三方生态AI助理设计规范

商家可在AI人才市场页面订阅各自所需的智能助理，提升产品的市场渗透率。

▲ 三方生态构建AI人才市场

2.2 AI助理情感化设计

在不同节日或特定时间节点，AI助理还会送上节日祝福及温馨提醒，甚至在团队会议结束后还能提供团队合影等彩蛋功能。

▲ AI助理情感化设计

#03

AI智能感氛围表达

3.1 不同会话模式的氛围设计

不同于默认的工作模式，闲聊模式下通过背景氛围、气泡颜色及头像风格的差异化设计，从而让用户感受到轻松愉快的会话氛围。

▲ 闲聊模式的氛围设计

每天早晨AI助理会主动发起晨会对前一天的工作进行自主总结，因此在设计上将其变成了一个相对独立的“会议室”空间，整体采用深色模式为用户打造沉浸式的阅读体验。

▲ 会议模式的沉浸感设计

3.2 品牌LOGO及VI

Logo整体样式采用AI的手写体字样结合魔法四角星的元素，简洁明了地进行品牌传递。色彩上采用蓝紫色的弥散效果强调视觉冲击感带来未来智能感的同时，也为AI类产品的情感表达上带来神秘感、创造力和无穷的想象。

▲ 品牌LOGO及VI

#04

结语

商家的AI智能助理在设计上通过：AI产品交互框架建立、AI助理人格化心智塑造及AI智能感氛围表达，从而打造用户与AI更加自然、个性且智能的会话及使用体验。助力业务通过AI帮助商家更好地服务消费者的同时，也在探索AI人机协同的新交互形态。

除了为商家决策者提供电商经营辅助类AI应用之外，接下来淘宝商家智能团队还将为商家执行者打造高效好用的AI工具，最终通过AI工具、服务、解决方案提升商家的经营体验及效率，建设面向全域商家的智能经营平台。

文章转载：UXD笔记，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/7Y4v5GQYDxldgfR7Zv2vWw

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编辑 | 叶 璇

终审 | 苏 菁

点这里，学习更多设计知识！