页面清单
一、页面总览地图
先看整体结构，所有页面按角色和层级分布如下：
flowchart TB
subgraph C[C端用户App]
C1[启动与登录]
C2[主导航5个Tab]
C3[衣橱管家页面群]
C4[穿搭推荐页面群]
C5[衣循环页面群]
C6[创艺工坊页面群]
C7[华裳学堂页面群]
C8[社区页面群]
C9[个人中心页面群]
end
subgraph B[B端妆造店Web/Pad]
B1[登录与工作台]
B2[库存管理]
B3[客户匹配]
B4[订单与预约]
B5[数据看板]
end
subgraph A[管理员后台Web]
A1[管理员登录]
A2[用户管理]
A3[内容审核]
A4[服饰库维护]
A5[B端入驻审核]
A6[数据监控]
end
建议的绘制优先级：C端是核心，先把C端所有页面画完，再画B端，管理员后台最后画（大部分可以复用你霓裳云枢的已有设计）。
二、C端用户App页面清单
C端的页面最多、最关键，是整个原型的主战场。
2.1 启动与登录模块（4个页面）
| 页面名 | 核心功能 | 关键元素 |
|---|---|---|
| 启动页 / 开屏 | 品牌露出 | Logo、一句Slogan、加载动画 |
| 登录页 | 账号登录 | 手机号/邮箱、密码、第三方登录、找回密码入口 |
| 注册页 | 新用户注册 | 手机号、验证码、密码、邀请码（自动填充） |
| 新手引导页 | 首次使用引导 | 3-4屏功能介绍+"开始录入第一件衣服"CTA |
跳转关系：启动页 → 已登录进主Tab页 / 未登录进登录页 → 注册 → 新手引导 → 主Tab页。
2.2 主导航结构（底部5个Tab）
这是用户每天看到的第一眼，决定产品第一印象。建议是：
| Tab | 名称 | 承载模块 | 设计理由 |
|---|---|---|---|
| Tab 1 | 今日 | 穿搭推荐首页 | 最高频入口放第一位 |
| Tab 2 | 衣橱 | 衣橱管家 | 核心数据池 |
| Tab 3 | 工坊 | 创艺工坊 + 衣循环入口 | 创作与循环放中间，视觉焦点 |
| Tab 4 | 发现 | 学堂 + 社区 | 内容型模块聚合 |
| Tab 5 | 我的 | 个人中心 | 惯例位置 |
"工坊"这个位置建议做成凸起的圆形按钮，既是视觉中心，也暗示"创作"的特殊地位。
2.3 今日（穿搭推荐）页面群（6个页面）
| 页面名 | 核心功能 | 关键元素 |
|---|---|---|
| 今日主页 | 每日穿搭推荐 | 当前城市/天气/温度、推荐穿搭卡片（可左右滑动换方案）、"虚拟试穿"按钮、"换一套"按钮、场景选择器 |
| 场景选择页 | 切换推荐场景 | 通勤/约会/运动/正式/居家标签，可叠加"温度""心情"等维度 |
| 穿搭详情页 | 查看完整方案 | 全身搭配图、逐件拆解（每件衣物+位置信息）、虚拟试穿效果、搭配理由说明、"今日就穿它"按钮 |
| 虚拟试穿页 | AI试衣效果 | 人像上身效果图、角度切换、"满意"/"重试"按钮、"保存到方案库"、"分享到社区" |
| AI穿搭助手对话页 | 对话式推荐 | 聊天气泡UI、语音输入、衣橱单品快捷引用、推荐方案卡片内嵌 |
| OOTD记录页 | 打卡今日穿着 | 自拍/选图、自动识别单品、添加备注/场景标签、同步到社区开关 |
2.4 衣橱页面群（8个页面）
这是整个产品数据的源头，页面最多也最重要。
| 页面名 | 核心功能 | 关键元素 |
|---|---|---|
| 衣橱首页 | 总览所有衣物 | 衣物总数/总价值/闲置数量概览、分类标签栏（上衣/裤装/裙装/鞋帽/配饰）、瀑布流/网格切换、搜索、筛选、"+ 录入"悬浮按钮 |
| 衣物录入页 | 添加新衣 | 拍照/相册/扫码/电商导入四种入口 |
| 录入识别结果页 | AI识别后确认 | 识别出的类型/颜色/材质/风格/温度标签、用户可微调、位置选择、确认保存 |
| 衣物详情页 | 查看单件衣物 | 高清图（可多张）、完整属性、穿着历史时间轴、搭配过的方案、"找相似搭配""加入今日穿搭""标记为闲置""处置这件"按钮 |
| 衣橱地图页 | 可视化位置 | 按柜子/层/格可视化展示，每个位置点开可见内容、支持拖拽重新分配位置 |
| 闲置提醒页 | 闲置衣物列表 | 分三级（轻度/重度/长期闲置）、每件附带闲置天数、"搭配一下""处置这件"快捷按钮 |
| 批量管理页 | 多选操作 | 多选模式、批量改标签/改位置/批量处置 |
| 穿搭日历页 | OOTD时间轴 | 日历视图+列表视图切换、每天的穿搭缩略图、统计穿着频次、年度报告入口 |
2.5 工坊（创艺工坊 + 衣循环）页面群（12个页面）
这个Tab承载两个业务模块，需要在首页做好分流。
入口页：
| 页面名 | 核心功能 |
|---|---|
| 工坊首页 | 两个大卡片入口："衣循环"（闲置处置）、"创艺工坊"（设计定制）；下方展示社区热门改造案例、设计作品 |
衣循环子页面（6个）：
| 页面名 | 核心功能 | 关键元素 |
|---|---|---|
| 衣循环首页 | 四条路径入口 | 寄卖/捐赠/改造/回收四个大按钮、我的订单入口、环保积分展示 |
| AI智能估价页 | 估价工具 | 上传衣物照片、填写基础信息（品牌/材质/新旧度）、估价结果+各平台价格对比 |
| 寄卖发布页 | 发布二手 | 选择衣橱中的衣物或新拍摄、填写描述/价格/物流方式、发布 |
| 捐赠流程页 | 公益捐赠 | 对接的公益组织列表、捐赠说明、寄送方式、预期去向地区 |
| 改造服务页 | 改造需求发布 | 上传原衣、选择改造方向（可跳转创艺工坊画草图）、匠人列表、报价、下单 |
| 我的循环订单页 | 订单管理 | 寄卖/捐赠/改造订单分Tab、状态追踪（尤其捐赠的"去向追踪"） |
创艺工坊子页面（5个）：
| 页面名 | 核心功能 | 关键元素 |
|---|---|---|
| 工坊首页 | 创作入口 | "开始设计"按钮、我的作品集、灵感墙 |
| 手绘/上传页 | 输入草图 | 画板工具（笔刷/颜色/橡皮）、上传图片、文字描述辅助 |
| AI生成结果页 | 查看设计稿 | 生成的设计效果图、风格调节（传统/现代/汉服/民族）、面料选项、"重新生成""保存作品""发起定制" |
| 作品集页 | 我的设计 | 作品网格展示、公开/私密设置、编辑 |
| 定制下单页 | 对接生产 | 工厂选择、尺码、面料确认、预估工期、下单 |
2.6 发现（学堂 + 社区）页面群（10个页面）
入口页：
| 页面名 | 核心功能 |
|---|---|
| 发现首页 | 学堂与社区混合 Feed、顶部Tab切换（学堂/社区）、搜索 |
学堂子页面（5个）：
| 页面名 | 核心功能 | 关键元素 |
|---|---|---|
| 学堂首页 | 文化内容聚合 | 民族服饰/朝代/工艺/故事线四大分类入口、精选内容轮播 |
| 服饰百科列表页 | 按维度浏览 | 筛选（民族/朝代/地域）、卡片网格 |
| 服饰详情页 | 单件深度介绍 | 3D模型、高清图、历史背景、穿着场景、工艺解析、AR试穿按钮、"去商城购买"入口 |
| 非遗工艺档案页 | 工艺介绍 | 工序视频、传承人介绍、相关作品 |
| AR试穿页 | 虚拟试古装 | 调用摄像头、选择服饰、AR效果、拍照分享 |
社区子页面（4个）：
| 页面名 | 核心功能 | 关键元素 |
|---|---|---|
| 社区首页 | 内容流 | 关注/推荐/挑战三Tab、瀑布流卡片 |
| 发布页 | 发帖 | 图片上传、识别单品自动关联、话题选择、发布 |
| 帖子详情页 | 查看+互动 | 内容展示、单品卡片（可跳衣橱/商城）、评论区、点赞/收藏/分享 |
| 挑战活动页 | 主题活动 | 活动规则、参与入口、排行榜 |
2.7 我的（个人中心）页面群（10个页面）
| 页面名 | 核心功能 |
|---|---|
| 个人中心主页 | 头像昵称/邀请码/数据概览（衣橱件数/环保积分/作品数）、功能入口列表 |
| 个人资料编辑页 | 修改昵称/头像/简介/隐私设置 |
| 账号安全页 | 修改密码/绑定手机/设备管理 |
| 我的收藏页 | 收藏的衣物/方案/文章/设计 |
| 我的订单页 | 商城/定制/改造订单总览 |
| 环保积分页 | 积分明细、可兑换物品 |
| 消息通知页 | 系统/互动/订单消息分类 |
| 邀请好友页 | 邀请码展示、分享、邀请进度 |
| 年度穿搭报告页 | 可视化年度数据+分享模板 |
| 设置与帮助页 | 通用设置/客服/关于 |
2.8 商城入口页面（4个页面）
商城不一定做成独立Tab，可以作为多个模块的延伸出口存在。
| 页面名 | 核心功能 |
|---|---|
| 商城首页 | 分类/推荐/活动 |
| 商品详情页 | 图文详情/规格/购买 |
| 购物车页 | 选中商品结算 |
| 下单支付页 | 地址/支付方式 |
三、B端妆造店后台页面清单（Web / Pad端）
B端页面不需要C端那么多动效和视觉，以数据密度和操作效率为首要目标。
| 页面名 | 核心功能 | 关键元素 |
|---|---|---|
| B端登录页 | 店铺登录 | 账号/密码/店铺绑定 |
| 工作台首页 | 今日概览 | 今日预约数、库存总览、热门服饰、待处理订单 |
| 库存管理页 | 服饰列表 | 多维筛选（类型/朝代/风格/状态/位置）、批量操作、快速扫码入库 |
| 服饰详情页（B端） | 单件管理 | 服饰信息、使用次数、损耗记录、客户评价、"加入清仓" |
| 批量录入页 | 扫码或上传 | 批量扫码、表格导入、自动编号 |
| 客户需求匹配页 | 智能推荐 | 输入客户需求（朝代/体型/场景）、AI匹配方案（服饰+配饰+发型） |
| 客户档案页 | 客户管理 | 历史预约、身材数据、风格偏好 |
| 预约日历页 | 档期管理 | 日历视图、预约详情 |
| 订单管理页 | 订单列表 | 使用中/已归还/清洗中/待处理 |
| 过时清仓页 | 对接衣循环 | 损耗/过时的服饰一键发布到C端二手 |
| 数据看板页 | 经营分析 | 热门服饰、客户来源、月度营收、使用频次Top榜 |
| 店铺设置页 | 基础设置 | 店铺信息、员工账号、服务项目、价格 |
四、管理员后台页面清单（Web端）
这部分基本可以参考霓裳云枢已有的管理员模块平滑迁移，页面结构类似：
| 页面名 | 核心功能 |
|---|---|
| 管理员登录页 | 后台登录 |
| 后台首页 | 核心数据看板 |
| 用户管理页 | 搜索/筛选/角色设置/禁用/重置密码 |
| 服饰库管理页 | 服饰CRUD、批量上传、审核 |
| 内容审核页 | 社区帖子/设计作品/改造案例审核 |
| B端入驻审核页 | 妆造店/匠人/品牌方资质审核 |
| 订单管理页 | 平台所有订单总览 |
| 数据分析页 | 用户行为/热词/功能使用/缓存命中率 |
| 系统公告页 | 公告发布 |
| 敏感词管理页 | 评论过滤词库 |
| 在线客服页 | Chatway集成 |
五、原型绘制的几个关键建议
5.1 先画流程图，再画页面
动手画原型之前，先把几条核心闭环的用户流程画成时序图或流程图，确保每个页面在流程中的位置和跳转关系清晰。推荐先画这五条核心流程：
- 新用户首次使用：注册 → 新手引导 → 录入第一件衣物 → 进入今日推荐
- 每日穿搭决策：打开App → 今日推荐 → 场景切换 → 虚拟试穿 → OOTD打卡
- 处置一件闲置衣物：闲置提醒 → 选择处置方式 → 寄卖/捐赠/改造流程 → 完成
- 创作一件设计：工坊入口 → 手绘草图 → AI生成 → 保存作品 → 发起定制
- 妆造店服务客户（B端）：客户进店 → 需求匹配 → 方案确认 → 取用 → 归还
5.2 C端优先绘制的页面（MVP级）
如果时间有限，先画这15个最核心的页面，其他页面可以后续补：
启动登录类（2个）：登录页、新手引导页
主导航（1个）：底部Tab布局
衣橱核心（4个）：衣橱首页、录入页、识别结果页、衣物详情页
穿搭核心（3个）：今日主页、穿搭详情页、虚拟试穿页
循环核心（2个）：衣循环首页、改造服务页
工坊核心（2个）：手绘/上传页、AI生成结果页
个人中心（1个）：个人中心主页
这15个页面涵盖了产品的核心价值链路，能完整讲清楚"用户从录入到穿搭到处置到创作"的故事。
5.3 原型工具与风格建议
工具选择：Figma是首选，支持组件复用和跳转预览，团队协作也方便。如果追求快速出稿，Axure或墨刀也可以。
保真度建议：做中保真原型最合适——不用太精致，但要有基本的视觉层次、图标、主色调。低保真容易让评审的人分心在"这个不好看"，高保真则前期投入太大。
风格基调：整体建议**"清爽 + 有一点点东方韵味"——以留白为主，主色可以选一个低饱和度的国风色**（比如青瓷青、黛蓝、胭脂红），再搭配中性灰色作为辅助。不要把传统元素用得太满，那会显得老气；要把它们作为点缀，出现在合适的场景（比如学堂板块可以更有文化味，衣橱和穿搭板块应该更现代清爽）。
组件系统：早期就建立基础组件库——按钮、卡片、输入框、标签、图标、导航栏。后面画页面会快很多。
5.4 给自己定一个原型的"目的"
原型不是为了好看，也不是为了完备，而是为了回答某个具体问题。
在开始画之前，先想清楚这一版原型要回答什么：
- 是要验证产品核心体验？那重点画用户主流程，视觉可以简化。
- 是要对外展示融资或演示？那重点挑几个最亮眼的页面做高保真。
- 是要指导开发交付？那需要标注每个元素的交互细节和状态。
按不同目的，重点投入的页面和精度是不一样的。
VibeCoding 导航：⬅️ 01-衣承 | 02-页面清单 | ➡️ 01-造型生成网站 - 设计稿
💬 评论