Internship @抖音电商

Product Designer
Design Skill building
UI/UX Design
AI Assistant

搜索结果页新增导购卡

导购体验

1 需求背景

聚焦 73% 首次搜索未成交即流失的用户，以最低打扰的流内插卡形式引导递进换搜，基于用户实时浏览行为个性化出词，把宽泛搜索意图收敛为有效购物路径。

场景

搜索结果页

目标用户

单次搜索后未换搜、未成交的用户

细分时机

用户在浏览中需要进行需求细化的节点

形式

通过插入导购卡，引导用户递进换搜

2 项目挑战&价值

解决了一个旧的业务问题

搜索递进式导购是一个25年数据负向的项目，在26年进行优化后再次上线，预期数据达到GMV 304w/天

2026.8

3 了解历史背景：
往期导购卡数据负向，设计这次怎么优化？

-0.5292%
人均搜次
-0.7731%
人均支付天
-0.8764%
每千用户带来的搜索订单

离线出词

最低价算不准

Learning

1算法：应结合用户行为做在线生词
离线出词偏离了用户行为习惯，通过实时在线生词满足用户购物偏好
2设计：需优化卡片框架提高点击率
不再沿用【推荐搜索词+最低商品价】的卡片框架，需重新设计适合用户收敛购物意图的框架

4 用户路径

用户在搜索结果页浏览
点击商品卡进入商品详情页
返回搜索结果页，插入导购卡
点击推荐query发起换搜

5 方案设计

5.1 理解搜索场景特征，确定改造范围

1搜索结果页信息密度高

用户快速浏览、比较和决策，信息密度高

2新增导购卡优先信息层级稳定

不改变原有商品流结构，
优先保证信息层级稳定和浏览效率

5.2 识别用户意图差异，设计两种卡片框架

框架1：多图展示快速种草

品类: 服饰类
搜索词: 海边度假穿搭
用户意图: 快速发现喜欢的款式
用户诉求: 看商品图判断样式

商品图

推荐搜索词

框架2：图+卖点辅助判断

品类: 个护家清类
搜索词: 洗发水
用户意图: 找到适合自己的洗护方案
用户诉求: 商品图+功效信息

商品图

AI 卖点

搜索推荐词

5.3 设计卡片自动锚定，提高「屏效」

trigger卡坑位较低时，页面先自动上滑锚定，再插入导购卡，确保整张导购卡完全曝光在用户可视区域内。

6 方案产出

OLD

NEW！

7 总结与复盘

总结

导购卡应结合实时浏览行为提供递进搜索方向，并根据品类决策差异组织图片与卖点，帮助用户逐步明确需求。

复盘

卡片曝光和点击提升不等于导购有效，需结合换搜后的成交转化验证增益，同时关注插卡与自动锚定对浏览节奏的影响。

电商搜索接入豆包

AI导购

1 需求背景

引入豆包能力和 IP，在商搜结果页新增豆包入口，探索长尾意图的用户增长路径，提升搜索对非传统电商意图的导购承接效率，长期有利于用户搜索心智和复访。

核心问题

商城搜索有约11%的非传统电商意图承接效率差

趋势判断

长尾内容型搜索需求会增长：豆包电商问答能力逐步完善；语音搜退全

竞品已布局

淘宝、小红书已引入 AI 能力建设

业务目标

引入豆包能力和 IP，提升搜索对于非传统导购意图的承接效率

2 项目挑战&价值

协同豆包产品和设计

协同多场域的产品与设计团队，对齐意图分流、半屏交互及商品结果联动，保障不同场域的体验一致性

2026.9

创新型需求，ai导购新形式

面向传统搜索难以承接的复杂意图，探索对话与商品浏览融合的陪逛体验

2026.9

3 竞品调研

调研淘宝搜索结果页的ai导购链路

搜商品

固定入口

跳页回答，
打断用户
购物行为

问内容

固定入口

首位卡承接

重新刷新回答，
与首位卡内容不一致

4 方案设计

4.1 基础布点：搜索场景「新增豆包入口」

