170 lines
12 KiB
Markdown
170 lines
12 KiB
Markdown
|
# UI 效果图生成提示词
|
||
|
|
|
||
|
|
## 文档定位
|
||
|
|
|
||
|
|
本文档用于向 Claude 或其他具备设计能力的 AI 生成 UI 效果图。提示词目标是产出 Windows 桌面软件的高保真 UI mockup，用于后续整理 UI 设计文档和指导 PySide6 实现。
|
||
|
|
|
||
|
|
> 本文档已根据多轮设计讨论更新。原始提示词保留在「## 提示词」一节，所有经讨论确定的设计决策已并入提示词正文，并在文末「## 设计迭代记录」中分主题说明原因，便于追溯。
|
||
|
|
|
||
|
|
## 提示词
|
||
|
|
|
||
|
|
```text
|
||
|
|
你是一名资深桌面软件 UI/UX 设计师，请为一个 Windows 桌面软件设计高保真 UI 效果图。
|
||
|
|
|
||
|
|
软件名称：
|
||
|
|
自动合成印花服饰效果图工具
|
||
|
|
|
||
|
|
软件用途：
|
||
|
|
用户加载衣服底图和印花图片，把印花叠加到衣服图片上，并通过拖动、缩放、旋转调整印花位置，最后导出单张或批量合成效果图。
|
||
|
|
注意：「合成印花」只是整个业务流程中的一个环节，软件还包含「AI 穿搭」「导出上架」等其他环节，界面需要用顶部标签页在多个环节间切换。
|
||
|
|
|
||
|
|
目标用户：
|
||
|
|
服饰定制、印花打样、商品上架、批量制图人员。用户不一定是专业设计师，所以界面要清晰、直观、效率优先。
|
||
|
|
|
||
|
|
设计目标：
|
||
|
|
1. 保留旧版软件的核心工作流，但界面更现代、更清晰。
|
||
|
|
2. 重点突出中间的大预览区，让用户能直接拖动、缩放、旋转印花。
|
||
|
|
3. 适合 Windows 桌面端，分辨率优先按 1920x1080 设计。
|
||
|
|
4. UI 风格专业、简洁、偏工具软件，必须是浅色 Windows 原生工具风（类似 Office / Qt 默认控件），不要做成网页落地页，也不要做成深色潮酷风。
|
||
|
|
5. 不要使用花哨渐变、大面积插画、营销风格卡片。
|
||
|
|
6. 布局应适合长时间批量操作。
|
||
|
|
7. 整体外观应能较直接地对应到 PySide6 / Qt 控件，方便后续实现。
|
||
|
|
|
||
|
|
视觉风格细则（浅色 Windows 原生工具风）：
|
||
|
|
- 浅灰窗口底（约 #f0f0f0）+ 白色面板，中性灰画布。
|
||
|
|
- 字体：Segoe UI / 微软雅黑，正文 12px 左右。
|
||
|
|
- 控件用 1px 实线边框、小圆角（约 3px）、几乎不用阴影。
|
||
|
|
- 单一蓝色强调色（约 #0067c0）用于选中、主按钮、激活状态。
|
||
|
|
- 带标题的分组框（GroupBox），标题嵌在边框上。
|
||
|
|
- 数字输入用带上下微调箭头的 SpinBox 样式。
|
||
|
|
- 信息密度偏高、留白克制，适合长时间制图。
|
||
|
|
|
||
|
|
顶部环节标签页（Tab）：
|
||
|
|
- 顶部放一排「步骤式」标签页，标签带序号，体现推荐顺序，但每个标签都可随时点击切换（基本按顺序、允许来回跳）。
|
||
|
|
- 标签共三个：① 添加印花、② AI 穿搭、③ 导出上架。
|
||
|
|
- 当前演示的是「① 添加印花」环节，该标签高亮（蓝色序号 + 白底），其余标签为未激活灰色态。
|
||
|
|
- 后两个环节（AI 穿搭、导出上架）的具体界面内容待定，本次可只搭好标签框架，内容留作占位。
|
||
|
|
|
||
|
|
核心功能区（属于「① 添加印花」环节）：
|
||
|
|
- 衣服图片列表
|
||
|
|
- 印花图片列表
|
||
|
|
- 合成预览区
|
||
|
|
- 模板选择
|
||
|
|
- 坐标参数：X、Y
|
||
|
|
- 尺寸参数：宽度、高度，支持锁定比例
|
||
|
|
- 旋转参数：角度、左旋、右旋
|
||
|
|
- 输出设置：输出目录、格式、质量
|
||
|
|
- 操作按钮：单张导出、批量导出、保存模板/另存为、重置参数
|
||
|
|
- 合成队列与批量进度显示
|
||
|
|
|
||
|
|
素材导入与勾选规则：
|
||
|
|
- 选择衣服文件夹 / 印花文件夹后，递归导入文件夹内（含所有子文件夹）的全部图片。
|
||
|
|
- 缩略图采用平铺展示，不做分组折叠树；文件名带上所在子文件夹（如「夏季/白T_圆领.png」）以保留来源信息。
|
||
|
|
- 缩略图右上角用小角标显示所在子文件夹名（如「夏季」），缩略图下方显示文件名；默认按「子文件夹 + 文件名」排序，使同一子文件夹的图自然相邻。
|
||
|
|
- 每个素材列表顶部提供一个全局「全选 / 取消全选」复选框（支持全选、未全选时的半选态），并显示「已选 N」计数。
|
||
|
|
- 支持单张勾选 / 取消勾选。只需一个全局全选即可，不要求按子文件夹分组勾选。
|
||
|
|
|
||
|
|
批量组合方式（合成队列）：
|
||
|
|
- 用户常用两种以上的组合方式：多件衣服 × 同一个印花、一件衣服 × 多个印花，也包含全组合（勾选项两两相乘）。界面需要能灵活切换这几种组合模式。
|
||
|
|
- 底部设「合成队列」面板：顶部一排模式切换按钮（多衣服 × 单印花 / 单衣服 × 多印花 / 全组合矩阵），下方用表格逐行显式列出每一对「衣服 × 印花」组合，而不是只显示一个总数。
|
||
|
|
- 队列每行显示：序号、衣服、印花、来源文件夹、参数标记（模板 / 已微调）、状态（待导出 / 导出中 / 已完成 / 失败）、单项进度或输出文件名。
|
||
|
|
- 队列顶部汇总：共 N 项 · 完成 · 进行 · 失败 · 待导出。
|
||
|
|
- 队列操作按钮：重置全部、导出选中、开始批量导出、折叠/展开。
|
||
|
|
|
||
|
|
参数与模板的关系（默认走模板、可单项微调）：
|
||
|
|
- 所有组合默认跟随当前选中的模板参数；修改模板即对全体生效。
|
||
|
|
- 选中队列中的某一项后，右侧参数栏只调整这一对组合，调整后该项标记为「已微调」并锁定，重跑模板时不被其参数覆盖。
|
||
|
|
- 右侧参数栏底部提供与模板相关的操作，明确区分「应用为模板 / 重置为模板」，避免和模板区的保存功能产生混淆。
|
||
|
|
|
||
|
|
建议布局：
|
||
|
|
1. 标题栏：
|
||
|
|
- 左侧软件名称
|
||
|
|
- 右侧「设置」入口（齿轮图标）
|
||
|
|
- 标准的最小化 / 最大化 / 关闭按钮
|
||
|
|
- 不再使用传统的「文件 / 编辑 / 模板 / 帮助」菜单栏，也不再单独占一行顶部工具栏。
|
||
|
|
2. 顶部标签页栏：① 添加印花、② AI 穿搭、③ 导出上架（步骤式 Tab，详见上文）。
|
||
|
|
3. 左侧素材栏：
|
||
|
|
- 上半部分：衣服图片区。顶部为「打开衣服文件夹」按钮（紧贴衣服列表上方），其下为衣服缩略图列表（支持子文件夹角标、缩略图、勾选、全选）。
|
||
|
|
- 下半部分：印花图片区。顶部为「打开印花文件夹」按钮（紧贴印花列表上方），其下为印花缩略图列表（同样支持角标、缩略图、勾选、全选）。
|
||
|
|
- 「打开文件夹」按钮采用就近原则，放在各自列表正上方，点击后图片即出现在下方。
|
||
|
|
4. 中间主区域：
|
||
|
|
- 大尺寸合成预览画布，中性灰棋盘格背景衬托衣服底图。
|
||
|
|
- 画布里显示衣服底图。
|
||
|
|
- 印花图层有选中边框、四角缩放控制点、顶部旋转控制点。
|
||
|
|
- 支持拖动、缩放、旋转的视觉暗示（底部可放操作提示条）。
|
||
|
|
- 由于衣服图多为竖向长方形，画布不宜过宽：适当加宽左侧素材栏（约为基础宽度的 1.3 倍、缩略图改 4 列），参数栏可保持原宽或仅小幅加宽，使中间画布更贴合竖图比例。
|
||
|
|
5. 右侧参数栏：
|
||
|
|
- 模板选择（下拉），其下紧跟「保存 / 另存为」模板按钮。
|
||
|
|
- 位置：X、Y
|
||
|
|
- 尺寸：宽、高、锁定比例
|
||
|
|
- 旋转：角度输入、左旋、右旋
|
||
|
|
- 输出设置：目录、格式、质量
|
||
|
|
- 提示：当前调整仅作用于队列中选中的那一对组合，并标记为「已微调」。
|
||
|
|
- 底部操作按钮：导出当前单张、应用为模板、重置为模板。
|
||
|
|
6. 底部合成队列面板：见上文「批量组合方式」。
|
||
|
|
7. 最底部状态栏：
|
||
|
|
- 当前选中衣服图
|
||
|
|
- 当前选中印花图
|
||
|
|
- 当前模板
|
||
|
|
- 批量进度
|
||
|
|
- 失败项提示
|
||
|
|
- 日志/错误提示简要信息
|
||
|
|
|
||
|
|
请输出：
|
||
|
|
1. 一张高保真 UI 效果图设计说明。
|
||
|
|
2. 页面布局结构。
|
||
|
|
3. 每个区域包含哪些控件。
|
||
|
|
4. 推荐的颜色、字体、间距、按钮样式。
|
||
|
|
5. 交互状态说明，包括：
|
||
|
|
- 未加载图片
|
||
|
|
- 已加载衣服但未加载印花
|
||
|
|
- 选中印花图层
|
||
|
|
- 正在批量导出
|
||
|
|
- 导出失败
|
||
|
|
6. 如果可以生成图片，请生成一张 1920x1080 的桌面软件 UI mockup。
|
||
|
|
7. 不要生成网页落地页，不要生成移动端界面，不要使用营销宣传风格；必须是浅色 Windows 原生工具风。
|
||
|
|
|
||
|
|
如果你支持直接生成图片，请直接生成一张 1920x1080 的高保真桌面软件 UI 效果图，界面文字使用中文。
|
||
|
|
```
|
||
|
|
|
||
|
|
## 设计迭代记录
|
||
|
|
|
||
|
|
以下为在初版提示词基础上，经多轮讨论确定的设计决策与原因，已并入上方提示词。
|
||
|
|
|
||
|
|
### 1. 视觉风格：改为浅色 Windows 原生工具风
|
||
|
|
- 初版未限定深浅，容易被做成偏网页 / 深色 IDE 的风格。
|
||
|
|
- 最终确定为浅色 Windows 原生工具风（类似 Office / Qt 默认）：浅灰窗体 + 白色面板、中性灰画布、单一蓝色强调色、带标题的分组框、SpinBox 数字框、1px 实线边框与小圆角。
|
||
|
|
- 原因：目标用户多为批量制图人员而非专业设计师，长时间看图、批量操作更适合浅色稳妥风格；且该风格能较直接对应 PySide6 / Qt 控件，便于实现。
|
||
|
|
|
||
|
|
### 2. 顶部导航：去掉菜单栏 + 工具栏，改为「步骤式标签页」
|
||
|
|
- 去掉传统「文件 / 编辑 / 模板 / 帮助」菜单栏，因其与工具栏按钮功能重复、对非专业用户不友好。
|
||
|
|
- 「设置」移至标题栏右上角齿轮图标，不再单独占一行工具栏，界面更干净。
|
||
|
|
- 因为「合成印花」只是业务流程中的一个环节（共 ① 添加印花 / ② AI 穿搭 / ③ 导出上架），环节数量少（2–3 个）且「基本按顺序、可来回跳」，最终选用顶部「步骤式 Tab」：标签带序号体现顺序，但每个可随时点击切换。对应 Qt 的 QTabWidget。
|
||
|
|
- （备选方案曾考虑左侧图标导航栏，适合环节较多的情况；步骤条 Wizard 适合强顺序流程。本场景环节少，顶部 Tab 最合适。）
|
||
|
|
|
||
|
|
### 3. 素材导入与勾选
|
||
|
|
- 选择文件夹后递归导入（含子文件夹）全部图片。
|
||
|
|
- 缩略图平铺展示，文件名带子文件夹路径；缩略图右上角加子文件夹角标，默认按「子文件夹 + 文件名」排序，使同一子文件夹的图相邻——用排序低成本地获得分组效果，无需做折叠树。
|
||
|
|
- 顶部一个全局「全选 / 取消全选」复选框（含半选态）+「已选 N」计数；支持单张勾选。仅需全局全选，不做按子文件夹分组勾选。
|
||
|
|
|
||
|
|
### 4. 批量组合：新增「合成队列」面板
|
||
|
|
- 初版只有一个「批量进度 38/60」的进度条，无法表达 60 是怎么来的、用了哪种组合方式、每对组合各自的参数与状态。
|
||
|
|
- 新增底部「合成队列」面板：顶部模式切换（多衣服 × 单印花 / 单衣服 × 多印花 / 全组合矩阵），下方表格逐行列出每一对组合及其来源文件夹、参数标记、状态、单项进度。
|
||
|
|
- 面板位置选用底部横向面板（状态栏上方、可折叠），不挤压中间画布，最适合长时间批量操作。对应 Qt 的 QTableWidget。
|
||
|
|
|
||
|
|
### 5. 参数与模板：默认走模板，可单项微调
|
||
|
|
- 所有组合默认跟随当前模板；改模板对全体生效。
|
||
|
|
- 选中队列某一项后，右侧参数栏只调这一对，调整后标记「已微调」并锁定，重跑模板不覆盖。
|
||
|
|
- 模板相关操作明确区分：模板区下拉框下方放「保存 / 另存为」；右侧参数栏底部放「应用为模板 / 重置为模板」，避免两处存模板造成混淆。
|
||
|
|
|
||
|
|
### 6. 操作按钮就近放置
|
||
|
|
- 「打开衣服文件夹」放在衣服列表正上方、「打开印花文件夹」放在印花列表正上方、「保存 / 另存为」模板放在模板下拉框正下方。
|
||
|
|
- 原因：就近原则，操作按钮贴着其作用对象，点击后结果即出现在附近，符合用户心智。
|
||
|
|
|
||
|
|
### 7. 画布与栏宽比例
|
||
|
|
- 衣服图多为竖向长方形，过宽的画布两侧留白浪费。
|
||
|
|
- 适当加宽左侧素材栏（约 1.3 倍、缩略图 4 列），让中间画布变窄、更贴合竖图；参数栏因多为小输入框，建议保持原宽或仅小幅加宽，避免拉宽后输入框两侧空旷。
|
||
|
|
|
||
|
|
### 待办（后续环节）
|
||
|
|
- 「② AI 穿搭」与「③ 导出上架」两个标签页的具体界面内容尚未确定，目前仅搭好标签框架。待明确各自的功能后再补充对应的提示词与布局。
|