01产品背景

大模型正在渗透电商的导购与售后。我们想验证：一个店铺专属的 AI Chatbot，能不能用对话挖掘需求、在售前帮用户做决策，从而带动 Chat DAU 与售前转化。

落地前，我从产品现状、下单链路转化、回复效率三方面做了可行性论证。先看现有的三种导购形态：

三者是分层协同而不是替代：平台级解决"买什么"，店铺级解决"在这家店买哪款"，Chatbot 解决"怎么买"。中间这一层在 Shopee 上还是空的。

02数据洞察

转化链路

对两条核心转化链路 PDP（商品详情页）与 Shop（品牌门店客服 + 门店直接购买）做了拆解：

Shop 与平台转化率之间的差距，本质是店铺"流量承接—需求挖掘—决策辅助"能力的缺口，这正是店铺 AI 导购能直接触达的提升空间。

回复效率

抓取线上数据，按回复时长分组看成单情况：

03竞品分析

导购 Agent 分两类：嵌入平台的综合型，和服务品牌门店的专属型。拆解了三个典型产品。

抖音 · 帮你选

服务品牌门店，服饰用竖卡、其余用横卡。话术讲明星同款、材质、版型等亮点，商品图占比大；标题话词可点击，卡片分视频卡、商品卡、直播卡，整体 AI 感偏弱。

京东 · 京言

京东 App 内独立的综合型导购 Agent，提供商品对比、优惠凑单等服务，推荐海量商品但针对性弱；商品卡纵向平铺，左图右文。

淘宝 · 万能搜

同样是综合推荐，但入口在品牌门店，会围绕用户提到的商品继续服务；搜索过程、商品卡、相关问题统一用 Markdown 组件包裹。

04信息层级：一次回答里先给什么

比"有哪些组件"更关键的是一次回答里的信息顺序。把对话界面拆成四层，每层回应一条数据结论，也对应一个明确的效率目标；后面的所有设计都落在这四层里。

01020304

01

状态层加载 · 深度思考

回应23% 的会话完全没有回复

先给反馈再给答案：等待过程可见，用户不会以为没人理

02

结论层AI 文本 · AI Point

回应0–3 分钟回复的转化率是未回复的 13.8 倍

结论前置，首屏就能读到判断依据，细节收进深度思考

03

商品层商品卡 · 商品对比

回应有 Chat 参与的下单转化率 30%，咨询率却只有 1.6%

从看得懂到能比较，字段按浏览 / 决策阶段取舍

04

行动层Shortcut · 购买按钮

回应29% 的用户进店后一次点击都没有就流失

任何一层都能直接下单或换需求，不用退回上一步

信息获取效率的三条原则

这三条不是口号：它们对应 07 里的过程指标——Shortcut 使用率、商品卡点击率、多轮追问率，上线后可以直接验证。

05基础功能：对话体验的底座

项目分三个阶段：基础功能 → 业务适配（把 Shopee 电商模块嵌进对话）→ 功能拓展（优惠、试穿等）。现有 AI 导购大多基于 IM 框架，先从框架结构、文本规范、互动反馈三层把底座定下来。

Basic Structure

框架导航栏定身份，输入框与 Shortcut 定行动入口

导航栏比较了背景、对齐方式和标题内容，输入框比较了输入区样式与 Shortcut 图标。

导航栏

Option 1 ✓Option 2Option 3Option 4

最终方案：渐变氛围底 + 标题居左，主标题是功能名「Shop Assistant」，副标题带出所属店铺，AI 身份和店铺归属一眼都能看到。

输入框 + Shortcut

Option 1 ✓Option 2Option 3Option 4

最终方案：Shortcut 用实色图标，购物袋入口收进输入框内右侧，输入区只保留一个发送按钮，横向更宽松。

背景色在灰底、白底、品牌色底与卡片描边/阴影之间取舍；气泡既要呼应之前的 Chatbot，又不能和按钮等重品牌色内容撞色。

背景色

Option 1 ✓Option 2Option 3Option 4Option 5Option 6

最终方案：白底，商品卡白底 + 描边。卡片边界清楚，又不额外增加视觉重量，商品图最干净。

用户对话气泡

浅品牌色 ✓品牌实色浅灰

