AI页面导航栏
用于千问、参数对比等二级页面。
| 尺寸 | 100% × 44px |
| 圆角 | 无 |
| 内边距 | 左右约12px(推断) |
| 热区 | 左右44×44pt |
| 文字 | 17/24px · 600 · #111111 |
基于归档中的淘宝 AI 导购核心界面分类构建;所有推断值均明确标注。
优先使用 iOS 系统中文字体 PingFang SC 字体家族推断
截图可确认字形特征与系统字体接近,无法确认源文件配置。优先使用 SF Pro Text / Display iOS系统规则
英文、数字与系统符号应保持同一平台字体节奏。数字建议使用等宽数字特性 设计推断
用于价格、参数对比和购物车金额的纵向对齐。| 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行;超出截断 推断
根据你的预算和使用场景,建议优先关注续航、主动降噪和佩戴舒适度。较长内容自然换行,不使用商品标题式省略。
符号与小数缩小,整数保持视觉中心。
保持单行,避免与左右操作热区重叠。
次要说明
弱提示信息同一模块最多使用2–3个清晰层级;商品标题和AI正文采用不同截断策略;价格符号、整数和小数建立明确层级。
同一卡片混用多种相近字号或字重;辅助文字低于可读对比度;价格符号与整数完全同尺寸;长回答强制两行截断。
| 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) | 弹窗/半屏浮层后的遮罩 | 透明度推断 |
品牌橙用于主要行动、核心价格和选中态;控制面积,避免整屏高饱和。
橙色文字、图标和标签用于局部强调,不与主按钮竞争。
弱提示背景不承担主操作。
浅橙背景用于推荐、权益和轻提示区域。
| 组合 | 近似对比度 | 结论 | 说明 |
|---|---|---|---|
| #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。
常用图标盒为 24×24px;主体建议控制在约20×20px;四边预留约2px光学空间。实际图形可因视觉重量越过建议轮廓,不机械缩放。
先对齐几何中心,再做约0.5–1px光学校正(推断)。与文字并排时优先对齐视觉中心;Tab 图标使用统一底边参考。
常规线性图标约1.5–1.7px;高强调操作约2px(均为推断)。使用圆端点与圆连接,避免同一组图标线宽混用。
线性图标内部小转角约2px(推断);小尺寸删除次要细节。业务图标允许容器、面性和有限多色,不等同于系统线性图标。
盒子24px;主体约19px;描边约2px(推断);用于搜索框和导航操作。
盒子24px;描边约1.7px(推断);视觉主体可向左偏约0.5px以改善平衡。
三个等径圆点;圆心共用水平基线;整个图标仍占24px盒子。
截图无法准确还原时使用统一24px占位盒,不临时混入风格不同的字符图标。
颜色#666666;盒子24px;主体约20px;用于未选中Tab。
颜色#FF5000;轮廓与默认态保持一致,只改变填充和颜色。
建议色#C8C8C8(推断);不能只依赖降低透明度导致线宽视觉变细。
白色图形用于橙色实底;保持与默认态相同的盒子和光学重量。
面性或线面结合;使用状态色;建议盒子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 | 整个入口 | 允许品牌色和多色 |
同组使用相同盒子、线宽、端点、透视和视觉重量;选中态保持轮廓语义一致。
混用Unicode字符、不同线宽、不同透视或大小失衡的图标;不要仅为填满盒子机械拉伸。
| 组件 | 外层圆角 | 内层圆角 | 依据/说明 |
|---|---|---|---|
| 标签/券 | 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高度的一半 |
使用背景色和分区,不依靠阴影。
截图实证普通商品卡、AI摘要卡;阴影非常弱,部分页面仅用底色区分。
跨页面归纳底部结算栏、悬浮操作;通过顶部阴影与内容分层。
参数推断负反馈菜单、Popover或局部选择面板。
IMG_8615Dialog、半屏弹层;与45%蒙层共同建立最高层级。
浮层归纳优先使用背景色、分割线和蒙层表达层级;仅对吸附、浮层和模态层使用明显阴影;同层组件使用同一深度。
所有卡片都加重阴影;用阴影替代分割线;半屏层没有蒙层;吸底栏与滚动内容缺少层级区分。
用于千问、参数对比等二级页面。
| 尺寸 | 100% × 44px |
| 圆角 | 无 |
| 内边距 | 左右约12px(推断) |
| 热区 | 左右44×44pt |
| 文字 | 17/24px · 600 · #111111 |
承载文字、相机、语音及搜索操作。
| 尺寸 | 高度40px;宽度自适应 |
| 圆角 | 20px |
| 内边距 | 左12px;图文约8px |
| 热区 | 各操作≥44pt |
| 文字 | 14/20px · #999999 |
五个一级导航入口,选中态使用品牌橙。
| 尺寸 | 内容高54px + 安全区34px |
| 圆角 | 无 |
| 内边距 | 顶部4px、底部8px(推断) |
| 热区 | 每项约75×54pt |
| 文字 | 10/14px;默认#666666 |
展示AI长回答、解释和推荐理由。
| 尺寸 | 最大宽度约80%(推断) |
| 圆角 | 4px 12px 12px 12px(推断) |
| 内边距 | 10px 12px |
| 热区 | 气泡内操作≥44pt |
| 文字 | 正文14/21px · #111111 |
帮助用户收窄条件或继续比较。
| 尺寸 | 高度约28–32px(推断) |
| 圆角 | 14–16px |
| 内边距 | 5px 10–12px |
| 热区 | 建议透明扩展至44pt |
| 文字 | 12/18px · #666666 |
在对话中承接商品评估和购买。
| 尺寸 | 图片约72×72px(推断) |
| 圆角 | 外8px;图片6px |
| 内边距 | 8px |
| 热区 | 整卡可点;操作≥44pt |
| 文字 | 标题14/20;价格22/26 |
选择颜色、尺码或不可售规格。
| 尺寸 | 高度32px |
| 圆角 | 16px |
| 内边距 | 0 12px |
| 热区 | 建议44pt |
| 文字 | 12/18px |
对齐展示两件商品的关键差异。
降噪43dB
续航40h
降噪40dB
续航35h
| 尺寸 | 双列等宽 |
| 圆角 | 外层8–12px(推断) |
| 内边距 | 10–12px(推断) |
| 热区 | 选择商品≥44pt |
| 文字 | 标题14/20;参数12/18 |
完成勾选、数量调整和促销确认。
¥127.2
| 尺寸 | 列表行随内容;图片约72px(推断) |
| 圆角 | 商品图6px;步进器4px |
| 内边距 | 行内约8px |
| 热区 | 复选框/步进按钮≥44pt建议 |
| 文字 | 标题14/20;价格18–22px |
汇总实付价格并承载主操作。
| 尺寸 | 内容高约60px(推断) |
| 圆角 | 按钮22px |
| 内边距 | 栏8px;按钮0 16px |
| 热区 | 按钮≥44×44pt |
| 文字 | 金额22/26;按钮14/20 |
承载AI助手、店铺服务和订单通知。
| 尺寸 | 单行min-height约56px(推断) |
| 圆角 | 列表容器8px |
| 内边距 | 9px 10–12px |
| 热区 | 整行≥44pt |
| 文字 | 标题14/20;摘要12/18 |
展示当前节点、历史节点和异常说明。
| 尺寸 | 节点min-height约42px(推断) |
| 圆角 | 节点点位全圆 |
| 内边距 | 左侧内容24px |
| 热区 | 查看详情整行可点 |
| 文字 | 当前14/20;历史12/18 |
暂无相关商品
按钮按下、图标状态切换。
推断选择、标签、局部内容更新。
推断半屏层、菜单和Dialog进出。
待逐帧测量骨架流光、AI生成提示。
待逐帧测量建议使用轻微缩放或亮度变化,不改变布局尺寸。截图不能证明具体缩放比例。
进入:从底部向上;退出:向下返回。蒙层透明度随进度同步。
短时出现,不阻断任务;停留时长和位置需真机复核。
结构先于内容出现;避免多个方向不同的加载动画同时运行。
持续时间不可预测,需要明确进行中状态,并允许中止或离开(交互待补证)。
↑ 上滑展开商品层
↓ 下滑关闭半屏层
↔ 横滑浏览商品
手势与页面实际录屏对应后再确定阈值和回弹参数。
快反馈、慢转场;进入强调目的地,退出强调返回;相同类型组件使用一致方向;运动结束后焦点落到新内容。
遵循“减少动态效果”;关闭循环装饰动画;骨架屏可静态显示;不以运动作为唯一状态提示。
亲切、直接、任务导向;主动帮助用户收窄条件,但不替用户作绝对判断。
先回答结论,再解释理由,最后给出商品或下一步操作。
AI生成内容需要注明性质;涉及功效、价格和库存时避免确定性承诺。
| 场景 | 推荐结构 | 示例 | 证据 |
|---|---|---|---|
| 欢迎语 | 身份 + 能力 + 启动问题 | “Hi,我是你的购物助手。想买什么?我可以帮你筛选。” | IMG_8387–8391 |
| 推荐结果 | 结论 + 2–3条理由 + 商品承接 | “这几款更符合500元预算,重点比较降噪和续航。” | IMG_8623–8629 |
| 追问 | 一次只补充一个关键条件 | “你更在意降噪,还是佩戴舒适度?” | 多轮对话归纳 |
| 对比 | 差异结论 + 参数证据 + 使用建议 | “A续航更长;B更轻,适合长时间佩戴。” | IMG_8672–8678 |
| 加载 | 正在做什么 + 可预期结果 | “正在结合你的条件筛选商品…” | 设计建议 |
| 失败 | 发生什么 + 用户可执行操作 | “暂时无法生成推荐,请稍后重试。” | 待补证 |
| 物流异常 | 当前状态 + 已采取动作 + 下一步 | “物流更新较慢,正在为你核实,可联系商家继续处理。” | IMG_8684–8687 |
使用动作 + 结果:查看商品、继续对比、加入购物车、重新加载。
避免:确定、好的、点击这里。
¥前置;整数突出、小数缩小;原价删除线;优惠标签紧邻实际价格。
中文使用全角标点;短标签不加句号;问句使用“?”;中文与价格/单位按视觉需要保留间距。
说清推荐依据;用“更适合”“建议关注”等可解释表达;将风险和限制放在用户能看到的位置。
使用“最好”“绝对适合”“保证有效”等绝对化语言;堆砌AI术语;生成大量理由却没有下一步操作。
24px可视图标置于至少44×44pt热区中;透明扩展热区不改变图形大小。
iOS系统规则选中态同时使用颜色、面性或勾选标识;错误状态同时提供图标与文字。
设计建议标注AI生成属性、推荐依据及来源边界;价格和库存以实时商品信息为准。
跨页面归纳VoiceOver顺序、动态字体、焦点管理和键盘遮挡无法从截图确认,需要真机测试。
待真机补证按 11 个主要规范板块统计:高可信按 9 分、中可信按 6 分、低可信按 3 分加权。静态截图能较好支持颜色、字体层级、组件结构与圆角关系,但无法证明源变量、精确热区、动效时长、缓动曲线及无障碍行为。
同一页面在系统标准、放大一级和最大辅助字号下的截图;补充开发标注或字体检查器结果。
验证字体家族、字重、截断和重排。导出无压缩原图,覆盖主按钮、价格、弱选中、错误、Toast 和蒙层。
验证色值、透明度与颜色 Token。导出 Tab、返回、搜索、更多、相机、语音及 AI 业务图标的 SVG 或 PDF。
验证盒子、描边、端点与光学偏移。提供原始 1170px 截图,并注明设备、显示缩放及是否裁切。
验证 16px 边距、8px Gutter 与卡片间距。补充按钮、搜索、SKU、Tab、商品卡的默认、按下、禁用、选中、错误和加载状态。
验证状态颜色、边框与透明度。补充 Dialog、Popover、半屏层打开前后与拖动中间态。
验证蒙层、阴影、圆角与安全区。录制按钮反馈、页面转场、半屏层、Toast、骨架屏和 AI 生成全过程。
验证时长、缓动、方向与中断行为。补充无结果、断网、接口失败、库存变化、支付失败及重试后的状态。
验证恢复路径与错误文案。录制焦点顺序、朗读、键盘弹出、输入框聚焦和焦点回落。
验证无障碍名称、顺序与遮挡。补充新老用户、88VIP、有浏览历史账号及大促期间的同页面对照。
验证个性化、会员与活动态差异。