如何借助AI让用户体验更智能?来看手机天猫的实战案例!

AI 当前如火如荼,正以惊人的速度改变着我们的生活和工作方式。我们淘宝设计团队也在探索如何借助 AI 的能力,打破谈及 AI 即聊天对话的思维惯性,构建更高效、实用、符合电商场景的体验范式,来帮助用户解决全链路购物场景问题,重塑用户的购物体验。 更多天猫设计案例:手猫 AI 购物助手 一、回归需求本身 谈到 AI 智能工具,大家对 Chat GPT 这类沉浸式聊天对话式 AI 产品一定不陌生。 但对电商平台来说,用户场景更为复杂,用户常常在搜索和查看商品间反复横跳,在商品详情页庞杂的信息中翻找,在多个商品间纠结不知

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

AI 当前如火如荼,正以惊人的速度改变着我们的生活和工作方式。我们淘宝设计团队也在探索如何借助 AI 的能力,打破谈及 AI 即聊天对话的思维惯性,构建更高效、实用、符合电商场景的体验范式,来帮助用户解决全链路购物场景问题,重塑用户的购物体验。

更多天猫设计案例:

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

手猫 AI 购物助手

一、回归需求本身

谈到 AI 智能工具,大家对 Chat GPT 这类沉浸式聊天对话式 AI 产品一定不陌生。

但对电商平台来说,用户场景更为复杂,用户常常在搜索和查看商品间反复横跳,在商品详情页庞杂的信息中翻找,在多个商品间纠结不知道怎么选,看其他用户怎么评价,在购物车里来回凑不知道怎么买更省…不少问题伴随链路产生,让用户在链路和独立聊天页间来回进出,并不是合适的解决方案。

我们认为 AI 智能技术是手段,需求场景不同、产品功能不同,面向用户的设计形态自然也应该有所不同。要设计更高效、实用、符合电商场景的 AI 产品体验,核心逻辑是先梳理逛-找-看-对比-聊-买-售后完整购物链路下各个阶段的痛点,其次针对解决痛点所需功能选择对应智能技术和合适的设计形态。

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

需求导向的智能设计逻辑

需要清楚地意识到线上购物发展多年,用户痛点存在的依然存在,只是过去的技术给出的是过去的解决方案,新技术给老问题带来了新解法。

智能技术包含但不限于 ML 机器学习(常见于关联推荐)、机器视觉与图像处理(常见于识图搜索)、RPA 流程自动化(常见于长路径多步骤自动化处理)、GenAI 生成式 AI、NLP 自然语言处理(常见于语音识别对话)等

二、两种产品架构

我们先来看两个典型例子:

A. 在 Google Pixel 8 的拍照体验中,用户可以一键优化照片中诸如闭眼、没看镜头等问题。整个操作过程中没有使用对话页或用自然语言作为需求输入方式来触发照片修复功能,而是通过照片编辑页中一个简单的 Magic Button、一步点击操作后瞬间换头的效果,给用户带来“Wow-Moment”。足够可靠的智能技术,对应足够简单自然的交互方式,不需要多余的粉饰。

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

Google Pixel 8 官方换脸视频片段

B. 在多应用多任务并行的办公场景中,Microsoft Copilot 以辅助模式在应用一侧新开对话窗口,根据用户输入的自然语言指令将结果直接作用显示于相关应用的任务中。对话式的交互方式在这个场景下,将原来具有专业性要求、需要用户自主按步操作的复杂前台功能后台化,使用户通过描述需求就能获得结果,省去不少操作成本。

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

Microsoft Copilot 桌面应用截图

从这两个案例,我们不难总结出链路节点融入式和全功能集合中心式两种产品形态,分别对应两类主要用户场景:A.在某个链路节点下遇到问题,需要从旁辅助提供对应场景功能帮助;B.不想或不知道如何深入链路去找对应功能完成操作,需要助手全权代劳。

1. 链路节点融入式

针对链路场景,既要让用户可见可用,也要保证原有链路体验的连续性和沉浸感,不干扰用户主链路。对此,需要设计一套匹配 AI 适时主动性,轻量、灵活的自适应组件模块融入各场景辅助给用户提供帮助,并统一交互范式保证体验一致性。

①自适应组件模块

通过分析对比各种页面组件的轻量感和灵活性,可以使用链路打断性弱和页面融合性相对平衡的底部提示气泡作为 AI 主动触达用户的通用性交互模块,页面内卡片元素和小浮卡为被动触发的内容结果模块。

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

页面组件轻量感和灵活性对比

组件定义除了可以让不同业务的设计师参与进来拓展场合,还可以让大模型通过学习我们介入设计的标准流程,自行组装输出更多我们穷举不到的场景。

②嵌入内容流和从旁辅助两种形态

实际用户在购物过程中遇到的问题,有些是跟当前页面某个内容点强相关的(比如商家无法及时回复);有些是全局性的(比如不知道如何跟商家沟通),需要作为第三方角色从旁辅助去协助用户。

前者我们可以通过在对应内容点用与当前页面相似的模块,加少量的 AI 提示去触达用户;后者可以使用底部提示气泡,去灵活提供用户当前所需内容。

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

两种形态举例

③AI 主动交互范式

区别于传统被动式响应的交互方式,适时适度地主动前置感知、理解、判断、响应用户需求,是产品让人觉得智能懂我的重要原因。在用户和 AI 的交互过程中,通过对场景、触发、操作、结果和干预这五个要素的主动关系设计,可以使整个智能体验更符合用户预期。

