workbuddy_skills/open-design/design-systems/apple/DESIGN-zh.md

# 受 Apple 启发的设计系统

> Category: 媒体与消费电子
> 消费电子产品。高级感的留白、SF Pro 字体、电影级影像。

## 1. 视觉主题与氛围

Apple 的网页语言是一套精密的编辑式系统，在画廊般的静谧与零售密度信息块之间交替切换。视觉基调始终克制：宽阔的中性画布、安静的界面金属质感，几乎把全部表现力都交给了产品影像。整个界面被刻意设计成"消隐"的状态，让硬件、材质与表面工艺成为叙事的前景。

在所分析的五个页面中，节奏保持一致但并非千篇一律。营销类页面（首页与 Environment 环保页）使用电影般的黑暗与光影分章，而商务类页面（Store 商店与 Shop 购买流程）则引入更紧凑的间距、更多功能性控件，以及更密集的卡片堆叠，同时不破坏核心品牌语法。最终形成的是一套系统、两个挡位：展示模式与交易模式。

排版是稳定器。SF Pro Display 以紧凑的行高和受控的字距承载主视觉与营销层级，而 SF Pro Text 则负责产品元数据、导航、筛选器以及密集的选择型 UI。排版整体保持低调，但其字号跨度足够宽，既能支撑广告牌式的主视觉信息，也能承载微型功能标签。

**Key Characteristics:**
- 二元式分区节奏：深黑场景（`#000000`）与浅中性色块（`#f5f5f7`）交替出现
- 单一蓝色强调色族承载操作与链接语义（`#0071e3`、`#0066cc`、`#2997ff`）
- 一套系统中的双运行模式：电影级展示模块与密集的商务配置器
- 高度依赖影像与材质表面工艺；UI 界面元素在视觉上保持纤薄
- 紧凑的标题度量（SF Pro Display，semibold）搭配紧凑的正文/链接排版（SF Pro Text）
- 以胶囊与圆角矩形几何作为标志性的操作语言（`18px` 到 `980px` 及圆形控件）
- 克制地使用景深；对比与表面分隔承担了大部分分层工作
- 多页面色块节奏：黑色主视觉章节 -> 浅中性营销色块 -> 功能性白色零售页面 -> 用于控件的深色微表面

## 2. 配色方案与角色

> **Source Pages:** `https://www.apple.com/`, `https://www.apple.com/environment/`, `https://www.apple.com/store`, `https://www.apple.com/shop/buy-iphone/iphone-17-pro`, `https://www.apple.com/shop/accessories/all`

### Primary
- **绝对黑** (`#000000`)：沉浸式主视觉画布、高戏剧张力的产品章节、深色 UI 锚点。
- **苹果浅灰** (`#f5f5f7`)：功能展示带、对比块和编辑式过渡的主浅色表面。
- **近黑墨色** (`#1d1d1f`)：浅色画布上的主文本与深填充控件颜色。

### Secondary & Accent
- **苹果操作蓝** (`#0071e3`)：主操作填充色与传达焦点的品牌强调色。
- **正文链接蓝** (`#0066cc`)：为长文可读性优化的行内链接颜色。
- **高亮度链接蓝** (`#2997ff`)：在需要更强对比的深色场景中使用的明亮链接处理色。

### Surface & Background
- **纯白画布** (`#ffffff`)：零售/产品列表背景与密集交易区块。
- **石墨表面 A** (`#272729`)：深色卡片与媒体控件上下文层。
- **石墨表面 B** (`#262629`)：用于控件分组的稍深一级的深色功能层。
- **石墨表面 C** (`#28282b`)：抬升的深色辅助表面。
- **石墨表面 D** (`#2a2a2c`)：用于在更丰富的深色场景中做分隔的最深抬升层级。

### Neutrals & Text
- **次级中性灰** (`#6e6e73`)：正文次级文案、辅助说明、第三级元数据。
- **柔和边框灰** (`#d2d2d7`)：分隔线、细微轮廓和低调的功能性容器。
- **中等边框灰** (`#86868b`)：产品配置与筛选场景中更强的字段轮廓。
- **功能深灰** (`#424245`)：商店场景中深中性文本/表面的过渡色。

### Semantic & Accent
- **选中/焦点信号** (`#0071e3`)：贯穿营销与商务场景的共享焦点与选中状态信号。
- **错误/警告/成功**：在所提取的页面集合中未一致出现独立的语义配色。

### Gradient System
- 所提取的页面绝大多数由纯色表面驱动。视觉丰富度来自摄影与表面工艺渲染，而非持续存在的 UI 渐变。

