Apple HIG 排版与交互规范

常见的错误做法：给每个元素加 fade-in-up，打开笔记播一次。

框架 · 资产·规范 · 框架/Apple HIG 排版与交互规范.md · 10260 B

Apple HIG 排版与交互规范

本页只管「长什么样」（视觉与交互，.obsidian/snippets/apple-hig.css 唯一口径来源）。
「怎么组织」（强调预算 / 标题级数 / 首页结构 / 表格与链接规则）见框架/排版与信息架构规范。
两页各归一条线、各自单一所有者——需要动对方的内容时只提要求，不直接改。

本页既是规范，也是演示——所有效果都在本页可直接上手感受（鼠标悬停 / 手指按压）。
样式来源：.obsidian/snippets/apple-hig.css；设计令牌：reference §2.0。
写复盘、快照、看板时一律遵守本页，不要内联一次性样式。

一、为什么"一次性入场动画"是无效设计

常见的错误做法：给每个元素加 fade-in-up，打开笔记播一次。

问题：文档类内容 99% 的时间处于静止态。入场动画播完 1 秒就结束，此后屏幕上的东西和"没做动画"完全一样。更糟的是，如果动画在中途被冻结（后台标签页、移动端合成暂停），内容会永远停在透明态，整页读不了。

⇒ 物理感必须绑在交互上：悬停、按压、滚动进入视口。这三者每次都会发生，且手指离开就恢复，永远不会"看腻"。

二、悬停：笔锋推进（把手指放上去试试）

悬停或点按上方曲线 → 线条按弹簧曲线描出（stroke-dashoffset + linear() 阻尼缓动，纯 CSS，无 JS）

原理：默认 stroke-dashoffset 等于全长（完全隐藏），悬停时过渡到 0。缓动用 linear() 逼近的阻尼弹簧曲线——先急速逼近、再轻微过冲、最后回稳；普通 ease-out 是单调的，没有回弹，这就是"物理感"的差别。

三、按压：移动端最直接的反馈

操作对象	效果	实现
表格行	高亮 + 整体缩放 0.997%	`:hover` / `:active` + `transform`
链接	透明度降到 55%	`:active`
Callout	描边变为系统蓝	`:hover`
内联 SVG	端点半径 3.5 → 5.5 并回弹	`:hover` + `r` 过渡

手感来自回弹（overshoot），不是来自幅度。这和 iOS 的按钮反馈是同一套物理。

四、滚动进入视口：错峰浮现

这一段带 .hig-reveal 标记。 向下滚动到它进入视口时，它会从下方轻微上浮并淡入。

这一段也带标记，与上一段同速（段落级错峰，非逐行）。

第三段。 三段之间的位移是纯 transform，不触发重排，长文档滚动不卡。

安全降级：整条规则包在 @supports (animation-timeline: view()) 里。不支持的浏览器整块不解析，元素保持完全可见——不存在白屏风险。另有 prefers-reduced-motion 兜底：系统开了"减弱动态效果"时全部降级为静态。

五、排版规范速查

项目	规范
大标题	34px / 700 / 字距 -0.022em
章节标题	22px / 600 / 字距 -0.016em + 0.5px hairline 下边线
正文	17px / 行高 1.62 / 字距 -0.011em
表格	15px 表头 12px，`tabular-nums`，零竖线，hairline 行分隔
圆角	卡片 16px / 表格 10px / 代码块 12px
阴影	不用重阴影；只用 0.5px 发丝边
强调色	仅用 HIG 系统语义色（蓝/绿/红/橙/黄/紫），随深浅色自动切换
字体	`-apple-system` → `SF Pro Text` → `PingFang SC` → `system-ui`

禁止事项

禁止 emoji。需要点缀时用几何线性图标（24 网格、单色、细笔画），

由 scripts/apple_style.py 的 icon(name, color) 生成。

禁止内联一次性样式（字号、颜色、边框、圆角）——这些属于设计系统，正文只管内容。
禁止用颜色表达情绪以外的状态；状态词上色只用 .st-ok/.st-warn/.st-bad/.st-info/.st-mute。

六、两层设计体系（v1.9.2 · 本页最重要的原则）

Apple 同时存在两种气质，必须分层用，混在一起就既不像 Apple 又显得廉价：

层	占比	气质	用在哪
正文层	~80%	Apple 宣传页：大字、留白、hairline、链接是文字不是按钮	所有正文、表格、引用、代码
身份层	~20%	液态玻璃（Liquid Glass）：分层渐变 + 饱和模糊 + 镜面高光 + 软投影	状态胶囊、入口卡片、主按钮

判定规则（写之前问自己一句）：

这个元素需要被点吗？需要 → 身份层；只是被读的 → 正文层。

玻璃要"亮"起来的四个要件（v1.9.4）

