---
title: "02-页面清单"
created: 2026-04-21
aliases:
  - 页面清单
tags:
  - 项目
---
# 页面清单

## **一、页面总览地图**

先看整体结构，所有页面按角色和层级分布如下：

```mermaid
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 先画流程图，再画页面**

动手画原型之前，先把**几条核心闭环的用户流程**画成时序图或流程图，确保每个页面在流程中的位置和跳转关系清晰。推荐先画这五条核心流程：

1. **新用户首次使用**：注册 → 新手引导 → 录入第一件衣物 → 进入今日推荐
2. **每日穿搭决策**：打开App → 今日推荐 → 场景切换 → 虚拟试穿 → OOTD打卡
3. **处置一件闲置衣物**：闲置提醒 → 选择处置方式 → 寄卖/捐赠/改造流程 → 完成
4. **创作一件设计**：工坊入口 → 手绘草图 → AI生成 → 保存作品 → 发起定制
5. **妆造店服务客户**（B端）：客户进店 → 需求匹配 → 方案确认 → 取用 → 归还

#### **5.2 C端优先绘制的页面（MVP级）**

如果时间有限，先画这15个最核心的页面，其他页面可以后续补：

**启动登录类（2个）**：登录页、新手引导页

**主导航（1个）**：底部Tab布局

**衣橱核心（4个）**：衣橱首页、录入页、识别结果页、衣物详情页

**穿搭核心（3个）**：今日主页、穿搭详情页、虚拟试穿页

**循环核心（2个）**：衣循环首页、改造服务页

**工坊核心（2个）**：手绘/上传页、AI生成结果页

**个人中心（1个）**：个人中心主页

这15个页面涵盖了产品的核心价值链路，能完整讲清楚"用户从录入到穿搭到处置到创作"的故事。

#### **5.3 原型工具与风格建议**

**工具选择**：Figma是首选，支持组件复用和跳转预览，团队协作也方便。如果追求快速出稿，Axure或墨刀也可以。

**保真度建议**：做**中保真原型**最合适——不用太精致，但要有基本的视觉层次、图标、主色调。低保真容易让评审的人分心在"这个不好看"，高保真则前期投入太大。

**风格基调**：整体建议**"清爽 + 有一点点东方韵味"**——以留白为主，主色可以选一个**低饱和度的国风色**（比如青瓷青、黛蓝、胭脂红），再搭配中性灰色作为辅助。不要把传统元素用得太满，那会显得老气；要把它们作为点缀，出现在合适的场景（比如学堂板块可以更有文化味，衣橱和穿搭板块应该更现代清爽）。

**组件系统**：早期就建立基础组件库——按钮、卡片、输入框、标签、图标、导航栏。后面画页面会快很多。

#### **5.4 给自己定一个原型的"目的"**

原型不是为了好看，也不是为了完备，而是为了**回答某个具体问题**。

在开始画之前，先想清楚这一版原型要回答什么：

- 是要**验证产品核心体验**？那重点画用户主流程，视觉可以简化。
- 是要**对外展示融资或演示**？那重点挑几个最亮眼的页面做高保真。
- 是要**指导开发交付**？那需要标注每个元素的交互细节和状态。

按不同目的，重点投入的页面和精度是不一样的。

---

**VibeCoding 导航**：⬅️ [[01-衣承|01-衣承]] | 02-页面清单 | ➡️ [[01-造型生成网站 - 设计稿|01-造型生成网站 - 设计稿]]