最终方案：浅品牌色气泡，呼应之前 Chatbot 的样式又带出主题色，不和按钮等重品牌色内容撞色。每种颜色下还对比了 A / B / C 三种圆角（从左到右），最终选 A。

Text Structure

结论层视觉层级决定用户先读到哪一行

之前的 Shila 和客服都是完整的 IM 气泡对话。这里把对话流定义为 AI 文本 + 用户气泡，并给出字号与间距规范。

查看字号 / 间距标注原图

Deep Thinking

状态层把等待变成看得见的过程

深度思考是用户对 AI 感知最强的细节。做了从加载到失败的完整状态，让过程闭环，而不是一个转圈的黑箱。

Follow up question

行动层回答之后给出下一步，而不是让用户自己想问什么

Follow up 在回答之后继续推进：递进追问拿到更精准的推荐，或让用户反馈结果、调整生成方向。

Follow up 配色

Option 1 ✓Option 2Option 3

最终方案：偏冷色。同时适配三种快速回复：选项卡、带 Emoji 的场景选择、递进追问；与品牌橙拉开距离，不会被误认为按钮。

Basic Flow

全链路四层信息在一次完整对话里的出场顺序

把定稿的框架串成完整流程：非定向推荐 → 提问互动 → 定向推荐 → 接续追问 → 多模态回答。

06业务适配：把商品放进对话

购物功能的嵌入是这一阶段的重点：信息要和平台现有展示对齐，符合品牌认知，并按现有间距尺寸建立适配规范。

Item Card

商品层字段取舍决定一次推荐给出多少信息

一次对话里会出现多张商品卡，一种样式承接不了所有场景。沿用 Minifeed、Video、Chat 的经验，商品卡由媒体区、标题区、促销信息区、价格结算区组成，再按场景调整比例与取舍。

已有场景里的商品卡

媒体区标题区促销信息区价格结算区

Minifeed全屏商品详情

Video视频内挂载卡片

Chat聊天内商品卡

据此划分出竖版和横版两类卡片，分别应对非定向和定向的消费场景。

竖向卡片非定向推荐 · 多商品横滑

• 上图下文，商品图占比大，适合并排浏览
• 字段：名称 / Variation / 卖点 Label
• 价格 + 折扣，底部购物车 + 购买按钮

横向卡片定向推荐 · 单品深入

• 左图右文，信息密度更高
• 卖点 Label 可放两个
• 适合跟在 AI 回答后承接具体商品

横竖版一共 14 种：竖版用于非定向推荐的多商品，横版承接对具体商品的提问；营销信息在 AI Point 和 Selling Point 之间二选一。

14 种卡片样式卖点类型 × Variation × 尺寸

横版 · 小2横版 · 中4竖版 · 大 / 小8

无卖点 · 有 Variation

无卖点 · 无 Variation

最精简的横版卡，无卖点，用于和 AI 卖点、Review 等模块叠加，或展示用户主动选择的商品。

Product Comparison & Panel

商品层从单品理解进入横向比较

商品对比帮用户比关键属性做决策。对比了三种呈现方向，最终选卡片 + Markdown。

商品对比呈现

卡片 + Markdown ✓Markdown 表格富文本卡片

最终方案：竖版商品卡 + 下方 Markdown 参数对比。两个商品完整并排，两个以上时横滑查看；兼顾多商品容纳性、对比感知和竖版卡片的可拓展性。

用户点击 Shortcut 入口弹出商品选择 Panel，至少选两个商品确认后生成对比结果；超过两个商品时可以横滑查看。

AI Point in text & Buyer Show

结论层把卖点和口碑压缩进可快速扫读的文本

AI 卖点也要融入普通文本，在大段文字里帮用户快速抓重点。

文本内 AI Point

Option 1 ✓Option 2Option 3

最终方案：渐变描边卡片。延续 AI 身份的渐变语言；左图为出现在正文中，右图为跟在商品卡下方，两种位置都成立。

在选定的样式上把用户口碑做成 Markdown 适配，设计了短语、段落和卖点兜底三种买家秀。

07功能拓展：更多导购玩法

输入框上方的 Shortcut 区留出了拓展空间，功能一方面参考其他平台导购，一方面和现有 Chatbot 拉齐。

Find Discount

没有指定商品时推荐优惠商品；已经在聊某个商品时，查该商品的可用优惠并把券推到对话流里。

Price Tracker

