淘宝 iOS AI 导购设计规范总结

基于归档中的淘宝 AI 导购核心界面分类构建；所有推断值均明确标注。

430 × 932pt 目标画板源截图 390 × 844pt 设计基础组件与状态品牌与文案可信度与截图证据

证据与可信度标记

截图实证跨页面归纳设计推断平台系统规则待补证

使用方式：每项规范同时说明“可信度”和“证据类型”。成熟设计规范仅用于组织和展示方法，不用于替代淘宝截图或制造数值。

01 TYPOGRAPHY

字体系统 · 层级、组合与使用规则

高可信

中文字体

淘宝智能导购

优先使用 iOS 系统中文字体 PingFang SC 字体家族推断

截图可确认字形特征与系统字体接近，无法确认源文件配置。

西文与符号

AI Shopping 2026

优先使用 SF Pro Text / Display iOS系统规则

英文、数字与系统符号应保持同一平台字体节奏。

数字与价格

¥ 214 .77

数字建议使用等宽数字特性设计推断

用于价格、参数对比和购物车金额的纵向对齐。

Token	用途	实际示例	规格	证据
display-24	AI欢迎页大标题	千问 · 购物助手	24/30 · 700 · #111111	IMG_8387
title-20	页面大标题	商品参数对比	20/26 · 600 · #111111	跨页面归纳
nav-17	导航栏标题	千问	17/24 · 600 · #111111	截图换算
section-16	模块/卡片标题	为你找到这些商品	16/22 · 600 · #111111	多截图
body-14	AI回答/正文	根据你的预算推荐以下商品	14/21 · 400 · #111111	IMG_8623–8632
product-14	商品标题	主动降噪蓝牙耳机	14/20 · 500 · #111111	商品流归纳
body-secondary-13	次要正文	已结合预算与场景筛选	13/19 · 400 · #666666	层级归纳
caption-12	辅助说明	内容由 AI 生成	12/18 · 400 · #666666	跨页面归纳
weak-11	销量/服务	已售2000+ · 7天无理由	11/16 · 400 · #999999	商品卡
label-10	角标/Tab文字	AI推荐	10/14 · 400–500	IMG_8605
price-22	主价格	¥214.77	22/26 · 700 · #FF5000	IMG_8664

商品标题截断

主动降噪蓝牙耳机无线头戴式长续航通勤学习专用

最多2行；超出截断推断

AI长回答

根据你的预算和使用场景，建议优先关注续航、主动降噪和佩戴舒适度。较长内容自然换行，不使用商品标题式省略。

价格组合

¥299

¥ 214 .77 券后价

符号与小数缩小，整数保持视觉中心。

基线与数字对齐

商品价格　¥214　已售2k+

单行导航标题

商品参数对比

保持单行，避免与左右操作热区重叠。

文字颜色层级

主要信息

次要说明

弱提示信息

正确

同一模块最多使用2–3个清晰层级；商品标题和AI正文采用不同截断策略；价格符号、整数和小数建立明确层级。

避免

同一卡片混用多种相近字号或字重；辅助文字低于可读对比度；价格符号与整数完全同尺寸；长回答强制两行截断。

截图实证跨页面归纳来源：IMG_8387–8391、IMG_8605–8614、IMG_8623–8632、IMG_8657–8666、IMG_8670–8680。动态字体行为和具体字体配置属于待源文件/真机补证。

02 COLOR

颜色系统 · 原始色、语义色与使用规则

高可信

品牌色

brand-primary #FF5000
CTA、价格、选中

brand-secondary #FF7A00
渐变辅色

brand-soft #FFF1E8
弱强调背景

中性色

gray-900 #111111
主要文本

gray-600 #666666
次要文本

gray-400 #999999
弱提示

gray-300 #C8C8C8
禁用

gray-200 #E5E5E5
边框

gray-100 #EEEEEE
分割线

gray-050 #F5F5F5
页面底

white #FFFFFF
卡片/浮层

功能色

