chapter[10] · part 2 / 程序员的界面美学

iOS 设计:Human Interface Guidelines

界面应当帮助人们理解内容并与之交互,但绝不应与内容争夺注意力。 Apple《Human Interface Guidelines》对 Deference(谦逊)的定义

从本章起,画布有了确定的尺寸,也有了确定的主人。做 iOS App,你不是在一张白纸上设计,而是在别人已经立好规矩的世界里做客——Apple 的《人机界面指南》(HIG)就是这套规矩。本章不复述文档(它常读常新,应该直接读原文),而是做一件鉴赏的事:读出 HIG 背后的美学立场,让你知其所以然,从而知道什么时候该打破它。

HIG 的全部内容可以压缩成 Apple 自己给出的三个词:清晰(Clarity)、谦逊(Deference)、深度(Depth)。用本书第一部分翻译:清晰 = 层级与排印的精确(第四、七章);谦逊 = 水晶酒杯——界面为内容服务,自己隐形(第四章开篇那只杯子,Apple 把它写进了平台宪法);深度 = 用光影与层次表达空间关系(第五章)。你已经学过整个 HIG 的哲学,剩下的是平台特定的词汇表。

10.1约定即体验:你免费继承的肌肉记忆

平台设计的第一原理:用户带着肌肉记忆来到你的 App。从屏幕左缘右滑=返回、底部标签=切换主功能、下拉=刷新、长按=更多操作——这些约定经过十几亿台设备的训练,已经刻进用户的脊髓。遵守约定,你的 App 在用户第一次打开时就"已经会用";违反约定,每一处都要用户重新学习,而他们的解释往往不是"这个设计有创意",而是"这 App 有 bug"。

程序员视角

平台约定就是 UI 的标准库。你不会自己写一个 HashMap——不是写不出,而是标准库的实现经过了千锤百炼,且所有读你代码的人都认识它。UINavigationControllerUITabBarController、系统分享面板同理:用系统组件,你免费获得动效、无障碍、动态字号、未来 iOS 版本的自动适配。自绘一个"更酷的"导航,等于 fork 了标准库——从此所有升级成本归你。

10.2导航三范式:App 的信息架构只有三种

HIG 把 App 导航收敛成三种基本范式,几乎所有 iOS App 都是三者的组合:

① 层级式 Hierarchical ‹ 设置 通知 允许通知 声音 角标 一层层钻进去,原路返回 设置、邮件、文件 · 数据是树 ② 平铺式 Flat 首页 搜索 我的 几个并列世界,随时切换 音乐、App Store · 功能是并集 ③ 模态 Modal 取消 发布 新动态 压住一切的临时任务卡 写邮件、发动态 · 必须可完成可放弃
图 10-1 · iOS 导航三范式 · 本书绘制(示意,非 Apple 官方素材) 先选范式,再画界面 范式的选择由数据结构决定,不由喜好决定:内容是一棵树 → 层级式;几块互不隶属的功能 → 平铺式(tab 数量 3–5,超出说明信息架构没想清楚);一个有头有尾的临时任务 → 模态,并且必须同时给出完成与放弃两个出口(右上"发布"、左上"取消")。注意模态在视觉上的深度表达:旧界面缩小退后变暗,新卡片从底部盖上来——这是第五章的空间语法在执行"谁压住谁"。

10.3文字:系统字阶与动态字号

iOS 的文字系统是第四章理论的官方实现。系统字体 San Francisco 内置了光学尺寸:大字号自动使用对比更优雅的 Display 切割,小字号自动换成字腔更开、字距更松的 Text 切割——印刷时代"标题字与正文字分开铸造"的传统,被做成了操作系统的默认行为。HIG 同时给了一套具名字阶(Large Title 34pt、Title 28pt、Body 17pt、Caption 12pt……),这就是 0.2 节模数字阶的平台版,直接用,不要发明自己的 19pt。

更重要的是动态字号(Dynamic Type):用户可以在系统设置里全局调大字号,你的 App 必须跟随。这是第九章"弹性"哲学在 iOS 上的形态——画布尺寸固定了,但文字尺寸交给了用户。用语义字阶(.body.headline)而不是写死 17pt 的布局,会在用户调到最大无障碍字号时依然成立;写死的布局会在那一天碎掉。

10.4手指的几何学:44pt 与拇指热区

桌面 Web 的指针是 1px 的精确光标,手机的"指针"是一根约 10mm 宽、还挡住自己目标的拇指。由此推出 iOS 触控设计的两条铁律:

最小触达 44 × 44 pt 订阅每周摘要 视觉可以小(16pt 的勾选框) 但可点区域必须 ≥ 44pt(虚线) 视觉尺寸 ≠ 触达尺寸 单手持机的拇指热区 舒适 够得着 费劲 高频操作放底部,破坏性操作放顶部
图 10-2 · 触控的人体工学 · 本书绘制 为手设计,不为眼设计 左:44pt 不是视觉规格,是命中区规格——把 padding 算进可点区域就能两全。右:屏幕越来越大,拇指没变长,所以现代 iOS 把主操作不断下移(大标题把内容推低、底部工具栏、可下拉的控制中心)。注意一个反直觉设计:把"删除全部"放进费劲区是故意的——可达性差在这里是安全特性。物理世界的门把手设计(危险的门把手要难够)搬进了屏幕。