只在前文有指定商品时出现。可视化展示价格变化并订阅降价提醒，降价时通知用户。

Size Advice

两种触发方式：点击入口（有尺码档案直接给建议，没有则弹 Panel 录入）；自然语言对话（渐进式问答，或用户直接给出尺码）。

Try On

虚拟试穿已在 Video、Minifeed 上线。接入导购后在 Panel 里选商品、传图，生成的试穿图回到对话流，可快速重做。

01项目背景

2023 年 Q3，短剧成为全网爆款，也成了各大视频平台角逐的新赛道。百度 App 原有的视频剧场框架已经装不下这门新生意，目标是体验拉齐并超越，强化品牌建设、做厚功能基建。

需求由产品经理提出，MEUX 设计中台提供完整的策划与功能设计支撑。我从项目初期的"广告解锁试看"开始接手，负责为短剧的内容分发渠道和付费观看链路搭建流程与框架，全项目包括三部分：

02竞品分析

短视频龙头抖音和快手基于各自资源形成了两套打法：打法一在现有视频平台里构筑专属频道，参考版权内容的运营逻辑，靠融合推荐流完成消费闭环，由视频业务团队主导，抓"广而浅"的用户群；打法二从 0 到 1 做全新的短剧产品（抖音红果、快手喜番），依托短剧版权归属团队（番茄小说），面向"小说 → 短剧、追剧"的核心人群做"窄而深"的沉浸消费。

03产品策略

结合竞品表现和短剧在手百的现状，以版本迭代分批推进：搭建观看链路、补充功能入口、搭建付费通路，探索内容分发与资源变现的可行途径。

04阶段一：广告解锁，试验付费链路

为付费短剧提供功能入口，前期以看激励广告解锁付费章节做业务试验：拦截优质内容并添加付费标识，付费资源的播放页展示锁定态，接入广告观看解锁接口，完成试看闭环。

流程交互稿

界面视觉方案

付费提醒页对比了智能取色、单一配色、高斯模糊三种方案，基于开发成本选择单一配色上线；同时改造了融合落地页、合集落地页框架和播控面板，适配内容拦截和广告解锁观看。

05阶段二：接入用户付费能力

完善付费短剧基建，为 B 端引入"新热"短剧提供基础支持，让商业投流短剧在端内自闭环，提升优质供给，从而提升短剧分发与时长规模。

基于现有付费订阅的支付面板框架搭建短剧支付面板；为平衡付费率与客单价、实现整体收益最大化，增加了多集解锁能力。

06阶段三：频道搭建与品牌认知

百度 App 需要垂直的短剧消费阵地，满足用户追剧、找剧、看剧的需求，提供"爆款""全面"的内容，把更多时长留在手百，并带来更多元的变现手段。

在视频 tab，基于剧场频道的基本格局搭建短剧频道页，保留金刚位，补齐题材、榜单、追剧等模块。

同时在 Feed 浏览 tab 搭建短剧频道，布局 banner、追剧历史、榜单外露、内容推荐和题材外显。

面向春节活动风口建设主题氛围，提转化、促分发，在关键节点整体联动，放大品牌声量。

用二跳大卡把短剧融进推荐流，营造 IP 感与沉浸感；并为提升付费转化和订单 GMV，增加全集购买挂载入口和收银台优惠券包装。

07阶段四：优化播控，强化 IP 认知

原来的合集半屏面板只展示剧集名称和相关信息，缺少短剧维度的信息。通过整体优化合集半屏面板和合集详情页，强化短剧 IP 感，同时加入相似内容推荐和频道聚合页入口，提升分发量。

流程交互稿

把半屏面板和合集详情页整合，两者信息保持一致，只在半屏/全屏比例上区分；加入影视 IP 背景，兼容线上选集 tab 的吸顶逻辑，并引入相关推荐模块。

界面过程方案

优化一期并行上线的相似推荐模块，并把三列流的信息字段规整为"标签 + 集数"。

最终视觉方案

08后续 Todo

短剧频道的基础观看链路已经打通，完成了 0 到 1 的搭建，1 到 10 的拓展仍待展开：针对完播率低、深度用户消费数据不佳的问题，补充续看引导、追剧收藏和回退挽留；大屏、折叠屏的适配会随百度 App 平板端的整体治理一起推进。