success #18A058
成功（推断）

warning #FF9F0A
警告/星级

error #E93323
错误/降价

link #1677FF
链接（推断）

特殊与蒙层

ai-surface #F3F7F9
AI页面底

overlay rgba(0, 0, 0, 0.45)
弹层蒙层（推断）

toast-bg rgba(0, 0, 0, 0.78)
Toast背景（推断）

Semantic Token	映射	使用范围	证据
color-brand-primary	#FF5000	主按钮、价格、Tab选中、关键标签	跨页面归纳
color-text-primary	#111111	标题、正文和关键参数	截图实证
color-text-secondary	#666666	说明、评价摘要和辅助操作	跨页面归纳
color-text-placeholder	#999999	占位、销量和弱提示	近似取色
color-surface-page	#F5F5F5	常规页面底色	截图实证
color-surface-ai	#F3F7F9	千问/AI会话背景	IMG_8387
color-border-subtle	#EEEEEE	列表分割线和弱边框	多页面
color-overlay	rgba(0, 0, 0, 0.45)	弹窗/半屏浮层后的遮罩	透明度推断

高强调

¥214.77

品牌橙用于主要行动、核心价格和选中态；控制面积，避免整屏高饱和。

中强调

AI推荐　已选中

橙色文字、图标和标签用于局部强调，不与主按钮竞争。

低强调

为你推荐

弱提示背景不承担主操作。

浅橙背景用于推荐、权益和轻提示区域。

组件状态颜色

默认主操作
#FF5000

按下态
#E94800（推断）

禁用态
#DDDDDD / #999999

弱选中态
#FFF1E8 / #FF5000

错误/降价
#E93323

组合	近似对比度	结论	说明
#111111 / #FFFFFF	约18.9:1	通过 AA/AAA	主要正文
#666666 / #FFFFFF	约5.7:1	通过 AA	次要正文
#999999 / #FFFFFF	约2.8:1	小字不通过 AA	只能用于非关键弱提示
#FFFFFF / #FF5000	约3.5:1	适合大字/加粗	主按钮需结合字号字重

正确

为颜色赋予稳定语义；选中态同时改变颜色和形态；价格红、错误红与品牌橙按用途区分；大面积背景优先使用低饱和色。

避免

同一语义使用多个近似橙色；只靠颜色表达选中；在白底上使用#999999承载关键小字；自行补造暗色模式Token。

截图实证跨页面归纳来源：IMG_8387–8391、IMG_8605–8616、IMG_8637–8668、IMG_8670–8680。功能绿、链接蓝、按下色与蒙层透明度为设计推断；暗色模式为待补证。

03 SPACING

间距系统 · 测量对象与方向

截图换算

页面左右边距

16px

16px 商品流

测量对象：屏幕左右边缘 → 商品流外沿。约 16px 推断 · IMG_8605

内容区上下

约16px

约24px

测量对象：区块边界 → 首项顶部 / 末项底部。16/24px 推断 · IMG_8623、8670

卡片外间距

卡片 A

卡片 B

约12–16px

测量对象：卡片 A 底边 → 卡片 B 顶边。范围值推断 · 多页面对照

卡片内边距

约12px

测量对象：卡片轮廓 → 首个内容像素。约 12px 推断 · IMG_8663、8670

双列网格 Gutter

约8px

测量对象：左列右边 → 右列左边。约 8px 推断 · IMG_8609

导航栏内部

□

千问

12px

12px 44×44 热区 44×44 热区

测量对象：屏幕边缘 → 44×44pt 操作热区；标题位于两侧热区之间。12px 推断 · IMG_8387

商品卡片内部

商品标题

¥214

图文约8px

标题/价格约4px

测量对象：图片底边 → 标题区；标题行框底边 → 价格行框顶边。8/4px 推断 · IMG_8605

Tab 图标与文字

首页

约2px

约8px

测量对象：20px 图标盒底边 → 10/14px 文字行框顶边；文字行框底边 → Tab 内容底边。2/8px 推断 · IMG_8605