结合用户行为判断搜中页豆包入口位置，并同步搜后布点+首位卡，保证豆包触点前后一致

搜中页

搜后结果页

豆包chat页

高曝光，用户预期稳定

自然承接用户发现意图

与搜中一致

首位卡承接

4.2 尝试创新：「让豆包成为搜索能力的一部分」

基于AI适合理解自然语言提问的特点，尝试融合语音搜索与豆包结果

基于AI的自然语言
理解能力，融合语音搜

tab形式内嵌
结果页支持继续追问

上滑回溯
上一搜索结果

4.3

更沉浸？更轻量？
贯穿搜索全链路的购物助手

用户可自然提问、边逛边追问；AI 理解意图并即时改写结果或对话回应，不跳页、不打断购物节奏。

边聊边逛

常驻入口+八分屏对话

豆包以常驻悬浮入口和八分屏对话形式出现，用户可以一边浏览商品一边追问、筛选、对比

豆包常驻悬浮入口

Floating entry

八分屏承接回答

split-screen experience

3/用户意图分流

我想问内容！

我想询问详细的比价/评测信息再决定

我想找商品！

我希望直接给我商品列表让我挑选

a.内容类意图--八分屏承接

“iPhone17pro和iPhone17比怎么样”

我想知道这两个机型的价差、性能、影像等功能差异，越详细越好！且不能打扰到我的正常购物行为。

iPhone17pro和iPhone17比怎么样

一句话：差价3000元（256GB），核心差在性能、影像、接口、机身材质。

1、性能 & 内存

iPhone 17：A19（5 核 GPU）+ 8GB 运存，铝金属机身，177g 更轻薄，日常微信、短视频、普通游戏完全流畅够用
iPhone 17 Pro：满血 A19 Pro（6 核 GPU）+ 12GB 大运存，钛金属边框，204g；带 VC 散热。多开 APP 后台留存更强，大型游戏长时间不降频、剪辑大视频更稳

2、影像（最大分水岭）

iPhone 17：双 4800 万（主摄 + 超广角）,日常拍照、人像、夜景、朋友圈、旅游拍照完全够用，仅支持2 倍无损变焦，远拍只能数码裁切模糊

b.商品类意图--刷新商品流

“春季女士外套”

我需要直接给我推荐好看的春季女士外套，可以直接呈现在搜索结果页上让我浏览挑选。

思路1:自动刷新商品流

问题：无法承接用户跳出该页面的操作，
强制打断用户心智

Bad case！

进入商品详情页后行为被中断

思路2:用户点击后再刷新商品流

优势：给足用户刷新的预期，不打扰用户跳页操作

4/豆包状态反馈：建立信任

AI 改写搜索结果需要时间，通过明确的加载和回写状态反馈，建立用户对 AI 操作的可解释性和信任感。

上滑态

默认态

回答态

可点击态

4.4 横向多场域体验一致性

豆包形象识别、电商豆包 SDK、AI 检索进程、与其他场域(如猜你喜欢)的豆包助手拉齐体验一致。

文本/栅格一致性

交互一致性

当然！以下是一篇关于东亚移民的论文的详细提纲，包含标题和各个章节的内容：

东亚移民研究：马来西亚、新加坡和中国的案例分析

1. 引言

1.1 研究背景

预警系统：通过气象、地震、海洋等监测设备，对自然灾害进行预警，并通过各种渠道向公众发布预警信息。
应急响应系统：在紧急情况下，政府可以通过该系统迅速启动应急预案，调集救援力量和物资，进行应急处置。
信息发布系统：通过各种媒体渠道，如电视、广播、手机短信等，向公众发布紧急警报和信息。

韩国公共警报系统在应对自然灾害、突发事件等紧急情况方面发挥了重要作用，提高了政府的应急处置能力和公众的自我保护意识。

Llst 间距

段间距

内容意图
八分屏承接

商品意图
刷新商品流

5 总结与复盘

总结

AI 导购的价值在于将对话中的需求澄清与商品筛选联动，帮助用户在边逛边问中逐步收敛需求并完成决策。

复盘