## 3. 排版规则

### Font Family
- **Display Family:** `SF Pro Display`，回退字体 `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
- **Text Family:** `SF Pro Text`，回退字体 `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
- **用途划分：** Display 字族负责主视觉/产品标题与营销标题；Text 字族负责导航、控件、标签以及密集的商务文案。

### Hierarchy
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|--------|-------------|----------------|-------|
| Hero Display XL | 80px | 600 | 1.00-1.05 | -1.2px | Environment/商店主视觉尺度 |
| Hero Display L | 56px | 600 | 1.07 | -0.28px | 首页主视觉时刻 |
| Section Display | 48px | 500-600 | 1.08 | -0.144px | 主要章节标题 |
| Product Heading | 40px | 600 | 1.10 | normal | 产品与活动区块标题 |
| Feature Display | 38px | 600 | 1.21 | 0.152px | 设备与营销说明 |
| Promo Display | 32px | 300-600 | 1.09-1.13 | 0.128px to 0.352px | 模块级次主视觉 |
| Card/Product Title | 28px | 600 | 1.14 | 0.196px | 图块级命名与关键文案 |
| Utility Heading | 24px | 600 | 1.17 | 0.216px / -0.2px | 配置器与分组内容标题 |
| Link/Action Heading | 21px | 600 | 1.14-1.38 | 0.231px | 较大的促销链接 |
| Subhead | 19px | 600 | 1.21 | 0.228px | 紧凑的区块引言 |
| Body Primary | 17px | 400 | 1.47 | -0.374px | 标准正文与零售说明 |
| Body Emphasis | 17px | 600 | 1.24 | -0.374px | 强调标签与关键数值 |
| Control Label | 14px | 400-600 | 1.29-1.47 | -0.224px | 按钮、辅助标签、紧凑导航文本 |
| Micro UI | 12px | 400-600 | 1.00-1.33 | -0.12px | 细则、微型标签 |
| Legal/Meta | 10px | 400 | 1.30-1.47 | -0.08px | 密集元数据与法律辅助文本 |

### Principles
- **跨页面类型的连续性：** 同一套排版 DNA 贯穿电影级发布与产品购买流程，避免营销与商务之间出现品牌割裂。
- **大尺度下的压缩：** Display 层级使用紧凑的行距与受控的字距，带来机械精密、产品优先的质感。
- **零售深度下的可读密度：** SF Pro Text 在紧凑性与足够的垂直节奏之间取得平衡，适应长产品列表与选项矩阵。
- **有节制的字重阶梯：** 600 是主导的强调字重；700 选择性出现；300 在较大行中谨慎使用以形成对比。

### Note on Font Substitutes
- 最接近的可免费获取替代字体：文本密集型实现使用 `Inter`，标题部分用 `Inter Tight` 近似逼近 `SF Pro Display-like` 的度量。
- 替换时，将正文字号的行高略微增大（+0.02 到 +0.06），并降低负字距的强度以保持可读性。

## 4. 组件样式

### Buttons
- **主填充操作：** `#0071e3` 背景，`#ffffff` 文本，8px 圆角，紧凑的水平内边距（通常为 8px 15px）。用于决断性的购买/推进操作。
- **深填充操作：** `#1d1d1f` 背景，`#ffffff` 文本，8px 圆角。当浅色表面需要一个克制的高对比主操作时使用。
- **胶囊操作族：** 大型胶囊操作圆角为 `18px`-`56px`，极端胶囊链接圆角为 `980px`。确立了 Apple 柔和而精准的行动号召轮廓。
- **功能性筛选/按钮外壳：** 浅色外壳（`#fafafc` 或半透明白色）配以细微的灰色边框（`#d2d2d7` / `#86868b`），用于密集配置场景。
- **按压行为：** 激活控件通常会略微缩小尺度或微调填充色，以提示物理按压确认。

### Cards & Containers
- **编辑式/产品卡片：** 在 `#f5f5f7` 或白色色块上的浅色卡片，框架极简、影像优先的构图。
- **深色功能卡片：** 石墨层级（`#272729` 到 `#2a2a2c`），用于覆盖层、媒体控件和深色场景模块。
- **配置器面板：** 圆角容器（通常 12px-18px），边框定义清晰而克制。
- **轮播/聚焦模块：** 较大的圆角外壳（`28px`-`36px`），用于精选内容通道。

### Inputs & Forms
- **零售输入框：** 半透明或白色背景，深色文本（`#1d1d1f`），以边框主导容器（`#86868b`）。
- **选择控件：** 圆形/切换式控件几何在产品选择界面中频繁出现。
- **密度策略：** 表单字段在视觉上保持安静，让设备影像与价格层级占据主导。