底部安全区

Tab 内容区

34px

测量对象：Tab 内容区底边 → 屏幕物理底边。34px 为带 Home Indicator 设备的 iOS 安全区，不是淘宝自定义间距。

适配规则：目标画板为 430 × 932pt；源截图为 1170 × 2532px（390 × 844pt，@3x）。字体、图标、44pt 最小触控热区和 34pt 底部安全区保持 iOS 平台尺寸；页面宽度、内容容器和双列商品流按 430pt 画板重新排布，不做整页机械缩放。橙色半透明区域＝被测间距；橙色尺寸线＝起止边界；白色标签＝换算值。

04 ICONOGRAPHY

图标规范 · 网格、描边、容器、角标与状态

高可信

24×24pt 基础画布约20–22pt 图形区文字基线参考

基础网格

画布与安全区

基础线性图标以 24×24pt 画布组织，主体约20–22pt；订单状态等高识别图标可扩展到28pt。画布是对齐框，不是强制可见边界。

中心与基线

同一入口组先统一画布中心和可见图形重心，再做约0.5–1pt光学校正。图标与下方文字整体居中；Tab 图标统一底边和文字基线。

描边与端点

补图中主线性图标换算后约1.8–2pt描边；使用圆端点、圆连接，轮廓转角保持柔和。细小内部信息可降至约1.5pt，但同一图标不得出现明显重量跳变。

圆角与细节

线性图标内部小转角约2pt；24pt以下删除非必要细节。彩色业务入口使用32–36pt圆形/圆角容器，内部白色符号保持单一语义，不套用线性图标规则。

补充截图图标复刻 · 22 个可见图标

展示说明：以下均按补图中的实际语义和轮廓重新绘制为规范示意，不再使用方块占位。它们用于说明形态、圆角与组合关系，不是淘宝官方可交付 SVG。

顶部快捷操作 · 24–26pt线性

地址定位轮廓；尖端圆连接

专属客服耳机圆角矩形；复杂度较高

设置齿轮外轮廓；内圆同心

常用服务入口 · 24–28pt线性

快递六边包裹；右上数字

收藏五角星；尖角采用圆连接

关注店铺店棚圆连接；店体小圆角

足迹圆形时钟；圆端指针

我的订单 · 26–28pt线性＋角标

待付款钱包外框 r≈3pt

待发货购物袋 r≈3pt

待收货物流车；圆轮与圆连接

待评价消息框 r≈3pt；胶囊角标

退款／售后圆形容器；人民币符号

彩色业务入口 · 32–36pt容器

芭芭农场绿色圆形；白色农场符号

币

领淘金币双层圆；外环与内芯同心

红包签到圆角方 r≈9pt；红包内芯

试用领取粉红圆形；白色品牌字形

票

发票中心橙色圆形；高对比单字

底部 Tab · 24–28pt＋面性选中态

首页房屋外轮廓 r≈2pt

视频圆角方 r≈4pt

消息消息框＋多数字胶囊

购物车篮筐转角 r≈2pt

我的淘宝28pt圆形；白色微笑符号

图标圆角规范 · 单独 Token 与应用矩阵

线条端点／连接

round / round
所有开放路径使用圆端点；折线使用圆连接。它决定“柔和感”，不是CSS盒子的 border-radius。

轮廓内部小转角

2pt

icon-corner-sm = 1.5–2pt
用于购物车篮筐、房屋、店铺、包裹等紧凑轮廓；避免尖锐90°折角。

线性外框

3–4pt

icon-frame-md = 3–4pt
用于钱包、购物袋、消息框、视频框等24–28pt外框；外框越大可取上限。

小业务容器

8–10pt

icon-container-md = 8–10pt
用于32–36pt红包、权益、频道容器；内层图形圆角应小于外容器。

圆形业务容器

50%

icon-container-full = 50%
用于农场、淘金币、试用、发票以及底部选中态。禁止用接近圆形的非等宽胶囊替代。