01项目背景

百度 App 想借助庞大的用户基数，通过 Feed 里的内容消费提升有效变现。当时只有两种付费模式：以内容维度售卖的付费专栏，以及按作者更新付费的付费订阅。作为交互设计师，我协助团队开启了付费会员和付费短剧两条变现通路，并通过收银台规范改造开启整体的品牌建设。本专项包括两部分：

02现有业务盘点

付费专栏以单篇/全篇维度售卖视频、图文内容，已完成专属频道改版和多种付费模式的搭建。

付费订阅由专业优质作者做固定周期的图文、视频更新，用户订阅获取独家资讯。（付费短剧详见短剧专项。）

03项目一：付费故事会员

从现有专栏里优选部分内容，用文末拦截勾起用户对后续内容的兴趣并引导充值会员；按是否购买展示不同状态，同时构建完整的会员支付链路，满足曝光—开通—续费的诉求。

参考知乎盐选会员：它建立了完整的权益体系，包括优质答主内容解锁、联合购买福利、专享长篇故事、付费课程、专业书刊和趣味评测，是付费知识内容里的会员标杆。

阶段一 · 基础功能建立

从购买前的文末拦截入口和购买中的支付面板入手，打通"外露—购买—查看"的基础链路，作为整个会员体系的功能验证。

购买前 · 文末拦截：筛选部分专栏内容做拦截，作为会员购买的外露入口；拦截卡片显示未开通、已到期、已开通、将到期四种状态。

购买中 · 支付面板：建立支付面板规范，用模块拔插的方式展示会员状态、套餐选择、支付方式、权益展示和相关推荐。

购买流程：基于购前文末拦截和购中收银台，分别为未开通、已开通会员建立两套购买流程。

视觉方案：沿用现有专栏的金色基调，体现会员尊贵、独享的身份认同。

阶段二 · 会员专属权益页

从购买后的专属频道入手，满足权益感知、阅读回访和推荐消费的诉求，补全购前—购中—购后的闭环。在百度首页 Feed 新增「故事会员」频道，加入会员管理、历史记录、每日推荐和内容流模块。

视觉在会员金色体系基础上加入橙色、褐色系，强化权益感知和品牌。

阶段三 · 业务合并与视觉统一

度会员的权益偏工具型（云盘下载、阅读优惠、个性化主题），内容专享消费还有空间；故事会员的内容型权益正好补上，而故事会员也能借度会员的品牌声量提升开通量级。于是阶段三把两者合并。

视觉对齐度会员的金黄品牌色，改造核心页面，并在会员权益页补充故事会员的业务表述。

04项目二：支付面板改造

内容变现线里有专栏、订阅、短剧、会员四条业务，各自发展出了十余种支付面板。会员并入度会员后，这次规范整治聚焦专栏、订阅、短剧三条线。

现状盘点

付费专栏是存在最久的业务，支付链路涵盖多种付费模式和优惠策略，但仍在用虚拟币结算，和线上主推的多渠道现金支付差异很大。

付费订阅覆盖图文、视频入口，有按月和连续包月两种模式；会员、短剧的收银台都是以它为基础搭的，并用金色作为付费业务主色。

付费短剧有广告解锁和直接付费两种模式，正在推进虚拟币观剧的第三种；面板由订阅面板改造而来，档位较低时比例需要调优。

信息解构

把三种面板按空间顺序解构、归类，并高亮共有信息元素。结论是：商品信息、档位选择、支付方式、购买须知、购买按钮大部分是三种业务的公共字段，在支持部分独有模块拔插的前提下，具备统一信息架构的基础。

交互框架

收银台面向短剧、专栏、订阅三大业务，用一套框架适配：按场景拔插业务模块，替换通用区域的文案字段。

专栏场景归纳为档位购买、附带赠品、搭配购买、专栏赠送四种核心模式，在同一套框架里按需部署收货地址、优惠券、赠送份数等模块。

订阅场景不做大改：商品信息做场景适配，新增倒计时价格汇算模块，支付方式模块统一样式。

短剧场景去掉短剧封面，只显示标题和剧集信息；宫格档位改为左右布局，按档位数量和单双数排布，并突出主推档位。

01视频卡片的生效边界，在用户所处的意图阶段

这个项目前后跑了 6 轮版本、覆盖 8 个市场。把结果按场景排开，规律非常清楚：

