安全区问题不是把 UI 往里缩一点
手机屏幕形态越来越多：刘海、挖孔、圆角、瀑布屏、底部手势条、平板分屏。游戏 UI 如果只按 16:9 设计，很容易把血条放进刘海，把聊天输入放到手势条上，把返回按钮贴到圆角外。安全区适配不能靠美术目测，需要系统化处理。
安全区的本质是“可安全交互和可安全阅读的区域”。有些内容可以延伸到屏幕边缘，比如背景和装饰；有些内容必须避开，比如按钮、文字、关键 HUD。客户端要区分视觉全屏和交互安全区。
flowchart TD
A[设备屏幕信息] --> B[安全区服务]
C[横竖屏/方向变化] --> B
D[系统手势/刘海/圆角] --> B
B --> E[全屏背景层]
B --> F[HUD 锚点层]
B --> G[弹窗布局层]
B --> H[输入与底栏层]
F --> I[战斗 UI]
G --> J[菜单/活动页]
先统一安全区服务
不要让每个页面自己读取设备信息。客户端应该有统一安全区服务，输出屏幕尺寸、逻辑分辨率、安全边距、方向、缩放比例和变化事件。UI 系统只订阅这个服务。
平台差异很大。iOS 有 safe area，Android 厂商对刘海和手势条的 API 支持不完全一致。引擎也可能返回不同坐标系。安全区服务负责把它们统一成 UI 坐标，让业务页面不用关心设备细节。
安全区要能实时变化。横竖屏切换、分屏、小窗、系统手势模式改变、外接显示器，都可能改变可用区域。页面不能只在启动时计算一次。
背景和按钮使用不同区域
很多游戏为了沉浸感，希望画面铺满全屏。背景、地图、特效可以延伸到刘海和圆角区域，但按钮和文字要在安全区内。UI 层级可以分为全屏视觉层、安全 HUD 层、弹窗层、系统输入层。
战斗 HUD 最需要谨慎。血条、小地图、技能按钮、任务提示都要锚到安全区，而不是屏幕物理边缘。否则某些设备上会被遮挡。装饰边框可以贴边，但不能承载关键信息。
弹窗则通常居中，但底部按钮要考虑手势条。尤其是确认、购买、领取按钮，不能贴得太低。底部留白看起来可能多一点，但比误触系统返回手势更好。
锚点规则比单独调坐标可靠
适配问题如果靠每个设备调坐标，很快失控。更好的方式是定义锚点规则：左上 HUD 距安全区左上多少，右上货币栏距安全区右上多少，底部技能栏距安全区底部多少。页面根据规则自动布局。
对超宽屏和平板，还要限制最大内容宽度。主按钮不能被拉到离拇指很远的位置，列表也不应无限变宽。游戏 UI 通常需要“安全区内再做舒适区”，保证可读性和操作距离。
横屏游戏要考虑左右手。刘海在左侧或右侧时，左右边距不同。技能按钮如果在右下，右侧安全边距尤其重要。不要简单取左右最大值，否则另一侧会浪费空间；也不要完全忽略不对称，否则按钮会被遮。
截图和录屏也要检查
适配不能只在编辑器里看。需要真机截图，覆盖刘海屏、挖孔屏、圆角屏、平板、不同长宽比。截图检查关键 HUD 是否落在安全区内，文字是否被裁剪，底部按钮是否碰到手势条。
自动化可以用模拟安全区参数跑布局快照。给 UI 注入几组极端边距，看布局是否重叠。虽然模拟不能替代真机，但能在开发阶段提前发现硬编码坐标。
录屏也有价值。横竖屏切换时，UI 是否跳动；键盘弹出时，底栏是否被顶乱；进入战斗后，HUD 是否延迟适配。这些动态问题截图不一定能看到。
美术验收要有规则
安全区适配会影响画面构图，美术可能担心留白。团队需要约定：关键交互必须在安全区内，背景可全屏延展，非关键装饰可被裁剪，品牌 Logo 不应落在刘海区域。规则明确后，验收就不会变成主观争论。
活动页面尤其要提醒外包和运营。活动大图里如果把重要文字写在边缘，客户端再怎么适配也救不了。设计模板应标出安全文字区和可裁剪装饰区。
小结
安全区适配是一套布局基础设施，不是最后阶段修几个坐标。客户端建立统一安全区服务，区分视觉层和交互层，用锚点规则驱动 HUD，并用真机和模拟参数验证，才能让游戏在各种屏幕上都显得专业可靠。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
我会要求每个新增全屏页面都通过一组安全区参数预览：无刘海、左刘海、右刘海、底部大手势条、超宽屏和平板。页面负责人看到截图后再合入，能避免上线后被玩家用真机截图指出低级遮挡。
继续阅读
探索更多技术文章
浏览归档，发现更多关于系统设计、工具链和工程实践的内容。