udx/AIC-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7e35d8da31c0365b1e254c9bc22a17950056876c
AIC-Project/Doc/design/UI_Pic_Set.md
T
ud18010andCursor 7e35d8da31 Initial commit: Client Doc docs Server Tools 
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-10 10:24:29 +08:00

14 KiB
Raw Blame History

Unity UI 2048x2048 图集切片规划

1. 目标

将一套常用 Unity UGUI 控件切图放入一张 2048x2048 贴图中，供 Sprite Editor 按坐标切片后在按钮、面板、输入框、进度条、滑动条、滚动列表、弹窗、图标等控件中复用。 风格参考：Doc\Design\ui_design.jpg

当前项目中没有独立的 UI 图集素材目录；已有代码和预制体主要用到 Button、InputField、Slider、Image、二维码/扫码入口、Lua UI 面板、滚动列表等控件。因此本图集按项目现有控件和后续常用 UI 控件做统一规划。

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-640 主面板、弹窗、内容底、标题栏、列表项、遮罩、分割线、角标
按钮与页签 648-832 主按钮、次按钮、小按钮、警告按钮、页签、分段控件、导航按钮
输入与表单 840-920 输入框、下拉框、光标、搜索/清空/复制等输入辅助图标
进度与滑动 928-1040 进度条、滑动条、滑块、加载帧
开关与状态 1048-1112 Toggle、Checkbox、Radio、状态图标
菜单与业务图标 1120-1456 菜单、Toast、扫码框、服务器/聊天/背包等常用图标
滚动条 976-1488 竖向/横向滚动条轨道与滑块
预留 1464-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_panel_footer 1312 112 512 96 1840 9-slice 32,32,24,24 底部操作栏
ui_panel_tooltip 528 272 320 160 1616 9-slice 28,28,28,28 提示框
ui_list_item_normal 856 272 384 96 1680 9-slice 24,24,20,20 列表项普通态
ui_list_item_selected 1248 272 384 96 1680 9-slice 24,24,20,20 列表项选中态
ui_list_item_disabled 1640 272 384 96 1680 9-slice 24,24,20,20 列表项禁用态
ui_overlay_dim 920 376 256 256 1416 simple 0,0,0,0 半透明遮罩，可拉伸
ui_divider_h 1184 376 512 16 1656 simple 0,0,0,0 横向分割线
ui_divider_v 1704 376 16 256 1416 simple 0,0,0,0 竖向分割线
ui_badge_base 1728 376 128 64 1608 9-slice 24,24,20,20 普通角标
ui_badge_alert 1864 376 128 64 1608 9-slice 24,24,20,20 提醒/红点角标
btn_primary_normal 8 648 256 96 1304 9-slice 36,36,28,28 主按钮普通态
btn_primary_hover 272 648 256 96 1304 9-slice 36,36,28,28 主按钮悬停/选中态
btn_primary_pressed 536 648 256 96 1304 9-slice 36,36,28,28 主按钮按下态
btn_primary_disabled 800 648 256 96 1304 9-slice 36,36,28,28 主按钮禁用态
btn_secondary_normal 1064 648 256 96 1304 9-slice 36,36,28,28 次按钮普通态
btn_secondary_pressed 1328 648 256 96 1304 9-slice 36,36,28,28 次按钮按下态
btn_warning_normal 1592 648 224 96 1304 9-slice 36,36,28,28 警告按钮普通态
btn_warning_pressed 1816 648 224 96 1304 9-slice 36,36,28,28 警告按钮按下态
btn_small_normal 8 752 192 72 1224 9-slice 28,28,22,22 小按钮普通态
btn_small_hover 208 752 192 72 1224 9-slice 28,28,22,22 小按钮悬停态
btn_small_pressed 408 752 192 72 1224 9-slice 28,28,22,22 小按钮按下态
btn_small_disabled 608 752 192 72 1224 9-slice 28,28,22,22 小按钮禁用态
tab_active 808 752 224 80 1216 9-slice 32,32,24,24 页签激活态
tab_inactive 1040 752 224 80 1216 9-slice 32,32,24,24 页签未激活态
seg_left 1272 752 160 80 1216 9-slice 32,12,24,24 分段控件左段
seg_mid 1440 752 160 80 1216 9-slice 12,12,24,24 分段控件中段
seg_right 1608 752 160 80 1216 9-slice 12,32,24,24 分段控件右段
btn_close 1776 752 80 80 1216 simple 0,0,0,0 关闭按钮
btn_back 1864 752 80 80 1216 simple 0,0,0,0 返回按钮
btn_home 1952 752 80 80 1216 simple 0,0,0,0 主页按钮
input_bg_normal 8 840 384 80 1128 9-slice 32,32,24,24 输入框普通态
input_bg_focus 400 840 384 80 1128 9-slice 32,32,24,24 输入框聚焦态
input_bg_error 792 840 384 80 1128 9-slice 32,32,24,24 输入框错误态
dropdown_bg 1184 840 384 80 1128 9-slice 32,32,24,24 下拉框底
dropdown_arrow 1576 840 64 64 1144 simple 0,0,0,0 下拉箭头
input_caret 1648 840 8 64 1144 simple 0,0,0,0 输入光标
ico_keyboard 1664 840 64 64 1144 simple 0,0,0,0 键盘
ico_search 1736 840 64 64 1144 simple 0,0,0,0 搜索
ico_clear 1808 840 64 64 1144 simple 0,0,0,0 清空
ico_copy 1880 840 64 64 1144 simple 0,0,0,0 复制
ico_paste 1952 840 64 64 1144 simple 0,0,0,0 粘贴
progress_bg 8 928 512 40 1080 9-slice 20,20,12,12 进度条底
progress_fill_blue 528 928 512 40 1080 9-slice 20,20,12,12 蓝色进度填充
progress_fill_green 1048 928 512 40 1080 9-slice 20,20,12,12 绿色进度填充
progress_fill_warn 1568 928 472 40 1080 9-slice 20,20,12,12 警告进度填充
slider_track 8 976 512 32 1040 9-slice 16,16,10,10 滑动条轨道
slider_fill 528 976 512 32 1040 9-slice 16,16,10,10 滑动条填充
slider_handle 1048 976 64 64 1008 simple 0,0,0,0 滑动条手柄
scrollbar_track_v 1120 976 32 512 560 9-slice 10,10,20,20 竖向滚动条轨道
scrollbar_thumb_v 1160 976 32 128 944 9-slice 10,10,20,20 竖向滚动条滑块
scrollbar_track_h 1200 976 512 32 1040 9-slice 20,20,10,10 横向滚动条轨道
scrollbar_thumb_h 1720 976 128 32 1040 9-slice 20,20,10,10 横向滚动条滑块
loading_ring_0 1856 976 64 64 1008 simple 0,0,0,0 加载圆环帧 0
loading_ring_1 1928 976 64 64 1008 simple 0,0,0,0 加载圆环帧 1
toggle_bg_off 8 1048 112 56 944 9-slice 28,28,18,18 开关关闭底
toggle_bg_on 128 1048 112 56 944 9-slice 28,28,18,18 开关开启底
toggle_knob 248 1048 48 48 952 simple 0,0,0,0 开关滑块
checkbox_off 304 1048 64 64 936 simple 0,0,0,0 复选框未选
checkbox_on 376 1048 64 64 936 simple 0,0,0,0 复选框已选
radio_off 448 1048 64 64 936 simple 0,0,0,0 单选框未选
radio_on 520 1048 64 64 936 simple 0,0,0,0 单选框已选
ico_check 592 1048 64 64 936 simple 0,0,0,0 对勾
ico_lock 664 1048 64 64 936 simple 0,0,0,0 锁定
ico_unlock 736 1048 64 64 936 simple 0,0,0,0 解锁
ico_warning 808 1048 64 64 936 simple 0,0,0,0 警告
ico_info 880 1048 64 64 936 simple 0,0,0,0 信息
ico_plus 952 1048 64 64 936 simple 0,0,0,0 加号
ico_minus 1024 1048 64 64 936 simple 0,0,0,0 减号
slot_empty 1200 1048 96 96 904 9-slice 20,20,20,20 物品格空态
slot_selected 1304 1048 96 96 904 9-slice 20,20,20,20 物品格选中态
slot_locked 1408 1048 96 96 904 9-slice 20,20,20,20 物品格锁定态
avatar_frame 1512 1048 128 128 872 9-slice 28,28,28,28 头像框
rank_medal_1 1648 1048 80 80 920 simple 0,0,0,0 第一名徽章
rank_medal_2 1736 1048 80 80 920 simple 0,0,0,0 第二名徽章
rank_medal_3 1824 1048 80 80 920 simple 0,0,0,0 第三名徽章
ico_coin 1912 1048 80 80 920 simple 0,0,0,0 货币图标
menu_bg 8 1120 384 320 608 9-slice 32,32,32,32 下拉菜单/右键菜单底
menu_item_normal 400 1120 384 64 864 9-slice 20,20,16,16 菜单项普通态
menu_item_hover 400 1192 384 64 792 9-slice 20,20,16,16 菜单项悬停态
menu_item_disabled 400 1264 384 64 720 9-slice 20,20,16,16 菜单项禁用态
toast_bg 792 1120 320 96 832 9-slice 32,32,24,24 Toast 提示底
notice_bg 792 1224 320 96 728 9-slice 32,32,24,24 系统通知底
drag_handle 792 1328 160 32 688 simple 0,0,0,0 拖拽把手
qr_scan_frame 960 1328 128 128 592 simple 0,0,0,0 扫码框角标
ico_server 1200 1184 64 64 800 simple 0,0,0,0 服务器
ico_user 1272 1184 64 64 800 simple 0,0,0,0 玩家
ico_chat 1344 1184 64 64 800 simple 0,0,0,0 聊天
ico_mail 1416 1184 64 64 800 simple 0,0,0,0 邮件
ico_settings 1488 1184 64 64 800 simple 0,0,0,0 设置
ico_sound_on 1560 1184 64 64 800 simple 0,0,0,0 声音开启
ico_sound_off 1632 1184 64 64 800 simple 0,0,0,0 声音关闭
ico_scan 1704 1184 64 64 800 simple 0,0,0,0 扫码
ico_refresh 1776 1184 64 64 800 simple 0,0,0,0 刷新
ico_download 1848 1184 64 64 800 simple 0,0,0,0 下载/更新
ico_upload 1920 1184 64 64 800 simple 0,0,0,0 上传
ico_bag 1200 1256 64 64 728 simple 0,0,0,0 背包
ico_item 1272 1256 64 64 728 simple 0,0,0,0 道具
ico_sword 1344 1256 64 64 728 simple 0,0,0,0 武器
ico_shield 1416 1256 64 64 728 simple 0,0,0,0 防具
ico_map 1488 1256 64 64 728 simple 0,0,0,0 地图
ico_star 1560 1256 64 64 728 simple 0,0,0,0 星级
ico_heart 1632 1256 64 64 728 simple 0,0,0,0 生命/收藏
ico_diamond 1704 1256 64 64 728 simple 0,0,0,0 钻石
ico_key 1776 1256 64 64 728 simple 0,0,0,0 钥匙
ico_clock 1848 1256 64 64 728 simple 0,0,0,0 时间
ico_calendar 1920 1256 64 64 728 simple 0,0,0,0 日期
reserved_large_0 8 1464 512 256 328 simple 0,0,0,0 大型活动/界面专用预留
reserved_large_1 528 1464 512 256 328 simple 0,0,0,0 大型活动/界面专用预留
reserved_icon_grid 1200 1336 784 192 520 simple 0,0,0,0 未来 64x64 图标网格预留

5. 控件映射建议

Unity 控件 建议切片
Button btn_primary_*、btn_secondary_*、btn_small_*、btn_warning_*
InputField / TMP_InputField input_bg_normal、input_bg_focus、input_bg_error、input_caret
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_list_item_disabled
弹窗/面板 ui_panel_main、ui_panel_popup、ui_panel_content、ui_panel_header、ui_overlay_dim
Toggle/Checkbox/Radio toggle_*、checkbox_*、radio_*
加载/热更新 progress_*、loading_ring_*、ico_download
二维码/扫码 ico_scan、qr_scan_frame

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_*
  • 预留：reserved_*

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

Reference in New Issue View Git Blame Copy Permalink