# UI 设计与验收

## 先确定视觉构思

先理解用户的浏览与操作顺序，选择一个主要视觉手法，再组织内容。需要品牌表达而方向未定时，可在文字或草图中比较两个有实质差异的方向，选定后生成；不强制多轮提问或额外候选图。已有明确方向就沿用。

构思应回答：第一眼注意什么，为什么适合该产品，以及如何贯穿页面。用具体构图、文字形态、照片视角、比例或色彩关系表达，不能只有“高级、温暖、专业”。业务清单决定内容是否完整，不能直接决定页面长什么样。

| 界面 | 设计重点 |
| --- | --- |
| 品牌官网 | 主视觉与文字的关系，跨区块节奏和一致的品牌表达 |
| 后台／工作台 | 核心判断与操作突出，主分析、辅助指标、待办和记录有不同分量；特色来自信息组织与组件细节 |
| 移动产品 | 内容、导航与主操作比例适当，小空间中仍保留清楚的字体和状态层级 |
| 游戏界面 | 世界观通过插画、配色和图标进入界面，任务、数值与控件保持可读可操作 |

展示数据可用表格或图表，反复浏览同类对象用稳定列表，需要比较时才并列。不要把“侧栏＋指标卡＋折线＋表格”当成默认答案，也不为避开模板禁用合理组件。

允许有目的的大小对比、非对称、错位、重叠与特殊裁切，说明它们如何通过布局、遮罩、字体或独立素材实现，以及窄屏如何处理。效率不等于省略视觉设计，容易实现也不等于删除特色。

## 保存简短设计说明

说明保存实现决定，提示词只传影响当前图像的重点。小任务可写在回复中，不强制多份配置；已有说明直接补充。

| 内容 | 必要决定 |
| --- | --- |
| 目标与范围 | 用户任务、主操作、单屏或完整长页、必须出现的区块 |
| 视觉构思 | 主要手法、第一眼焦点、与内容的关系和跨区块延续方式 |
| 视口与画布 | CSS 逻辑宽高、滚动方向、输出像素或比例、安全区域 |
| 结构与规则 | 内容顺序、对齐基准、重复组件、可用字体、字号、间距、HEX 颜色与阴影 |
| 素材 | 用途、容器比例、裁切方式及与正文的边界；分类按主流程 |
| 内容变化 | 长标题、更多列表项、窄屏、固定区域与关键操作状态 |

没有既有规范时选择少量自洽规则，例如可调整的 4／8 间距基准、正文与可选标题字体、少量字号和圆角；不把它们固定为所有产品的套餐。字体需有现实可用来源，不能依赖模型生成的特殊字形。

逻辑视口、文档高度和生成像素分别记录。移动端 390×844 的逻辑视口可以生成更大图片，但不能把生成图的 1024 像素宽当作手机布局宽；桌面长页数千像素的高度也不是桌面视口高度。

生成前核对示例数据与内容空间：数量和分母、金额、日期是否一致；指定内容能否以合理控件尺寸显示。放不下时区分首屏与滚动内容，不用极小文字塞满，也不虚构客户成绩或认证。

## 组织提示词

| 任务 | 主线 | 模型可以探索什么 |
| --- | --- | --- |
| 新品牌或视觉探索 | 一个与内容相关的类比／概念，加必要内容与少量视觉锚点 | 构图、比例、图像和区块节奏 |
| 密集业务界面 | 核心任务、内容关系、准确示例数据和组件约束 | 信息编排及视觉细节 |
| 延展或还原 | 实际参考图、保留范围与允许变化的区域 | 仅在约定范围内变化 |

类比应描述体验或组织方式，而非堆叠风格名；例如音乐工作台可以启发复杂信息的编排。若“杂志”“生活方式”带入无关静物、纸纹或口号，移除歧义，不继续堆修饰词。参考字体拆成字形、字重、比例与间距，不把英文字体类别直接翻译为中文宋体或手写字。

以正面效果为主，只加入当前任务必要的限制。构思未成立时不锁死每个区块的列数与坐标；明确尺寸只用于可用性和一致性。提示词保持聚焦，不设没有接口证据的固定字数上限。默认生成正视页面；用户没有要求展示图时，不添加设备外壳、透视或页面外装饰。

可选骨架，不要求逐项填写：

```text
对象与任务：[谁在什么设备上完成什么操作]。
范围与画布：[单屏／滚动／完整长页、逻辑视口、输出像素或比例]。
视觉构思：[主要手法、焦点及与业务的关系]。
内容：[区域顺序、必要文案与准确示例数据]。
规则与边界：[可用字体、HEX 配色、关键尺寸、素材范围、保留与变化]。
适配：[影响当前画面的长文本、窄屏和固定区域处理]。
```

隐藏交互与其他状态保留在设计说明中，不要求全部画进一张图。栅格设计稿的文字仍是像素，“可编辑组件”只表示后续实现分工。完整长页按 [长页生成](full-page.md) 组织，避免无限增长的提示词。

## 多状态与模型对比

先记录相邻状态之间的动作、数据变化与控件状态，重复组件和导航沿用同一规则。奖励、数量与进度从同一记录推导，取消或错误不得提前更新结果。

- 多屏总览用于看流程，先确认每格文字可读，再逐格核对状态与下一步操作；不能代替可运行原型。
- 单张延展从已检查的同一基础图生成；只有测试连续编辑时才串联上一张，并记录累积变化。
- 模型对比冻结提示词、参数与参考图片字节及顺序；有图与纯文字分组。共享生成的基础图需标明来源，双方获得相同输入；不能单独重画失败方挑样本，也不把一次质量或速度结果推广成永久结论。

## 检查与迭代

实际打开生成结果，在对应逻辑视口尺度检查：

| 检查 | 判断依据 |
| --- | --- |
| 范围与内容 | 区块和页脚完整；文案、数值、日期及状态正确，无擅自承诺的业务能力 |
| 视觉构思 | 焦点与表达可辨认，特色来自具体设计关系；内容齐全不抵消构图平庸 |
| 层级与可读性 | 核心信息及主操作明显，字号、对比度与触控区域合理，颜色不独自承担状态含义 |
| 一致性 | 字体、按钮、行高、图标线宽与对齐形成统一规则，各区块仍可有不同构图 |
| 实现边界 | 图片不吞掉正文与操作，能说明长文本、更多数据及窄屏的处理方式 |

每轮指出一个主要问题、应保留的特色与要改变的变量，再比较解决了什么、损失了什么。明确区分可验证缺陷与审美偏好；更整齐不一定更好，斜切或夸张比例本身也不是缺陷。纹理、颗粒和光晕只在明确风格需要时使用，不作为提升设计感的通用补丁。

连续出现模板布局时先检查参考是否真正传入、类比是否误导、内容清单是否提前锁死结构。探索阶段可暂减非关键样本并标明省略项，最终恢复完整需求并复查。迭代遵循任务的数量与成本授权，保留版本；视觉质量由实际对照和用户反馈判断，图片审阅不证明交互与响应式已经实现。