5.1 KiB
5.1 KiB
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 使用规则
- 文字相关控件统一使用 TextMeshPro(
TextMeshProUGUI、TMP_InputField等)。 - 生成的节点名称使用英文。
- 若后续控件不够用,优先追加到空白区域;次常用控件见
UI_Normal_Set.md,完整常用集见UI_Pic_Set.md。
7. Unity 导入设置
- Texture Type:
Sprite (2D and UI) - Sprite Mode:
Multiple - Mesh Type:
Full Rect - Filter Mode:
Bilinear(像素风可用Point) - Compression:
None或High Quality - 勾选
Alpha Is Transparency
8. 命名约定
- 面板:
ui_panel_* - 按钮:
btn_* - 图标:
ico_* - 输入:
input_* - 进度:
progress_* - 滑动条:
slider_* - 滚动条:
scrollbar_*
Sprite 名称与表中一致,供 Lua / C# 按名加载。