iye
f420af2069
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 6s
页面 (电商AI平台/) - account / team / settings / index / products / projects: 累积迭代 - restraint.css: 设计 token 补充 - login.html / register.html: 新增登录注册页 - _ARCHIVE.md: 归档说明 Next.js 工程骨架 - app/ + components/: 新一代 SPA 雏形 (page / layout / sidebar / topbar / GridBg / Icon) - package.json / package-lock.json / next.config.mjs / tsconfig.json / postcss.config.mjs / next-env.d.ts 历史归档 / 文档 - v1/: 原 V1 静态稿镜像 (含 mockup-A/B/C) - PRD.md / deployment-guide.md / _check.html - ui参考/ / screenshots/ 杂项 - .gitignore 调整 - 删除根 README.md Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
496 lines
25 KiB
HTML
496 lines
25 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>新建商品 · 三版交互方案对比 · 流·Studio</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../assets/restraint.css">
|
|
<style>
|
|
body { background: var(--bg); padding: 40px 24px 80px; }
|
|
.wrap { max-width: 1200px; margin: 0 auto; }
|
|
|
|
.head { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--border); position: relative; }
|
|
.head::before { content: '+'; position: absolute; top: -8px; left: -8px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
|
|
.head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.018em; }
|
|
.head .sub { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.head .sub .mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
|
|
|
|
.ctx-box {
|
|
background: var(--card); border: 1px solid var(--border); padding: 18px 22px;
|
|
margin-bottom: 28px; position: relative;
|
|
}
|
|
.ctx-box::before, .ctx-box::after { content: '+'; position: absolute; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
|
|
.ctx-box::before { top: -7px; left: -7px; }
|
|
.ctx-box::after { bottom: -7px; right: -7px; }
|
|
.ctx-box h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
|
|
.ctx-box p { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
|
|
.ctx-box .flow-line {
|
|
margin-top: 14px;
|
|
padding: 12px 14px;
|
|
background: var(--bg-soft);
|
|
border: 1px solid var(--border-soft);
|
|
font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
|
|
color: var(--ink-2); letter-spacing: .02em;
|
|
line-height: 1.8;
|
|
}
|
|
.ctx-box .flow-line .arrow { color: var(--orange); margin: 0 6px; }
|
|
|
|
.versions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
|
.ver-card {
|
|
background: var(--card); border: 1px solid var(--border);
|
|
display: flex; flex-direction: column;
|
|
text-decoration: none; color: var(--ink);
|
|
transition: border-color .15s;
|
|
position: relative;
|
|
}
|
|
.ver-card:hover { border-color: var(--orange); }
|
|
.ver-card:hover::before, .ver-card:hover::after { color: var(--orange); }
|
|
.ver-card::before, .ver-card::after { content: '+'; position: absolute; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 12px; transition: color .15s; }
|
|
.ver-card::before { top: -7px; left: -7px; }
|
|
.ver-card::after { bottom: -7px; right: -7px; }
|
|
|
|
.ver-preview {
|
|
aspect-ratio: 4/3;
|
|
background:
|
|
repeating-linear-gradient(135deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 12px),
|
|
var(--bg-soft);
|
|
border-bottom: 1px solid var(--border);
|
|
position: relative;
|
|
padding: 14px;
|
|
}
|
|
.ver-preview .mock { position: absolute; inset: 14px; background: var(--card); border: 1px solid var(--border); display: flex; flex-direction: column; }
|
|
|
|
/* Mock A: stepper */
|
|
.mock-A-top { padding: 8px; border-bottom: 1px solid var(--border); display: flex; justify-content: center; gap: 8px; }
|
|
.mock-A-top span { width: 12px; height: 12px; background: var(--bg-soft); border: 1px solid var(--border); }
|
|
.mock-A-top span:nth-child(2) { background: var(--orange); border-color: var(--orange); }
|
|
.mock-A-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
|
|
.mock-A-body div { background: var(--bg-soft); border: 1px solid var(--border); }
|
|
.mock-A-body div.sel { background: var(--orange-tint); border-color: var(--orange); }
|
|
.mock-A-foot { padding: 6px 10px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; }
|
|
.mock-A-foot span { width: 28px; height: 8px; background: var(--bg-soft); border: 1px solid var(--border); }
|
|
.mock-A-foot span.primary { background: var(--orange); border-color: var(--orange); }
|
|
|
|
/* Mock B: accordion */
|
|
.mock-B-top { padding: 6px 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 4px; }
|
|
.mock-B-top .bar { flex: 1; height: 3px; background: var(--bg-soft); }
|
|
.mock-B-top .bar span { display: block; width: 50%; height: 100%; background: var(--orange); }
|
|
.mock-B-rows { flex: 1; display: flex; flex-direction: column; padding: 6px; gap: 4px; }
|
|
.mock-B-row { padding: 6px 8px; background: var(--bg-soft); border: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
|
|
.mock-B-row.done .num { background: var(--ink); color: #FFF; }
|
|
.mock-B-row.active { background: var(--orange-tint); border-color: var(--orange); padding: 8px; flex: 1; }
|
|
.mock-B-row .num { width: 14px; height: 14px; background: var(--card); border: 1px solid var(--border); font-size: 8px; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; }
|
|
.mock-B-row.active .num { background: var(--orange); color: #FFF; border-color: var(--orange); }
|
|
.mock-B-row .lbl { flex: 1; height: 6px; background: var(--card); border: 1px solid var(--border); }
|
|
|
|
/* Mock C: workbench */
|
|
.mock-C-top { padding: 6px 8px; border-bottom: 1px solid var(--border); }
|
|
.mock-C-top .ti { width: 60%; height: 6px; background: var(--bg-soft); }
|
|
.mock-C-body { flex: 1; display: grid; grid-template-columns: 36px 1fr 50px; gap: 0; }
|
|
.mock-C-side { background: var(--bg-soft); border-right: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
|
|
.mock-C-side div { width: 100%; height: 8px; background: var(--card); border: 1px solid var(--border); }
|
|
.mock-C-side div.act { background: var(--orange); border-color: var(--orange); }
|
|
.mock-C-canvas { padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
|
|
.mock-C-canvas div { background: var(--bg-soft); border: 1px solid var(--border); }
|
|
.mock-C-canvas div.sel { background: var(--orange-tint); border-color: var(--orange); }
|
|
.mock-C-controls { background: var(--bg-soft); border-left: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
|
|
.mock-C-controls div { background: var(--card); border: 1px solid var(--border); height: 14px; }
|
|
|
|
.ver-info { padding: 18px 20px; }
|
|
.ver-info .badge {
|
|
display: inline-block;
|
|
font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
|
|
color: var(--orange); background: var(--orange-tint); border: 1px solid var(--orange-soft);
|
|
padding: 2px 8px; letter-spacing: .04em;
|
|
margin-bottom: 10px;
|
|
}
|
|
.ver-info h2 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
|
|
.ver-info .tagline { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 14px; }
|
|
.ver-info ul { list-style: none; padding: 0; }
|
|
.ver-info ul li { font-size: 11.5px; color: var(--ink-2); padding: 5px 0; display: flex; gap: 8px; align-items: flex-start; }
|
|
.ver-info ul li::before { content: ''; width: 5px; height: 5px; background: var(--orange); border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
|
|
.ver-info .cta { margin-top: 16px; }
|
|
|
|
.ver-info .pros, .ver-info .cons { margin-top: 12px; padding: 10px 12px; font-size: 11.5px; line-height: 1.6; }
|
|
.ver-info .pros { background: var(--green-bg); border: 1px solid var(--green-bd); color: var(--green); }
|
|
.ver-info .cons { background: var(--bg-soft); border: 1px solid var(--border); color: var(--ink-2); }
|
|
.ver-info .pros strong, .ver-info .cons strong { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em; display: block; margin-bottom: 3px; }
|
|
|
|
.compare-table {
|
|
margin-top: 36px;
|
|
background: var(--card); border: 1px solid var(--border);
|
|
position: relative;
|
|
}
|
|
.compare-table::before, .compare-table::after { content: '+'; position: absolute; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
|
|
.compare-table::before { top: -7px; left: -7px; }
|
|
.compare-table::after { bottom: -7px; right: -7px; }
|
|
.compare-table h3 { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; }
|
|
table.cmp { width: 100%; border-collapse: collapse; }
|
|
table.cmp th { text-align: left; padding: 12px 18px; background: var(--bg-soft); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--border); }
|
|
table.cmp td { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 12.5px; vertical-align: top; }
|
|
table.cmp tr:last-child td { border-bottom: 0; }
|
|
table.cmp .row-h { font-weight: 600; color: var(--ink); }
|
|
table.cmp .stars { color: var(--orange); font-weight: 700; }
|
|
table.cmp .small { font-size: 11px; color: var(--ink-3); display: block; margin-top: 2px; font-family: 'JetBrains Mono', monospace; letter-spacing: .02em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<div class="head">
|
|
<h1>新建商品 · 三版交互方案对比</h1>
|
|
<div class="sub">
|
|
<span class="mono">// 流·Studio · AI 生成模式</span>
|
|
<span>·</span>
|
|
<span>三个独立 HTML,选定方案后再合并到 <a href="../products.html" style="color:var(--orange);">products.html</a></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ctx-box">
|
|
<h3>需求背景</h3>
|
|
<p>商家可能<strong>没有现成的商品图</strong>。需要在原有"上传图片"的基础上,新增一种「AI 生成」模式:商家上传一张随手拍的原图,AI 生成 4 张满意的头图(可重跑),选 1 张;然后选 AI 模特模板,生成 4 张模特上身参考图(可重跑),勾选满意的。</p>
|
|
<div class="flow-line">
|
|
[ 上传原图 + 信息 ] <span class="arrow">→</span> [ AI 生成头图 · 4 选 1 ] <span class="arrow">→</span> [ 选模特 + 生成上身图 · 4 选 N ] <span class="arrow">→</span> [ 预览 · 创建 ]
|
|
</div>
|
|
</div>
|
|
|
|
<div class="versions">
|
|
|
|
<!-- ===== 方案 A ===== -->
|
|
<a class="ver-card" href="mockup-A.html">
|
|
<div class="ver-preview">
|
|
<div class="mock">
|
|
<div class="mock-A-top"><span></span><span></span><span></span><span></span></div>
|
|
<div class="mock-A-body">
|
|
<div class="sel"></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="mock-A-foot"><span></span><span class="primary"></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="ver-info">
|
|
<span class="badge">[ A · WIZARD ]</span>
|
|
<h2>分步向导</h2>
|
|
<p class="tagline">全屏 4 步,顶部 stepper,底部固定工具栏。每步只关注一件事,前进/后退清晰。</p>
|
|
<ul>
|
|
<li>跟「新建项目向导」一脉相承,商家熟悉</li>
|
|
<li>每步沉浸式,不被其他信息干扰</li>
|
|
<li>4 张候选图大网格 + 居中显示</li>
|
|
</ul>
|
|
<div class="pros">
|
|
<strong>// PROS</strong>
|
|
最经典最不容易迷路。新手友好,学习成本最低。
|
|
</div>
|
|
<div class="cons">
|
|
<strong>// CONS</strong>
|
|
不能轻松看到"前面已经选了什么",回头改要点上一步。
|
|
</div>
|
|
<div class="cta"><span class="btn btn-primary">查看 Demo →</span></div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- ===== 方案 B ===== -->
|
|
<a class="ver-card" href="mockup-B.html">
|
|
<div class="ver-preview">
|
|
<div class="mock">
|
|
<div class="mock-B-top"><div class="bar"><span></span></div></div>
|
|
<div class="mock-B-rows">
|
|
<div class="mock-B-row done"><span class="num">✓</span><span class="lbl"></span></div>
|
|
<div class="mock-B-row active"><span class="num"></span><span class="lbl"></span></div>
|
|
<div class="mock-B-row"><span class="num"></span><span class="lbl"></span></div>
|
|
<div class="mock-B-row"><span class="num"></span><span class="lbl"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ver-info">
|
|
<span class="badge">[ B · ACCORDION ]</span>
|
|
<h2>单页折叠流</h2>
|
|
<p class="tagline">右侧抽屉,4 步从上到下流式排列。已完成的折叠成"摘要 + 编辑"按钮,当前步展开。</p>
|
|
<ul>
|
|
<li>能看到完整流程上下文</li>
|
|
<li>顶部模式切换:[我有商品图 / AI 生成] 一目了然</li>
|
|
<li>已选过的随时可以回去改,不丢失</li>
|
|
</ul>
|
|
<div class="pros">
|
|
<strong>// PROS</strong>
|
|
最完整,适合反复对比和回溯。能跟原有"我有图"模式天然兼容。
|
|
</div>
|
|
<div class="cons">
|
|
<strong>// CONS</strong>
|
|
页面信息密度略高,初次接触可能有"信息过载"感。
|
|
</div>
|
|
<div class="cta"><span class="btn btn-primary">查看 Demo →</span></div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- ===== 方案 C ===== -->
|
|
<a class="ver-card" href="mockup-C.html">
|
|
<div class="ver-preview">
|
|
<div class="mock">
|
|
<div class="mock-C-top"><div class="ti"></div></div>
|
|
<div class="mock-C-body">
|
|
<div class="mock-C-side">
|
|
<div></div><div class="act"></div><div></div><div></div>
|
|
</div>
|
|
<div class="mock-C-canvas">
|
|
<div class="sel"></div><div></div>
|
|
<div></div><div></div>
|
|
</div>
|
|
<div class="mock-C-controls">
|
|
<div></div><div></div><div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ver-info">
|
|
<span class="badge">[ C · WORKBENCH ]</span>
|
|
<h2>双栏工作台</h2>
|
|
<p class="tagline">全屏覆盖。左侧步骤导航 + 已选素材,中央大预览图(超大网格),右侧操作面板 + 重新生成参数。</p>
|
|
<ul>
|
|
<li>视觉空间最大,选图体验最爽</li>
|
|
<li>右侧可调"背景风格 / 氛围"等参数后再重跑</li>
|
|
<li>左侧实时显示已选素材缩略图</li>
|
|
</ul>
|
|
<div class="pros">
|
|
<strong>// PROS</strong>
|
|
专业感最强,选图最清晰。参考 Pebblely / Booth AI 的成熟方案。
|
|
</div>
|
|
<div class="cons">
|
|
<strong>// CONS</strong>
|
|
覆盖整个屏幕,跟原有抽屉式新建商品形态差异大。学习成本略高。
|
|
</div>
|
|
<div class="cta"><span class="btn btn-primary">查看 Demo →</span></div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="compare-table">
|
|
<h3>横向对比</h3>
|
|
<table class="cmp">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 22%;">维度</th>
|
|
<th>A · 分步向导</th>
|
|
<th>B · 单页折叠流</th>
|
|
<th>C · 双栏工作台</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="row-h">傻瓜程度</td>
|
|
<td><span class="stars">★★★★★</span><span class="small">最简单 · 一次只看一件事</span></td>
|
|
<td><span class="stars">★★★★</span><span class="small">略复杂 · 但全程可见</span></td>
|
|
<td><span class="stars">★★★</span><span class="small">需要适应工作台布局</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">选图视觉空间</td>
|
|
<td><span class="stars">★★★★</span><span class="small">大,但有页面边距</span></td>
|
|
<td><span class="stars">★★★</span><span class="small">中等,抽屉宽度限制</span></td>
|
|
<td><span class="stars">★★★★★</span><span class="small">最大 · 参考 Pebblely</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">回头修改</td>
|
|
<td><span class="stars">★★★</span><span class="small">点上一步 / 顶部 stepper</span></td>
|
|
<td><span class="stars">★★★★★</span><span class="small">点已完成的"编辑"即可</span></td>
|
|
<td><span class="stars">★★★★</span><span class="small">点左侧 step 切换</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">"我有图 / AI 生成"双模式融合</td>
|
|
<td>需要在第 1 步加分支选择</td>
|
|
<td><strong>顶部就有切换</strong>,无缝</td>
|
|
<td>需要在顶部或左侧加切换</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">改原 products.html 的成本</td>
|
|
<td>中 · 替换抽屉 → 全屏向导</td>
|
|
<td><strong>低 · 抽屉宽度加大,内部改</strong></td>
|
|
<td>高 · 完全替换交互形态</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">参考产品</td>
|
|
<td>稿定 AI 商品图 · 万相实验室</td>
|
|
<td>Notion 引导 · Linear 流程</td>
|
|
<td>Pebblely · Booth AI · 即梦</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin-top: 36px; padding: 18px 22px; background: var(--orange-tint); border: 1px solid var(--orange-soft); position: relative;">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--orange); letter-spacing:.04em; margin-bottom:6px;">// MY RECOMMENDATION</div>
|
|
<p style="font-size:13px; color:var(--ink); line-height:1.7;">
|
|
<strong>建议优先选 B(单页折叠流)</strong> ——
|
|
用户说优先「最简单傻瓜」,但 A 的弱点是「我有图 / AI 生成」两条路要分支处理,流程会割裂;
|
|
B 在顶部直接放 [我有商品图 / AI 生成] 模式切换,**两种模式共用一套抽屉框架**,改起来也最省事。
|
|
C 视觉最爽但跟现有抽屉式新建商品差距太大,**留作 V1.5 升级方向**。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- ============= 第二轮:C 方案的"模特挑选"细化 ============= -->
|
|
<div style="margin-top:48px; padding-bottom:24px; border-bottom:1px solid var(--border); position:relative;">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink-3); letter-spacing:.08em; margin-bottom:8px;">// ROUND 2 · MODEL PICKER REFINEMENT</div>
|
|
<h2 style="font-size:22px; font-weight:700; letter-spacing:-.012em;">C 方案 · 模特挑选交互细化</h2>
|
|
<p style="font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.6;">
|
|
用户已选 C 方案。模特库规模 <strong>50+</strong> ,需要更重的展示空间(立绘网格 + 悬浮三视图 + 多筛选 + 多选)。
|
|
下面两版对比:把"选模特"独立成一个 step,还是放在原 Step 3 内部用子 Tab 切换。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="versions" style="margin-top:24px; grid-template-columns: repeat(2, 1fr);">
|
|
|
|
<!-- ===== Step 1 ===== -->
|
|
<a class="ver-card" href="mockup-C-step1.html">
|
|
<div class="ver-preview">
|
|
<div class="mock">
|
|
<div class="mock-C-top"><div class="ti"></div></div>
|
|
<div class="mock-C-body">
|
|
<div class="mock-C-side">
|
|
<div></div><div></div><div class="act"></div><div></div><div></div>
|
|
</div>
|
|
<div class="mock-C-canvas" style="grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr);">
|
|
<div class="sel"></div><div></div><div></div>
|
|
<div></div><div class="sel"></div><div></div>
|
|
</div>
|
|
<div class="mock-C-controls">
|
|
<div></div><div style="height:24px;"></div><div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ver-info">
|
|
<span class="badge">[ C-STEP1 · 5 STEPS ]</span>
|
|
<h2>方案 1 · 独立 Step</h2>
|
|
<p class="tagline">把「选模特」独立成第 3 步,流程从 4 步变 5 步。模特库占满整个 canvas,有完整筛选空间。</p>
|
|
<ul>
|
|
<li>左侧 sidebar 出现 NEW 标记,5 步清晰可见</li>
|
|
<li>顶部搜索 + 7-8 个 filter chips,多选无压力</li>
|
|
<li>50+ 模特滚动加载,适合大型素材库</li>
|
|
</ul>
|
|
<div class="pros">
|
|
<strong>// PROS</strong>
|
|
每步只做一件事,模特库展示空间最大,筛选/多选最从容。适合 50+ 大库。
|
|
</div>
|
|
<div class="cons">
|
|
<strong>// CONS</strong>
|
|
流程多一步,跟之前敲定的"4 步"轻量节奏冲突。"选模特→看效果"被切成两步,要点下一步才看到结果。
|
|
</div>
|
|
<div class="cta"><span class="btn btn-primary">查看 Demo →</span></div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- ===== Step 3 (sub-tab) ===== -->
|
|
<a class="ver-card" href="mockup-C-step3.html">
|
|
<div class="ver-preview">
|
|
<div class="mock">
|
|
<div class="mock-C-top"><div class="ti"></div></div>
|
|
<div class="mock-C-body">
|
|
<div class="mock-C-side">
|
|
<div></div><div></div><div class="act"></div><div></div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; padding:0;">
|
|
<div style="display:flex; gap:0; border-bottom:1px solid var(--border); padding:4px 6px; background:var(--bg-soft);">
|
|
<div style="height:6px; flex:1; background:var(--orange); margin-right:2px;"></div>
|
|
<div style="height:6px; flex:1; background:var(--bg-soft); border:1px solid var(--border);"></div>
|
|
</div>
|
|
<div class="mock-C-canvas" style="grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); flex:1;">
|
|
<div class="sel"></div><div></div><div></div>
|
|
<div></div><div class="sel"></div><div></div>
|
|
</div>
|
|
</div>
|
|
<div class="mock-C-controls">
|
|
<div></div><div style="height:24px;"></div><div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ver-info">
|
|
<span class="badge">[ C-STEP3 · 4 STEPS + SUB-TAB ]</span>
|
|
<h2>方案 3 · 子步骤分屏</h2>
|
|
<p class="tagline">保持 4 步主流程,但 Step 3 内部分两个子 Tab:① 挑选模特 → ② 生成上身图。在同一个 Step 里递进。</p>
|
|
<ul>
|
|
<li>主 sidebar 4 个 step 不变,只在 active step 下展开 2 个子项</li>
|
|
<li>顶部 canvas 上方的子 Tab 条:① → ② 视觉递进</li>
|
|
<li>选完模特点"下一步"自动跳子 Tab 并触发生成</li>
|
|
<li>子 Tab 可来回切换,改模特立刻重新生成</li>
|
|
</ul>
|
|
<div class="pros">
|
|
<strong>// PROS</strong>
|
|
流程不变多。模特挑选 + 看效果在同一个 Step 内,有"递进"感。改模特 → 看新效果链路最短。
|
|
</div>
|
|
<div class="cons">
|
|
<strong>// CONS</strong>
|
|
子 Tab 比单 step 略复杂一点。主 Step 3 名字"模特上身图"略含糊(其实包含两件事)。
|
|
</div>
|
|
<div class="cta"><span class="btn btn-primary">查看 Demo →</span></div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="compare-table" style="margin-top:36px;">
|
|
<h3>横向对比 · C 方案模特挑选</h3>
|
|
<table class="cmp">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 24%;">维度</th>
|
|
<th>方案 1 · 独立 Step</th>
|
|
<th>方案 3 · 子步骤分屏</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="row-h">主流程步数</td>
|
|
<td>5 步</td>
|
|
<td><strong>4 步(子 Tab 内嵌)</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">模特库展示空间</td>
|
|
<td><span class="stars">★★★★★</span><span class="small">整个 canvas 都给模特库</span></td>
|
|
<td><span class="stars">★★★★★</span><span class="small">同样整个 canvas,只少一条 24 px 子 Tab 条</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">"选模特 → 看上身图效果"链路</td>
|
|
<td>选 → 下一步 → 等生成 → 看效果(3 步)</td>
|
|
<td><strong>选 → 切子 Tab → 看效果(2 步,可反复切换)</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">改模特(已生成上身图后)</td>
|
|
<td>"上一步" 回 Step 3 → 改 → 再 "下一步" 回 Step 4</td>
|
|
<td><strong>点子 Tab ① → 改 → 子 Tab ② 自动重新生成</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">学习成本</td>
|
|
<td><span class="stars">★★★★★</span><span class="small">最熟悉 · 跟其他 step 一致</span></td>
|
|
<td><span class="stars">★★★★</span><span class="small">需要适应"主步骤里有子步骤"的概念</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">侧边栏复杂度</td>
|
|
<td>5 个 step,均匀</td>
|
|
<td>4 个 step + Step 3 下展开 2 个子项(可折叠)</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-h">参考产品</td>
|
|
<td>Adobe Express 模板挑选 · 阿里万相</td>
|
|
<td>Figma 工作区子模式 · Photoshop Workspace · 即梦的 Tab 切换</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin-top: 24px; padding: 18px 22px; background: var(--orange-tint); border: 1px solid var(--orange-soft); position: relative;">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--orange); letter-spacing:.04em; margin-bottom:6px;">// MY RECOMMENDATION FOR ROUND 2</div>
|
|
<p style="font-size:13px; color:var(--ink); line-height:1.7;">
|
|
<strong>建议选方案 3(子步骤分屏)</strong> ——
|
|
模特库展示空间一样大(都是整个 canvas),但方案 3 把"挑模特→看上身图效果"做成可来回切换的子 Tab,**改模特时链路最短**(适合反复试不同模特对比效果);
|
|
流程数也保持 4 步,跟原 C 节奏一致。
|
|
方案 1 唯一胜出的场景是"用户根本不想改"的一次性流程,但电商商家选模特通常会反复试。
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|