# Unity UI 2048x2048 图集切片规划

## 1. 目标

将一套常用 Unity UGUI 控件切图放入一张 `2048x2048` 贴图中，供 Sprite Editor 按坐标切片后复用。
风格参考：`Doc\Design\ui_design.jpg`

本图集只覆盖项目高频控件：`Button`、`InputField`、`Slider`、`Scrollbar`、面板/弹窗、列表项、进度条、开关/复选、以及少量通用图标。业务专用图标与活动预留不纳入本表。

## 2. 坐标规则

- 图集尺寸：`2048x2048`。
- 表中 `X`、`Y(左上)` 以图片左上角为原点，适合给美术和切图工具对齐。
- `Unity Y(左下)` 以 Unity Sprite Editor 的左下角为原点，计算公式为：`2048 - Y(左上) - H`。
- 所有切片之间保留至少 `8px` 间隔，降低双线性采样和 mipmap 边缘串色风险。
- `9-slice` 切片需要在 Unity Sprite Editor 中设置 `Border`，格式为 `Left, Right, Top, Bottom`。
- `simple` 切片不设置九宫格，按原始比例或等比缩放使用。
- 未占用区域留白即可，不必填满整张图集。

## 3. 图集分区

| 区域 | Y 范围 | 内容 |
| --- | ---: | --- |
| 面板与列表 | `0-400` | 主面板、弹窗、内容底、标题栏、列表项、遮罩、分割线 |
| 按钮 | `408-560` | 主/次/小按钮、关闭与返回 |
| 输入 | `568-648` | 输入框、光标、搜索/清空 |
| 进度 / 滑动 / 滚动 | `656-816` | 进度条、滑动条、滚动条 |
| 开关与通用图标 | `824-920` | Toggle、Checkbox、Toast、常用图标 |
| 预留 | `928-2040` | 空白，后续按需追加 |

## 4. 切片清单

| 名称 | X | Y(左上) | W | H | Unity Y(左下) | 类型 | Border L,R,T,B | 用途 |
| --- | ---: | ---: | ---: | ---: | ---: | --- | --- | --- |
| `ui_panel_main` | 8 | 8 | 512 | 384 | 1656 | 9-slice | `48,48,48,48` | 主窗口/全屏面板底 |
| `ui_panel_popup` | 528 | 8 | 384 | 256 | 1784 | 9-slice | `40,40,40,40` | 弹窗底 |
| `ui_panel_content` | 920 | 8 | 384 | 256 | 1784 | 9-slice | `32,32,32,32` | 内容区/卡片底 |
| `ui_panel_header` | 1312 | 8 | 512 | 96 | 1944 | 9-slice | `32,32,24,24` | 标题栏 |
| `ui_list_item_normal` | 1312 | 112 | 384 | 96 | 1840 | 9-slice | `24,24,20,20` | 列表项普通态 |
| `ui_list_item_selected` | 1312 | 216 | 384 | 96 | 1736 | 9-slice | `24,24,20,20` | 列表项选中态 |
| `ui_overlay_dim` | 1704 | 112 | 256 | 256 | 1680 | simple | `0,0,0,0` | 半透明遮罩，可拉伸 |
| `ui_divider_h` | 528 | 272 | 512 | 16 | 1760 | simple | `0,0,0,0` | 横向分割线 |
| `btn_primary_normal` | 8 | 408 | 256 | 96 | 1544 | 9-slice | `36,36,28,28` | 主按钮普通态 |
| `btn_primary_pressed` | 272 | 408 | 256 | 96 | 1544 | 9-slice | `36,36,28,28` | 主按钮按下态 |
| `btn_primary_disabled` | 536 | 408 | 256 | 96 | 1544 | 9-slice | `36,36,28,28` | 主按钮禁用态 |
| `btn_secondary_normal` | 800 | 408 | 256 | 96 | 1544 | 9-slice | `36,36,28,28` | 次按钮普通态 |
| `btn_secondary_pressed` | 1064 | 408 | 256 | 96 | 1544 | 9-slice | `36,36,28,28` | 次按钮按下态 |
| `btn_small_normal` | 1328 | 408 | 192 | 72 | 1568 | 9-slice | `28,28,22,22` | 小按钮普通态 |
| `btn_small_pressed` | 1528 | 408 | 192 | 72 | 1568 | 9-slice | `28,28,22,22` | 小按钮按下态 |
| `btn_small_disabled` | 1728 | 408 | 192 | 72 | 1568 | 9-slice | `28,28,22,22` | 小按钮禁用态 |
| `btn_close` | 8 | 512 | 80 | 80 | 1456 | simple | `0,0,0,0` | 关闭按钮 |
| `btn_back` | 96 | 512 | 80 | 80 | 1456 | simple | `0,0,0,0` | 返回按钮 |
| `input_bg_normal` | 8 | 568 | 384 | 80 | 1400 | 9-slice | `32,32,24,24` | 输入框普通态 |
| `input_bg_focus` | 400 | 568 | 384 | 80 | 1400 | 9-slice | `32,32,24,24` | 输入框聚焦态 |
| `input_caret` | 792 | 568 | 8 | 64 | 1416 | simple | `0,0,0,0` | 输入光标 |
| `ico_search` | 816 | 568 | 64 | 64 | 1416 | simple | `0,0,0,0` | 搜索 |
| `ico_clear` | 888 | 568 | 64 | 64 | 1416 | simple | `0,0,0,0` | 清空 |
| `progress_bg` | 8 | 656 | 512 | 40 | 1352 | 9-slice | `20,20,12,12` | 进度条底 |
| `progress_fill` | 528 | 656 | 512 | 40 | 1352 | 9-slice | `20,20,12,12` | 进度条填充 |
| `slider_track` | 8 | 704 | 512 | 32 | 1312 | 9-slice | `16,16,10,10` | 滑动条轨道 |
| `slider_fill` | 528 | 704 | 512 | 32 | 1312 | 9-slice | `16,16,10,10` | 滑动条填充 |
| `slider_handle` | 1048 | 704 | 64 | 64 | 1280 | simple | `0,0,0,0` | 滑动条手柄 |
| `scrollbar_track_v` | 1120 | 656 | 32 | 160 | 1232 | 9-slice | `10,10,20,20` | 竖向滚动条轨道 |
| `scrollbar_thumb_v` | 1160 | 656 | 32 | 96 | 1296 | 9-slice | `10,10,20,20` | 竖向滚动条滑块 |
| `scrollbar_track_h` | 1200 | 656 | 512 | 32 | 1360 | 9-slice | `20,20,10,10` | 横向滚动条轨道 |
| `scrollbar_thumb_h` | 1720 | 656 | 128 | 32 | 1360 | 9-slice | `20,20,10,10` | 横向滚动条滑块 |
| `toggle_bg_off` | 8 | 824 | 112 | 56 | 1168 | 9-slice | `28,28,18,18` | 开关关闭底 |
| `toggle_bg_on` | 128 | 824 | 112 | 56 | 1168 | 9-slice | `28,28,18,18` | 开关开启底 |
| `toggle_knob` | 248 | 824 | 48 | 48 | 1176 | simple | `0,0,0,0` | 开关滑块 |
| `checkbox_off` | 304 | 824 | 64 | 64 | 1160 | simple | `0,0,0,0` | 复选框未选 |
| `checkbox_on` | 376 | 824 | 64 | 64 | 1160 | simple | `0,0,0,0` | 复选框已选 |
| `toast_bg` | 448 | 824 | 320 | 96 | 1128 | 9-slice | `32,32,24,24` | Toast 提示底 |
| `ico_check` | 776 | 824 | 64 | 64 | 1160 | simple | `0,0,0,0` | 对勾 |
| `ico_warning` | 848 | 824 | 64 | 64 | 1160 | simple | `0,0,0,0` | 警告 |
| `ico_info` | 920 | 824 | 64 | 64 | 1160 | simple | `0,0,0,0` | 信息 |
| `ico_settings` | 992 | 824 | 64 | 64 | 1160 | simple | `0,0,0,0` | 设置 |
| `ico_refresh` | 1064 | 824 | 64 | 64 | 1160 | simple | `0,0,0,0` | 刷新 |
| `ico_scan` | 1136 | 824 | 64 | 64 | 1160 | simple | `0,0,0,0` | 扫码 |