什么场景下:流程节点、页面触点、用户需求 以何种形式触发什么功能:谁触发、轻重度、是什么功能的感知 功能操作:是否需要、操作步骤 如何返回什么结果:是否当前流程节点页、局部变/当前全变/新页面、结果状态 结果反馈/需求修正

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

A-U 交互主动关系图

以下是“详情页商品信息答疑”和“IM 咨询商品”两个例子来解释这个交互范式。

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

2. 全功能集合中心式

中心页核心帮用户解决脑海中有一个需求但不知道如何解决或链路太深不想逐步操作的问题,比如不知道怎么找到想买的东西、不知道怎么挑选礼物、大促要退的商品很多挨个操作麻烦等,以及让用户知道我们有哪些 AI 能力。

这类场景下,一问一答的聊天对话是一种解决方式,但核心是多轮指令和结果之间交互或收敛关系的处理。对此,我们的新方案在开发中,等上线后再跟大家分享相关设计经验。

三、四个体验原则

1. 次不妨主

在设计过程中,要确保原有主链路的体验连续性和操作习惯,避免为了强调 AI 功能做打断性交互设计,前面链路节点融入式产品架构的设计核心就是在遵循这个大原则。这种体验包括以下四个特征:

在次级视觉区适度出现 尽可能当前页面完成无跳转,避免多步重操作 非强制性,不会阻断用户主操作 未发生或结束操作后自觉退出

2. 感知有度

在视觉层级上,结果的呈现要适度,避免过度抢用户的视觉浏览焦点。

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

应当根据用户当前情境需求,合理设计信息层级和用户视听觉等感官输入强度,从操控触发、过程等待、结果变化三个维度适时反馈给用户,避免过度刺激或信息过载,使用户能够在接收信息、交互和反馈时保持舒适和专注。

操控触发:组件响应时间点=用户实际操作时间点的绝对跟手操作(点击缩小、松手放大)、功能触发感知(模块功能符号变化/全局背景扫光) 过程等待:响应延迟有反馈、思考过程状态表达、主动触发倒计时提示 结果变化:页面内局部变刷新感知、独立模块联动展开(气泡-飘条)

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

3. 一步操作

尽可能让用户以最直接、最快捷的方式达到目的,能一步就不要两步操作,降低多步操作带来的跳转流失和用户误操作率。

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

4. 结果直给

加强对结果的关注,确保用户能够快速、直观地看到其操作的结果。展现过程状态清晰、结果简洁易懂,就算做不到也要直接告诉用户而不是委婉含糊的文案表述,减少用户在达成目标过程中猜测或困惑的时间,使用户能够轻松理解并快速做出下一步决策。

如何借助AI让用户体验更智能?来看手机天猫的实战案例!

结语

在 AI 产品体验设计中,AI 技术本身很容易成为关注的焦点,“回归用户需求本身”尤为重要,这种意识和原则有助于避免过度设计,创建真正以用户为中心的产品体验。

目前 AI 购物助手设计解决方案主要应用于手机天猫 APP 里,链路节点融入式方案已在购前、中、后全场景主链路中推动落地,包括首页推荐、搜索、商详、IM、购物车和订单列表,全功能集合中心式交互方案目前正在开发中。后续我们还将持续深度探索用户在购前、中、后细分场景下的需求方案,构建更高效、实用、符合电商场景的 AI 购物体验。

相关资讯

Flair 实测!能快速合成电商产品场景图的AI神器

大家好,这里是和你们一起探索 AI 的花生~ 从 Midjourney、Stable Diffusion 等 AI 绘画工具出现以来,很多设计师都在尝试用它们优化自己的设计工作流程,想必已经有小伙伴用 Midjourney 生成各种海报素材了,而网易、58 同城等大厂的设计团队也在积极探索 AIGC 在 UI 设计、IP 设计、运营物料生成等实际项目中的落地应用,并且也已经取得了不错的效果。 此外很多设计工具也开始将 AI 置入自己体系,比如最近爆火的 Photoshop Generative Fill 功能,就是

百度实战案例!百科AI对话式体验设计完整复盘

导语 近年来 AI 发展如火如荼,大模型诞生与技术的积累和不断创新,带来了人机交互方式的革新。各大厂也纷纷结合自身业务场景进行模型和应用的开发,AI 正以惊人的速度改变着我们的生活和工作方式。面对生成式 AI 的行业浪潮,百度百科产研团队也在探索如何结合大模型能力,发挥百科在泛知识领域的优势,延展百科场景 AI 特色体验,强化内容浏览的体验感及效率性,契合用户对百科的期望,带给用户更极致的知识消费体验。一、认知建立——0到1建设消费新场景 我们初步要做的是利用生成式 AI 的能力来解决词条冗长内容阅读的问题。在此基

用超多案例,揭秘电商平台高点击率 Banner 的原因!

什么样的电商 Banenr 点击率更高?京东出品的人工智能设计平台「羚珑」通过对比分析每日产生的几百万个设计图,得出这5个实用性超强的结论。羚珑智能设计作为京东官方设计平台,自支持京东各首页千人千面项目以来,已经输出了几十亿张广告图;在大量的图片背后,有很多可供借鉴的设计方法论。 不同平台,用户受众不同,喜欢的风格也不尽相同。那在京东如何投广告点击更高呢?羚珑通过每日输出的百万级设计结果,与京东优投实验室合作,多方分析对比各种广告图和点击数据,联合了西门子、三星等几大品牌进行了定向研究,总结了广告图制作和投放过程中