AIC-Project/Doc/design/UI_Pic_Set.md

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# 侧需要动态加载时直接使用该名称。