Retail Guide UX — 导购工具交互设计
Overview
本 Skill 面向"门店导购经营工具"（嵌入企微环境的移动端工具）的交互设计，负责两类产出：
1. 生成交互方案——输出"流程图 + 可交互 HTML 原型 + 文字说明"三件套；
2. 写 PRD 交互说明——将交互方案转写为 PRD 中可直接使用的功能/交互说明。
所有设计须符合导购的真实使用场景与企微嵌入约束。
产品上下文（每次设计前必读）
工具是门店经营与管理工具，服务对象是门店一线导购。模块清单：
- 基础经营：买单收银、发货、订单管理、库存管理
- 数据与内容：数据报表、内容管理
- 会员与营销：会员管理、发券、客户线索、商品线索
- 任务与智能：做任务、智能导购、AI 练货
导购画像：站立、单手/手持移动设备、嘈杂门店、可能弱网、低学习成本诉求。
默认设计原则：快速完成任务、大触控目标、信息可扫读、异常有兜底。
技术形态（影响方案可落地性）：项目 webpos-uni（POS+），基于 uni-app / Vue2，主入口为微信小程序、H5 作为 Pad 端辅助；UI 采用 Vant Weapp + 自研业务组件。设计交互方案时应遵循小程序/H5 双端约束（条件编译、无运行时动态组件等）。模块与分包映射见原项目概览。
> UI 规范见 references/ui-harness-*.md（每次设计必须读取）；真实页面样例索引见 references/ui-samples-index.md，对应图片在 assets/。
触发与流程判断
以下请求触发本 Skill："设计 XX 页面的交互"、"这个功能交互怎么设计"、"看下这个页面交互合不合理"、"把 XX 的交互写进 PRD"、"给 XX 出个交互方案"。
- 用户要新方案 → 走【流程 A：生成交互方案】
- 用户要 PRD 文字 → 走【流程 B：写 PRD 交互说明】
- 两者都要 → 先 A 后 B，B 引用 A 的产物
流程 A：生成交互方案
前置确认（缺则追问，不臆测）：页面/功能目标、使用场景与入口、涉及的已有数据、期望的页面层级。
步骤：
1. 明确目标与约束——结合产品上下文，确认本次任务服务哪个模块、哪个导购任务。
2. 参照页面样例——查 references/ui-samples-index.md，若该模块已有真实页面（如订单/会员/素材），先 Read 对应 assets/ 截图参照页面骨架与信息层级。
3. 确定页面结构——导航层级、页面流转、主次信息排序。
4. 逐区块设计组件与交互——每个区块给出：组件类型、默认/交互/异常状态、操作反馈、弱网处理。
5. 输出三件套（格式见【输出规范】）：
- 流程图：页面流转 / 状态机；
- 可交互 HTML 原型：移动端尺寸、真实点击交互；
- 文字说明：按页面/区块结构化。
HTML 原型要求：移动端视口（375×812 或 360×800），可点击跳转，状态可切换；生成方法参考 html Skill（路径见 Resources）。
流程 B：写 PRD 交互说明
按团队统一 PRD 模板（references/prd-interaction-template.md）输出：相关链接、文档说明、需求相关方、需求正文（背景/价值/清单/流程图/需求描述/埋点）。交互核心内容在「需求描述」区块按页面逐块展开，每块含组件、触发、反馈、异常四要素。
输出规范
- 流程图：用 mermaid 或可视化呈现页面流转/状态机，标注关键分支。
- 可交互 HTML 原型：独立 .html，移动端比例，交互真实可点，弱网/空态/异常态可演示。
- 文字说明：按页面→区块层级组织；每个交互点给出组件、触发、反馈、异常四要素。
设计约束（导购工具专属）
- 严格遵循 UI 规范：任何页面/组件的颜色、字号、圆角、间距、组件选择、组合模式，一律以
references/ui-harness-*.md为准，不得自创样式 token。 - 移动端触控：触控目标 ≥ 44px / 88rpx、拇指热区优先、防误触（危险操作需二次确认）。
- 企微嵌入：登录态复用、页面层级遵循企微内 H5/小程序规范、返回/退出路径清晰。
- 弱网降级：核心操作有 loading、失败有重试、离线可暂存。
- 信息密度：单屏核心任务优先，避免信息过载；数据项按导购关心度排序。
- 文字跨行规避（原型与页面通用）：批量展示的字段/标签/按钮文案，一律优先用图标 或 图标 + 简短文字，避免长文字换行造成视觉破碎。具体约定：
- 商品名、款号尺码等长字段在卡片内用
white-space:nowrap + text-overflow:ellipsis单行省略，右侧价格等固定数值不因文字长度被挤换行（用 flex 布局，文字区flex:1; min-width:0，数值flex:none）。 - 行为/状态类信息（浏览/收藏/试穿/加购/咨询/分享 等）用图标 + 短词（图标 12px、线条风格，配合文字），不用"浏览3次 · 收藏 · 试穿"这类长串文本。
- 按钮、Tab、筛选项、chip 等一律
white-space:nowrap，文案控制在 2-4 字，必要时缩写（如"查看详情 ›"不拆行）。 - 间距与字体符合导购查看/操作链路：触控目标是第一优先（按钮 ≥ 32px、底部主按钮 ≥ 40px/88rpx），文字层级按 ui-harness 字号体系（数值 20-26px 大而醒目、标签 11-12px 弱化），卡片内字段用"标签左灰 + 值右黑"的对齐，行距与块距对齐间距梯度（4/8/12/16px），保证单手持机扫读时信息密度与可点性平衡。
Resources
references/ui-harness.md—— UI 规范总入口与阅读顺序references/ui-harness-foundation.md—— 颜色 / 字号 / 圆角 / 间距 / 安全区 / 换算基线references/ui-harness-components.md—— 现成组件与组件规格（Tab / Button / Field / Cell / Popup / Picker / Stepper / Upload 等）references/ui-harness-patterns.md—— 组合模式（Summary / Status Cell / Bottom Bar / Form 联动）references/prd-interaction-template.md—— PRD 交互说明模板references/ui-samples-index.md—— 页面样例索引（样例→可参照设计点）assets/—— 真实页面截图（01~10，对应订单/会员/素材/商品/任务/线索等核心页面）- HTML 原型生成参考 Skill：
/Users/liushiqiang/Library/Application Support/Doubao/Default/.doubao/agent_mode/workspace/.skills/html
