原型整理 · 2026-09-16 · 来源:美发的ui.pdf

AEO页面地图

原稿是一张超宽画板,里面多数是剪映、即梦的截图加手写批注。这份文档先盘点原稿画了什么、缺什么,再给出按新方案(4 个 Tab:染烫效果、自媒体、图库、我的)重排后的页面地图和核心流程。每个空白和歧义都写了 mockup 里的处理方式,以及还需要你拍板的地方。

15原稿手机画板
6其中直接是参考截图
4空白或占位的页面
13新方案 mockup 屏数
打开手机版 mockup →

1新版页面地图

金色框是底部 Tab 的一级页面,灰色框是从 Tab 进入的二级页面,编号和 mockup 一一对应。跨 Tab 的连线只有三条,也是开发时最容易漏的三条。

A 染烫效果 B 自媒体 C 图库 D 我的 A1 染烫首页 · 选顾客照 B1 模板广场 · 图片/视频 C1 图库 · 含生成中任务 D1 我的 · 积分 · 退出 A2 选方案 · 色板多选 A3 生成中 · 可离开 A4 效果对比 · 前后拖动 B2 图片模板 B5 视频模板 B3 换图片 · 角色槽位 B4 选素材面板(4 个 Tab) B6 生成完成 · 文案 · 分享 D2 资产库 · 顾客/门店/虚拟 选方案 生成 看结果 做同款 点槽位 放好 资产库 生成 做成小红书图 所有生成结果自动存入图库 提供照片:顾客 / 门店 / 虚拟顾客
三条跨 Tab 连线:A4 可以带着顾客照进 B3;A 和 B 的生成结果都汇入 C1;D2 资产库是 B4 选素材的数据来源(虚线表示读取数据,不是页面跳转)。

2核心流程:从选好到拿到结果

染烫效果和自媒体模板走同一条生成链路,只是第一步不同。原稿只画到“点生成”这一步,后面的判断和状态都在这张图里补上了。

选模板 / 方案A2 · B2 · B5 放照片A1 · B3 · B4 必填齐了? 积分够? 提交并扣积分秒回任务号 生成中A3 · 可以离开 完成B6 / A4 + 存图库 按钮灰色提示缺哪张 按钮灰色去充值 D1 自动退积分可以重试 是 是 成功 否 否 失败 去放照片 重试
两道检查都放在点按钮之前:条件没满足时按钮是灰的,点了只提示原因,不跳转(原稿里的规则)。积分在提交时扣,失败自动退回,所以用户不会为失败的图付费。

3原稿盘点

按原稿画板从左到右、从上到下列出。“参考截图”指直接放了剪映或即梦的界面,还没改成美发内容。

原稿画板画了什么状态新方案对应
即梦 UI 参考即梦网页版首页:输入框、Agent 模式、技能标签参考截图没有对应(“章老师”未进 4 Tab,见问题 2)
复刻热款(首屏)剪映首页,没有改动参考截图B1 模板广场
复刻热款(图)模板大图 + 「换图片」+ 灰色生成按钮,写了“没换图不跳转”规则有交互规则B2 B3
复刻热款(选择)相册 + 资产库有预存时弹出素材库条有歧义B4
点击导航栏5 个 Tab;预染烫页是一整块黄色色块空白A1–A4
导航栏——模版图片模板瀑布流,内容是剪映素材参考截图B1 图片列表
对镜拍(图)同换图页,但有 5 个没标注的替换槽有歧义B3 角色槽位
选取照片素材 ×2同“复刻热款(选择)”,底部 5 个槽有歧义B4
视频模版视频瀑布流,内容是剪映素材参考截图B1 视频列表
视频预览抖音式详情页,作者、简介、「AI做同款 ✦800」可用设计B5
视频生成同换图页,规则一样有交互规则B3
搜索栏剪映搜索结果页(“小小课堂”)参考截图B1 有搜索框,结果页没画
资产库管理只有「理发店 / 顾客 / 虚拟顾客」三个标题空白D2 + B4
资产库参考 ×2剪映「我的」页、醒图图片设计页参考截图D1
生成之后没有画空白A3 A4 B6 C1

4空白与歧义清单

按对上线的影响排序。第三列只写需要你拍板的事,mockup 已经按推荐方案画了,改起来很快。

空白预染烫页只有黄色色块核心差异化功能,原来是第一个 Tab

MOCKUP 里的处理

A1–A4 四屏:选顾客照 → 按品牌色板选方案(显示色号和度数)→ 异步生成 → 前后拖动对比。沿用现有美学工坊的能力。

需要拍板

色板用哪几个品牌、哪些色号?建议让合作门店给出他们实际在用的染膏清单。

空白章老师(AI 助手)只有即梦截图原稿中间的大按钮

MOCKUP 里的处理

新方案 4 个 Tab 里没有它,mockup 里没画。

需要拍板

是放到下个版本,还是在自媒体页顶部放一个对话入口?

空白生成之后没画流程全部停在“点生成”

MOCKUP 里的处理

A3 生成中(可以离开)、A4/B6 结果页(文案、分享、再来一张)、C1 图库顶部显示生成中任务。对接 Sprint-09 的异步任务。

需要拍板

不需要

空白资产库三个库都没设计

MOCKUP 里的处理

D2 资产库放在「我的」里,分顾客 / 门店 / 虚拟顾客;顾客照片带授权状态,没授权的不能用在对外发布的模板里。

需要拍板

顾客授权走什么形式(微信卡片点同意 / 纸质)?虚拟顾客由平台统一提供,还是门店自己生成?

歧义5 个替换槽没有标注

MOCKUP 里的处理

B3 每个槽写角色(顾客正脸 / 门店背景 / 发型师)和必填/可选;必填没放时按钮灰色,点了提示缺哪张并把槽标红。

需要拍板

每个模板的槽位配置由谁维护?建议运营后台上架模板时配置。

歧义素材库弹条叠在相册上

MOCKUP 里的处理

B4 合成一个面板、四个 Tab:顾客 / 门店 / 虚拟顾客 / 手机相册,按槽位角色默认打开对应的 Tab。原稿里相册默认停在“视频”Tab 的问题也一起解决。

需要拍板

不需要

歧义图片流程不显示积分

MOCKUP 里的处理

所有生成按钮都带价格:染烫 ✦15/张,图片模板 ✦8,视频 ✦80(均为占位数)。积分不够时按钮变灰并引导充值。

需要拍板

视频的正式价格。原稿写的是 ✦800,和现有图片价格差 100 倍,需要按视频模型成本定。

歧义选中的 Tab 隐藏文字

MOCKUP 里的处理

按原稿规则画了:选中时图标变白、文字隐藏,下面加一个金色小点。

需要拍板

建议选中时也显示文字。只有 4 个 Tab 时文字不占地方,隐藏后新用户容易不知道自己在哪一页。

细节参考内容和美发无关;错别字

MOCKUP 里的处理

模板、搜索提示词、文案都换成了发型内容;“模版”改为“模板”,“搜素栏”改为“搜索栏”。

需要拍板

首批模板从哪来:自己用 AI 生成,还是找合作门店拍?

未画搜索结果页

MOCKUP 里的处理

B1 只画了搜索框。

需要拍板

不需要,下一轮补

5下一步

  1. 对第 4 节里的 7 个拍板点给出结论,mockup 按结论改一版。
  2. 补搜索结果页、积分充值页和顾客授权卡片三屏。
  3. 和现有代码对齐:染烫复用 workshop/,模板复用 social/tongkuan 和 scene;生图序列从本地存储迁到后端,作为图库的数据来源。