数字角标

h/2

badge-radius = 高度 ÷ 2
角标高14–18pt，对应半径7–9pt；单数字最小宽度等于高度，多数字只横向延展。

选中 Tab 容器

14pt

tab-selected-radius = 14pt
截图中约28pt橙色圆形；白色符号位于18–20pt图形区，不能贴边。

点击热区

44pt

hit-area ≥ 44×44pt
热区圆角不属于图标视觉Token；透明热区不得改变图标本身的形状或光学尺寸。

截图图标	可见形态	建议圆角	证据结论
地址、客服、设置、星标、时钟	自由线性轮廓	round端点＋round连接	不设置统一外接矩形圆角
钱包、购物袋、消息、视频	线性圆角外框	3–4pt	截图可确认柔和方形趋势；数值为换算范围
房屋、店铺、购物车、包裹	结构性折线轮廓	1.5–2pt	保留结构辨识，不做过度圆润
红包签到	32–36pt圆角方容器	8–10pt	截图实证为软方形业务容器
农场、金币、试用、发票、选中Tab	正圆容器	50%	截图实证为圆形面性体系
订单/消息数字	圆／胶囊角标	7–9pt	半径始终等于角标高度一半

1. 系统操作图标

搜索

盒子24px；主体约19px；描边约2px（推断）；用于搜索框和导航操作。

盒子24px；描边约1.7px（推断）；视觉主体可向左偏约0.5px以改善平衡。

三个等径圆点；圆心共用水平基线；整个图标仍占24px盒子。

不可确认图标

截图无法准确还原时使用统一24px占位盒，不临时混入风格不同的字符图标。

2. 导航与 Tab 图标

默认线性

未选中态使用#111111附近深色线性图标；画布约24–26pt、主体约22–24pt。图标与10–12pt标签形成稳定的上下组合。

底部选中面性

补图“我的淘宝”采用约28pt橙色圆形容器＋白色符号，标签同步变橙。选中态可以由线性轮廓切换为面性品牌容器，但入口语义与视觉中心必须保持一致。

禁用态

建议色#C8C8C8（推断）；不能只依赖降低透明度导致线宽视觉变细。

反白态

白色图形用于橙色实底；保持与默认态相同的盒子和光学重量。

3. 状态、业务与品牌图标

状态图标

订单、物流、收藏等状态优先深色线性表达；建议盒子24–28pt。只有选中、提醒或强业务属性才使用品牌色面性。

业务容器图标

小型业务容器约28pt；圆角约8pt；内部图形16–20pt。与32–36pt频道入口分级使用，不能在同一行随机混用。

频道图标

本补图常见彩色入口约32–36pt；大型频道/活动入口才扩展到40–48pt。允许面性、多色和品牌表达，但同一入口行保持容器外形与占位一致。

消息头像/服务标识

32px左右容器（推断）；可为圆形或圆角方形，不套用系统图标描边规则。

尺寸与使用矩阵

场景	图标盒	建议图形区	最小热区	说明
行内辅助	16pt	约14pt	随父组件	与12–14px文字共同出现
列表操作	20–24pt	16–22pt	44pt	图形可小，点击区域不能缩小
导航/Tab	24–26pt	约22–24pt	≥44pt	默认深色线性；选中可切换28pt品牌面性容器
业务图标	26–28pt	22–26pt	≥44pt	订单、物流等复杂语义；统一视觉重量
频道入口	32–36pt	18–26pt	整个入口	彩色业务入口；大型活动入口可扩至40–48pt
数字角标	高14–18pt	白色10–11pt数字	随父入口	单数近圆、多数胶囊；2pt白色隔离边

状态与一致性

默认 #111111

选中 #FF5000 / 橙色面性

禁用 #C8C8C8

反白 #FFFFFF

正确

同组使用相同画布、约1.8–2pt线宽、圆端点和视觉重量；复杂图标靠光学校正而非机械缩放；角标与图标之间保留白色隔离边。

避免