背后是同一条链路：Video Card 的价值路径是被视频吸引 → 产生兴趣 → 决策下单。

决策期的用户已经被吸引过了，他需要更多决策信息，信息区加行是加分；浏览期的用户还没被吸引，卡片定高时信息区每多一行，媒体区就少一块，决策因子反过来干扰了吸引因子，成单链路被打乱。

这个结论后来直接决定了规范怎么定：两类场景用了两种相反的高度锁定策略（见 05）。

02双列流里的固定高度，是视频卡片的根本约束

Video Card 是 Shopee 双列流里跳转到视频落地页的卡片入口，覆盖每日推荐（DD）、搜索结果（SRP）、相关推荐（YMAL）、店铺页和域外流量页，是 Video 业务最重要的流量入口之一。结构是媒体区 + 商品信息区，媒体区自动循环播放商品高光片段。

难点在于：双列流对卡片高度有上限，媒体区和信息区在争同一块固定高度。1.0 在"封面 + 商品信息"的结构上加入营销信息；2.0 为了提高信息区利用率，取消了商品封面，并对促销 Label 做了优先级排序。

覆盖场景DD 每日推荐SRP 搜索结果YMAL 相关推荐Shop 店铺页域外流量页

1.0媒体区 + 商品封面缩略图

• 封面缩略图占掉信息区左侧
• 标题只剩一行，常被截断
• Label 加入时整体抬高信息区
• 卡片固定 311px

→

2.0 ✓取消封面，信息区全给文字

• 商品封面取消，横向空间全部给标题
• 标题两行，信息获取更完整
• Label 单行轮播：Promo 与评分/销量交替
• 价格与优惠单独一行

取消商品封面

封面重复了媒体区已有的信息，省出的宽度给标题和促销

标题 1 行 → 2 行

双列流里随机消费，标题是判断"是不是我要的"的第一依据

Label 按优先级轮播

cheapest > xtra > exclusive voucher > flash sale > free shipping，一次只露最强的一条

查看完整结构演进看板（长图）

03证据一 · 决策期：砍掉封面换两行标题，8 个市场 7 个正向

YMAL（You May Also Like）出现在商品详情页下方，用户刚看完一个商品，正在同类里比较。卡片等高等宽。

1.0：三组轮播方案，信息量在决策期是正收益

对比了媒体区 Bubble 轮播（其他用户加购/口碑）、标题下 Label 轮播（加购/口碑）、标题下促销 Label 轮播三组方案，整体波动正向：

结论有两条：商品标题设为两行，能有效提升用户在双列流中随机消费时的信息获取；取消商品封面对信息获取没有明显负面影响，而省出的空间能放下更多促销标签和价格优惠。

2.0：取消封面、两行标题，按市场拆开看

取消封面给文字信息让出了空间，用户提取有效商品信息的效率提升，点击进入并转化的概率随之提高。

YMAL 1.0 · 三组测试方案轮播什么内容、放在哪一层

Bubble 轮播Label 轮播 ①Label 轮播 ②场景图

媒体区底部做 Bubble 轮播：just added to cart 与 just bought 交替；右侧是同时保留标题下 Label 的版本。

YMAL 2.0 · 取消封面之后空出来的空间怎么分配

Label FitLabel 轮播评分 & EDT场景图

卡片宽度固定，先定 Label 的换行与截断规则：一行放不下时按优先级只留最强的一条。

查看 YMAL 完整实验看板（长图）

04证据二 · 浏览期：同一套卡片搬到 DD 和 SRP，两次都负向，原因相同

DD：加高卡片仍然负向——问题不在高度，在信息区挤压媒体区

DD（Daily Discovery）是首页的兴趣推荐流，流量最大的非定向渠道，要兼容商品卡、广告卡、视频卡、直播卡，并限制卡片最大高度。1.0 以样式横向对齐为出发点，按容器最大高度适配，媒体区被明显压缩。2.0 跟进场景最大高度变大后重新适配，数据仍然负向：

2.0 比较了三种高度适配策略——差别只在于锁的是卡片总高还是媒体区：

另一个发现是：信息区一旦缺少 Label、显得过空，用户会对商品产生"低质、无保障"的印象。

SRP：用户锚定标题找东西，视频卡的结构差异反而打断判断

