你在 Figma 里做的设计稿看着完美，结果到了真机上：内容被刘海挡住、底部按钮和系统手势条重叠… 这就是没考虑安全区域（Safe Area） 📏 iOS 安全区域： 顶部状态栏 → 约 59pt（刘海屏）/ 47pt（灵动岛） 底部指示器区域 → 34pt（有 Home Indicator 的机型） 📏 Android 安全区域： 顶部状态栏 → 约 24-48dp（各厂商不同） 底部导航栏 → 48dp（虚拟按键）/ 安全区域取决于手势导航 🎯 设计时要注意的： ① 页面顶部第一个可交互元素，要在状态栏下方 ② 底部固定的按钮/Tab Bar，要考虑底部安全区域的 padding ③ 全屏沉浸式页面（如图片预览），内容可以延伸到安全区，但交互控件不行 ④ 横屏时左右两侧也有安全区（刘海在侧边了） 💡 Figma 设计建议： 做设计稿时用一个半透明的安全区域遮罩覆盖在画板上，随时检查关键元素有没有被遮挡 开发交付时标注清楚哪些元素需要 respect safe area，哪些需要 extend to edges 这是每个移动端设计师必须掌握的基础，不然做出来的设计永远只能看截图不能看真机📱