35

iPhone的历史与演进

每次苹果发布会UI设计师可能是最睡不着觉的人啦。从 2007 年初代 iPhone 发布至今,苹果不断重新定义着移动端的交互标准。作为一个移动端 UI 设计师,您必须对苹果的设备演进和最新的 iOS 18 规范有深入的了解。

起源:乔布斯的字体哲学

谈到iPhone我们必须谈谈史蒂夫·乔布斯(Steve Jobs)。乔布斯在大学时选修的字体设计课,学习到了网格设计、衬线体与无衬线体、字体的气质等设计知识。这些知识后来成为了苹果 GUI 的基石。乔布斯指责当时的功能手机太“愚蠢”,键盘占用了巨大空间。随后他推出了 iPhone,重新发明了手机。乔布斯身后,蒂姆·库克和首席设计官乔纳森·伊夫也陆续更新着苹果手机的产品线,延续着这些伟大的产品。

从 Retina 到灵动岛 NEW

iPhone 4 引入了视网膜屏(Retina),让 1pt = 2px。而 iPhone X 开启了全面屏时代。到了今天,灵动岛 (Dynamic Island) 已经全面取代了刘海,成为了新的交互中心。设计师现在不仅要考虑“避开”顶部区域,更要思考如何利用灵动岛进行实时信息(Live Activities)的交互设计。

核心设计基准

逻辑像素 (PT) 与 适配基准 2026 Update

过去我们常以 iPhone 6/7/8 (375x667pt) 为基准,但现在主流适配基准已经进化:

  • 标准基准:iPhone 16 / 15 (393 x 852 pt)。
  • 大屏基准:iPhone 16 Pro Max (430 x 932 pt)。
  • 切图倍率:依然维持 @2x 和 @3x。

25

HIG 设计指南:现代组件规范

状态栏与导航栏 iOS 18

在现代全面屏 iPhone 中,状态栏高度已增加到约 54pt。导航栏高度维持 44pt。 大标题导航栏(Large Title)在 iOS 18 中依然被推崇,它能提供更好的视觉层级感,在滑动时会自动收缩为标准导航栏。

灵动岛适配 (Dynamic Island)

灵动岛区域是硬件与软件的结合。核心操作和重要信息应避开顶部 59pt 的区域。同时,设计师可以为应用开发“实时活动”,让用户在灵动岛上直接看到外卖进度、比赛比分等实时信息。

标签栏 (Tab Bars) 与 悬浮设计

底部标签栏高度为 49pt,加上底部安全区(Home Indicator)的 34pt,总计 83pt。最新的 iOS 设计趋势是增加 Tab Bar 的通透感和悬浮感,甚至在 iPadOS 上允许其移动到侧边。

点击区域 (Hit Targets) Important

虽然 44pt 曾是标准,但为了提升在各种环境下的易用性,苹果现在建议最小点击热区为 48 x 48 pt

视觉系统:字体、色彩与材质

字体系统

iOS 中英文使用的是 San Francisco (SF Pro) 字体,中文使用的是 苹方 (PingFang SC)。 建议配合使用 SF Symbols,这是苹果提供的数千个矢量图标,能与 SF 字体在粗细和对齐上完美匹配。

材质与深度 (Materials & Depth)

iOS 18 强调 "Depth and Hierarchy"。利用毛玻璃效果(Materials)来创造层级,分为 Thick, Medium, Thin, Ultra Thin 四种级别。这比单纯的阴影更能体现系统的现代感。

工作流程与项目走查

在完成视觉稿后,必须在真机上进行预览。推荐使用 Figma Mirror 或 Adobe XD 实时查看。项目走查时,不仅要核对像素级的还原度,还要检查:

  • 深色模式 (Dark Mode):是否使用了语义化颜色(Semantic Colors)确保自动适配。
  • 单手操作性:核心交互是否位于大拇指轻松触达的区域。
  • 辅助功能 (Accessibility):文字对比度是否达标,是否支持动态字体缩放。

总结

iPhone 设计规范是一个不断进化的生命体。从拟物到扁平,再到现在的深度感与灵动交互,其核心始终是“以人为本”。作为设计师,在保留经典网格和对齐原则的同时,必须拥抱灵动岛、实时活动和语义化系统等新技术特性。希望本篇更新后的指南能帮助你快速“吃下”最新的 iPhone 设计精髓。