这是 Will 整理的 Apple Human Interface Guidelines(人机界面指南,简称 HIG) 中文双语笔记的入口。原始资料 135+ 篇文章、覆盖全平台,本库重组成 14 张主题 wiki。遇到任何 Apple 设计问题,先在这里定位该看哪张,不要从头翻原档。
一、Apple 把"设计知识"分成 4 类标签(读任何一篇先看它属于哪类)
Apple 的设计文档不是平的,每篇都暗含一个"层级"。理解这 4 类,你就知道一篇文章是"信仰"还是"操作手册":
| 标签 | 英文 | 是什么 | 类比 |
|---|---|---|---|
| 设计理念 | Philosophy | 总体信仰,指导整个设计过程的价值观 | 公司的「使命愿景」 |
| 设计概念 | Concept | 针对具体项目的核心创意,定义主题和方向 | 一个产品的「一句话定位」 |
| 设计原则 | Principles | 指导具体决策的基本规则,确保一致性 | 「红线清单」,照着做不会错 |
| 设计策略 | Strategy | 实现目标的整体计划和路径 | 「打法」,怎么排兵布阵 |
怎么用:看到一篇标「原则」的,它给的是可直接照抄的规则(如"按钮点击区 ≥ 44×44pt");看到标「策略」的,它给的是思路框架(如"怎么优化首次启动体验"),要结合自己产品判断。
二、三维方法论(Apple 设计体系的骨架)
Apple 把整个设计体系搭在三个维度上,理解了这三维,零散的规范就串成了一棵树:
mindmap
root((Apple 设计体系))
原子设计方法论
基础原子(颜色/字体/图标/材质)
组件(按钮/列表/菜单)
模式(引导/搜索/反馈)
多平台设计
iOS / iPadOS / macOS
watchOS / tvOS
visionOS / CarPlay
设计层次模型
理念 Philosophy
概念 Concept
原则 Principles
策略 Strategy
· 原子设计(Atomic Design):从最小的"原子"(颜色、字体、一个图标)→ 组合成"组件"(按钮、列表)→ 再组成"模式"(一整套引导流程)。本库的 wiki #2 Foundations(原子)、#4 Components(组件)、#5 Patterns(模式)正是这三层。 · 多平台:同一套设计语言要落在 7 种屏幕上(从手腕上的 watch 到无限空间的 visionOS),每个平台的设备特性逼出不同取舍 —— 见下一节。 · 层次模型:就是上面那 4 类标签。
三、7 大平台速查(设计前先认清你在为哪块屏幕设计)
每个平台的"设备特性"会直接决定设计取舍。这是从 7 篇《Designing for X》提炼的决策表 —— 接到一个平台的需求,先扫这张表对齐心智:
| 平台 | 屏幕 · 距离 | 主输入方式 | 交互时长特征 | 设计第一要务 |
|---|---|---|---|---|
| iOS(iPhone) | 中屏 · 1-2 英尺 | 多点触控 / 虚拟键盘 / 语音 | 碎片化,频繁切换 App | 聚焦主任务,控件放屏幕中下部(够得着) |
| iPadOS | 大屏 · ≤3 英尺 | 触控 + 键盘 + Pencil + 鼠标(混用) | 短任务与深度创作并存,多 App 并行 | 用大屏突出内容,支持多输入与拖放 |
| macOS | 大屏 · 1-3 英尺 | 键盘 + 鼠标/触控板(高精度) | 长时间深度工作,多窗口 | 灵活窗口管理,菜单栏收纳全部命令,快捷键 |
| watchOS | 微屏(腕上)· <1 英尺 | 数字表冠 + 手势 + 操作按钮 | 一天多次、每次 <1 分钟 | 单屏交互,最小化层级,复杂功能(表盘)优先于打开 App |
| tvOS | 超大屏 · ≥8 英尺 | Siri 遥控器 + 手柄 + 语音 | 长时间沉浸,远距离观看 | 焦点系统(高亮放大当前项),边到边精美视觉 |
| visionOS(Vision Pro) | 无限 3D 空间 | 眼睛注视 + 间接手势 | 共享空间 / 完整空间可切换 | 视觉舒适第一,内容放视野中心,优先间接手势 |
| games | 跨平台 | 各平台默认输入 + 手柄 | 沉浸 | 秒进游戏(边下边玩),通过游戏教学(不要文字教程) |
跨平台共通铁律(7 篇都在强调):
· 无缝适应外观变化 —— 必须支持深色模式(Dark Mode)、动态字体(Dynamic Type)、设备旋转。不要在 App 内单独做外观开关(增加负担,且让用户以为 App 不响应系统设置)。 · 集成平台功能 —— 在拿到授权前提下复用系统能力(小组件、快捷指令、生物识别、定位),不要让用户重复输入系统已有的数据。 · 人体工程学决定控件位置 —— 同样一个"主操作按钮",在 iPhone 放底部(拇指够得着)、在 Mac 放工具栏、在 watch 用操作按钮触发。
四、全库反查地图(我想查 X → 看哪张 wiki)
本库 14 张 wiki + 原档文件夹的对应关系。这是你最常用的一节:
| 我想查… | 看这张 wiki |
|---|---|
| 颜色 / 字体 / 布局 / 材质 / 动效 / 暗黑 / 图标 / SF Symbols / 品牌 | apple-hig-foundations(视觉基础) |
| 无障碍 / 包容性 / 隐私 / 文案 / 从右到左(RTL) | apple-hig-accessibility(a11y 与伦理) |
| 某个具体组件怎么用(按钮/菜单/列表/弹窗/标签栏/选择器…71 个) | apple-hig-components(组件决策手册) |
| 一整套交互流程(引导/搜索/反馈/加载/拖放/模态/通知…) | apple-hig-patterns(交互模式) |
| 输入方式(触控/键盘/指针/Pencil/表冠/眼动/手势) | apple-hig-inputs(输入源) |
| 设计原则与心法(心智模型/渐进揭示/流畅界面/12 原则) | apple-hig-design-principles |
| iOS 26 新视觉语言 Liquid Glass / 字体 / SF Symbols 深化 | apple-hig-liquid-glass |
| iPad/Mac 差异 / 光标 / 侧边栏导航 / 图表 / Live Activities / 快捷指令 | apple-hig-ipad-mac |
| visionOS 空间计算(沉浸/眼动/真实感/舒适度) | apple-hig-visionos |
| watchOS / tvOS / CarPlay / 游戏设计 | apple-hig-watch-tv-carplay-game |
| 技术能力集成(Apple Pay/HealthKit/HomeKit/Sign in/Siri/AI…) | apple-hig-technologies |
| Apple News 富场景 UI / 发布会设计语言分析 | apple-news-editorial |
| 设计史:1987/1992 初代桌面 GUI 规范的起源 | apple-hig-history-1987-1992 |
| 全库怎么组织 / 某主题在哪 | 本张(overview) |
原档位置:全部在
sources/reference/apple-design/,保留 Notion 原始文件夹结构。配图(3443 张)和示例视频(867 个)本地保留、不进 git —— 在 Obsidian 里打开原档可看图看视频,GitHub 上只看 .md 文字。
五、Getting Started:7 篇《Designing for X》核心取舍(原文精提)
下面是 7 篇平台入门的"最值得记住的一句话",供快速回忆。详细规范进各平台 wiki:
| 平台 | 一句话取舍 | 最容易踩的坑 |
|---|---|---|
| iOS | 减少屏幕控件数量,让次要操作"用最少交互可发现" | 把控件堆在顶部(拇指够不着) |
| iPadOS | 用大屏突出内容,减少模态和全屏过渡;支持多输入组合 | 当成放大版 iPhone 做 |
| macOS | 菜单栏是命令的总入口;支持纯键盘工作流和个性化定制 | 把重要控件放窗口底部(易被遮挡) |
| watchOS | 复杂功能(Complications)和通知比"打开 App"更重要 | 做深层级导航 |
| tvOS | 善用焦点系统,内容要从房间任何角落都清晰可读 | 仅用颜色表示焦点(应该用缩放+动效) |
| visionOS | 不是每个时刻都要完全沉浸;标准任务用窗口化体验 | 内容固定在头部上方(让人不适) |
| games | 安装后尽快能玩(额外内容后台下载),通过游戏教学 | 用文字教程,开局塞一堆设置 |
· 各平台最小字号(无障碍底线):iOS/iPadOS 正文建议最小 17pt、macOS 19pt、iPad 23pt、visionOS/watchOS 11pt;游戏内文字最小:iOS 11pt / macOS 10pt / tvOS 23pt。 · 各平台最小点击区:iOS 44×44pt(visionOS 60×60pt);游戏按钮最小:iOS 28×28 / macOS 20×20 / tvOS 56×56pt。
本 wiki 是 Apple HIG 中文双语笔记库的导航入口。原始资料 = Will's Design Notes / Apple Design(Notion 导出),已归档至 sources/reference/apple-design/。