iOS27的设计规范：iPhone18系列、iPhoneDuo 设计尺寸、设备分辨率
我每年都会整理一遍 iOS 的设计尺寸，今年比往年麻烦。iPhone Duo 有两块屏，iPhone 18 标准版又没跟 Pro 一起发，尺寸表不能只按“一代三款”来写。
先把往年的文章放这里，需要旧机型直接翻：
iOS26的设计规范：iPhone17系列、iPhoneAir 设计尺寸、设备分辨率
iOS18的设计规范：iPhone16系列设计尺寸、设备分辨率
iOS17的设计规范：iPhone15系列设计尺寸、设备分辨率
iOS16的设计规范：iPhone14系列设计尺寸、设备分辨率
iOS15的设计规范：iPhone13系列、新款iPadmini5设计尺寸、设备分辨率
今年新增的尺寸
| 设备 | 屏幕尺寸 | 设计尺寸 | 屏幕像素 |
|---|---|---|---|
| iPhone 18 Pro | 6.3” | 402×874 pt | 1206×2622 px @3x |
| iPhone 18 Pro Max | 6.9” | 440×956 pt | 1320×2868 px @3x |
| iPhone Duo 内屏 | 7.6” | 669×951 pt | 1878×2670 px |
| iPhone Duo 外屏 | 5.4” | 466×678 pt | 1398×2034 px @3x |
18 Pro 落到设计稿就是 402×874 pt，6.3 英寸、2622×1206。做通用稿时按 402×874 起步，最后再拿 18 Pro Max 的 440×956 检查一遍大屏。
标准版 iPhone 18 按目前的节奏要等到 2027 年春季，苹果还没公布尺寸。iOS 27 UI Kit 的更新记录里提到补了它的边框，但我没拿到正式规格，这次先不写进表，等发布后再补。
iPhone Duo 要单独说。内屏 7.6 英寸，1878×2670，对应 669×951 pt；外屏 5.4 英寸，1398×2034，对应 466×678 pt。内屏的 1878 除以 669 约等于 2.807，不是整数倍，别拿屏幕像素去反推 @3x。建画布直接用 pt。
外屏的 466×678 是竖着拿的尺寸。横过来就是 678×466，做相机、视频这类全屏界面时记得两套都看。
旧项目还在用 375 宽度怎么办？
如果你的项目还在用 375 宽度的老组件库，可以下载旧版本的官方 Sketch 文件。苹果官网现在只挂最新版，旧版本得自己留。
网盘下载渠道
张洪Heo公众号回复 iOS27、iOS26、iOS18、iOS17、iOS16、iOS15、iOS14、iOS13，可以拿到对应版本的 Sketch 模板。Figma、Sketch 都能直接打开，其他设计软件大多也支持导入 Sketch。
苹果官方的设计资源在这里，UI Kit、产品边框、SF Symbols 都能下：
https://developer.apple.com/design/resources/
所有 iOS 设备详细参数
iOS 设备有各种屏幕尺寸，可以竖着用也可以横着用。iPhone X 之后的全面屏机型，显示屏圆角跟机身圆角是对齐的；iPhone SE、老款 iPad 还是矩形屏。
应用如果只做 iPhone，就要覆盖下面所有 iPhone 的尺寸；只做 iPad 同理。别只盯着一台机器做，最后在小屏或 Duo 上翻车。
| 设备 | 设计尺寸与屏幕像素 |
|---|---|
| iPhone Duo 内屏 | 669×951 pt (1878×2670 px @3x)) |
| iPhone Duo 外屏 | 466×678 pt (1398×2034 px @3x) |
| iPhone 18 Pro Max | 440×956 pt (1320×2868 px @3x) |
| iPhone 18 Pro | 402×874 pt (1206×2622 px @3x) |
| iPhone Air | 420×912 pt (1260×2736 px @3x) |
| iPhone 17 Pro Max | 440×956 pt (1320×2868 px @3x) |
| iPhone 17 Pro | 402×874 pt (1206×2622 px @3x) |
| iPhone 17 | 402×874 pt (1206×2622 px @3x) |
| iPhone 16 Pro Max | 440×956 pt (1320×2868 px @3x) |
| iPhone 16 Pro | 402×874 pt (1206×2622 px @3x) |
| iPhone 16 Plus | 430×932 pt (1290×2796 px @3x) |
| iPhone 16 | 393×852 pt (1179×2556 px @3x) |
| iPhone 15 Pro Max | 430×932 pt (1290×2796 px @3x) |
| iPhone 15 Pro | 393×852 pt (1179×2556 px @3x) |
| iPhone 15 Plus | 430×932 pt (1290×2796 px @3x) |
| iPhone 15 | 393×852 pt (1179×2556 px @3x) |
| iPhone 14 Pro Max | 430×932 pt (1290×2796 px @3x) |
| iPhone 14 Pro | 393×852 pt (1179×2556 px @3x) |
| iPhone 14 Plus | 428×926 pt (1284×2778 px @3x) |
| iPhone 14 | 390×844 pt (1170×2532 px @3x) |
| iPhone 13 Pro Max | 428×926 pt (1284×2778 px @3x) |
| iPhone 13 Pro | 390×844 pt (1170×2532 px @3x) |
| iPhone 13 | 390×844 pt (1170×2532 px @3x) |
| iPhone 13 mini | 375×812 pt (1125×2436 px @3x) |
| iPhone 12 Pro Max | 428×926 pt (1284×2778 px @3x) |
| iPhone 12 Pro | 390×844 pt (1170×2532 px @3x) |
| iPhone 12 | 390×844 pt (1170×2532 px @3x) |
| iPhone 12 mini | 375×812 pt (1125×2436 px @3x) |
| iPhone 11 Pro Max | 414×896 pt (1242×2688 px @3x) |
| iPhone 11 Pro | 375×812 pt (1125×2436 px @3x) |
| iPhone 11 | 414×896 pt (828×1792 px @2x) |
| iPhone XS Max | 414×896 pt (1242×2688 px @3x) |
| iPhone XS | 375×812 pt (1125×2436 px @3x) |
| iPhone XR | 414×896 pt (828×1792 px @2x) |
| iPhone X | 375×812 pt (1125×2436 px @3x) |
| iPhone 8 Plus | 414×736 pt (1080×1920 px @3x) |
| iPhone 8 | 375×667 pt (750×1334 px @2x) |
| iPhone 7 Plus | 414×736 pt (1080×1920 px @3x) |
| iPhone 7 | 375×667 pt (750×1334 px @2x) |
| iPhone 6s Plus | 414×736 pt (1080×1920 px @3x) |
| iPhone 6s | 375×667 pt (750×1334 px @2x) |
| iPhone 6 Plus | 414×736 pt (1080×1920 px @3x) |
| iPhone 6 | 375×667 pt (750×1334 px @2x) |
| 4.7” iPhone SE | 375×667 pt (750×1334 px @2x) |
| 4” iPhone SE | 320×568 pt (640×1136 px @2x) |
| 13” iPad Pro | 1032×1376 pt (2064×2752 px @2x) |
| 12.9” iPad Pro | 1024×1366 pt (2048×2732 px @2x) |
| 11” iPad Pro | 834×1194 pt (1668×2388 px @2x) |
| 10.5” iPad Pro | 834×1112 pt (1668×2224 px @2x) |
| 9.7” iPad Pro | 768×1024 pt (1536×2048 px @2x) |
| 8.3” iPad mini | 744×1133 pt (1488×2266 px @2x) |
| 7.9” iPad mini | 768×1024 pt (1536×2048 px @2x) |
| 13” iPad Air | 1024×1366 pt (2048×2732 px @2x) |
| 11” iPad Air | 820×1180 pt (1640×2360 px @2x) |
| 10.9” iPad Air | 820×1180 pt (1640×2360 px @2x) |
| 10.5” iPad Air | 834×1112 pt (1668×2224 px @2x) |
| 9.7” iPad Air | 768×1024 pt (1536×2048 px @2x) |
| 10.2” iPad | 810×1080 pt (1620×2160 px @2x) |
| 9.7” iPad | 768×1024 pt (1536×2048 px @2x) |
| iPod touch 5th generation and later | 320×568 pt (640×1136 px @2x) |
iOS 27 的设计变化
今年的 UI Kit 改动不算翻天覆地，Liquid Glass 又修了一轮，更多是把 Duo 相关的东西补齐。
玻璃按钮的样式、尺寸和状态补得更全了。以前遇到半透明按钮要自己拼，现在可以先从 UI Kit 里找。
小组件新增了 Extra Large，主屏幕的图标布局、状态栏符号、全部 app 图标也跟着更新。通知和控制中心的外观同样调了 Liquid Glass 的质感，扩展通知的圆角单独改过。
表单和控件有几处尺寸变化，做设计时容易漏：
- 半高 sheet 变宽了，抓手尺寸也改过；旧组件库里的这两处要重对。
- 确定态进度条的高度从 6pt 改成 4pt，还能在条里塞一个标签。
- 分段控件多了 large 尺寸，2、3、4 段的独立符号被移除，统一用 5 段再隐藏多余的段。
- 侧边栏改成通栏，背景材质和分隔线也换了。
我会先对 sheet 抓手和进度条，组件库从 iOS 26 升上来时这两处容易漏。
Duo 的竖向布局
Duo 的控件会跟着形态换位置。外屏合上时，系统把 toolbar 和 tab bar 放到侧边；内屏横着用时也保持在侧边，竖着用时才回到常规的上下栏。苹果在 HIG 里把这件事归到 vertical controls，意思是折叠屏不再只有“底部标签栏”这一种摆法。设计稿里如果只画了底部 tab bar，Duo 上就会显得空。
Duo 有合上、半折、完全展开几种姿态，横竖都能成立。别用设备方向、摄像头位置或者屏幕尺寸去猜当前姿态，这三件事在 Duo 上经常对不上。开发侧用 onHingeChange（SwiftUI）和 UIHingeInteraction（UIKit）读铰链状态，设计侧按内屏、外屏、半折三套画布分别检查。
内屏 669×951 比 iPad mini 的 744×1133 窄一截，分栏时左侧别照抄 iPad 的比例。我自己的做法是左侧收到三分之一左右，右侧留给主内容。半折状态下中间有一条不可点击的区域，按钮和输入框别压在上面。
外屏 466×678 的顶部有摄像头安全区，这个区域不适合放关键操作。内屏是屏下摄像头，没有挖孔，但四角圆角和铰链区域还是要按安全区来。
先记这几组
做 iPhone 18 Pro 系列，基准画布就是 402×874，大屏再验 440×956。做 Duo，记住两块屏：内屏 669×951，外屏 466×678，别互相等比缩放。
尺寸表每年都会变一点，苹果要是再补机型，我回来改这张表。
