158 lines
12 KiB
Markdown
158 lines
12 KiB
Markdown
# UI 界面拼接
|
||
|
||
本文是根据示意图制作 UI 窗口的完整规则来源。生命周期和列表 API 见 [UI 开发指南](开发指南.md)，通用执行与授权流程见 [工作流清单](../../../rules/40-工作流清单.md)。其他入口只引用本文，不重复维护整套规则。
|
||
|
||
## 一、输入与目标
|
||
|
||
开始拼接前，先向开发者确认目标分辨率、横竖屏、SafeArea 与屏幕适配要求，以及窗口是全屏、弹窗还是局部面板。已经明确提供的信息不重复询问；项目现有配置可作为确认依据，但不得直接套用某个项目的分辨率。
|
||
|
||
同时检查：
|
||
|
||
- 设计原图、标注图或 PSD 中的尺寸、间距和层级。
|
||
- 项目现有 Sprite、SpriteAtlas、字体、材质和可复用 Prefab。
|
||
- 目标窗口名、Prefab 路径、Canvas 层级和脚本绑定方式。
|
||
- 示意图对应的状态、滚动区域和本次需要实现的交互范围。
|
||
|
||
先理解当前项目的窗口基类、Item 基类、SFUI/UIMono、资源加载、节点绑定与事件规范，优先复用相似窗口。给出简短的节点、切图、复用和验证方案；已明确授权的方案直接实施。不为拼界面另建框架或修改无关业务、第三方库。
|
||
|
||
不能只凭截图选择近似资源。设计图中的可检查对象必须使用语义正确的现有资源；缺失资源应明确记录，不能用无关图片顶替。
|
||
|
||
## 二、推荐层级
|
||
|
||
```text
|
||
WindowName
|
||
├── ImgBg
|
||
├── HeaderArea
|
||
├── ContentArea
|
||
│ ├── StaticContent
|
||
│ └── ListView
|
||
│ └── viewport
|
||
│ └── content
|
||
│ └── ItemTemplate (inactive)
|
||
├── FooterArea
|
||
└── PopupOrEffectArea
|
||
```
|
||
|
||
- 按视觉和功能边界组织节点，不为每个图片增加无意义容器。
|
||
- 节点命名应能对应脚本字段和功能，例如 `Btn_Close`、`Txt_Title`、`Img_Icon`。
|
||
- 复用 Item 或子面板时保持独立根节点，便于 UIMono 绑定和对象复用。
|
||
- 全屏背景使用稳定锚点；局部模块使用明确尺寸，避免依赖编辑器当前分辨率。
|
||
- 背景主要承载底板和固定装饰；关闭按钮、页签、操作按钮及其状态独立实现，不烘焙在背景中。
|
||
- 动态名称、进度、数量和提示使用文字组件；固定装饰性标题可以使用图片，但不能妨碍交互、适配及明确要求的本地化。
|
||
- 不用整张效果图替代可交互窗口；按示意图核对整体轮廓、比例、间距、层级和遮挡关系。
|
||
|
||
## 三、画布与图片尺寸
|
||
|
||
- 以开发者确认的分辨率建立基准画布，按适配要求统一 CanvasScaler、Sprite PPU 与项目约定。
|
||
- RectTransform 缩放默认保持 `1`，主要通过尺寸、锚点和布局控制显示，不靠缩小 Transform 匹配超大源图。
|
||
- **普通、不可拉伸的图片，执行 `SetNativeSize()` 后应达到目标画布中的预期尺寸。** 检查导入后的 Sprite 尺寸及 PPU 与 Canvas 的关系，不能只检查源 PNG。
|
||
- 三宫格、九宫格图片使用紧凑源图，通过 RectTransform 设置最终显示尺寸。
|
||
|
||
## 四、切图与资源效率
|
||
|
||
- 每个独立 UI 元素默认使用单张图片，**Sprite Mode 默认 Single**。开发者有单独要求时，允许 Multiple 或其他组织方式，不作绝对禁止。
|
||
- Sprite Mode 与图集打包分别处理；Single 图片仍可按项目规范进入 SpriteAtlas。名称应表达用途和状态。
|
||
- **普通图片在保证 `SetNativeSize()` 尺寸正确、最终显示不模糊的前提下，以尽量少占内存、尽量快加载为原则。** 避免超过实际需求的像素尺寸，不用过度降采样或压缩牺牲清晰度。
|
||
- 去除无用透明留白，保留必要的阴影、描边、柔边和装饰；裁剪后同步调整定位，保持视觉位置一致。
|
||
- 清除毛刺、杂点、残留底色、白边和黑边，在浅色、深色背景下检查透明边缘。缩小后重新检查，不能只验收原始大图。
|
||
- 按目标平台、透明通道和图片内容选择纹理格式与压缩；Mipmap、Read/Write、过滤和图集设置按用途配置，不盲目沿用默认值。
|
||
- 不单凭磁盘文件大小判断运行时内存与加载效率；需要比较方案时，以导入信息及目标平台测量为依据。
|
||
- 缩放、压缩或打图集后检查最终导入和渲染结果。
|
||
|
||
## 五、三宫格与九宫格
|
||
|
||
- 仅纵向伸缩的图片优先纵向三宫格，仅横向伸缩的图片优先横向三宫格。
|
||
- 同时改变宽高的规则面板、卡片和按钮优先九宫格。
|
||
- Border 必须保护圆角、描边、阴影和固定装饰；拉伸区域选择适合伸展的纯色、渐变或规则区域。
|
||
- 可以缩减源图中可拉伸区域的像素尺寸，保留固定边缘；检查最终尺寸下的接缝、渐变和装饰是否自然。
|
||
- 复杂插画、不规则图标或无法合理分离拉伸区域的图片，不强行切片。
|
||
- 修改源图尺寸后重新检查 Border，并配置对应 Image 的切片显示方式，不能只写 Border 而仍按普通图片整体拉伸。
|
||
|
||
## 六、组件、布局与交互
|
||
|
||
- 使用项目对应的 SFUI 图片、文字、按钮、Toggle、ScrollRect 等组件，以及既有节点行为和绑定流程。
|
||
- 组件接口、序列化与初始化以当前项目源码为准，不凭名称或原生 UGUI 经验推断。
|
||
- 按适配要求配置锚点、pivot、布局约束与遮罩；避免布局组件互相冲突或依赖偶然执行顺序。
|
||
- 纯装饰图片与文字关闭不必要的射线检测，避免遮挡按钮、页签和滚动操作。
|
||
- 点击区域与视觉表达一致，必要时按项目约定扩大；检查长文本、数量位数及动态内容变化。
|
||
|
||
## 七、页签与共享内容
|
||
|
||
- 互斥页签使用 **Toggle + ToggleGroup**；SFUI 项目使用对应的 SFUI Toggle。
|
||
- 普通态与选中态由 Toggle 状态驱动；监听变化时仅在选中状态执行切页，正确设置默认选中项并避免初始化重复刷新。
|
||
- 除非开发者或项目另有要求，不用普通按钮和独立布尔变量重复实现页签状态。
|
||
- 展示结构一致的页签共用一个内容面板、列表和 Item 模板，切页更新数据与必要状态，不复制两套完整界面。
|
||
- 文字、图标、奖励或进度不同不是新增模板的理由；只有结构确实不同时才增加模板。
|
||
- 明确切页是否回到顶部、同页更新是否保持滚动位置。
|
||
|
||
## 八、列表选择与复用
|
||
|
||
- 动态列表优先使用项目的 **SFUI_ScrollRect**。先读取当前实现和使用示例，再选择 `BindEvent` 或项目已接入的 LoopListView2 / LoopGridView 包装，不能混用或因拼 UI 强行迁移。
|
||
- `BindEvent` 按数据索引动态选择模板；参数职责、刷新入口和其他包装示例统一见 [UI 开发指南](开发指南.md)。
|
||
- 使用列表已有的创建与复用机制，不额外手动批量生成节点。
|
||
- Item 每次刷新完整更新文字、图标、进度、按钮状态、可选节点与高度，避免旧状态残留及回调持有过期数据。
|
||
- 模板保持禁用，尺寸、pivot 和滚动方向匹配；组件遵循当前框架要求，不重复序列化由列表运行时添加的组件。
|
||
- LayoutGroup/ContentSizeFitter 是否保留或关闭取决于当前列表实现；不要混用不同包装的布局机制。
|
||
|
||
## 九、数据与生命周期边界
|
||
|
||
- 仅拼 UI 时，不擅自扩展协议、数据模型和业务逻辑。
|
||
- 接入业务时由管理器持有和更新业务数据，通过项目事件机制通知界面；采用 CTC 的项目使用 CTC 刷新。
|
||
- 界面负责展示与转交操作，不自行维护另一份权威业务状态。
|
||
- 订阅和解除成对，重复开关、启用窗口及 Item 复用不能叠加监听；生命周期具体约定见 [UI 开发指南](开发指南.md)。
|
||
- 预览数据与正式运行数据分离，不能覆盖服务器状态。
|
||
|
||
## 十、拼接流程
|
||
|
||
1. 按 [AI 接入入口](../../../ai/AI接入入口.md) 读取规则和 UI 指南，完成本文的需求确认。
|
||
2. 检查目标 Prefab 是否已存在，导出或读取当前层级，避免覆盖有效结构。
|
||
3. 枚举目标资源目录和图集，建立设计元素到实际资源的对应关系。
|
||
4. 确定窗口根尺寸、锚点、主要功能区和列表类型。
|
||
5. 使用 Unity Editor 手工拼接，或通过 MCP 的 JSON 生成工具创建基础结构。
|
||
6. 绑定 SFUI/UIMono 组件与脚本，按已授权范围补齐交互、列表和数据。
|
||
7. 刷新资源并检查 Console、Prefab 序列化结构和运行时显示。
|
||
8. 按本文验收清单对照原图检查实际画面和交互。
|
||
|
||
JSON 生成适合批量创建稳定层级和组件，不代替视觉校对、业务绑定和运行时验证。
|
||
|
||
## 十一、修改已有 Prefab 与资源维护
|
||
|
||
- 先读取现有 Prefab 和脚本引用，再调整层级或组件。
|
||
- 移动、重命名节点前搜索 `FindUICtrlByName`、序列化字段和生成绑定代码。
|
||
- 只修改目标节点，避免让 Unity 重序列化无关 Prefab。
|
||
- 组件勾选状态属于 Prefab 行为的一部分；修复显示问题时同时检查 `enabled` 与 GameObject active。
|
||
- 若已授权迁移到会关闭旧布局的列表包装，可保留旧组件序列化参数作为参考，运行时由新包装管理布局；不将该行为套用到所有列表实现。
|
||
- 原始示意图、源图和中间素材保存在约定的美术或策划归档目录，运行时目录只保留实际需要的资源。
|
||
- 删除资源前检查 Prefab、场景、代码、配置、图集和生成工具引用，并遵守开发者授权范围。
|
||
- 有生成工具时同步修改生成源，避免重新生成旧布局或无用资源；不能只手工修补生成结果。
|
||
- 替换已有资源时尽量保留 GUID，避免引用断裂；保留用户已有的无关修改。
|
||
|
||
## 十二、验收与交付
|
||
|
||
在开发者确认的目标分辨率及必要的适配尺寸下实际渲染，保存可复核的对照画面并检查：
|
||
|
||
- Prefab 路径和窗口 attribute 一致。
|
||
- Sprite、字体、材质和图集引用有效。
|
||
- 锚点、pivot、sizeDelta 和层级与设计目标一致。
|
||
- 按钮、文本、列表、进度和弹窗交互正确。
|
||
- 背景、装饰、整体比例、间距、颜色和字体符合示意图，普通图片 SetNativeSize 尺寸正确且清晰。
|
||
- 三宫格、九宫格的边角、接缝、渐变和拉伸效果自然；压缩、打图集后的透明边缘和清晰度符合要求。
|
||
- 页签普通态、选中态、内容切换正确，同结构页签共享列表和模板。
|
||
- 空列表、短列表、长列表、滚动到底部、内容高度变化及 Item 复用正常。
|
||
- 极长文本、不同分辨率和重复打开不破版，业务涉及的未完成、可操作、已完成、禁用等状态正确。
|
||
- 重复切页、开关及启用窗口无重复回调、状态残留或缺失引用。
|
||
- Unity Console 无本次新增 Error，运行时实际显示通过确认。
|
||
|
||
编译通过、Prefab 保存成功或 JSON 生成成功不能代替视觉和交互验收。无法完成的检查明确说明，不能宣称已验证。
|
||
|
||
交付时说明修改的窗口、脚本和资源，确认的基准分辨率与适配方式，主要图片尺寸及三宫格/九宫格设置，已完成的编译、视觉和交互验证，以及未验证内容、已知限制和必要后续操作。
|
||
|
||
## 文档关联
|
||
|
||
| 文档 | 关联原因 |
|
||
|---|---|
|
||
| [UI 窗口系统](README.md) | 窗口框架和资源路径 |
|
||
| [UI 开发指南](开发指南.md) | 生命周期和虚拟列表接口 |
|
||
| [UI 拼接工具](../编辑器工具/UI拼接工具.md) | MCP JSON/Prefab 工具 |
|
||
| [MCP 使用规则](../编辑器工具/MCP工具/Codex_Unity_MCP使用规则.md) | Codex 与 Unity 的调用规则 |
|