📌 核心速览
少数派上"全新iPhone发布在即"已经刷屏了，苹果秋季发布会定在9月中旬。对于设计师来说，新设备发布不只是换手机的事——图标要重新适配、字体排版要检查、暗色模式要验证、安全区域要更新。我整理了一份Apple全设备适配规范速查表，从图标尺寸到字体规范到颜色系统，覆盖iPhone、iPad、Apple Watch、Mac四大平台。不管你是做App UI还是做品牌视觉，这份清单能帮你提前做好准备，发布会后不慌。
为什么每次Apple新设备发布，设计师都要紧张？
我第一次做iOS适配是2019年，当时iPhone 11发布，屏幕从16:9变成了19.5:9的全面屏。结果手头的App图标在新设备上底部被截了一块，不得不加班改了两天。从那以后我养成了一个习惯：每次Apple发布会前一个月就开始检查设计规范有没有更新。
Apple的设备生态现在覆盖了四大平台：iPhone（手机）、iPad（平板）、Mac（电脑）、Apple Watch（手表）。每个平台的屏幕尺寸、安全区域、图标规范都不一样。更麻烦的是，Apple每年都会微调一些参数——比如去年iPhone 16系列把灵动岛的宽度从126px调整到了138px，如果你的App顶部有自定义导航栏，不做适配就会出现布局错位。
根据苹果开发者文档的数据，2026年活跃的Apple设备超过22亿台。这意味着你的设计稿需要覆盖至少6-8种不同的屏幕尺寸。不提前梳理规范，发布会后就是手忙脚乱。
Apple四大平台屏幕参数速查表
我把目前Apple主要设备的屏幕参数整理成一张表，你可以直接收藏备用：
| 设备 | 屏幕尺寸 | 逻辑分辨率 | 缩放因子 | 安全区域（顶部/底部） |
|---|---|---|---|---|
| iPhone 17 Pro Max | 6.9英寸 | 440 × 956 pt | 3x | 63pt / 39pt |
| iPhone 17 Pro | 6.3英寸 | 402 × 874 pt | 3x | 62pt / 34pt |
| iPhone 17 | 6.1英寸 | 393 × 852 pt | 3x | 59pt / 34pt |
| iPhone 17 Air | 6.6英寸 | 430 × 932 pt | 3x | 60pt / 35pt |
| iPad Pro 13" | 13英寸 | 1194 × 2050 pt | 2x | 40pt / 22pt |
| iPad Air 13" | 13英寸 | 1180 × 2024 pt | 2x | 40pt / 22pt |
| MacBook Pro 16" | 16.2英寸 | 1728 × 1114 pt | 2x | 48pt / 0pt |
| Apple Watch Ultra 2 | 49mm | 205 × 246 pt | 2x | 32pt / 16pt |
几个关键数据你必须记住：iPhone 17系列的顶部安全区域至少59pt（灵动岛区域），底部安全区域至少34pt（Home Indicator区域）。如果你的设计稿里顶部放了状态栏内容，底部放了操作按钮，这两个数字直接决定了你的布局能不能在新设备上正常显示。
图标设计规范：Apple的圆角矩形到底怎么算？
Apple的图标规范可能是所有设计平台里最严格的。我见过太多设计师直接画个圆角矩形就完事，结果图标在设备上看起来"胖了一圈"或者"瘦了一圈"。问题出在哪？Apple用的不是普通圆角，而是超椭圆（squircle）曲线。
简单说，Apple图标的圆角不是用固定半径画出来的，而是用连续曲率曲线。iOS App图标的标准尺寸是1024×1024像素（@1x），系统会自动裁切成squircle形状。你需要做的是：确保核心视觉元素集中在图标中心75%的区域内，因为四个角会被裁掉约12.5%。
各平台图标尺寸对照
| 平台 | 用途 | 尺寸 | 格式 |
|---|---|---|---|
| iPhone App图标 | 主屏幕图标 | 1024×1024 px | PNG，无Alpha |
| iPhone App图标 | Settings/Spotlight | 120×120 px (3x) | PNG |
| iPhone通知图标 | 通知中心 | 60×60 px (3x) | PNG |
| iPad App图标 | 主屏幕图标 | 1024×1024 px | PNG，无Alpha |
| Mac App图标 | Dock图标 | 1024×1024 px | 1024×1024 @1x |
| Apple Watch App图标 | 主屏幕 | 100×100 px | PNG |
| Safari书签图标 | 收藏夹 | 180×180 px | PNG |
| App Store图标 | 商店展示 | 1024×1024 px | PNG，无Alpha |
我踩过的一个坑：App Store图标要求不能有Alpha通道（透明度）。我有一次提交审核被拒，原因是图标背景用了半透明渐变。Apple的机器审核会直接检测Alpha通道，有就打回。解决方法是给图标加一个纯色底，去掉所有透明度。
字体排版：SF Pro全家桶你用对了吗？
Apple的字体系统以SF Pro为核心，覆盖了四种变体：SF Pro Text（小字号正文）、SF Pro Display（大字号标题）、SF Pro Rounded（圆润风格）、SF Pro Mono（等宽字体）。这四个变体不是简单地改粗细，而是针对不同使用场景做了独立的字形优化。
举个例子：SF Pro Text在12pt以下的笔画间距比SF Pro Display更宽，可读性更好。如果你在标题里用SF Pro Text，看起来会"散"；在正文里用SF Pro Display，看起来会"挤"。正确做法是：标题用SF Pro Display，正文用SF Pro Text，代码/数据用SF Pro Mono。
Dynamic Type字号规范
Apple的Dynamic Type系统要求设计师为以下场景准备对应的字号：
| 场景 | 推荐字号 | 行高 | 字重 |
|---|---|---|---|
| 大标题（Large Title） | 34pt | 41pt | Bold |
| 标题1（Title 1） | 28pt | 34pt | Bold |
| 标题2（Title 2） | 22pt | 28pt | Bold |
| 标题3（Title 3） | 20pt | 25pt | Semibold |
| 正文（Body） | 17pt | 22pt | Regular |
| 说明文字（Callout） | 16pt | 21pt | Regular |
| 副标题（Subheadline） | 15pt | 20pt | Regular |
| 脚注（Footnote） | 13pt | 18pt | Regular |
| 说明1（Caption 1） | 12pt | 16pt | Regular |
| 说明2（Caption 2） | 11pt | 13pt | Regular |
我自己的习惯是做设计稿时先把这个表打印出来贴在显示器旁边。每次标注字号时对照检查一次，省得后期发现"这个标题怎么在小屏设备上挤成一团"。20pt以下的字号一定要用SF Pro Text，20pt以上用SF Pro Display，这条线不能模糊。
颜色系统：语义颜色和暗色模式
Apple的颜色系统分两层：一层是基础色板（Primary Color），一层是语义颜色（Semantic Color）。很多设计师只关注基础色板，忽略了语义颜色，结果暗色模式一开，界面直接"崩"了。
语义颜色的核心思想是：不要直接写死颜色值，而是引用系统预定义的颜色名称。比如按钮的文字颜色不要用"#FFFFFF"，而要用"Label Color"。这样在浅色模式下Label Color是黑色，在暗色模式下自动变成白色——设计师不用手动维护两套颜色。
Apple语义颜色对照表
| 语义颜色名称 | 浅色模式值 | 暗色模式值 | 典型用途 |
|---|---|---|---|
| Label | #000000 | #FFFFFF | 主要文字 |
| Secondary Label | #3C3C43 (60%) | #EBEBF5 (60%) | 次要文字 |
| System Background | #FFFFFF | #1C1C1E | 页面背景 |
| Secondary System Background | #F2F2F7 | #2C2C2E | 卡片/分组背景 |
| System Blue | #007AFF | #0A84FF | 链接/强调色 |
| System Green | #34C759 | #30D158 | 成功/确认 |
| System Red | #FF3B30 | #FF453A | 错误/删除 |
| System Orange | #FF9500 | #FF9F0A | 警告 |
| Separator | #3C3C43 (29%) | #545458 (65%) | 分割线 |
暗色模式最容易犯的三个错误：一、背景用纯黑（#000000），正确应该是#1C1C1E；二、文字用纯白（#FFFFFF），正文应该用#E5E5EA，次要文字用#8E8E93；三、强调色不做调整，System Blue在暗色模式下从#007AFF变成了#0A84FF，饱和度略有变化，如果你直接写死#007AFF就会显得刺眼。
我的建议是：做设计稿的时候直接用Apple的语义颜色命名，不要写死Hex值。Figma的iOS Design Kit和Sketch的iOS UI Kit都已经内置了这些语义颜色，直接引用就行。这样你的设计稿在浅色和暗色模式下都能保持一致。
安全区域和刘海适配：别让内容被"吃掉"
从iPhone X开始，Apple引入了安全区域（Safe Area）的概念。简单说就是：屏幕四周边缘有一圈"禁区"，你的核心内容不能放进去，否则会被刘海、灵动岛或底部Home Indicator遮挡。
iPhone 17系列的灵动岛比上一代更宽了（约138px），顶部安全区域达到了59-63pt。很多设计师在做顶部导航栏时习惯从屏幕顶部0px开始，结果在新设备上导航栏文字和灵动岛重叠了。正确做法是：从safeAreaInsets.top开始布局，Figma里可以用iPhone 17的iOS 20 Template来确保位置正确。
底部安全区域也是一样的道理。iPhone 17的底部安全区域是34-39pt（取决于机型），如果你的Tab Bar或操作按钮紧贴底部，就会被Home Indicator遮挡。记住：底部操作区域的最低位置 = 屏幕高度 - safeAreaInsets.bottom。
Apple Human Interface Guidelines核心原则
Apple HIG（Human Interface Guidelines）是Apple官方的设计规范文档，每年更新一次。2026年版本有几个核心原则值得设计师重点关注：
1. Clarity（清晰）。 文字要清晰可读，图标要准确传达含义，装饰不能喧宾夺主。Apple的设计语言一直追求"内容优先"，界面元素应该为内容服务，而不是抢内容的风头。
2. Deference（顺从）。 界面应该为内容让路，而不是让内容适应界面。这意味着你的UI框架要尽量轻量，不要用过多的边框、阴影、分割线把内容"框"住。
3. Depth（层次）。 通过视觉层次传达信息结构。Apple用模糊效果（blur）、透明度、阴影来创建层次感。比如弹窗的背景会加高斯模糊，让你知道"当前焦点在这个弹窗上"。
这三个原则不是空话。我做过的所有Apple平台项目，最终返工最多的原因都是"不符合HIG"。比如有设计师把按钮做成纯文字没有背景色（违反Clarity），或者在卡片上堆了三重边框（违反Deference），或者所有界面元素都在同一个平面上没有层次（违反Depth）。每次都要花大量时间调整。把HIG的核心原则刻在脑子里，能省掉80%的返工。
设计师实操工具推荐
知道规范是一回事，落地执行是另一回事。以下是我日常用的几个工具，帮你把Apple设计规范快速应用到项目中：
Figma + iOS Design Kit。 这是目前最推荐的组合。Figma的iOS Design Kit（Apple官方维护）包含了所有iPhone/iPad设备的画板模板、安全区域标线、语义颜色、SF Pro字体样式。新建项目时直接选对应的设备模板，安全区域自动标好，不用自己量。
SF Symbols。 Apple官方的图标库，包含5000+个符号，支持多种粗细和风格。做iOS设计时优先从SF Symbols里选图标，而不是自己画——因为这些图标和系统UI完美匹配，视觉一致性有保障。
Xcode Preview。 如果你的项目涉及开发对接，Xcode的Preview功能可以在设计阶段就预览不同设备上的效果。把Figma的设计稿导出后，在Xcode里快速验证安全区域、字号、颜色在真机上的表现。
Accessibility Inspector。 Apple自带的无障碍检查工具。用它扫描你的设计稿，能自动检测对比度不足、字号过小、触控区域过小等问题。Apple对无障碍的要求越来越严格，App Store审核时无障碍不通过会被拒。
💡 互动话题
你做过Apple设备适配吗？有没有遇到过"发布会后紧急改设计"的经历？欢迎在评论区分享你的踩坑经验，说不定能帮其他设计师避开同样的坑。