### Navigation
- **全局营销导航：** 紧凑的深色半透明栏，配以小字号链接和克制的图标。
- **商店/子商店导航层：** 额外的功能性栏、chips 与分段控件，用于类目与产品收窄。
- **链接层级：** 链接蓝仍是主要的交互信号，中性文本则支撑密集的导航集合。

### Image Treatment
- **物体优先摄影：** 硬件与配件在受控的纯色表面上被置于前景。
- **高保真表面工艺渲染：** 反射/材质细节是视觉说服力的核心。
- **混合取景：** 全出血主视觉场景与圆角零售卡片、紧密裁切的营销缩略图并存。

### Other Distinctive Components
- **产品配置器矩阵：** 选项堆叠与选择器，结合 chips、radio 式控件以及上下文相关的价格/汇总块。
- **轮播控制圆点/箭头：** 在低调覆盖层中以圆形控件词汇用于画廊推进。
- **Environment 故事面板：** 将编辑式排版与电影级产品/环境视觉融合的叙事章节。

## 5. 布局原则

### Spacing System
- 基础单位实际上是 `8px`，但系统支持密集的微步进以实现精密对齐。
- 各页面频繁复用的间距值：`2`、`4`、`6`、`7`、`8`、`9`、`10`、`12`、`14`、`17`、`20` px。
- 在营销与零售流程中通用的节奏常量：`8px` 单位脚手架，配以 `14-20px` 的功能性间隔用于组件内边距与列表间距。

### Grid & Container
- **展示页面：** 大型中央列，配以宽阔的水平呼吸空间和通栏色块章节。
- **商务页面：** 更紧凑的多列产品与控件网格，频繁采用模块化堆叠。
- **容器行为：** 受约束的可读核心区，在桌面宽度下保留充裕的外侧边距。

### Whitespace Philosophy
- **场景节奏：** 主要视觉章节使用宽阔的上/下呼吸空间。
- **必要处的信息压缩：** 零售页面刻意压缩间距，以在每个视口中暴露更多可操作信息。
- **对比主导的分隔：** 区块过渡更多依赖表面变化而非装饰性分隔符。

### Border Radius Scale
- **5px：** 微型功能链接/标签和次要小外壳。
- **8px-12px：** 标准控件与紧凑字段。
- **16px-18px：** 卡片、模块框架与商务面板。
- **28px-36px：** 较大的模块与聚焦容器。
- **56px / 100px / 980px：** 胶囊、大型胶囊以及标志性的细长 CTA 形态。
- **50%：** 圆形媒体与选择控件。

## 6. 景深与抬升

| Level | Treatment | Use |
|------|-----------|-----|
| Level 0 | 扁平中性表面（`#ffffff`、`#f5f5f7`、`#000000`） | 主叙事与产品舞台 |
| Level 1 | 细微的边框容器（`#d2d2d7`、`#86868b`） | 筛选器、输入框、功能卡片 |
| Level 2 | 柔和阴影（在出现处为 `rgba(0,0,0,0.08)` 到 `rgba(0,0,0,0.22)`） | 突出卡片与抬升的商品模块 |
| Level 3 | 深色表面阶梯（`#272729` -> `#2a2a2c`） | 覆盖层、媒体控件、深色功能集群 |
| Accessibility | 蓝色焦点信号（`#0071e3`） | 键盘与选择强调 |

景深被刻意克制。Apple 偏好色调对比、表面阶梯和构图层级，而非厚重的阴影堆叠。

### Decorative Depth
- 装饰性景深主要由摄影写实感与材质渲染创造，而非合成的 UI 效果。
- 半透明覆盖层与玻璃感功能栏在导航与控件中提供轻微的氛围分层。

## 7. 该做与不该做

### Do
- 以中性三色（`#000000`、`#f5f5f7`、`#ffffff`）作为结构基础。
- 将蓝色强调色保留给真正的操作与导航语义。
- 保持排版紧凑而克制，尤其是在 display 尺度上。
- 为控件与关键操作维持胶囊/圆形几何语言。
- 让产品影像承载视觉张力；界面元素保持低调。
- 在密集零售场景中使用边框主导的容器，而非厚重的卡片装饰。
- 在共享核心 token 的同时，保持展示模块与交易模块之间清晰的分隔。