#	要件	做法
①	环境光场	玻璃自身带 `radial-gradient` 光源（左上主光 + 右下冷色反光）。不依赖页面背景——否则在纯色底上 blur 再大也只是塑料片
②	镜面 streak	`::before` 斜向高光条，`mix-blend-mode: plus-lighter`（加色而非覆盖）
③	方向性边缘光	`::after` 1px 渐变描边：上/左亮 → 下/右暗，`mask-composite: exclude` 挖空内部
④	低饱和 + 白字	标签底色只用语义色 .13/.06 极低透明度，文字一律 `rgba(255,255,255,.94)`；语义色只体现在细描边

⚠ 平台限制（实测，务必知悉）

真正的折射需要 SVG 位移滤镜 + backdrop-filter: url(#id)。但 Safari/WebKit 不渲染—— 开源实现 [hyalite](https://github.com/VII-Cae/hyalite--liquid-glass) 的作者自己写明： *"open them in a Chromium browser, everything else falls back to a plain blur"*。 ⇒ Obsidian(iOS) 只能逼近，上面 ①②③ 就是纯 CSS 的最优解。

实测能力（本 WebKit）：

能力	支持
`corner-shape: squircle`	✘（已写 `@supports` 渐进增强，待未来浏览器）
`mask-composite: exclude`	✔
`backdrop-filter: url(#svg)`	语法接受，但不渲染
`mix-blend-mode: plus-lighter`	✔
`animation-timeline: view()`	✔

🚨 性能红线（踩过：直接卡死页面）

廉价做法就够，不要给大面积元素加 filter: blur()，不要用 SVG feTurbulence 噪声做纹理——叠加 backdrop-filter 后 iPhone 上会渲染器无响应。环境光场用纯 radial-gradient 即可。

设计令牌来源：apple.com 实测（2026-10-04）

不要凭印象配色。 以下数值是用浏览器从 Apple 官网直接读取的 computed style：

用途	实测值	出处
浅色区段文字	`#1D1D1F`	apple.com `body` color
浅色区段底色	`#F5F5F7`（实测出现 25 次）	section bg
次级文字	`#6E6E73` · `#86868B`（134 次）	深色区段
链接蓝	`#2997FF`（81 次）	apple.com 链接
按钮蓝	`#0071E3` · `#0066CC`	CTA
深色区段底	`#1D1D1F`（不是纯黑）	/airpods-pro/
玻璃填充	`rgba(232,232,237,.4)` / `rgba(255,255,255,.57)`	玻璃卡片
导航材质	`saturate(1.8) blur(20px)`	`nav` backdrop-filter
大卡片材质	`blur(37px) saturate(1)`	`backdrop-filter`
描边标签	`rgb(0,200,102)` 纯描边、无填充	"有货"标签
大标题	`34px / 600 / -0.374px / lh 50px`	`h1`
区段标题	`32px / 600`	`h3`

两条由此得到的结论：

Apple 大标题用 600（semibold）不是 700 —— 这是"高级感"的一半来源。
Apple 的状态标签几乎不用彩色填充，是「中性底 + 语义色描边 + 语义色文字」。

上一版做成彩色渐变填充胶囊，就是"诡异"的根因。

玻璃材质 token（不要另写一套）

--glass-fill-1 / --glass-fill-2   分层渐变两停
--glass-blur / --glass-sat        模糊半径 / 饱和度
--glass-edge                      0.5px 发丝边
--glass-hi-top / --glass-hi-bot   顶部镜面高光 / 底部内阴影
--glass-shadow / --glass-shadow-hi 常态 / 悬停投影
--glass-press                     按压内阴影

用法：.hig-glass（材质）+ .hig-glass-pill / .hig-glass-card（形态）或直接给元素加 .hig-entry（入口卡片，自带悬停上浮与按压回弹）。

⚠ 禁止用 color-mix()：部分 WebKit 不支持，会让整条声明失效、胶囊变透明。语义色各自自带 --tag-bg1 / --tag-bg2 / --tag-edge。

为什么上一版"每��链接都做成玻璃按钮"是错的

不是"玻璃错"，是①用得到处都是（241 篇文档每个 wikilink 都成按钮，噪音压过层级） ②配方糙（单一底色 + 硬描边）。修正：链接一律回归文字，只在入口卡片/状态胶囊/主按钮上保留玻璃，且用上面的 token 做精致。

六、相关文件

样式：.obsidian/snippets/apple-hig.css（全库生效）
胶囊/毛玻璃：.obsidian/snippets/ios-dark-glass.css（只管 .ios-tag / .status-*，与本页分工不重叠）
设计令牌与图标：scripts/apple_style.py
看板渲染：scripts/paper_dashboard.py
写作口径：reference §2.0

_本页由人工维护；样式变更请同步本页「排版规范速查」表。_

Apple HIG 排版与交互规范