106 lines
5.1 KiB
Markdown
106 lines
5.1 KiB
Markdown
# Unity UI 精简图集（Simple Set）
|
||
|
||
## 1. 目标
|
||
|
||
提供一套**最小可用**的 UGUI 控件切图规划，覆盖登录/大厅/弹窗/列表等基础界面所需素材。
|
||
风格参考：`Doc\Design\ui_design.jpg`
|
||
|
||
与 `UI_Pic_Set.md` / `UI_Normal_Set.md` 的区别：
|
||
|
||
- 只保留真正高频的控件态，去掉次要状态、业务图标和预留格。
|
||
- 切片集中排布在图集上方，**不要求填满整张贴图**；空白区域保持透明即可。
|
||
- 图集仍建议使用 `2048x2048`，方便后续直接追加切片，而不必重排已有坐标。
|
||
- 需要页签 / Toggle / Toast / 小按钮时，改用 `Doc\UI_Normal_Set.md`。
|
||
|
||
## 2. 坐标规则
|
||
|
||
- 图集尺寸：`2048x2048`（实际占用大约上半偏左区域）。
|
||
- `X`、`Y(左上)` 以图片左上角为原点。
|
||
- `Unity Y(左下)` = `2048 - Y(左上) - H`。
|
||
- 切片间距至少 `8px`。
|
||
- `9-slice` 需在 Sprite Editor 设置 `Border`：`Left, Right, Top, Bottom`。
|
||
- `simple` 不设置九宫格。
|
||
|
||
## 3. 区域说明
|
||
|
||
本精简集不强制分区填满，建议按行紧凑排列：
|
||
|
||
| 行 | 大约 Y | 内容 |
|
||
| --- | ---: | --- |
|
||
| 1 | `8` | 面板、弹窗、遮罩 |
|
||
| 2 | `280` | 按钮、关闭 |
|
||
| 3 | `400` | 输入框、列表项 |
|
||
| 4 | `504` | 进度、滑动、滚动、开关 |
|
||
| 其余 | `600+` | 全部留白，按需追加 |
|
||
|
||
## 4. 切片清单
|
||
|
||
| 名称 | 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_overlay_dim` | 1192 | 8 | 192 | 192 | 1848 | 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_close` | 936 | 280 | 72 | 72 | 1696 | simple | `0,0,0,0` | 关闭 |
|
||
| `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` | 列表项选中态 |
|
||
| `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` | 滑动条手柄 |
|
||
| `scrollbar_track_v` | 1544 | 280 | 28 | 160 | 1608 | 9-slice | `8,8,16,16` | 竖向滚动条轨道 |
|
||
| `scrollbar_thumb_v` | 1580 | 280 | 28 | 80 | 1688 | 9-slice | `8,8,16,16` | 竖向滚动条滑块 |
|
||
| `checkbox_off` | 8 | 560 | 56 | 56 | 1432 | simple | `0,0,0,0` | 复选未选 |
|
||
| `checkbox_on` | 72 | 560 | 56 | 56 | 1432 | simple | `0,0,0,0` | 复选已选 |
|
||
| `ico_settings` | 136 | 560 | 56 | 56 | 1432 | simple | `0,0,0,0` | 设置 |
|
||
| `ico_refresh` | 200 | 560 | 56 | 56 | 1432 | simple | `0,0,0,0` | 刷新 |
|
||
|
||
共 **24** 个切片。当前占用约 `1636 x 616` 包络范围，图集其余区域留白。
|
||
|
||
## 5. 控件映射
|
||
|
||
| Unity 控件 | 建议切片 |
|
||
| --- | --- |
|
||
| `Button` | `btn_primary_*`、`btn_secondary_normal`、`btn_close` |
|
||
| `TMP_InputField` | `input_bg_normal`、`input_bg_focus` |
|
||
| `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_overlay_dim` |
|
||
| 进度 | `progress_bg`、`progress_fill` |
|
||
| Checkbox | `checkbox_off`、`checkbox_on` |
|
||
| 通用图标 | `ico_settings`、`ico_refresh` |
|
||
|
||
## 6. Unity 使用规则
|
||
|
||
1. 文字相关控件统一使用 TextMeshPro（`TextMeshProUGUI`、`TMP_InputField` 等）。
|
||
2. 生成的节点名称使用英文。
|
||
3. 若后续控件不够用，优先追加到空白区域；次常用控件见 `UI_Normal_Set.md`，完整常用集见 `UI_Pic_Set.md`。
|
||
|
||
## 7. 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`
|
||
|
||
## 8. 命名约定
|
||
|
||
- 面板：`ui_panel_*`
|
||
- 按钮：`btn_*`
|
||
- 图标：`ico_*`
|
||
- 输入：`input_*`
|
||
- 进度：`progress_*`
|
||
- 滑动条：`slider_*`
|
||
- 滚动条：`scrollbar_*`
|
||
|
||
Sprite 名称与表中一致，供 Lua / C# 按名加载。
|