UI 与屏幕适配:把布局规则说清楚
一张 1080×1920 的效果图只描述了一个尺寸。真实手机有不同长宽比、安全区域和字体表现。做 UI 时需要把“看起来这样”转换成位置、尺寸和内容变化的规则。
Canvas 是 UI 的显示环境
UGUI 的 Canvas 常见三种模式:Overlay 直接覆盖屏幕,Camera 由指定相机参与显示,World Space 把 UI 放进场景空间。简单 2D 合成游戏可以先从 Overlay 理解。
RectTransform 在普通 Transform 基础上加入锚点、尺寸和 Pivot 等布局概念。锚点相对父矩形,Pivot 是自身缩放、旋转等变换的参考点。把按钮“放右上角”时,真正要写的是右上锚点、固定边距和安全区规则。
三种关系先固定
| 区域 | 建议描述方式 | 需要验证 |
|---|---|---|
| 顶部资源栏 | 贴安全区上边,左右保留边距 | 刘海、长数字、语言变化 |
| 中央棋盘 | 保持正方形,受可用宽高共同约束 | 超长屏、小屏、横向切换策略 |
| 底部按钮区 | 贴安全区下边,最小触摸区域 | 手势条、广告或系统覆盖 |
Canvas Scaler 的 Scale With Screen Size 能按参考分辨率缩放,但不会替你决定所有锚点、布局和安全区。Match Width Or Height 的选择要结合界面优先保持什么,而不是复制一个固定数值。

布局组件与脚本不要争夺同一属性
HorizontalLayoutGroup、VerticalLayoutGroup、GridLayoutGroup 和 ContentSizeFitter 可以管理常见排列。但如果布局组件在控制位置,脚本又持续写同一个位置,效果可能闪动或被下一次布局覆盖。
常用解决方式是把结构分层:外层由布局系统管理,内层负责缩放、偏移和动画。复杂的棋盘可以集中计算格子布局,避免每个物品各自猜测位置。
中文文本与资源
TextMeshPro 的字体资产需要包含实际字符。编辑器有字,不等于目标设备一定有合适回退。动态字体、字体图集尺寸、字形补充和包体都要结合微信环境验证。
数字显示要考虑上限,例如从 999 变成 10.2万。按钮还要有可点击区域、按下反馈、禁用状态和加载状态。视觉上很小的图标可以放在更大的透明交互区域内,但不能挡住邻近按钮。
模糊描述怎样交给 AI
把“帮我适配所有手机”改成:
竖屏界面。顶部与底部都位于安全区内,棋盘保持正方形,按剩余宽高取较小值。按钮不跟随棋盘缩小到难以点击。请说明 Canvas Scaler、锚点、布局组件与安全区更新方式,并覆盖长数字和超长屏。
验收时改变长宽比、字体长度和安全区;再检查是否有透明控件挡住输入。图片与 GIF 是概念演示,最终适配仍以微信真机为准。
参考:Canvas Scaler、基础布局。