混用Unicode字符、不同线宽与不同透视；把彩色业务入口当成普通线性图标；让角标遮挡主体；未选中Tab使用过浅灰导致识别度下降。

新增高可信证据：efd3abb00bb3366a613c9b9675b60ba0.jpg，1170 × 2532px（390 × 844pt，@3x）“我的淘宝”页面。本章节已按截图重绘22个可见图标：地址、客服、设置、快递、收藏、店铺、足迹、五个订单状态、五个彩色业务入口和五个底部Tab。截图可直接确认线性/面性双体系、圆端点/圆连接、圆角方业务容器、正圆业务容器、橙色圆形选中态及数字角标；1.5–4pt内部/外框圆角、8–10pt软方容器、14–18pt角标和约1.8–2pt描边属于截图换算范围，仍非淘宝官方源Token。

05 RADIUS

圆角系统 · Token、映射与组合

高可信

4px

radius-xs 角标、优惠标签

8px

radius-sm 输入框、评价卡

10px

radius-card 商品卡（推断）

12px

radius-md 内容面板、AI卡

16px

radius-lg 弹窗、半屏层

22px

radius-button 44px主按钮

20px

radius-search 40px搜索框

16px

radius-sku 32px SKU胶囊

999px

radius-full 头像、完全胶囊

组件	外层圆角	内层圆角	依据/说明
标签/券	4px	—	IMG_8605、8664
评价摘要/列表容器	8px	4px	IMG_8663、8670（内层推断）
商品推荐卡	10–12px	6–8px	IMG_8605、8623（推断）
半屏弹层	顶部16px	8–12px	IMG_8615、8667
主按钮	22px	—	44px高度的一半
搜索框	20px	—	40px高度的一半
SKU	16px	—	32px高度的一半

组合原则（非淘宝源 Token）：内层圆角 ≈ max(外层圆角 − 内边距, 0)。用于避免内外曲率相互冲突。

1. 独立卡片

四角 12px

独立商品卡或AI卡：四角都保留。内部图片建议6–8px，不能大于外层圆角。

2. 垂直卡片组

首卡：上角12px

中卡：0

末卡：下角12px

连续列表共享外轮廓：首项保留上角，中间项清零，末项保留下角；内部使用分割线。

3. 半屏弹层

仅顶部 16px

蒙层本身无圆角；白色Sheet只保留左上、右上16px；底部贴合屏幕边缘。

4. 图片嵌套卡片

图片 8px

外卡 12px

外卡12px、内图片8px、内边距10px（示意）。内层圆角小于外层，曲线方向保持一致。

5. 横向对比卡

左列

右列

仅最外轮廓保留12px；两列交界处为直角，以1px分割线区分，不为每列重复加圆角。

6. 标签叠加图片

AI推荐

图片/卡片保持10px；叠加标签独立使用4px。标签圆角不改变外卡曲率。

淘宝依据：标签 IMG_8605、8664；商品卡 IMG_8605–8614；浮层 IMG_8615、8667；参数对比 IMG_8670–8678。组合展示方式参考成熟设计系统的Shape Token与组件映射方法；嵌套公式及部分内层圆角为推断。

06 ELEVATION

层级与深度系统

中可信

Level 0 · 页面

页面底

使用背景色和分区，不依靠阴影。

截图实证

Level 1 · 卡片

内容卡

普通商品卡、AI摘要卡；阴影非常弱，部分页面仅用底色区分。

跨页面归纳

Level 2 · 吸附

吸底栏

底部结算栏、悬浮操作；通过顶部阴影与内容分层。

参数推断

Level 3 · 临时浮层

菜单

负反馈菜单、Popover或局部选择面板。

IMG_8615

Level 4 · 模态

Dialog

Dialog、半屏弹层；与45%蒙层共同建立最高层级。

浮层归纳

L0 页面内容
#F5F5F5

L1 内容卡片
白色表面

L2 吸底操作
顶部阴影

L3 临时浮层
局部遮挡

