7.8 KiB
7.8 KiB
Unity UI 2048x2048 图集切片规划
1. 目标
将一套常用 Unity UGUI 控件切图放入一张 2048x2048 贴图中,供 Sprite Editor 按坐标切片后复用。
风格参考:Doc\Design\ui_design.jpg
本图集只覆盖项目高频控件:Button、InputField、Slider、Scrollbar、面板/弹窗、列表项、进度条、开关/复选、以及少量通用图标。业务专用图标与活动预留不纳入本表。
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-400 |
主面板、弹窗、内容底、标题栏、列表项、遮罩、分割线 |
| 按钮 | 408-560 |
主/次/小按钮、关闭与返回 |
| 输入 | 568-648 |
输入框、光标、搜索/清空 |
| 进度 / 滑动 / 滚动 | 656-816 |
进度条、滑动条、滚动条 |
| 开关与通用图标 | 824-920 |
Toggle、Checkbox、Toast、常用图标 |
| 预留 | 928-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_list_item_normal |
1312 | 112 | 384 | 96 | 1840 | 9-slice | 24,24,20,20 |
列表项普通态 |
ui_list_item_selected |
1312 | 216 | 384 | 96 | 1736 | 9-slice | 24,24,20,20 |
列表项选中态 |
ui_overlay_dim |
1704 | 112 | 256 | 256 | 1680 | simple | 0,0,0,0 |
半透明遮罩,可拉伸 |
ui_divider_h |
528 | 272 | 512 | 16 | 1760 | simple | 0,0,0,0 |
横向分割线 |
btn_primary_normal |
8 | 408 | 256 | 96 | 1544 | 9-slice | 36,36,28,28 |
主按钮普通态 |
btn_primary_pressed |
272 | 408 | 256 | 96 | 1544 | 9-slice | 36,36,28,28 |
主按钮按下态 |
btn_primary_disabled |
536 | 408 | 256 | 96 | 1544 | 9-slice | 36,36,28,28 |
主按钮禁用态 |
btn_secondary_normal |
800 | 408 | 256 | 96 | 1544 | 9-slice | 36,36,28,28 |
次按钮普通态 |
btn_secondary_pressed |
1064 | 408 | 256 | 96 | 1544 | 9-slice | 36,36,28,28 |
次按钮按下态 |
btn_small_normal |
1328 | 408 | 192 | 72 | 1568 | 9-slice | 28,28,22,22 |
小按钮普通态 |
btn_small_pressed |
1528 | 408 | 192 | 72 | 1568 | 9-slice | 28,28,22,22 |
小按钮按下态 |
btn_small_disabled |
1728 | 408 | 192 | 72 | 1568 | 9-slice | 28,28,22,22 |
小按钮禁用态 |
btn_close |
8 | 512 | 80 | 80 | 1456 | simple | 0,0,0,0 |
关闭按钮 |
btn_back |
96 | 512 | 80 | 80 | 1456 | simple | 0,0,0,0 |
返回按钮 |
input_bg_normal |
8 | 568 | 384 | 80 | 1400 | 9-slice | 32,32,24,24 |
输入框普通态 |
input_bg_focus |
400 | 568 | 384 | 80 | 1400 | 9-slice | 32,32,24,24 |
输入框聚焦态 |
input_caret |
792 | 568 | 8 | 64 | 1416 | simple | 0,0,0,0 |
输入光标 |
ico_search |
816 | 568 | 64 | 64 | 1416 | simple | 0,0,0,0 |
搜索 |
ico_clear |
888 | 568 | 64 | 64 | 1416 | simple | 0,0,0,0 |
清空 |
progress_bg |
8 | 656 | 512 | 40 | 1352 | 9-slice | 20,20,12,12 |
进度条底 |
progress_fill |
528 | 656 | 512 | 40 | 1352 | 9-slice | 20,20,12,12 |
进度条填充 |
slider_track |
8 | 704 | 512 | 32 | 1312 | 9-slice | 16,16,10,10 |
滑动条轨道 |
slider_fill |
528 | 704 | 512 | 32 | 1312 | 9-slice | 16,16,10,10 |
滑动条填充 |
slider_handle |
1048 | 704 | 64 | 64 | 1280 | simple | 0,0,0,0 |
滑动条手柄 |
scrollbar_track_v |
1120 | 656 | 32 | 160 | 1232 | 9-slice | 10,10,20,20 |
竖向滚动条轨道 |
scrollbar_thumb_v |
1160 | 656 | 32 | 96 | 1296 | 9-slice | 10,10,20,20 |
竖向滚动条滑块 |
scrollbar_track_h |
1200 | 656 | 512 | 32 | 1360 | 9-slice | 20,20,10,10 |
横向滚动条轨道 |
scrollbar_thumb_h |
1720 | 656 | 128 | 32 | 1360 | 9-slice | 20,20,10,10 |
横向滚动条滑块 |
toggle_bg_off |
8 | 824 | 112 | 56 | 1168 | 9-slice | 28,28,18,18 |
开关关闭底 |
toggle_bg_on |
128 | 824 | 112 | 56 | 1168 | 9-slice | 28,28,18,18 |
开关开启底 |
toggle_knob |
248 | 824 | 48 | 48 | 1176 | simple | 0,0,0,0 |
开关滑块 |
checkbox_off |
304 | 824 | 64 | 64 | 1160 | simple | 0,0,0,0 |
复选框未选 |
checkbox_on |
376 | 824 | 64 | 64 | 1160 | simple | 0,0,0,0 |
复选框已选 |
toast_bg |
448 | 824 | 320 | 96 | 1128 | 9-slice | 32,32,24,24 |
Toast 提示底 |
ico_check |
776 | 824 | 64 | 64 | 1160 | simple | 0,0,0,0 |
对勾 |
ico_warning |
848 | 824 | 64 | 64 | 1160 | simple | 0,0,0,0 |
警告 |
ico_info |
920 | 824 | 64 | 64 | 1160 | simple | 0,0,0,0 |
信息 |
ico_settings |
992 | 824 | 64 | 64 | 1160 | simple | 0,0,0,0 |
设置 |
ico_refresh |
1064 | 824 | 64 | 64 | 1160 | simple | 0,0,0,0 |
刷新 |
ico_scan |
1136 | 824 | 64 | 64 | 1160 | simple | 0,0,0,0 |
扫码 |
5. 控件映射建议
| Unity 控件 | 建议切片 |
|---|---|
Button |
btn_primary_*、btn_secondary_*、btn_small_*、btn_close、btn_back |
InputField / TMP_InputField |
input_bg_normal、input_bg_focus、input_caret、ico_search、ico_clear |
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_panel_main、ui_panel_popup、ui_panel_content、ui_panel_header、ui_overlay_dim |
| Toggle / Checkbox | toggle_*、checkbox_* |
| 进度显示 | progress_bg、progress_fill |
| Toast / 状态提示 | toast_bg、ico_check、ico_warning、ico_info |
| 扫码入口 | ico_scan |
6. Unity UI 使用规则
- 与文字相关的 UI 控件统一使用 TextMeshPro 版本,例如
TextMeshProUGUI、TMP_InputField、TMP_Dropdown。 - 不再新增 Unity Legacy
Text、InputField、Dropdown控件,已有旧控件后续维护时应逐步替换为 TextMeshPro 对应控件。 - 动态文本、按钮文字、输入框占位符、列表项文字、弹窗正文、Toast 提示等均按 TextMeshPro 字体资源和材质配置。
- 生成的节点都用英文。
7. Unity 导入设置
- Texture Type 设为
Sprite (2D and UI)。 - Sprite Mode 设为
Multiple。 - Mesh Type 设为
Full Rect,避免九宫格边缘被裁切。 - Filter Mode 建议
Bilinear;像素风 UI 可改为Point。 - Compression 建议
None或High Quality,避免 UI 边缘和文字图标出现压缩噪点。 - 勾选
Alpha Is Transparency,保持透明边缘正确。 - 移动端若对内存敏感,可在图集最终稳定后再评估 ASTC/ETC2 压缩。
8. 命名约定
- 面板:
ui_panel_* - 按钮:
btn_* - 图标:
ico_* - 输入:
input_* - 进度:
progress_* - 滑动条:
slider_* - 滚动条:
scrollbar_*
Sprite 名称应与表中名称保持一致,Lua 或 C# 侧需要动态加载时直接使用该名称。
更轻量的控件集见:Doc\UI_Simple_Set.md(最小)与 Doc\UI_Normal_Set.md(常规)。