10.5深度:毛玻璃与跟手的物理学

HIG 三关键词的最后一个是深度,它的两件招牌武器都源自第五章:毛玻璃材质(半透明+背景模糊的导航栏、控制中心)本质是空气透视——模糊告诉你"内容从它下面经过",层级关系不靠边框靠光学;跟手动效则是空间的时间维度:右滑返回时页面跟着手指走、松手后按物理惯性滑出,中途反悔可以推回去。动画不是装饰,是在持续回答"我在空间里的哪一层、正往哪里去"。这两样东西用系统组件都是免费的——又一个使用标准库的理由。

10.6何时打破规则

读懂规则的最终目的是有资格打破它。游戏全屏接管、相机取景器极简化、品牌力极强的产品自成一派——都可能是正确的打破。判断标准只有一条成本公式:打破约定省下的表达力,是否大于用户重新学习的成本 × 使用频率。低频但关键的流程(首次配置)可以大胆定制;高频的日常操作(返回、切换、输入)几乎永远不值得打破。最差的状态是"无意识的打破"——不知道约定存在而踩穿它。本章之后,你至少把打破变成了一个决定

10.7一屏之外:锁屏、小组件、灵动岛

现代 iOS 有个根本变化:你的 App 不再只活在它自己那一屏里。它以碎片的形式渗进系统各处——主屏小组件、锁屏小组件、灵动岛(Dynamic Island)的实时活动、通知。这些表面有一个共同的残酷约束:用户只会瞥一眼(glanceable),尺寸极小,而且大多不可交互。它逼你回答一个第七章层级问题的终极版本:如果只能显示一样东西,是哪一样?看同一个外卖订单怎样在四种尺度上被"逐级蒸馏":

App 内 · 全部信息 🗺 骑手位置实时地图距你 1.2km 预计 18:40 送达 骑手 · 王师傅 已取餐 黄焖鸡米饭 ×1 紫菜蛋花汤 ×1 送至 · 望京 SOHO T3 联系骑手 主屏小组件 · 中 🛵 外卖配送中 18:40 预计送达 · 约 12 分钟 骑手已取餐 · 1.2km 锁屏 · 极小 12 🛵 还有 灵动岛 · 一瞥 🛵 12 分钟 活在屏幕顶端的一颗药丸里 信息逐级蒸馏:表面每缩小一档,就只保留更上层的那一个——到灵动岛只剩"还要等多久"
图 10-3 · 同一订单在四种系统表面上的蒸馏 · 本书绘制(示意,非 Apple 官方素材) 越小的表面,层级越短 从左往右看,每缩小一档就被砍掉一层信息:App 内有地图、菜品、地址、操作;主屏组件砍到只剩送达时间 + 进度;锁屏砍到一个数字"12 分";灵动岛只剩一个图标 + 一个数字。这不是"把 App 缩小",是反复追问"此刻用户真正想知道的那一件事是什么"——对外卖,自始至终是"还要等多久"。这正是第七章层级原则推到极限的样子:当表面小到只容一行,你被迫只留下金字塔的塔尖。设计小组件,本质是一次残酷的优先级排序。
程序员视角

WidgetKit、Live Activity 这些 API 在工程上有几条硬约束,恰好都在强迫你做对设计:① 不是迷你 App——小组件基本是只读快照,几乎不能交互,点一下就是跳回 App,所以别想把功能塞进去,只能放"信息";② 必须及时——一个显示过期 ETA 的组件比没有组件更糟(它在撒谎),所以数据新鲜度是第一需求;③ 尺寸是契约——系统给你 small/medium/large 几个固定尺寸,每个都要单独设计、单独决定砍到第几层,而不是把大的缩小(缩小 = 第七章说的"羞怯的差异"在空间上的版本)。一句话:小组件考的不是你会不会画 UI,是你懂不懂自己产品的优先级。

核心概念

HIG 的美学立场一句话:平台是共有的语言,App 是用这门语言说的话。语法(导航范式、字阶、触达规格)遵守得越严格,你真正想说的那点不同(内容、品牌、独特功能)反而越清晰——这就是"谦逊"的回报,也是第七章"克制"在平台尺度上的重演。

鉴赏练习 10

挑一个你每天用的 iOS App(微信、支付宝这类"自成平台"的更有意思),做一次 HIG 审计:① 找出三处严格遵守约定的地方(导航范式、返回手势、系统分享…);② 找出一处明显打破约定的地方,用 10.6 的成本公式评估:这次打破换到了什么?值吗?③ 用一只手操作它的核心流程,记录哪些高频按钮落在"费劲区"。④ 蒸馏练习:为你自己的产品设计一个锁屏小组件——强制只能放一个数字 + 一行字。逼问自己:用户瞥一眼最想知道的那一件事是什么?答不出来,说明你还没想清楚产品的核心价值。把结论写进 swipe file——你正在用 HIG 作者的眼睛看 App。