L4 模态层
蒙层 + 白卡

正确

优先使用背景色、分割线和蒙层表达层级；仅对吸附、浮层和模态层使用明显阴影；同层组件使用同一深度。

避免

所有卡片都加重阴影；用阴影替代分割线；半屏层没有蒙层；吸底栏与滚动内容缺少层级区分。

截图实证页面、卡片和浮层关系来自 IMG_8615、8667、8679；具体阴影参数受截图压缩影响，统一视为设计推断。建议Token：L1 0 1px 3px/8%；L2 0 4px 14px/10%；L3 0 8px 24px/14%；L4 0 16px 42px/18%。

07 COMPONENTS

组件系统 · 统一文档模板

截图归纳

导航搜索 AI对话商品决策交易消息与物流

导航与搜索

AI页面导航栏

用于千问、参数对比等二级页面。

千问

结构：左操作区 / 居中标题 / 右操作区

尺寸	100% × 44px
圆角	无
内边距	左右约12px（推断）
热区	左右44×44pt
文字	17/24px · 600 · #111111

默认标题截断返回

IMG_8387

搜索框

承载文字、相机、语音及搜索操作。

搜索白色短袖

适合通勤的白色短袖

宽松显瘦短袖

结构：搜索输入区 / 多模态操作 / 搜索按钮 / 联想列表

尺寸	高度40px；宽度自适应
圆角	20px
内边距	左12px；图文约8px
热区	各操作≥44pt
文字	14/20px · #999999

空输入输入中联想展开清除

IMG_8649–8652

底部Tab栏

五个一级导航入口，选中态使用品牌橙。

首页视频消息购物车我的

结构：五等分Tab项 / 图标盒 / 文字 / iOS安全区

尺寸	内容高54px + 安全区34px
圆角	无
内边距	顶部4px、底部8px（推断）
热区	每项约75×54pt
文字	10/14px；默认#666666

默认选中徽章安全区

IMG_8605–8614

AI对话与商品承接

AI回答气泡

展示AI长回答、解释和推荐理由。

AI购物助手

根据你的预算和使用场景，建议重点关注续航、降噪和佩戴舒适度。

结构：助手身份 / 正文 / 可选商品与操作区

尺寸	最大宽度约80%（推断）
圆角	4px 12px 12px 12px（推断）
内边距	10px 12px
热区	气泡内操作≥44pt
文字	正文14/21px · #111111

生成中完成中断引用商品

IMG_8623–8632

快捷追问

帮助用户收窄条件或继续比较。

500以内推荐适合通勤继续对比

结构：胶囊容器 / 短问题文案

尺寸	高度约28–32px（推断）
圆角	14–16px
内边距	5px 10–12px
热区	建议透明扩展至44pt
文字	12/18px · #666666

默认按下换一组

IMG_8628–8631

AI商品推荐卡

在对话中承接商品评估和购买。

AI推荐

主动降噪蓝牙耳机

¥214

结构：商品图 / 推荐标签 / 标题 / 价格 / 操作

尺寸	图片约72×72px（推断）
圆角	外8px；图片6px
内边距	8px
热区	整卡可点；操作≥44pt
文字	标题14/20；价格22/26

默认横滑已加购失效

IMG_8623–8629

商品决策与交易

SKU/尺码选择

选择颜色、尺码或不可售规格。

颜色分类

结构：分组标题 / SKU胶囊 / 选中和不可选状态

尺寸	高度32px
圆角	16px
内边距	0 12px
热区	建议44pt
文字	12/18px

未选已选不可选库存变化

IMG_8667–8668

参数对比表

对齐展示两件商品的关键差异。

商品A

降噪43dB

续航40h

商品B

降噪40dB

续航35h

结构：商品列 / 参数行 / 差异值 / 中央分割线

尺寸	双列等宽
圆角	外层8–12px（推断）
内边距	10–12px（推断）
热区	选择商品≥44pt
文字	标题14/20；参数12/18

未选择已选择差异高亮更换商品

