F2.12.1notch and radius clip corner content设计

刘海与圆角会裁切角落内容

别名: 刘海 · notch · 圆角裁切 · Dynamic Island

概念解释

显示器不再是矩形。刘海、灵动岛和四角圆弧会盖住仍然按矩形画出来的像素:关按钮贴在 (8, 8),会被切掉一块,或和状态栏时间叠在一起;全出血地图角落的标记会缺一个扇形。这是裁切——内容在几何上还在,人看不见。

固定顶栏底栏怎么占位置,是交互位置那一组的事。这里管的是布局系统怎么对待被挖掉的角:内容坐标不能再假设四个角都可用。

机制

合成器仍在矩形表面画,玻璃和传感器住房再把角和顶部胶囊遮掉。任何以角为原点的对象(关闭、页码点、时间戳、角标)都压在遮罩上。安全区 inset 的意义是给内容一个还是矩形的内框,让字形和控件的像素落在还能发光的区域。

圆角的半径随机型变,刘海的宽和高也变。用「距边 8 px」这种矩形习惯,在小圆角机上勉强够,在大半径或胶囊顶上会正好切到字的下降部。裁切不是「有点难看」,是信息缺了。

边界

全屏看电影、看图,故意让影像顶到角,裁掉的是构图边缘,往往可接受;字幕和进度条仍须退进内框。桌面窗口、没有圆角的老设备,这条裁切不发生。描边很粗的装饰框画在物理边缘上,被切掉反而是预期。

横屏时刘海改到一侧,原来的「顶角」变成「侧边中部」,裁切位置跟着旋转走,竖屏上安全的坐标在横屏上可能正好撞岛。

怎么落地

  • 所有文字、图标、控件相对安全区内框排,不要相对窗口 (0,0) 排。角标和关闭尤其要按 inset 而不是按 8 px。
  • 全出血媒体可以画到物理边,但叠在它上面的图例、比例尺、关闭必须按内框。
  • 验证:在打开刘海和圆角的模拟器上截全出血页,检查四个角和顶部中央。任何缺像素的字、残缺图标、被岛挡住的控件记为失败。横屏再做一次,因为岛换了边。用系统的安全区可视化(或自己画一层 inset 蒙版)对照,失败点应刚好落在蒙版外。

延伸

  • 同组F2.12.2 底部指示条区域不可放置可点元素 · F2.12.3 背景应延伸至安全区外,内容不应
  • 相邻F1.12 固定元素与安全区 · F1.05 边缘与角落的可达性 · F2.02 列、槽与外边距
  • 站内检索safe area inset · notch · rounded corner clipping · Dynamic Island

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F2.12.1