270 lines
20 KiB
Markdown
270 lines
20 KiB
Markdown
---
|
||
name: 纸条AI衣橱小程序UI全量重构设计稿
|
||
overview: 为「纸条AI衣橱」微信小程序（18 个页面）重新设计一套「杂志风纯白留白 + 毛玻璃悬浮层、纯黑白灰零彩色」的苹果式简约高级 UI，并以单个自包含 HTML 文件交付可点击跳转、tab 可切换、弹窗可开关的高保真交互原型，完整覆盖现有全部功能与全部状态。
|
||
design:
|
||
architecture:
|
||
framework: html
|
||
styleKeywords:
|
||
- 杂志编辑部风
|
||
- 毛玻璃浮层
|
||
- 零彩色灰阶
|
||
- 大留白
|
||
- 发丝线分隔
|
||
- 衬线大标题
|
||
- 悬浮胶囊标签栏
|
||
- 苹果级缓动
|
||
- 买手店线稿质感
|
||
fontSystem:
|
||
fontFamily: Songti SC / PingFang SC
|
||
heading:
|
||
size: 34px
|
||
weight: 500
|
||
subheading:
|
||
size: 17px
|
||
weight: 500
|
||
body:
|
||
size: 15px
|
||
weight: 400
|
||
colorSystem:
|
||
primary:
|
||
- "#0A0A0A"
|
||
- "#1C1C1E"
|
||
- "#2C2C2E"
|
||
background:
|
||
- "#FFFFFF"
|
||
- "#F7F7F5"
|
||
- "#EFEFED"
|
||
text:
|
||
- "#0A0A0A"
|
||
- "#6E6E73"
|
||
- "#AEAEB2"
|
||
functional:
|
||
- "#E5E5E7"
|
||
- "#D2D2D7"
|
||
- "#0A0A0A"
|
||
- "#AEAEB2"
|
||
todos:
|
||
- id: baseline
|
||
content: 用 [subagent:code-explorer] 核对 18 页区块、状态矩阵与微文案，产出页面清单基线
|
||
status: completed
|
||
- id: design-system
|
||
content: 建立零彩色设计令牌、双字阶、设备壳、毛玻璃浮层与 SVG 图标衣物线稿组件库
|
||
status: completed
|
||
dependencies:
|
||
- baseline
|
||
- id: interaction-core
|
||
content: 实现栈式路由、标签与分段切换、状态切换器、四类弹层控制器与左侧索引
|
||
status: completed
|
||
dependencies:
|
||
- design-system
|
||
- id: flow-closet
|
||
content: 完成登录、衣橱网格、上传三态与衣物详情四态页面
|
||
status: completed
|
||
dependencies:
|
||
- interaction-core
|
||
- id: flow-outfit
|
||
content: 完成穿搭三段式、穿搭详情、穿搭编辑双视图与 AI 推荐页
|
||
status: completed
|
||
dependencies:
|
||
- interaction-core
|
||
- id: flow-share
|
||
content: 完成运势内页、分享列表、衣柜分享创建三视图与两个分享详情
|
||
status: completed
|
||
dependencies:
|
||
- interaction-core
|
||
- id: flow-profile
|
||
content: 完成我的页、通知列表与通知详情、编辑资料底部抽屉
|
||
status: completed
|
||
dependencies:
|
||
- interaction-core
|
||
- id: flow-commerce
|
||
content: 完成商城双视图与订单页，含支付确认弹窗与待支付倒计时
|
||
status: completed
|
||
dependencies:
|
||
- interaction-core
|
||
- id: spec-and-qa
|
||
content: 补设计规范页，用 [skill:playwright-cli] 逐屏截图走查全链路与状态矩阵
|
||
status: completed
|
||
dependencies:
|
||
- flow-closet
|
||
- flow-outfit
|
||
- flow-share
|
||
- flow-profile
|
||
- flow-commerce
|
||
- id: deploy-preview
|
||
content: 用 [integration:cloudStudio] 部署原型，产出手机可预览链接
|
||
status: completed
|
||
dependencies:
|
||
- spec-and-qa
|
||
---
|
||
|
||
## 产品概述
|
||
|
||
「纸条 AI 衣橱」是一款智能衣橱与穿搭小程序，覆盖衣物管理、AI 穿搭推荐、每日运势、好友分享、会员额度与订单等完整业务。本次对全部 18 个页面做整体 UI 重构，产出可点击走通全流程的单文件交互原型，整体基调为「苹果简约高级」。
|
||
|
||
## 核心功能
|
||
|
||
- 登录与新手礼包引导
|
||
- 衣橱：分类浏览、拍照上传衣物（含 AI 识别进度）、衣物详情与 15 项属性编辑
|
||
- 穿搭：我的穿搭 / 已收藏 / 社区三段浏览，创建与编辑穿搭，AI 推荐生成与保存
|
||
- 运势：星座今日运势、四项评分、幸运色与幸运数字
|
||
- 分享：衣柜分享与穿搭分享的创建、查看、只读浏览与失效态
|
||
- 我的：资料与额度概览、通知、商城会员与额度包、订单管理
|
||
- 全局：5 个底部标签、骨架屏 / 空态 / 异常态、弹窗与底部抽屉、未读红点
|
||
|
||
## 视觉要求
|
||
|
||
- 采用「浅色为底 + 玻璃浮层」：内容区像杂志内页，纯白纸面、衬线大标题、超大留白、发丝分隔线，衣物图片是唯一主角；导航栏、底部标签、弹窗与抽屉用毛玻璃悬浮在内容之上
|
||
- 零彩色：完全用黑白灰层次表达信息与状态，唯一色彩来自衣物本身与幸运色
|
||
- 页面间可真实点击跳转、标签可切换、弹窗可开关，能像真机一样走完整流程
|
||
- 重构不只是换皮，需按产品设计逻辑重排信息架构、层级与交互反馈
|
||
|
||
## 技术栈
|
||
|
||
- 交付物：单个自包含 HTML 文件，路径 `/root/zt-closet-wxmini-frontend/stitch_ai_ui_v2/index.html`（新建目录，不覆盖旧 `stitch_ai_ui/`）
|
||
- 纯原生 HTML5 + CSS3（CSS 自定义属性设计令牌、Grid/Flex、backdrop-filter、clip-path）+ 原生 ES6 JavaScript，无框架、无构建、无包管理
|
||
- 零外部依赖：不使用 Tailwind CDN / FontAwesome / Google Fonts（旧稿的致命问题：离线打开即掉样式），图标全部用内联 `<svg><symbol>` sprite，字体走系统字体栈
|
||
- 图片占位：内联 SVG 灰度线稿（衬衫 / 裤装 / 连衣裙 / 外套 / 鞋 / 包 / 配饰剪影），既离线可用又天然契合零彩色调性
|
||
- 验证：用 playwright-cli 以 `file://` 打开原型，逐屏截图并点击走查
|
||
|
||
## 实现方案
|
||
|
||
核心策略：**一套设计令牌 + 一个页面容器 + 一个路由栈 + 一个状态机**，让 18 屏共享同一套视觉与交互内核，避免逐页重造。
|
||
|
||
1. **设计系统先行**：用 CSS 变量固化零彩色灰阶、衬线/无衬线双字阶、间距刻度、发丝线、玻璃材质、软阴影与统一缓动曲线。所有页面只消费令牌，禁止硬编码颜色。
|
||
2. **页面容器**：18 屏写成 `<section class="screen" data-screen="wardrobe">`，默认 `display:none`，由路由控制显隐；5 个 tab 屏共享同一个底部玻璃 tabBar（提到 screen 之外，随 tab 路由显隐），与真实小程序 `custom-tab-bar` 的共享方式一致。
|
||
3. **栈式路由**：`navigate(screen, params)` / `back()`，维护页面栈以支持真实返回；`params` 驱动同一屏的变体（`owner=1|0` 决定穿搭详情是属主态还是访客态、`readonly=true` 决定衣物详情是否隐藏编辑删除、`tab=flow` 决定商城进入额度明细视图）。
|
||
4. **状态机**：每屏内用 `data-state`（`skeleton | empty | list | loading | error`）切换，右侧状态切换器直接改这个属性，一套标记覆盖完整状态矩阵，无需为每个状态写重复结构。
|
||
5. **统一弹层**：四类 —— Modal（居中玻璃卡）、Sheet（底部抽屉带抓手）、ActionSheet（iOS 底部动作表）、Toast（深色玻璃胶囊），全部由同一 overlay 控制器管理，保证「可开关」。
|
||
6. **真实跳转**：所有可点元素声明 `data-nav="clothes-detail"` + `data-params='{"uuid":"c1"}'`，在 `#app` 上做事件委托统一处理，保证能像真机一样点着走。
|
||
|
||
关键取舍：
|
||
|
||
- **不引 Tailwind CDN**：离线可用 + 杂志风排版需要精确控制字距、行高、发丝线、玻璃透明度，原子类反而增加噪音。代价是 CSS 体积更大 → 用「令牌 + 语义类」收敛，禁止逐页堆裸样式。
|
||
- **不引字体 CDN**：中文衬线用 `"Songti SC", "STSong", "Noto Serif SC", serif` 回退栈，拉丁回退 `Georgia`，保证任何环境打开都不掉字。
|
||
- **占位图用 SVG 线稿而非图床外链**：后端 `processed_image` 在原型中取不到，外链图会离线失效且引入杂色；灰度线稿的代价是不如实拍图真实，通过大量留白与统一构图补足质感。
|
||
- **单文件而非多文件**：用户明确要「单文件可点击交互原型」。代价是文件较大 → 用分节注释 + 页面名前缀类名组织。
|
||
|
||
性能与可靠性：
|
||
|
||
- 单文件无网络请求，首屏即渲染，无加载抖动。`backdrop-filter` 是唯一较重属性 → 限制每屏玻璃层数量（导航栏 + 底部栏/浮层，最多 2 层），避免大面积模糊导致滚动掉帧。
|
||
- 事件委托统一在 `#app` 上，避免 18 屏 × N 元素逐个绑定监听。
|
||
- 页面切换只切 `display`，不重建 DOM，保证跳转瞬时响应。
|
||
|
||
## 架构设计
|
||
|
||
```mermaid
|
||
graph TD
|
||
A["原型外壳：左索引 + iPhone 设备框 + 右状态切换器"] --> B["路由层：navigate / back / params 页面栈"]
|
||
B --> C["页面层：18 个 section.screen + data-state 状态机"]
|
||
B --> D["浮层层：tabBar / Modal / Sheet / ActionSheet / Toast"]
|
||
C --> E["组件层：按钮 / 分段 / 胶囊 / 列表行 / 规格行 / 卡片 / 骨架 / 空态"]
|
||
D --> E
|
||
E --> F["令牌层：零彩色灰阶 / 双字阶 / 间距 / 发丝线 / 玻璃 / 阴影 / 缓动"]
|
||
C --> G["素材层：内联 SVG symbol 图标 + 衣物线稿占位插画"]
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
/root/zt-closet-wxmini-frontend/
|
||
├── stitch_ai_ui_v2/ # [NEW] 新版设计稿目录（旧 stitch_ai_ui/ 原样保留）
|
||
│ └── index.html # [NEW] 单文件可点击交互原型，内部按以下分节组织：
|
||
│ # <style>
|
||
│ # §1 设计令牌：零彩色灰阶 / 双字阶 / 间距刻度 / 圆角 / 发丝线 / 玻璃 / 阴影 / 缓动
|
||
│ # §2 基础层：reset、排版类（.display-serif / .eyebrow / .num）、发丝线工具类
|
||
│ # §3 外壳层：工作台背景、左索引面板、iPhone 375×812 设备框、状态栏、微信胶囊、安全区
|
||
│ # §4 玻璃层：.glass-nav / .glass-tabbar / .glass-sheet / .glass-modal / .toast
|
||
│ # §5 组件层：按钮（实心黑/描边/文字）、分段控件、胶囊标签、列表行、规格行、统计数字条、评分点阵、进度轨、衣物卡、穿搭拼图卡、分享卡、订单卡、骨架屏、空态、徽标
|
||
│ # §6 页面层：18 屏专属样式，类名带页面前缀（.wd- / .of- / .cd- / .hs- / .cs- / .pf- / .up- / .od- / .ai- / .nt- / .ml- / .lg-）
|
||
│ # <body>
|
||
│ # 左索引面板：分组（登录 / 核心 Tab / 详情 / 表单流程 / 分享 / 交易 / 规范）
|
||
│ # 设备框 → <main id="app"> 内含 18 个 <section class="screen">
|
||
│ # 共享浮层容器：tabBar + overlay（Modal / Sheet / ActionSheet / Toast）
|
||
│ # 右状态切换器：skeleton / empty / list / error / loading
|
||
│ # 底部：色板与字阶规范展示
|
||
│ # <script>
|
||
│ # §A 数据：18 页 mock 数据（衣物、穿搭、运势、分享、商品、订单、通知）
|
||
│ # §B 路由：navigate / back / 页面栈 / params 分发
|
||
│ # §C 状态机：setState(screen, state)
|
||
│ # §D 弹层控制器：openModal / openSheet / openActionSheet / toast
|
||
│ # §E 交互：事件委托、tab 切换、分段控件、多选计数、点赞收藏乐观更新、倒计时
|
||
│ # §F 引导：默认进入衣橱屏
|
||
└── miniprogram/ # 只读参考，本次不修改任何文件
|
||
├── app.json # 参考：18 页注册 + 5 tab 配置
|
||
├── app.wxss # 参考：旧设计令牌（本次全量替换的依据）
|
||
├── styles/icons.wxss # 参考：24 个图标的语义与命名
|
||
├── types/models.ts # 参考：全部实体字段名
|
||
├── custom-tab-bar/ # 参考：tab 结构 + 未读红点规则
|
||
├── components/ # 参考：navigation-bar / clothes-card / empty-state
|
||
└── pages/*/*.wxml # 参考：每页区块结构与微文案（唯一事实来源）
|
||
```
|
||
|
||
## 执行注意
|
||
|
||
- **字段与文案以 `.wxml` / `.ts` 为唯一事实来源**（如「共 N 件 · 上传额度剩余 N 次」「AI 正在识别你的衣物…通常需要 10 秒左右」），不要凭印象造文案。
|
||
- **零彩色纪律**：所有颜色只能取自令牌（`--paper` / `--paper-2` / `--ink` / `--ink-2` / `--ink-3` / `--hairline` / `--fill` / `--glass`），禁止出现任何有彩色 hex。唯一例外是幸运色的 8px 色点（业务数据）与衣物线稿本身的灰阶。
|
||
- **旧状态色语义需在零彩色下重建**：进行中/强调 = 实心黑胶囊；中性 = 浅灰胶囊；失效/已读 = 降透明度或删除线；AI 来源 = 黑底白字描边胶囊；删除/取消 = 黑字下划线文字按钮，不依赖红色。
|
||
- **小程序真实感三件套**：微信右上角胶囊（87×32pt）、状态栏 44px、底部安全区 `env(safe-area-inset-bottom)`，每一屏都必须体现。
|
||
- **不修改 `miniprogram/` 下任何文件，不覆盖 `stitch_ai_ui/`**；本次只新增 `stitch_ai_ui_v2/index.html`。
|
||
- 玻璃层下方滚动内容需预留 padding，避免内容被悬浮导航/底栏遮挡。
|
||
|
||
## 设计主题
|
||
|
||
「安静的展厅」—— 把衣橱当成一间高级买手店：内容区是一张纯白纸张，衣物图片是唯一主角，所有 UI 元素退到发丝线级别；导航、底部标签、弹窗做成一层悬浮在纸面上的毛玻璃。零彩色，靠字重对比、留白尺度、发丝线、灰阶层次与玻璃透明度建立秩序与高级感。
|
||
|
||
## 视觉语言
|
||
|
||
- **布局**：页面左右边距 20px；区块垂直间距 32px，块内 16px；正文行高 1.6~1.75；图片与文字之间永远留白，绝不贴边。卡片取消描边与投影，改用留白 + 发丝线分组，仅极少数关键卡保留极软阴影。
|
||
- **双字阶**：衬线（Songti SC / STSong / Noto Serif SC / Georgia）用于页面主标题、数字大数与穿搭名，字重 400~500、负字距 -0.01em；无衬线（-apple-system / PingFang SC）用于正文、按钮、标签与导航。10~11px 大写英文 eyebrow 标签（`WARDROBE` / `AI STYLIST`），字距 0.16em、`--ink-3` 灰，是最关键的「高级感」装置。
|
||
- **发丝线替代边框**：所有分隔用 0.5px `rgba(0,0,0,.08)`，圆角只在小尺寸控件上出现（胶囊、抽屉），大块内容保持直角，强化杂志感。
|
||
- **玻璃材质**：`rgba(255,255,255,.72)` + `backdrop-filter: saturate(180%) blur(20px)` + 0.5px 发丝边。底部标签用悬浮胶囊（左右各留 16px、圆角 28px、距底 12px + 安全区），而非通栏。
|
||
- **动效**：统一缓动 `cubic-bezier(.32,.72,0,1)`，时长 320~420ms。页面切换从右滑入 + 轻微缩放淡入；列表入场 40ms 递增 stagger；按压 `scale(.97)` + 透明度 0.6；弹层自底部滑入并带轻微回弹。
|
||
- **图片处理**：衣物图统一用内联 SVG 灰度线稿，1:1 或 3:4 画幅，居中留白 12%，无边框、仅 4px 极小圆角，像买手店目录里的商品线稿；穿搭拼图封面用 1px 白缝的无缝网格。
|
||
|
||
## 色彩系统（零彩色灰阶语义）
|
||
|
||
`--ink` #0A0A0A（主文字 / 主按钮 / 选中态）→ `--ink-2` #6E6E73（次要文字 / 描述）→ `--ink-3` #AEAEB2（弱化 / 占位 / 已读）→ `--hairline` rgba(0,0,0,.08)（分隔）→ `--paper-2` #F7F7F5（页面底）→ `--paper` #FFFFFF（内容纸面）。唯一深色块用于商城会员卡（#1C1C1E），作为全稿视觉锚点。
|
||
|
||
## 导航与信息架构重构
|
||
|
||
全局自定义导航改为 Apple 式行为：进入页面时是 34px 左对齐衬线大标题 + eyebrow 小标签，向下滚动时收缩为居中玻璃小标题 —— 这是最大的高级感来源，也让每个 tab 页有杂志封面感。tabBar 从通栏改为悬浮玻璃胶囊，图标改 1.5px 细线性描边，选中态用实心黑 + 顶部 3px 短横线，不再使用彩色。
|
||
|
||
## 逐页重构要点
|
||
|
||
- **登录**：全屏纯白 + 居中线稿 Logo + 衬线品牌名「纸条 AI 衣橱」+ 灰字 slogan + 底部实心黑胶囊按钮；新手礼包改为居中玻璃卡 + 发丝线权益列表。
|
||
- **衣橱**：大标题 + 右侧统计；分类由横滑胶囊改为下划线式极简分类条；网格去卡片容器，图下两行（衬线品名 + 灰色属性行）；FAB 改黑底白玻璃圆钮。
|
||
- **穿搭**：分段改下划线式文字分段；取消独立入口按钮行，把「创建穿搭」「AI 推荐」合并为 tabBar 上方的悬浮玻璃双按钮条；社区卡改瀑布流编辑排版，meta 用细描边图标 + tabular 数字。
|
||
- **运势**：做成杂志内页 —— 巨大衬线星座名；综合运势用超大衬线数字 + 5 个细描边星；三项评分改横向发丝线刻度尺；长文本用衬线引文式排版；幸运色/数字改两栏发丝线小格。
|
||
- **分享**：下划线分段；分享卡改横向条目（左 72×72 灰度拼图 + 右衬线标题/灰字有效期）；失效项降至 40% 透明度 + 描边小角标；新建分享移到导航栏右侧「＋」。
|
||
- **我的**：大号头像 72px + 衬线昵称 + 一行灰字副信息；额度概览改四栏发丝线分隔数字条（大号 tabular 数字 + 10px eyebrow）；功能列表改纯发丝线分组列表（行高 52px、右侧灰色值 + 极细箭头）；会员权益用描边胶囊。
|
||
- **上传**：idle 为巨大虚线发丝线方框 + 中央细描边相机 + 衬线引导语；processing 用三段发丝线进度轨（实心/空心圆点 + 1px 连线）；failed 用极简「！」+ 衬线标题 + 双按钮。
|
||
- **衣物详情**：属性展示改为规格表 —— 左标签（13px 灰）/ 右值（15px 黑）的发丝线行，分组标题用「中文 / 大写英文」eyebrow；量化评分改 5 个细描边方点；适用场合用无底色描边胶囊。
|
||
- **穿搭详情 / AI 推荐 / 穿搭编辑**：封面用无缝白缝网格；信息区为衬线大标题 + eyebrow 来源标签 + 发丝线标签行 + 描述 + 横滑单品（80×80 无边框缩略图）；底部操作改悬浮玻璃胶囊条。AI 生成态用呼吸感细描边圆环 + 衬线文案替代 spinner。
|
||
- **商城 / 订单 / 通知 / 分享详情**：商城会员卡用唯一深色块，额度改四栏数字条，商品行左线稿图标 / 中名称描述 / 右 tabular 价格 + 黑胶囊「购买」；订单状态用描边胶囊 + 文案不依赖颜色，倒计时用 tabular 衬线数字；通知未读用左侧 4px 黑竖条 + 黑字标题；分享详情为分享者行 + 无缝拼图 + 只读网格 + 悬浮玻璃「分享给好友」黑胶囊。
|
||
|
||
## 交互与适配
|
||
|
||
- 所有列表覆盖「骨架屏 → 空态 → 正常列表 → 加载更多 → 没有更多了」；表单覆盖「默认 / 校验置灰 / 提交中 / 成功」；详情覆盖「正常 / 处理中 / 失败 / 失效 / 只读」。
|
||
- 右侧状态切换器可即时切换任一屏的状态，左侧索引按「登录 / 核心 Tab / 详情 / 表单流程 / 分享 / 交易 / 规范」分组，点击直达。
|
||
- 适配：以 375×812pt 为基准，设备框固定宽高、内容区独立滚动；底部安全区用 `env(safe-area-inset-bottom)` 模拟；工作台外层在窄屏下自动纵向堆叠，保证在桌面浏览器与手机浏览器都能正常预览。
|
||
|
||
## Agent Extensions
|
||
|
||
### SubAgent
|
||
|
||
- **code-explorer**
|
||
- Purpose: 在执行前核对 18 个页面的 UI 区块、状态矩阵、微文案与跳转关系，并盘点旧稿 `stitch_ai_ui/` 已覆盖的状态，形成页面清单基线。
|
||
- Expected outcome: 一份可驱动左侧索引面板与右侧状态切换器的页面/状态清单，确保重构不漏功能、不漏状态。
|
||
|
||
### Skill
|
||
|
||
- **playwright-cli**
|
||
- Purpose: 用无头浏览器以 `file://` 打开本地原型，逐屏截图、点击走查跳转链路、开关弹层与状态切换器。
|
||
- Expected outcome: 18 屏截图 + 跳转链路验证结果，据此发现并修复渲染错位、玻璃层遮挡、路由断链等缺陷。
|
||
|
||
### Integration
|
||
|
||
- **cloudStudio**
|
||
- Purpose: 将原型目录部署为可访问链接，便于在手机上真机预览毛玻璃与滚动效果。
|
||
- Expected outcome: 一个可在手机浏览器/微信中打开预览的线上地址；若部署失败则以本地文件交付为准，不阻塞主交付物。 |