AIGame/Doc/UI_Normal_Set.md

# Unity UI 常规图集（Normal Set）

## 1. 目标

在 `UI_Simple_Set.md` 最小集之上，补充**次常用**控件，覆盖设置页、带页签面板、Toast、开关、小按钮等常见界面，又不展开到 `UI_Pic_Set.md` 的完整常用集。

风格参考：`Doc\Design\ui_design.jpg`

三级图集定位：

| 文档 | 定位 | 切片数 |
| --- | --- | ---: |
| `UI_Simple_Set.md` | 登录 / 大厅 / 弹窗最小可用 | 24 |
| **`UI_Normal_Set.md`（本文）** | Simple + 次常用（页签、Toggle、小按钮、Toast 等） | 38 |
| `UI_Pic_Set.md` | 更完整常用集（含横向滚动条、扫码、清空图标等） | ~48 |

- 切片紧凑排布在图集上方，**不要求填满**；空白保持透明。
- 图集尺寸仍为 `2048x2048`，便于后续追加。

## 2. 坐标规则

- 图集尺寸：`2048x2048`。
- `X`、`Y(左上)` 以图片左上角为原点。
- `Unity Y(左下)` = `2048 - Y(左上) - H`。
- 切片间距至少 `8px`。
- `9-slice` 需设置 `Border`：`Left, Right, Top, Bottom`。
- `simple` 不设置九宫格。

## 3. 区域说明

| 行 | 大约 Y | 内容 |
| --- | ---: | --- |
| 1 | `8` | 面板、标题栏、遮罩、分割线 |
| 2 | `280` | 主/次/小按钮、关闭、返回、竖向滚动条 |
| 3 | `400` | 输入、列表、页签 |
| 4 | `504` | 进度、滑动、Toast |
| 5 | `616` | Toggle、Checkbox、常用图标 |
| 其余 | `720+` | 留白；不够用时升级到 `UI_Pic_Set.md` |

## 4. 相对 Simple 新增（次常用）

| 类别 | 新增切片 |
| --- | --- |
| 面板 | `ui_panel_header`、`ui_divider_h` |
| 按钮 | `btn_secondary_pressed`、`btn_small_normal`、`btn_small_pressed`、`btn_back` |
| 页签 | `tab_active`、`tab_inactive` |
| 反馈 | `toast_bg` |
| 开关 | `toggle_bg_off`、`toggle_bg_on`、`toggle_knob` |
| 图标 | `ico_search`、`ico_check` |

相对 Pic Set 仍省略：横向滚动条、`input_caret`、`ico_clear` / `ico_warning` / `ico_info` / `ico_scan`、Radio、加减号等。

## 5. 切片清单