IMG_8670–8678

购物车商品行

完成勾选、数量调整和促销确认。

商品标题

¥127.2

结构：复选框 / 商品图 / 商品信息 / 数量步进器

尺寸	列表行随内容；图片约72px（推断）
圆角	商品图6px；步进器4px
内边距	行内约8px
热区	复选框/步进按钮≥44pt建议
文字	标题14/20；价格18–22px

未选已选编辑失效

IMG_8679

底部结算操作栏

汇总实付价格并承载主操作。

¥127.2

结构：金额汇总 / 促销说明 / 主按钮 / 安全区

尺寸	内容高约60px（推断）
圆角	按钮22px
内边距	栏8px；按钮0 16px
热区	按钮≥44×44pt
文字	金额22/26；按钮14/20

可结算不可结算价格更新

IMG_8679–8680

消息与履约

消息列表项

承载AI助手、店铺服务和订单通知。

AI购物助手 2
为你找到新的推荐

物流服务

结构：头像/业务图标 / 标题 / 摘要 / 时间 / 未读徽章

尺寸	单行min-height约56px（推断）
圆角	列表容器8px
内边距	9px 10–12px
热区	整行≥44pt
文字	标题14/20；摘要12/18

已读未读置顶左滑操作

IMG_8637–8638

物流节点

展示当前节点、历史节点和异常说明。

运输中
预计今天送达

已到达转运中心

商家已发货

结构：时间线 / 当前节点 / 历史节点 / 异常操作

尺寸	节点min-height约42px（推断）
圆角	节点点位全圆
内边距	左侧内容24px
热区	查看详情整行可点
文字	当前14/20；历史12/18

正常延迟异常已签收

IMG_8684–8687

截图实证跨页面归纳原始组件尺寸依据 1170 × 2532px 截图按约 3×换算，并适配到 430 × 932pt 目标画板；平台级字号、触控热区和安全区不随画板宽度放大，无法确认的源 Token 均标注“推断”。

11 STATES & FEEDBACK

状态与反馈 · 生命周期矩阵

证据不均

1 初始默认内容或空输入

2 处理中加载、骨架、AI生成

3 结果成功、空结果或更新

4 恢复重试、调整条件或转人工

加载中

触发：首次进入或局部数据请求
文案：正在加载…；避免重复说明
操作：通常无操作

样式推断

骨架加载

触发：AI卖点总结生成前
文案：不额外展示长文案
操作：等待或返回

IMG_8663

AI生成中

正在为你生成推荐

触发：提交购物问题后
文案：正在理解你的需求…
操作：停止生成（待补证）

需录屏复核

操作成功

✓ 已添加至购物车

触发：加购、选择或保存完成
文案：结果明确，避免只写“成功”
操作：查看购物车/继续浏览

截图归纳

空结果

暂无相关商品

触发：搜索或筛选无结果
文案：说明结果为空及可调整条件
操作：清除筛选/重新搜索

截图未覆盖

网络/业务错误

网络开小差了，请重试

触发：网络失败或服务不可用
文案：原因简短、不给用户归责
操作：重新加载/返回

截图未覆盖

物流异常

物流更新较慢，正在为你核实

触发：节点长时间未更新
文案：解释当前情况和处理进度
操作：催物流/联系客服

IMG_8684–8687

价格/库存变化

商品价格已更新，请确认后结算

触发：结算前价格或库存发生变化
文案：指出变化对象及影响
操作：重新确认/移除失效商品

流程归纳

轻量反馈 Toast

已添加至购物车

触发：无需中断当前任务的成功提示
文案：短句、明确结果
操作：自动消失；通常无按钮

样式推断

截图实证骨架屏、选择状态和物流异常有样本支持；待补证空状态、通用错误、AI中断和Toast缺少清晰静态截图，不作为淘宝既有视觉事实。

08 MOTION

动效系统 · 节奏、场景与降级

待录屏复核

快速反馈

100–160ms

按钮按下、图标状态切换。

