# 新建商品 · 三版交互方案对比

// 流·Studio · AI 生成模式 · 三个独立 HTML,选定方案后再合并到 products.html

### 需求背景

商家可能没有现成的商品图。需要在原有"上传图片"的基础上,新增一种「AI 生成」模式:商家上传一张随手拍的原图,AI 生成 4 张满意的头图(可重跑),选 1 张;然后选 AI 模特模板,生成 4 张模特上身参考图(可重跑),勾选满意的。

[ 上传原图 + 信息 ] → [ AI 生成头图 · 4 选 1 ] → [ 选模特 + 生成上身图 · 4 选 N ] → [ 预览 · 创建 ]
[ A · WIZARD ]

## 分步向导

全屏 4 步,顶部 stepper,底部固定工具栏。每步只关注一件事,前进/后退清晰。

- 跟「新建项目向导」一脉相承,商家熟悉
- 每步沉浸式,不被其他信息干扰
- 4 张候选图大网格 + 居中显示

// PROS 最经典最不容易迷路。新手友好,学习成本最低。
// CONS 不能轻松看到"前面已经选了什么",回头改要点上一步。
查看 Demo →
✓
[ B · ACCORDION ]

## 单页折叠流

右侧抽屉,4 步从上到下流式排列。已完成的折叠成"摘要 + 编辑"按钮,当前步展开。

- 能看到完整流程上下文
- 顶部模式切换:[我有商品图 / AI 生成] 一目了然
- 已选过的随时可以回去改,不丢失

// PROS 最完整,适合反复对比和回溯。能跟原有"我有图"模式天然兼容。
// CONS 页面信息密度略高,初次接触可能有"信息过载"感。
查看 Demo →
[ C · WORKBENCH ]

## 双栏工作台

全屏覆盖。左侧步骤导航 + 已选素材,中央大预览图(超大网格),右侧操作面板 + 重新生成参数。

- 视觉空间最大,选图体验最爽
- 右侧可调"背景风格 / 氛围"等参数后再重跑
- 左侧实时显示已选素材缩略图

// PROS 专业感最强,选图最清晰。参考 Pebblely / Booth AI 的成熟方案。
// CONS 覆盖整个屏幕,跟原有抽屉式新建商品形态差异大。学习成本略高。
查看 Demo →

### 横向对比

维度 | A · 分步向导 | B · 单页折叠流 | C · 双栏工作台
--- | --- | --- | ---
傻瓜程度 | ★★★★★最简单 · 一次只看一件事 | ★★★★略复杂 · 但全程可见 | ★★★需要适应工作台布局
选图视觉空间 | ★★★★大,但有页面边距 | ★★★中等,抽屉宽度限制 | ★★★★★最大 · 参考 Pebblely
回头修改 | ★★★点上一步 / 顶部 stepper | ★★★★★点已完成的"编辑"即可 | ★★★★点左侧 step 切换
"我有图 / AI 生成"双模式融合 | 需要在第 1 步加分支选择 | 顶部就有切换,无缝 | 需要在顶部或左侧加切换
改原 products.html 的成本 | 中 · 替换抽屉 → 全屏向导 | 低 · 抽屉宽度加大,内部改 | 高 · 完全替换交互形态
参考产品 | 稿定 AI 商品图 · 万相实验室 | Notion 引导 · Linear 流程 | Pebblely · Booth AI · 即梦

// MY RECOMMENDATION

建议优先选 B(单页折叠流) —— 用户说优先「最简单傻瓜」,但 A 的弱点是「我有图 / AI 生成」两条路要分支处理,流程会割裂; B 在顶部直接放 [我有商品图 / AI 生成] 模式切换,**两种模式共用一套抽屉框架**,改起来也最省事。 C 视觉最爽但跟现有抽屉式新建商品差距太大,**留作 V1.5 升级方向**。

// ROUND 2 · MODEL PICKER REFINEMENT

## C 方案 · 模特挑选交互细化

用户已选 C 方案。模特库规模 50+ ,需要更重的展示空间(立绘网格 + 悬浮三视图 + 多筛选 + 多选)。 下面两版对比:把"选模特"独立成一个 step,还是放在原 Step 3 内部用子 Tab 切换。

[ C-STEP1 · 5 STEPS ]

## 方案 1 · 独立 Step

把「选模特」独立成第 3 步,流程从 4 步变 5 步。模特库占满整个 canvas,有完整筛选空间。

- 左侧 sidebar 出现 NEW 标记,5 步清晰可见
- 顶部搜索 + 7-8 个 filter chips,多选无压力
- 50+ 模特滚动加载,适合大型素材库

// PROS 每步只做一件事,模特库展示空间最大,筛选/多选最从容。适合 50+ 大库。
// CONS 流程多一步,跟之前敲定的"4 步"轻量节奏冲突。"选模特→看效果"被切成两步,要点下一步才看到结果。
查看 Demo →
[ C-STEP3 · 4 STEPS + SUB-TAB ]

## 方案 3 · 子步骤分屏

保持 4 步主流程,但 Step 3 内部分两个子 Tab:① 挑选模特 → ② 生成上身图。在同一个 Step 里递进。

- 主 sidebar 4 个 step 不变,只在 active step 下展开 2 个子项
- 顶部 canvas 上方的子 Tab 条:① → ② 视觉递进
- 选完模特点"下一步"自动跳子 Tab 并触发生成
- 子 Tab 可来回切换,改模特立刻重新生成

// PROS 流程不变多。模特挑选 + 看效果在同一个 Step 内,有"递进"感。改模特 → 看新效果链路最短。
// CONS 子 Tab 比单 step 略复杂一点。主 Step 3 名字"模特上身图"略含糊(其实包含两件事)。
查看 Demo →

### 横向对比 · C 方案模特挑选

维度 | 方案 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 切换

// MY RECOMMENDATION FOR ROUND 2

建议选方案 3(子步骤分屏) —— 模特库展示空间一样大(都是整个 canvas),但方案 3 把"挑模特→看上身图效果"做成可来回切换的子 Tab,**改模特时链路最短**(适合反复试不同模特对比效果); 流程数也保持 4 步,跟原 C 节奏一致。 方案 1 唯一胜出的场景是"用户根本不想改"的一次性流程,但电商商家选模特通常会反复试。