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

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

375pt 基准 设计基础 组件与状态 品牌与文案 可信度与截图证据

证据与可信度标记

截图实证 跨页面归纳 设计推断 平台系统规则 待补证
使用方式:每项规范同时说明“可信度”和“证据类型”。成熟设计规范仅用于组织和展示方法,不用于替代淘宝截图或制造数值。
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 安全区,不是淘宝自定义间距。
读图规则:橙色半透明区域=被测间距;橙色尺寸线=起止边界;白色标签=换算值。截图为 1170px 宽、约 3×像素密度,除 iOS 34px 安全区外均不能等同于源设计 Token,因此统一标记“推断”。
04 ICONOGRAPHY

图标规范 · 网格、家族与状态

中可信
24×24px 画布 20×20px 图形区 文字基线参考

基础网格

画布与安全区

常用图标盒为 24×24px;主体建议控制在约20×20px;四边预留约2px光学空间。实际图形可因视觉重量越过建议轮廓,不机械缩放。

中心与基线

先对齐几何中心,再做约0.5–1px光学校正(推断)。与文字并排时优先对齐视觉中心;Tab 图标使用统一底边参考。

描边与端点

常规线性图标约1.5–1.7px;高强调操作约2px(均为推断)。使用圆端点与圆连接,避免同一组图标线宽混用。

圆角与细节

线性图标内部小转角约2px(推断);小尺寸删除次要细节。业务图标允许容器、面性和有限多色,不等同于系统线性图标。

1. 系统操作图标

搜索

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

返回

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

更多

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

不可确认图标

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

2. 导航与 Tab 图标

默认线性

颜色#666666;盒子24px;主体约20px;用于未选中Tab。

选中面性

颜色#FF5000;轮廓与默认态保持一致,只改变填充和颜色。

禁用态

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

反白态

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

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

状态图标

面性或线面结合;使用状态色;建议盒子20–24px。

业务容器图标

容器28×28px;圆角约8px(推断);内部图形16–20px。

频道图标

常见容器40–48px(推断);允许面性、多色和品牌表达。

消息头像/服务标识

32px左右容器(推断);可为圆形或圆角方形,不套用系统图标描边规则。

尺寸与使用矩阵

场景 图标盒 建议图形区 最小热区 说明
行内辅助 16px 约14px 随父组件 与12–14px文字共同出现
列表操作 20px 16–18px 44pt 图形可小,点击区域不能缩小
导航/Tab 24px 约20px ≥44pt 默认线性、选中可面性
业务图标 28–32px 20–24px ≥44pt 允许带容器
频道入口 40–48px 24–32px 整个入口 允许品牌色和多色

状态与一致性

默认 #666666
选中 #FF5000
禁用 #C8C8C8
反白 #FFFFFF
正确

同组使用相同盒子、线宽、端点、透视和视觉重量;选中态保持轮廓语义一致。

避免

混用Unicode字符、不同线宽、不同透视或大小失衡的图标;不要仅为填满盒子机械拉伸。

淘宝依据:底部Tab IMG_8605–8614;消息列表 IMG_8637–8638;AI助手 IMG_8387–8391。展示方法参考 Apple HIG、SF Symbols、Ant Design Icons;外部规范只用于文档组织,不替代淘宝截图数据。描边、光学偏移与业务图标尺寸均标为推断。
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

1
结构:复选框 / 商品图 / 商品信息 / 数量步进器
尺寸 列表行随内容;图片约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
截图实证 跨页面归纳 组件尺寸依据1170px截图按约3×换算;无法确认的源Token均标注“推断”。
11 STATES & FEEDBACK

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

证据不均

加载中

触发:首次进入或局部数据请求
文案:正在加载…;避免重复说明
操作:通常无操作
样式推断

骨架加载

触发: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

触控与无障碍 · 轻量补充

建议项为主

图形与热区

24px可视图标置于至少44×44pt热区中;透明扩展热区不改变图形大小。

iOS系统规则

颜色之外

选中态同时使用颜色、面性或勾选标识;错误状态同时提供图标与文字。

设计建议

AI可理解性

标注AI生成属性、推荐依据及来源边界;价格和库存以实时商品信息为准。

