R4.01.3safe area occupancy设计

手势与安全区的系统占用

别名: 安全区 · 系统手势 · 主屏幕指示条 · 边缘手势

概念解释

苹果把屏幕四周划出一块应用不得当作可交互主场的区域:安全区(safe area)是刘海、状态栏、圆角和底部主屏幕指示条被系统占走之后剩下的矩形。与此同时,左右下边缘的滑动被系统预留给返回、主屏幕、控制中心和通知中心。应用可以在安全区外绘制背景,但不能把必须点中的控件或必须滑中的手势放进这些被占用的条带。占用是系统先声明的主权,不是给应用参考的留白建议。

它处理的是「屏幕物理边缘已经被谁预订」,不是「内容要不要压过装饰」。把主操作放进指示条高度里、在左缘做水平翻页、在底缘做上滑菜单,都会和已经驻扎在那里的系统手势抢同一条运动轨迹。

机制

安全区是减法:从整屏里扣掉系统壳正在使用的像素,剩下的才是布局该遵守的约束。圆角会切掉贴边的点击热区,指示条会吞掉贴底的按钮下半截——不是视觉上「看起来被挡住」,而是命中测试已经落在系统视图上。边缘手势同样是先到先得:系统在边缘内侧划出一条识别带,方向和距离一旦匹配系统手势,事件就不会再传给应用。应用在同一条带上注册的自定义滑动,成功条件变成「系统这次刚好没认出来」,这不是稳定的交互。

因此「贴边」在苹果上不是中性的构图选择。贴边等于主动走进系统已经驻军的地带。安全区 inset 随设备方向、分屏和是否隐藏系统壳而变,布局若按某一种刘海形状写死,换一台设备或一转方向,占用边界就会错位。

边界

全屏媒体播放、相机取景和游戏可以申请隐藏系统壳、把画面画到边,但退出全屏的手势仍然归系统,不能在底缘再做一个同方向的「收起工具条」。iPad 分屏、台前调度和外接显示器会改变安全区形状,手机上「底边 34 点」这类常数抄不过去。Apple Pencil 和触控板的输入不走手指边缘手势的同一条识别带,但安全区作为布局约束仍然有效——文字和按钮仍不能藏进圆角。把可滚动内容的弹性延伸画进安全区是允许的;把提交按钮钉在安全区外是不允许的。Web 内容若只按 CSS 像素贴边、不读安全区 inset,会在刘海和指示条上重复同样的占用冲突。

怎么落地

  • 用安全区作为约束的参照,而不是用整屏或某一代刘海的常数;横竖屏、分屏各测一次 inset 是否在变。
  • 把主按钮、分页指示和自定义水平滑动收进安全区以内,给边缘手势留出系统识别带,不要在左缘做与返回同向的翻页。
  • 全屏沉浸可以铺到边,但必须保留系统的退出手势,并在退出后恢复安全区约束。
  • 验证:在真实设备上用边缘滑动触发系统返回、回主屏幕和控制中心,同时尝试去点贴边的主按钮。按钮点不中、或一次滑动有时翻页有时退出应用,说明交互落在了系统占用带上。再用最大字号和横屏各走一遍,确认放大后的按钮没有被挤进指示条。

延伸

  • 同组R4.01.1 导航与返回的层级模型 · R4.01.2 系统控件与动态字体的深度绑定
  • 相邻K1.03 系统手势冲突 · K1.05 状态栏与通知中心
  • 站内检索safe area · home indicator · system gesture · edge reservation

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R4.01.3