后续应按意图验证半屏问答与结果改写的适用性，重点关注用户决策成本，以及是否打断原有浏览节奏。

6 AI导购未来发展与创新方向？

Joel Lewenstein

“It should be a sparring partner with you. It shouldn’t take your thoughts verbatim. It should push back.”

26.04

未来 AI 导购应主动澄清需求冲突、解释商品取舍，

帮助用户判断什么适合自己、哪些功能不值得额外付费，让推荐成为共同决策的过程。

沉淀AI Friendly设计资产

Skill

0 我的AI设计技能MAP

Vibe Design

AI 灵感探索

Vibe Coding

设计Skill搭建

设计资产AI化

Agent 行为设计

个性化记忆设计

AI 对话体验设计

1 设计流程与各阶段提效 Skill

语言skill

帮助PM快速出Demo对焦；帮助设计师解决基础C级需求并辅助S级需求的前期快速探索

评审skill

帮助设计师在交付前进行自查并给出具体修改建议；解决评审依赖人工，质量不稳定的问题

验收skill

帮助前端交付前进行自验，缩短设计师的验收周期，保证验收质量的稳定

需求理解

设计探索

方案细化

设计评审

验收上线

2 沉淀设计 SKill 的共同基础：AI Friendly 知识库

2.1 如何让AI读懂设计资产？

## 价格规则 {#price} 
| 元素 | 规格 |
| --- | --- | 
| 主价 | 18px / 18px，半粗 |
| 货币符号、小数及单位 | 字号 11px | 
| 主价与销量间距 | 4px | 
| 主价与 `/2瓶` 等后缀间距 | 2px | 
| 价格色 Token | 待正式 Token 库确认 |

{
  "color": {
    "price": {
      "red": "#FF0000"
    }
  }
}

1规则类用MD

按标题、价格、标签等拆分章节，让具体规则可独立引用

1数值类用 JSON

结构化记录颜色、字号、间距等 Token，方便准确查询和比对

1可渲染类给 HTML/CSS 示例，可搭配 SVG

HTML/CSS 提供实现参考，SVG/PNG 补充视觉示例

2.2 如何确保沉淀的知识可用、可信？

1设计稿先做 AI 友好预处理，再让 AI 提取

全量 Auto Layout（gap/padding）

语义化图层命名（商品标题/价格/卖点标签）

Token 绑定（颜色/字号/间距/圆角）

2前置制定标准化沉淀模板，避免自由生成

模板化沉淀消除 AI 幻觉和输出不一致，

每份资产结构统一、字段完整、可预期

组件资产 .md（文件结构）

├── ① 基本信息：组件名、ID、版本、适用场景（双列/单列、标品/非标）

├── ② 结构说明：区域划分（图片区/标题区/价格区/卖点区/标签区）、层级关系

├── ③ 尺寸规范：卡片宽高、各区域尺寸、间距、padding

├── ④ Token 映射：标题 → typography/body/large；价格色 → color/price/red

├── ⑤ 变体说明：双列/单列、有卖点/无卖点、有图/无图

├── ⑥ 状态枚举：默认、加载中、空状态、异常（如图片加载失败）、文字超长截断

├── ⑦ 使用规则：适用/不适用场景、与其他组件的互斥规则

└── ⑧ 正反例参考：正例图、反例图（带标注）

绑定token

图层语义化命名

2.3 如何让 AI 按任务准确取用有效知识？

1建立【资产清单索引】，精确定位知识

为每份资产生成唯一 ID，并记录适用场景、确认状态、版本和路径

{
  "id": "comp-product-card-001",
  "name": "商品卡规范",
  "type": "component
  "tags": ["商品卡", "搜索结果页", "双列"],
  "path": "01-components/product-card/spec.md",
  "consumers": ["评审Skill-搜索结果页"],
  "dependencies": ["token-color-001", "token-typography-001"],
  "version": "1.2.0"
}

abc

调用Skill时，AI的读取路径：

a.用关键词匹配，找到编号（id）和路径（path）

b.按照文件路径（path）读取文件

c.看依赖项读取关联件