跨页面归纳

待验证内容

VoiceOver顺序、动态字体、焦点管理和键盘遮挡无法从截图确认,需要真机测试。

待真机补证
14 CONFIDENCE REPORT

总体置信度报告 · 先看总分,再决定信多少

综合 6.6 / 10
6.6/ 10当前规范综合可信度
可用于方向判断、界面盘点和设计讨论;不宜直接视为淘宝官方源 Token。

按 11 个主要规范板块统计:高可信按 9 分、中可信按 6 分、低可信按 3 分加权。静态截图能较好支持颜色、字体层级、组件结构与圆角关系,但无法证明源变量、精确热区、动效时长、缓动曲线及无障碍行为。

✅ 4 项高可信板块字体、颜色、圆角、组件结构
🟡 5 项中可信板块间距、图标、阴影、状态、品牌文案
❓ 2 项低可信板块动效、无障碍与真机行为
证据标签审计:截图实证 36 处、跨页面归纳 18 处、平台规则 4 处、设计推断 19 处、待补证 14 处。标签可能在同一规范项中并存,因此不与板块数量直接相加。
15 EVIDENCE BACKLOG

建议补充的截图与录屏清单

用于提升总分
01 字体与动态字体

同一页面在系统标准、放大一级和最大辅助字号下的截图;补充开发标注或字体检查器结果。

验证字体家族、字重、截断和重排。
02 精确颜色取样

导出无压缩原图,覆盖主按钮、价格、弱选中、错误、Toast 和蒙层。

验证色值、透明度与颜色 Token。
03 图标源文件

导出 Tab、返回、搜索、更多、相机、语音及 AI 业务图标的 SVG 或 PDF。

验证盒子、描边、端点与光学偏移。
04 间距标注基准

提供原始 1170px 截图,并注明设备、显示缩放及是否裁切。

验证 16px 边距、8px Gutter 与卡片间距。
05 组件完整状态

补充按钮、搜索、SKU、Tab、商品卡的默认、按下、禁用、选中、错误和加载状态。

验证状态颜色、边框与透明度。
06 浮层与遮罩

补充 Dialog、Popover、半屏层打开前后与拖动中间态。

验证蒙层、阴影、圆角与安全区。
07 60fps 动效录屏

录制按钮反馈、页面转场、半屏层、Toast、骨架屏和 AI 生成全过程。

验证时长、缓动、方向与中断行为。
08 空、错与恢复

补充无结果、断网、接口失败、库存变化、支付失败及重试后的状态。

验证恢复路径与错误文案。
09 VoiceOver 与键盘

录制焦点顺序、朗读、键盘弹出、输入框聚焦和焦点回落。

验证无障碍名称、顺序与遮挡。
10 账号与业务差异

补充新老用户、88VIP、有浏览历史账号及大促期间的同页面对照。

验证个性化、会员与活动态差异。
16 REDESIGN GUIDANCE

改版建议 · 必须遵守与可以突破

设计决策边界

必须遵守

  • 品牌识别:主操作、价格和关键选中态保持淘宝橙的稳定语义。
  • 信息层级:结论优先,理由其次,商品与下一步操作最后。
  • 状态完整:交互组件覆盖默认、按下、禁用、加载、成功与失败路径。
  • 触控底线:关键操作至少 44×44pt;iOS 安全区不可被覆盖。
  • AI可信边界:标注 AI 生成与依据,不对功效、库存和价格作确定承诺。
  • 证据纪律:截图无法证明的值继续标注“推断”或“待补证”。

可以突破

  • 入口位置:AI 助手可进入搜索、详情、购物车或订单任务。
  • 卡片组合:可重组评价、参数与推荐理由,但需保留来源。
  • 对话形态:可使用结构化问题、条件 Chips、对比表和筛选器。
  • 视觉层级:可减少阴影,更多使用背景、描边和留白。
  • 动效表达:可简化装饰动画,优先反馈速度并支持减少动态效果。
  • 文案人格:可以更主动、口语化,但不能牺牲准确性与用户控制。
使用规则:先看 6.6/10 总分;✅ 可作为设计约束,🟡 用于方案假设并安排验证,❓ 只作为研究清单,不作为上线验收标准。