Files
AIGame/Doc/UI_Normal_Set.md
T

7.2 KiB
Raw Blame History

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# 按名加载。