推断

控件切换

180–240ms

选择、标签、局部内容更新。

推断

浮层转场

280–360ms

半屏层、菜单和Dialog进出。

待逐帧测量

加载循环

1.2–1.6s

骨架流光、AI生成提示。

待逐帧测量

按下反馈

建议使用轻微缩放或亮度变化，不改变布局尺寸。截图不能证明具体缩放比例。

半屏弹层

选择商品

进入：从底部向上；退出：向下返回。蒙层透明度随进度同步。

Toast

已添加至购物车

短时出现，不阻断任务；停留时长和位置需真机复核。

骨架加载

结构先于内容出现；避免多个方向不同的加载动画同时运行。

AI生成

正在理解你的需求…

持续时间不可预测，需要明确进行中状态，并允许中止或离开（交互待补证）。

手势关系

↑ 上滑展开商品层

↓ 下滑关闭半屏层

↔ 横滑浏览商品

手势与页面实际录屏对应后再确定阈值和回弹参数。

运动原则

快反馈、慢转场；进入强调目的地，退出强调返回；相同类型组件使用一致方向；运动结束后焦点落到新内容。

降级与限制

遵循“减少动态效果”；关闭循环装饰动画；骨架屏可静态显示；不以运动作为唯一状态提示。

待录屏复核可用素材：AI商品需求对话录屏、微详情录屏、智能识图录屏和淘宝视频录屏。当前时长与缓动仅为成熟移动端动效范围建议，不作为淘宝线上实测值。

12 BRAND & CONTENT

品牌与文案 · AI导购内容规范

跨页面归纳

人格与语气

亲切、直接、任务导向；主动帮助用户收窄条件，但不替用户作绝对判断。

“根据你的预算，我为你筛选了几款更适合通勤的耳机。”

信息顺序

先回答结论，再解释理由，最后给出商品或下一步操作。

建议优先选A
续航更长，且符合你的预算。

可信与边界

AI生成内容需要注明性质；涉及功效、价格和库存时避免确定性承诺。

AI生成请结合商品详情与实时价格判断。

场景	推荐结构	示例	证据
欢迎语	身份 + 能力 + 启动问题	“Hi，我是你的购物助手。想买什么？我可以帮你筛选。”	IMG_8387–8391
推荐结果	结论 + 2–3条理由 + 商品承接	“这几款更符合500元预算，重点比较降噪和续航。”	IMG_8623–8629
追问	一次只补充一个关键条件	“你更在意降噪，还是佩戴舒适度？”	多轮对话归纳
对比	差异结论 + 参数证据 + 使用建议	“A续航更长；B更轻，适合长时间佩戴。”	IMG_8672–8678
加载	正在做什么 + 可预期结果	“正在结合你的条件筛选商品…”	设计建议
失败	发生什么 + 用户可执行操作	“暂时无法生成推荐，请稍后重试。”	待补证
物流异常	当前状态 + 已采取动作 + 下一步	“物流更新较慢，正在为你核实，可联系商家继续处理。”	IMG_8684–8687

按钮文案

使用动作 + 结果：查看商品、继续对比、加入购物车、重新加载。

避免：确定、好的、点击这里。

数字与价格

¥前置；整数突出、小数缩小；原价删除线；优惠标签紧邻实际价格。

¥299 ¥214.77 券后价

标点与空格

中文使用全角标点；短标签不加句号；问句使用“？”；中文与价格/单位按视觉需要保留间距。

正确

说清推荐依据；用“更适合”“建议关注”等可解释表达；将风险和限制放在用户能看到的位置。

避免

使用“最好”“绝对适合”“保证有效”等绝对化语言；堆砌AI术语；生成大量理由却没有下一步操作。

截图实证跨页面归纳来源：AI助手欢迎页、追问、商品推荐、参数对比和物流异常截图。失败、权限拒绝等文案缺少样本，标为待补证。

13 ACCESSIBILITY

触控与无障碍 · 轻量补充

建议项为主