### Don't
- 不要引入与苹果蓝竞争的宽泛次级强调配色。
- 不要在核心 UI 界面元素中过度使用阴影、发光效果或装饰性渐变。
- 不要混用不相关的字族，或不加区分地放松字距。
- 不要把所有圆角拍平为单一半径；Apple 使用有目的的半径层级。
- 不要用厚重边框或喧闹的视觉效果给商务模块加负荷。
- 不要移除深色与浅色章节之间的中性对比节奏。
- 不要把营销流程与购买流程当作两套独立的设计系统。

## 8. 响应式行为

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Small Mobile | 374px and below | 收紧零售控件，单列产品堆叠 |
| Mobile | 375px-640px | 单列模块、紧凑操作行、压缩选择器 |
| Tablet | 641px-833px | 扩展卡片与混合 1-2 列过渡 |
| Tablet Wide | 834px-1023px | 更稳定的多列营销布局、更大的文本块 |
| Desktop | 1024px-1240px | 完整零售布局与产品对比结构 |
| Desktop Wide | 1241px-1440px | 营销主视觉扩展与更宽的区块间距 |
| Large Desktop | 1441px+ | 最大化的章节呼吸空间与宽幅编辑式构图 |

### Touch Targets
- 主操作与次操作通常以便于点按的胶囊/按钮几何呈现。
- 圆形媒体与选择控件在移动场景中符合最小可点按意图。
- 密集商务 UI 使用紧凑标签，但通过周围的形状内边距维持清晰的命中区域。

### Collapsing Strategy
- 营销主视觉排版以离散层级缩小，同时保留层级对比。
- 产品与商务网格从多列折叠为堆叠卡片，并持续保持选择器可见。
- 功能性导航压缩为更简单的链接/控件分组，同时保留关键操作。
- 选项/配置集群变为纵向排序，以在小屏幕上保持购买流程的线性。

### Image Behavior
- 产品影像在各断点间保持比例与中心性。
- 主视觉在移动端仍占主导，文本围绕媒体优先级重新定位。
- 零售缩略图通过更紧的裁切逻辑与更密的卡片堆叠保持清晰可读。
- 随着布局密度增加，影像主导的模块继续锚定节奏。

## 9. Agent 提示词指南

### Quick Color Reference
- 主操作蓝：**苹果操作蓝**（`#0071e3`）
- 行内链接蓝：**正文链接蓝**（`#0066cc`）
- 深色章节画布：**绝对黑**（`#000000`）
- 浅色章节画布：**苹果浅灰**（`#f5f5f7`）
- 浅色上的主文本：**近黑墨色**（`#1d1d1f`）
- 次级文本：**次级中性灰**（`#6e6e73`）
- 零售柔和边框：**柔和边框灰**（`#d2d2d7`）
- 零售强边框：**中等边框灰**（`#86868b`）

### Example Component Prompts
- "在黑色画布（`#000000`）上设计一个 Apple 风格的产品主视觉，使用 SF Pro Display semibold 标题（48-56px）、简洁的辅助文案，以及两个分别使用 `#0071e3` 和 `#1d1d1f` 的胶囊 CTA。"
- "在白色（`#ffffff`）上创建一个商务配置面板，使用 18px 圆角卡片、`#86868b` 边框字段、SF Pro Text 17px 正文文案，以及紧凑的选项选择器。"
- "构建一个营销卡片网格，交替使用 `#f5f5f7` 与白色表面，配以影像优先的卡片、克制的阴影，以及 14-17px 的 SF Pro Text 元数据。"
- "生成一个轮播控件集群，使用圆形按钮（50% 圆角）、低调的灰色覆盖层，以及用于画廊导航的清晰激活反馈。"
- "组合一种营销 + 零售混合的页面节奏：深色展示章节 -> 浅色功能章节 -> 密集产品列表模块，同时让蓝色强调色仅用于操作与链接。"

### Iteration Guide
1. 先锁定中性基础（`#000000`、`#f5f5f7`、`#ffffff`），再调整强调色。
2. 让蓝色强调色稀少且有目的；如果一切都是蓝色，层级就会崩塌。
3. 按此顺序调整排版：display 尺度、正文可读性，最后是微型标签。
4. 按组件类别（字段、卡片、胶囊、圆形）匹配圆角，而非一刀切的统一圆角。
5. 从展示区块转向商务区块时，逐步增加密度。
6. 每次修订后都要验证产品影像仍是最强的视觉层。

### Known Gaps
- 在所提取的页面集合中，未一致出现独立的语义状态色（错误/警告/成功）。
- 部分交互微状态因模块而异，未表现为通用的系统 token。
- 少数零售模块暴露出特定上下文的排版覆盖，并未贯穿全部五个页面。