Notch 刘海

/NOTCH/ · noun · 系统类模式 · #082

屏幕顶边的黑色缺口,里面是前置摄像头和面容 ID 传感器。屏幕绕着它铺开,所以状态栏被分成左右两只“耳朵”。

Notch(刘海) UI 模式示例:CatchUI 图鉴标本

别名:刘海屏。

你可能会这样叫它

  • “屏幕顶上的刘海”
  • “iPhone 顶部的黑块”
  • “屏幕上方的缺口”
  • “前置摄像头那块黑的”
  • “刘海屏的那一块”

……它的名字是 刘海(Notch)。

常见问题

刘海屏是什么意思?

刘海屏指屏幕顶边被挖掉一块、用来放前置摄像头和传感器的设计,那块黑色缺口就叫刘海(notch)。iPhone X 到 iPhone 14、14 Plus,以及平价的 16e、17e 都是刘海屏;更新的机型改成了灵动岛。

刘海屏和挖孔屏有什么区别?

都是为前置摄像头让位置。刘海是顶边上一整块黑色缺口,宽到能放下面容 ID 的传感器;挖孔是屏幕里一个小圆孔,只放摄像头,安卓手机上很常见。开发时两者都按“屏幕挖孔”(display cutout)处理。

代码里叫什么

SwiftUI.ignoresSafeArea() .safeAreaInset(edge:)
UIKitsafeAreaInsets safeAreaLayoutGuide
AndroidDisplayCutout WindowInsetsCompat.Type.displayCutout()
FlutterSafeArea MediaQuery.paddingOf()
Web (CSS)viewport-fit=cover env(safe-area-inset-top)

复制给 AI 编程工具

让这个界面在刘海和其他屏幕挖孔周围都安全:背景可以铺到刘海下面,但所有文字、重要图片和控件都要留在安全区域内——横屏时刘海在左边或右边,也要照顾到。分别在刘海屏 iPhone、灵动岛 iPhone 和挖孔屏安卓手机上测试。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

手机和电脑屏幕各部分叫什么(英文)→

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)