## 5. 控件映射建议

| Unity 控件 | 建议切片 |
| --- | --- |
| `Button` | `btn_primary_*`、`btn_secondary_*`、`btn_small_*`、`btn_close`、`btn_back` |
| `InputField` / `TMP_InputField` | `input_bg_normal`、`input_bg_focus`、`input_caret`、`ico_search`、`ico_clear` |
| `Slider` | `slider_track`、`slider_fill`、`slider_handle` |
| `Scrollbar` | `scrollbar_track_v`、`scrollbar_thumb_v`、`scrollbar_track_h`、`scrollbar_thumb_h` |
| `ScrollRect` 列表项 | `ui_list_item_normal`、`ui_list_item_selected` |
| 弹窗/面板 | `ui_panel_main`、`ui_panel_popup`、`ui_panel_content`、`ui_panel_header`、`ui_overlay_dim` |
| Toggle / Checkbox | `toggle_*`、`checkbox_*` |
| 进度显示 | `progress_bg`、`progress_fill` |
| Toast / 状态提示 | `toast_bg`、`ico_check`、`ico_warning`、`ico_info` |
| 扫码入口 | `ico_scan` |

## 6. Unity UI 使用规则

1. 与文字相关的 UI 控件统一使用 TextMeshPro 版本，例如 `TextMeshProUGUI`、`TMP_InputField`、`TMP_Dropdown`。
2. 不再新增 Unity Legacy `Text`、`InputField`、`Dropdown` 控件，已有旧控件后续维护时应逐步替换为 TextMeshPro 对应控件。
3. 动态文本、按钮文字、输入框占位符、列表项文字、弹窗正文、Toast 提示等均按 TextMeshPro 字体资源和材质配置。
4. 生成的节点都用英文。

## 7. Unity 导入设置

1. Texture Type 设为 `Sprite (2D and UI)`。
2. Sprite Mode 设为 `Multiple`。
3. Mesh Type 设为 `Full Rect`，避免九宫格边缘被裁切。
4. Filter Mode 建议 `Bilinear`；像素风 UI 可改为 `Point`。
5. Compression 建议 `None` 或 `High Quality`，避免 UI 边缘和文字图标出现压缩噪点。
6. 勾选 `Alpha Is Transparency`，保持透明边缘正确。
7. 移动端若对内存敏感，可在图集最终稳定后再评估 ASTC/ETC2 压缩。

## 8. 命名约定

- 面板：`ui_panel_*`
- 按钮：`btn_*`
- 图标：`ico_*`
- 输入：`input_*`
- 进度：`progress_*`
- 滑动条：`slider_*`
- 滚动条：`scrollbar_*`

Sprite 名称应与表中名称保持一致，Lua 或 C# 侧需要动态加载时直接使用该名称。

更轻量的控件集见：`Doc\UI_Simple_Set.md`（最小）与 `Doc\UI_Normal_Set.md`（常规）。