| 名称 | X | Y(左上) | W | H | Unity Y(左下) | 类型 | Border L,R,T,B | 用途 |
| --- | ---: | ---: | ---: | ---: | ---: | --- | --- | --- |
| `ui_panel_main` | 8 | 8 | 480 | 256 | 1784 | 9-slice | `40,40,40,40` | 主面板底 |
| `ui_panel_popup` | 496 | 8 | 360 | 240 | 1800 | 9-slice | `36,36,36,36` | 弹窗底 |
| `ui_panel_content` | 864 | 8 | 320 | 200 | 1840 | 9-slice | `28,28,28,28` | 内容/卡片底 |
| `ui_panel_header` | 1192 | 8 | 400 | 80 | 1960 | 9-slice | `32,32,24,24` | 标题栏 |
| `ui_overlay_dim` | 1600 | 8 | 192 | 192 | 1848 | simple | `0,0,0,0` | 半透明遮罩 |
| `ui_divider_h` | 1192 | 96 | 400 | 16 | 1936 | simple | `0,0,0,0` | 横向分割线 |
| `btn_primary_normal` | 8 | 280 | 224 | 88 | 1680 | 9-slice | `32,32,24,24` | 主按钮普通态 |
| `btn_primary_pressed` | 240 | 280 | 224 | 88 | 1680 | 9-slice | `32,32,24,24` | 主按钮按下态 |
| `btn_primary_disabled` | 472 | 280 | 224 | 88 | 1680 | 9-slice | `32,32,24,24` | 主按钮禁用态 |
| `btn_secondary_normal` | 704 | 280 | 224 | 88 | 1680 | 9-slice | `32,32,24,24` | 次按钮普通态 |
| `btn_secondary_pressed` | 936 | 280 | 224 | 88 | 1680 | 9-slice | `32,32,24,24` | 次按钮按下态 |
| `btn_small_normal` | 1168 | 280 | 160 | 64 | 1704 | 9-slice | `24,24,18,18` | 小按钮普通态 |
| `btn_small_pressed` | 1336 | 280 | 160 | 64 | 1704 | 9-slice | `24,24,18,18` | 小按钮按下态 |
| `btn_close` | 1504 | 280 | 72 | 72 | 1696 | simple | `0,0,0,0` | 关闭 |
| `btn_back` | 1584 | 280 | 72 | 72 | 1696 | simple | `0,0,0,0` | 返回 |
| `scrollbar_track_v` | 1664 | 280 | 28 | 160 | 1608 | 9-slice | `8,8,16,16` | 竖向滚动条轨道 |
| `scrollbar_thumb_v` | 1700 | 280 | 28 | 80 | 1688 | 9-slice | `8,8,16,16` | 竖向滚动条滑块 |
| `input_bg_normal` | 8 | 400 | 360 | 72 | 1576 | 9-slice | `28,28,20,20` | 输入框普通态 |
| `input_bg_focus` | 376 | 400 | 360 | 72 | 1576 | 9-slice | `28,28,20,20` | 输入框聚焦态 |
| `ui_list_item_normal` | 744 | 400 | 320 | 72 | 1576 | 9-slice | `20,20,16,16` | 列表项普通态 |
| `ui_list_item_selected` | 1072 | 400 | 320 | 72 | 1576 | 9-slice | `20,20,16,16` | 列表项选中态 |
| `tab_active` | 1400 | 400 | 200 | 72 | 1576 | 9-slice | `28,28,20,20` | 页签激活态 |
| `tab_inactive` | 1608 | 400 | 200 | 72 | 1576 | 9-slice | `28,28,20,20` | 页签未激活态 |
| `progress_bg` | 8 | 504 | 400 | 32 | 1512 | 9-slice | `16,16,10,10` | 进度条底 |
| `progress_fill` | 416 | 504 | 400 | 32 | 1512 | 9-slice | `16,16,10,10` | 进度条填充 |
| `slider_track` | 824 | 504 | 320 | 28 | 1516 | 9-slice | `14,14,8,8` | 滑动条轨道 |
| `slider_fill` | 1152 | 504 | 320 | 28 | 1516 | 9-slice | `14,14,8,8` | 滑动条填充 |
| `slider_handle` | 1480 | 496 | 56 | 56 | 1496 | simple | `0,0,0,0` | 滑动条手柄 |
| `toast_bg` | 1544 | 496 | 280 | 80 | 1472 | 9-slice | `28,28,20,20` | Toast 提示底 |
| `toggle_bg_off` | 8 | 616 | 112 | 56 | 1376 | 9-slice | `28,28,18,18` | 开关关闭底 |
| `toggle_bg_on` | 128 | 616 | 112 | 56 | 1376 | 9-slice | `28,28,18,18` | 开关开启底 |
| `toggle_knob` | 248 | 616 | 48 | 48 | 1384 | simple | `0,0,0,0` | 开关滑块 |
| `checkbox_off` | 304 | 616 | 56 | 56 | 1376 | simple | `0,0,0,0` | 复选未选 |
| `checkbox_on` | 368 | 616 | 56 | 56 | 1376 | simple | `0,0,0,0` | 复选已选 |
| `ico_search` | 432 | 616 | 56 | 56 | 1376 | simple | `0,0,0,0` | 搜索 |
| `ico_check` | 496 | 616 | 56 | 56 | 1376 | simple | `0,0,0,0` | 对勾 |
| `ico_settings` | 560 | 616 | 56 | 56 | 1376 | simple | `0,0,0,0` | 设置 |
| `ico_refresh` | 624 | 616 | 56 | 56 | 1376 | simple | `0,0,0,0` | 刷新 |

共 **38** 个切片。当前占用约 `1736 x 680` 包络范围，图集其余区域留白。

## 6. 控件映射

| Unity 控件 | 建议切片 |
| --- | --- |
| `Button` | `btn_primary_*`、`btn_secondary_*`、`btn_small_*`、`btn_close`、`btn_back` |
| `TMP_InputField` | `input_bg_normal`、`input_bg_focus`、`ico_search` |
| `Slider` | `slider_track`、`slider_fill`、`slider_handle` |
| `Scrollbar` / `ScrollRect` | `scrollbar_track_v`、`scrollbar_thumb_v`、`ui_list_item_*` |
| 面板 / 弹窗 | `ui_panel_main`、`ui_panel_popup`、`ui_panel_content`、`ui_panel_header`、`ui_overlay_dim` |
| 页签 | `tab_active`、`tab_inactive` |
| Toggle / Checkbox | `toggle_*`、`checkbox_*` |
| 进度 | `progress_bg`、`progress_fill` |
| Toast / 状态 | `toast_bg`、`ico_check` |
| 通用图标 | `ico_settings`、`ico_refresh`、`ico_search` |

## 7. Unity 使用规则

1. 文字相关控件统一使用 TextMeshPro（`TextMeshProUGUI`、`TMP_InputField` 等）。
2. 生成的节点名称使用英文。
3. 控件不够用时：先在空白区追加；仍不足再升级到 `UI_Pic_Set.md`。更轻量需求退回 `UI_Simple_Set.md`。

## 8. Unity 导入设置

1. Texture Type：`Sprite (2D and UI)`
2. Sprite Mode：`Multiple`
3. Mesh Type：`Full Rect`
4. Filter Mode：`Bilinear`（像素风可用 `Point`）
5. Compression：`None` 或 `High Quality`
6. 勾选 `Alpha Is Transparency`

## 9. 命名约定

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

Sprite 名称与表中一致，供 Lua / C# 按名加载。