商家可能没有现成的商品图。需要在原有"上传图片"的基础上,新增一种「AI 生成」模式:商家上传一张随手拍的原图,AI 生成 4 张满意的头图(可重跑),选 1 张;然后选 AI 模特模板,生成 4 张模特上身参考图(可重跑),勾选满意的。
全屏 4 步,顶部 stepper,底部固定工具栏。每步只关注一件事,前进/后退清晰。
右侧抽屉,4 步从上到下流式排列。已完成的折叠成"摘要 + 编辑"按钮,当前步展开。
全屏覆盖。左侧步骤导航 + 已选素材,中央大预览图(超大网格),右侧操作面板 + 重新生成参数。
| 维度 | A · 分步向导 | B · 单页折叠流 | C · 双栏工作台 |
|---|---|---|---|
| 傻瓜程度 | ★★★★★最简单 · 一次只看一件事 | ★★★★略复杂 · 但全程可见 | ★★★需要适应工作台布局 |
| 选图视觉空间 | ★★★★大,但有页面边距 | ★★★中等,抽屉宽度限制 | ★★★★★最大 · 参考 Pebblely |
| 回头修改 | ★★★点上一步 / 顶部 stepper | ★★★★★点已完成的"编辑"即可 | ★★★★点左侧 step 切换 |
| "我有图 / AI 生成"双模式融合 | 需要在第 1 步加分支选择 | 顶部就有切换,无缝 | 需要在顶部或左侧加切换 |
| 改原 products.html 的成本 | 中 · 替换抽屉 → 全屏向导 | 低 · 抽屉宽度加大,内部改 | 高 · 完全替换交互形态 |
| 参考产品 | 稿定 AI 商品图 · 万相实验室 | Notion 引导 · Linear 流程 | Pebblely · Booth AI · 即梦 |
建议优先选 B(单页折叠流) —— 用户说优先「最简单傻瓜」,但 A 的弱点是「我有图 / AI 生成」两条路要分支处理,流程会割裂; B 在顶部直接放 [我有商品图 / AI 生成] 模式切换,**两种模式共用一套抽屉框架**,改起来也最省事。 C 视觉最爽但跟现有抽屉式新建商品差距太大,**留作 V1.5 升级方向**。
用户已选 C 方案。模特库规模 50+ ,需要更重的展示空间(立绘网格 + 悬浮三视图 + 多筛选 + 多选)。 下面两版对比:把"选模特"独立成一个 step,还是放在原 Step 3 内部用子 Tab 切换。
把「选模特」独立成第 3 步,流程从 4 步变 5 步。模特库占满整个 canvas,有完整筛选空间。
保持 4 步主流程,但 Step 3 内部分两个子 Tab:① 挑选模特 → ② 生成上身图。在同一个 Step 里递进。
| 维度 | 方案 1 · 独立 Step | 方案 3 · 子步骤分屏 |
|---|---|---|
| 主流程步数 | 5 步 | 4 步(子 Tab 内嵌) |
| 模特库展示空间 | ★★★★★整个 canvas 都给模特库 | ★★★★★同样整个 canvas,只少一条 24 px 子 Tab 条 |
| "选模特 → 看上身图效果"链路 | 选 → 下一步 → 等生成 → 看效果(3 步) | 选 → 切子 Tab → 看效果(2 步,可反复切换) |
| 改模特(已生成上身图后) | "上一步" 回 Step 3 → 改 → 再 "下一步" 回 Step 4 | 点子 Tab ① → 改 → 子 Tab ② 自动重新生成 |
| 学习成本 | ★★★★★最熟悉 · 跟其他 step 一致 | ★★★★需要适应"主步骤里有子步骤"的概念 |
| 侧边栏复杂度 | 5 个 step,均匀 | 4 个 step + Step 3 下展开 2 个子项(可折叠) |
| 参考产品 | Adobe Express 模板挑选 · 阿里万相 | Figma 工作区子模式 · Photoshop Workspace · 即梦的 Tab 切换 |
建议选方案 3(子步骤分屏) —— 模特库展示空间一样大(都是整个 canvas),但方案 3 把"挑模特→看上身图效果"做成可来回切换的子 Tab,**改模特时链路最短**(适合反复试不同模特对比效果); 流程数也保持 4 步,跟原 C 节奏一致。 方案 1 唯一胜出的场景是"用户根本不想改"的一次性流程,但电商商家选模特通常会反复试。