K1.05.3status bar occlusion设计研究

状态栏遮挡是常见的布局遗漏

别名: 安全区 · safe area inset · 刘海遮挡 · display cutout

概念解释

应用按整窗铺内容时,系统状态栏、刘海、岛、圆角和底部指示条是盖在内容上面的,不是布局里的另一行。忘了按安全区(safe area / inset)给可点和可读的东西让位,关闭按钮会进岛下,第一行标题会顶进时钟,横屏时侧边的缺口切掉返回。这是布局遗漏:像素被系统镶边占用了,应用还当它们是自己的。这条只谈遮挡与让位,不谈不要去画假状态栏,也不谈通知作为入口。

机制

窗口的根尺寸是整块玻璃。系统镶边以叠加方式存在,高度还会变:来电或热点把状态栏变成两倍高,键盘升起改变底 inset,横竖切换把缺口从顶边转到侧边。布局若只在启动时读一次「状态栏高度」,后续变化不会跟着让。全屏沉浸退出后若没把 inset 加回来,临时隐藏过的顶栏会压在仍贴顶的关闭按钮上。背景图铺到边通常可以,因为它本来就被镶边盖住一截;同一坐标上的文字和热区不行,因为被盖住的部分既读不到也点不到。遗漏之所以常见,是因为桌面预览和没有缺口的旗舰日常机都不会把失败摆在眼前,缺陷跟着刘海机和加高状态栏走。

怎么研究

做遮挡编码:在真机上对关键屏截图,把系统镶边画成半透明区,标出与文字、图标、可点热区的交集。旋转、弹出键盘、打开热点,再编一次。

自变量:是否应用安全区、缺口机还是无缺口机、状态栏是否加高、横竖屏。 因变量:被交到的控件数、不可点的关闭/返回、被裁切的主标题、修复前后的任务失败。

模拟器里的安全区若与真机圆角和岛的形状不一致,会漏掉贴边的命中失败。不要用「看起来没挡住」代替点击测试——热区可能比图标大,点在可见图标外仍落在镶边里。自动化截图要对齐系统外观,否则深色镶边在深色内容上会被漏标。

边界

地图、照片、视频的画布贴边是有意的,只要交互控件仍在安全区内。字幕和进度条若贴底,要给底部指示条留出 inset,否则全面屏上会被手势带挡住。桌面窗口没有这块系统叠加。故意隐藏状态栏的沉浸式全屏,在隐藏期间没有这条遮挡,退出那一刻最容易漏。

怎么落地

  • 把文字、关闭、返回、主要按钮约束在安全区内;背景和装饰图可以铺满。
  • 监听镶边变化:来电加高、键盘、旋转、退出沉浸,每一次都重新让位,而不是只在首帧算一次。
  • 横屏把左右缺口当成新的顶底,不要只给竖屏写了一套顶 inset。
  • 验证:在刘海或岛的真机上打开调试半透明镶边,走主路径的每一张弹层和第一屏。任何可点目标和主文与镶边相交,都是遗漏。再打开个人热点或来电,看第一行是否被加高的状态栏吃掉。

延伸

  • 同组K1.05.1 状态栏是系统区域,应用不应模拟 · K1.05.2 通知中心是应用外的第二入口
  • 相邻F1.12 固定元素与安全区 · F2.12 安全区与异形屏 · K1.06 小组件与锁屏入口
  • 站内检索safe area · display cutout · layout inset

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/K1.05.3