F2.12.1notch and radius clip corner content设计
刘海与圆角会裁切角落内容
别名: 刘海 · notch · 圆角裁切 · Dynamic Island
概念解释
显示器不再是矩形。刘海、灵动岛和四角圆弧会盖住仍然按矩形画出来的像素:关按钮贴在 (8, 8),会被切掉一块,或和状态栏时间叠在一起;全出血地图角落的标记会缺一个扇形。这是裁切——内容在几何上还在,人看不见。
固定顶栏底栏怎么占位置,是交互位置那一组的事。这里管的是布局系统怎么对待被挖掉的角:内容坐标不能再假设四个角都可用。
机制
合成器仍在矩形表面画,玻璃和传感器住房再把角和顶部胶囊遮掉。任何以角为原点的对象(关闭、页码点、时间戳、角标)都压在遮罩上。安全区 inset 的意义是给内容一个还是矩形的内框,让字形和控件的像素落在还能发光的区域。
圆角的半径随机型变,刘海的宽和高也变。用「距边 8 px」这种矩形习惯,在小圆角机上勉强够,在大半径或胶囊顶上会正好切到字的下降部。裁切不是「有点难看」,是信息缺了。
边界
全屏看电影、看图,故意让影像顶到角,裁掉的是构图边缘,往往可接受;字幕和进度条仍须退进内框。桌面窗口、没有圆角的老设备,这条裁切不发生。描边很粗的装饰框画在物理边缘上,被切掉反而是预期。
横屏时刘海改到一侧,原来的「顶角」变成「侧边中部」,裁切位置跟着旋转走,竖屏上安全的坐标在横屏上可能正好撞岛。
怎么落地
- 所有文字、图标、控件相对安全区内框排,不要相对窗口 (0,0) 排。角标和关闭尤其要按 inset 而不是按 8 px。
- 全出血媒体可以画到物理边,但叠在它上面的图例、比例尺、关闭必须按内框。
- 验证:在打开刘海和圆角的模拟器上截全出血页,检查四个角和顶部中央。任何缺像素的字、残缺图标、被岛挡住的控件记为失败。横屏再做一次,因为岛换了边。用系统的安全区可视化(或自己画一层 inset 蒙版)对照,失败点应刚好落在蒙版外。