SRP 1.0 于 2025.2.17 在各地区上线，数据显著负向，现已下线：

2.0 基于新样式迭代，四组 treatment 仍然全部负向：

SRP 里用户的行为是"锚定标题相关性 → 看媒体区快速了解 → 产生兴趣点击"。Video Card 与 Item Card 结构差距太大，同屏两种样式影响判断；Item Card 整体变高后，Video Card 在同一屏的面积占比也被压低。

查看 DD / SRP 实验看板

05规范如何归一：两类场景，两种相反的锁定策略

基于上面的结论，后续迭代不再追求"各场景样式横向对齐"，而是在保持基本框架一致的前提下，按场景的意图阶段决定锁什么：

Label 策略：空白本身也在伤害信任

DD 的 Label 栏因此大面积空白，而空白会让商品显得"低质"。策略是用评分 + 销量的口碑 Label 填充空白，并在信息区底部增加与同场景其他卡片一致的物流信息区（EDT + Location，对齐 DD 现有 SDK）。

Shop 页的商品总览同样是等高双列流，也按这套规则接入了新样式。

四个场景的尺寸规范点击切换场景

YMALShopDDSRP

卡片总高299px 固定

媒体区随信息区调整

随信息量变化信息区高度

决策期 · 商详页下方

锁总高：用户已经被吸引过，信息区可以多承载决策信息，媒体区让位。

06已验证的结论，和还需要验证的假设

把实验里的判断分成两类，避免把推测当成结论：

下一步想试的方向

不牺牲封面尺寸，让媒体区与信息区空间叠加，例如把关键标签 Overlay 在视频封面边缘；只保留最优利益点、降低认知负担，并按类目差异化——服饰、美妆这类审美驱动的类目以视频为主，家居、家电这类理性驱动的类目以时效和优惠券为主。

01为什么要整理

在职期间，Video、Minifeed、Chat 三条业务线在日常需求里各自长出了大量组件：旧稿件被拿来 demo 新功能、内部元素布局逐渐漂移、新需求上线后框架跟着变动。这个项目把三条线的设计资产收进可复用、可扩展的 UI Kit 与规范里。我负责线上场景的盘点整理，以及组件设计与规范制定。

02Video：Voucher 与 Button

Video 的规范主要是为 Content Design 团队建设的 Content Design Library 1.0 贡献 Voucher 和 Button 组件。组件不只用在 Video，也横向覆盖团队里的其他业务。

Voucher 优惠券组件

主要用于 Video 和 Live 场景，让用户领取、使用、查看优惠。组件覆盖不同长宽尺寸，承载物流、平台、商家三类优惠，并针对不同语言和地区做了适配。

Button 按钮组件

基于 Shopee 现有设计体系，对 Content Design 团队的全部场景做规整，拆出 20 / 24 / 28 / 36 / 40px 五个尺寸，覆盖填充/线框、夜间模式等样式，以及 Add to Cart 的按钮变体。

03Minifeed：UI Kit 与促销信息

Minifeed UI Kit

Minifeed 需求支持里常出现用旧稿 demo 新功能、元素布局漂移、新需求上线后框架变动等问题。于是对 Minifeed 2.0 做 UI Kit 化，拆成媒体区和商品信息区，元素做 Variation 后对应不同的业务属性和功能内容。

信息区的展示策略是电商设计里最关键的部分。整理成 UI Kit 后，又针对 Label 展示策略、排序优先级、信息结构变动做了几轮需求，并对商品属性选择、用户评论、AI 卖点总结等内容在信息区的插入或替换做了多轮实验。

促销信息规整

促销信息同时用于 Video 和 Minifeed，有 Label 和 Banner 两种互相对应的形式：Promo Label 规整了促销信息的展示优先级和业务分类；Promo Banner 解决了两个场景里 Icon 尺寸、字号间距不一致的问题。

04Chat：四端统一

Chat 的日常需求要适配 Chat Room、Web Chat、Mini Chat、PC Mall 四大场景，横跨移动端与网页端，面向消费者和商家两种角色。

Chat 历经多个团队接手，整理时先把前置设计文档收集起来，筛出执行需求中用得最多的部分。难点除了处理大量历史文件，还在于为四个端的同一状态确立统一的对应关系；部分组件还要把商家端和买家端的变体分开处理。