apple-design

Apple 设计（HIG + Liquid Glass 版）

这项技能让输出真正呈现出 Apple 的感觉——而不是“多留些空白的通用极简风格”。两者的差异体现在具体数值（字体比例、圆角、触控目标、缓动）和克制的设计理念上。本文中的规范综合自截至 2026 年年中的 Apple 人机界面指南（HIG），采用的是当前的 Liquid Glass 设计语言，而非 2025 年之前的扁平化风格。

首先要了解的一件事：Liquid Glass

自 2025 年起，Apple 平台会将每个屏幕划分为两层：

1. 内容层——应用的实际内容。内容延伸至屏幕边缘，在所有元素下方滚动，使用不透明背景和标准材质。
2. 功能层（Liquid Glass）——控件和导航元素（标签栏、工具栏、侧边栏、按钮）以动态玻璃材质悬浮在内容上方。它本身没有颜色；它会折射下方的内容，根据底层内容适应明暗，并默认让符号保持单色。

实用规则：栏应是悬浮的圆角或胶囊形岛状区域，而不是贴着边缘、横跨整个屏幕的条带。内容应能明显地在它们下方滚动。使用滚动边缘效果（渐进式模糊／淡出），将悬浮控件与内容分隔开——默认不要使用生硬的细线。玻璃上的颜色应有所保留：最多只为一个醒目的操作（例如“完成”）的背景添加色调；其他元素都保持单色。不要用玻璃材质制作内容层卡片——玻璃仅用于交互式界面控件。

查找合适的参考资料

交付内容	阅读
应用 UI——任意屏幕、组件或流程	references/hig-foundations.md + references/hig-components.md
UX 流程、文案、空状态／错误状态／加载状态、引导流程、设置、搜索	references/hig-patterns.md
营销／落地页／产品页	references/marketing-pages.md
HTML/CSS/JS 或 React+Tailwind 构建（设计令牌、玻璃效果配方、动效代码）	references/code-implementation.md（除以上内容外还需阅读）
Figma 工作（画板、变量、文本样式、效果）	references/figma-workflow.md（除以上内容外还需阅读）

混合需求（落地页展示应用截图）：页面遵循营销规则；截图中展示的内容遵循 HIG 规则。

核心理念（适用于所有内容）

Apple 所阐述的原则——目的、主导权、责任、熟悉感、灵活性、简洁、工艺、愉悦——在实践中体现为：

• 每个屏幕／版块只表达一个想法。 每个视图都用一个主视觉元素传达一个要点。如果感觉杂乱，就删减元素；不要缩小它们。
• 内容优先，界面控件退居其次。 控件悬浮于内容上方并保持简洁；内容占据屏幕，从一边延伸到另一边。
• 用排版构建层级——通过字体大小和字重的显著变化，而不是方框和边框。正文使用 17pt（iOS）／13pt（macOS）；标题要高出好几个层级，不能只高一级。
• 界面控件近乎单色。 色调代表可交互性——任何带色调的元素看起来都像是可轻点的，因此不要给静态装饰着色。每个视图最多只使用一两个带色调的元素。
• 通过材质而非层叠阴影营造深度。 使用玻璃、背景层级差异（系统 → 次级 → 三级），以及不透明度为 8–30% 的细线。只有真正悬浮的元素才使用阴影，且应柔和、低不透明度。
• 动效遵循物理规律，并与输入相关联。 使用快速稳定的弹簧效果和与滚动联动的变换；退出方向应与进入方向一致；始终遵循“减少动态效果”设置。
• 允许用户轻松补救。 方便撤销，提供明显的关闭方式；仅对无法撤销的删除操作要求确认。

字体策略（选择字体前请阅读）

Apple 的 SF Pro / SF Compact / New York 字体仅授权用于 Apple 平台的设计和开发：

• 在 Apple 设备上查看的原型：使用系统字体栈 — -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif — 在 Mac/iPhone 上会呈现真正的 SF 字体。
• 客户的生产项目 / 面向非 Apple 平台的发行：推荐使用 Inter（搭配 font-feature-settings: "cv05", "cv11"，实现类似 SF 的字形），并向客户说明原因。切勿在交付物中嵌入 SF 字体文件。
• 在 Figma 中：可以使用 SF Pro（可免费用于设计），并将 Inter 作为备用字体。
• SF 是可变字体，支持动态光学尺寸调整；可通过随字号增大而收紧字距来模拟：17px 时约为 -0.003em → 48px 时为 -0.015em → 80px+ 时为 -0.022em。

质量标准 — 交付前请自查

1. 是否还能再删掉一个元素？（通常可以 — 删掉它。）
2. 工具栏/控件是否浮于内容之上，并带有滚动边缘效果，还是不透明的条带？（条带 = 2025 年前的设计。）
3. 是否有非交互元素被染色？是否有多个控件的背景带有颜色？
4. 点击目标是否至少为 44×44pt（macOS 上为 28×28），且留有足够空间？
5. 按钮看起来是否像 Apple 的胶囊形/圆角矩形 — 而非 Material 风格的 1px 描边矩形，且没有 Android 的波纹效果？
6. 深色表面：是否以 #000 为基底，使用 #1c1c1e 系列的阶梯色表示凸起层级，文字使用 #f5f5f7 系列 — 绝不使用纯白文字？
7. 每种手势是否都有屏幕上的替代操作，每个破坏性操作是否都有取消选项？
8. 随便找个人看这张截图，他是否会认为这是 Apple 应用 / apple.com？

如果用户的品牌与严格的 Apple 规范冲突（例如酒店使用金色作为强调色），请保留结构和克制的风格，只替换强调色 — 并说明你这样做了。