# Apple 风格设计系统

**文档版本**: 1.0.0
**最后更新**: 2026-04-19

## 1. 视觉主题与氛围

Apple 的网站堪称"克制的戏剧性"之典范——大面积的纯黑与近白色充当电影般的背景幕布，产品如画廊中的雕塑般被精心呈现。其设计哲学的核心是"减法"：每一个像素都为产品服务，界面本身则退隐至无形。这不是审美偏好上的极简主义，而是对产品本身的"致敬式"极简。

排版是一切的根基。Inter 字体族（大字号使用 Inter Display，正文使用 Inter）是专为屏幕设计的开源字体，采用光学尺寸技术，可根据字号自动调整字形，CJK 字形自动回退到 Noto Sans SC。在展示级尺寸（56px）下，字重 600、紧凑行高 1.07 并辅以微量的负字间距（-0.28px），打造出"精密加工"而非"手工排版"的标题感受——精准、自信、毫不妥协。在正文尺寸（17px）下，字距略微放松（-0.374px），行高展开至 1.47，营造舒适而不松散的阅读节奏。

色彩叙事呈现极端的二元对立。产品区块在纯黑（`#000000`）背景配白色文字与浅灰（`#f5f5f7`）背景配近黑色文字（`#1d1d1f`）之间交替。这营造出电影般的节奏感——暗色区块沉浸而高端，浅色区块开阔而信息丰富。唯一的彩色点缀是 Apple 蓝（`#0071e3`），专门保留给交互元素：链接、按钮和焦点状态。在一片中性色调中，这一独特色彩让每一个可点击元素都拥有不可忽视的辨识度。

**核心特征：**
- Inter Display/Inter 配合光学尺寸——字形随尺寸上下文自动适配
- 二元明暗区块节奏：纯黑（`#000000`）与浅灰（`#f5f5f7`）交替出现
- 单一强调色：Apple 蓝（`#0071e3`）专属于交互元素
- 产品即主角的产品摄影置于纯色背景——无渐变、无纹理、无干扰
- 极度紧凑的标题行高（1.07-1.14），营造压缩的、广告牌般的视觉冲击力
- 全宽区块布局搭配居中内容——视口即画布
- 胶囊形 CTA 按钮（980px 圆角），柔和且亲切的行动号召
- 区块间充裕的留白，让每个产品展示"独立呼吸"

## 2. 色彩体系与角色

### 主色调
- **纯黑** (`#000000`)：主视觉区块背景、沉浸式产品展示。最深的画布衬托最亮眼的产品。
- **浅灰** (`#f5f5f7`)：交替区块背景、信息展示区域。不是纯白——微妙的蓝灰色调避免了刻板感。
- **近黑** (`#1d1d1f`)：浅色背景上的主要文字、深色按钮填充。比纯黑略暖，阅读更舒适。

### 交互色
- **Apple 蓝** (`#0071e3`)：`--sk-focus-color`，主要 CTA 背景色、焦点环。界面中唯一的彩色。
- **链接蓝** (`#0066cc`)：`--sk-body-link-color`，行内文字链接。比 Apple 蓝略深，确保文字级可读性。
- **亮蓝** (`#2997ff`)：暗色背景上的链接。更高的亮度确保在黑色区块上的对比度。

### 文字色
- **白色** (`#ffffff`)：暗色背景上的文字、蓝色/深色 CTA 上的按钮文字。
- **近黑** (`#1d1d1f`)：浅色背景上的主要正文文字。
- **80% 黑** (`rgba(0, 0, 0, 0.8)`)：次要文字、浅色背景上的导航项。略柔化处理。
- **48% 黑** (`rgba(0, 0, 0, 0.48)`)：辅助文字、禁用状态、轮播控件。

### 表面与暗色变体
- **暗色表面 1** (`#272729`)：暗色区块中的卡片背景。
- **暗色表面 2** (`#262628`)：暗色环境中的微妙表面变化。
- **暗色表面 3** (`#28282a`)：暗色背景上的凸起卡片。
- **暗色表面 4** (`#2a2a2d`)：最高暗色表面层级。
- **暗色表面 5** (`#242426`)：最深的暗色表面色调。

### 按钮状态
- **按钮激活** (`#ededf2`)：浅色按钮的激活/按下状态。
- **按钮默认浅色** (`#fafafc`)：搜索/筛选按钮背景。
- **遮罩** (`rgba(210, 210, 215, 0.64)`)：媒体控件遮罩、覆盖层。
- **32% 白** (`rgba(255, 255, 255, 0.32)`)：暗色弹窗关闭按钮的悬停状态。

### 阴影
- **卡片阴影** (`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`)：产品卡片柔和、弥散的抬升阴影。偏移量与宽幅模糊营造自然、如摄影般的阴影效果。

## 3. 排版规范

### 字体族
- **展示字体**：`Inter Display`，备选字体：`Inter, Noto Sans SC, sans-serif`
- **正文字体**：`Inter`，备选字体：`Noto Sans SC, sans-serif`
- **等宽字体**：`JetBrains Mono`，备选字体：`monospace`
- Inter Display 用于 20px 及以上；Inter 针对 19px 及以下优化。Inter Display 具有更宽的字间距和更细的笔画，针对大字号优化；Inter 更紧凑扎实，适合小字号。CJK 字形自动回退到 Noto Sans SC。

### 层级体系

| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 | 备注 |
|------|------|------|------|------|--------|------|
| 展示级主视觉 | Inter Display | 56px (3.50rem) | 600 | 1.07（紧凑） | -0.28px | 产品发布标题，最大视觉冲击 |
| 区块标题 | Inter Display | 40px (2.50rem) | 600 | 1.10（紧凑） | normal | 功能区块标题 |
| 瓷砖标题 | Inter Display | 28px (1.75rem) | 400 | 1.14（紧凑） | 0.196px | 产品瓷砖标题 |
| 卡片标题 | Inter Display | 21px (1.31rem) | 700 | 1.19（紧凑） | 0.231px | 粗体卡片标题 |
| 副标题 | Inter Display | 21px (1.31rem) | 400 | 1.19（紧凑） | 0.231px | 常规卡片标题 |
| 导航标题 | Inter | 34px (2.13rem) | 600 | 1.47 | -0.374px | 大号导航标题 |
| 子导航 | Inter | 24px (1.50rem) | 300 | 1.50 | normal | 轻量子导航文字 |
| 正文 | Inter | 17px (1.06rem) | 400 | 1.47 | -0.374px | 标准阅读文字 |
| 正文强调 | Inter | 17px (1.06rem) | 600 | 1.24（紧凑） | -0.374px | 强调正文、标签 |
| 大号按钮 | Inter | 18px (1.13rem) | 300 | 1.00（紧凑） | normal | 大号按钮文字，轻字重 |
| 按钮 | Inter | 17px (1.06rem) | 400 | 2.41（宽松） | normal | 标准按钮文字 |
| 链接 | Inter | 14px (0.88rem) | 400 | 1.43 | -0.224px | 正文链接，"了解更多" |
| 说明文字 | Inter | 14px (0.88rem) | 400 | 1.29（紧凑） | -0.224px | 次要文字、描述 |
| 说明文字粗体 | Inter | 14px (0.88rem) | 600 | 1.29（紧凑） | -0.224px | 强调说明文字 |
| 微型文字 | Inter | 12px (0.75rem) | 400 | 1.33 | -0.12px | 脚注、附注 |
| 微型文字粗体 | Inter | 12px (0.75rem) | 600 | 1.33 | -0.12px | 粗体附注 |
| 纳米文字 | Inter | 10px (0.63rem) | 400 | 1.47 | -0.08px | 法律声明文字，最小字号 |

### 设计原则
- **Inter 光学尺寸**：Inter 在 Display 与 Text 光学尺寸间对应——Inter Display 具有更宽的字间距和更细的笔画，针对大字号（≥20px）优化；Inter 更紧凑扎实，适合小字号（<20px）。CJK 字形通过 fontconfig 自动回退到 Noto Sans SC。
- **等宽密码显示**：密码、代码和 ID 字段使用 JetBrains Mono，确保字符等宽可读。
- **字重克制**：字重跨度从 300（轻体）到 700（粗体），但绝大部分文字使用 400（常规）和 600（半粗）。字重 300 仅出现在大型装饰性文字上。字重 700 较为罕见，仅用于粗体卡片标题。
- **全字号负字间距**：与大多数仅对标题应用字间距的系统不同，Apple 甚至在正文字号也施加微量负字间距（17px 时 -0.374px，14px 时 -0.224px，12px 时 -0.12px）。这造就了全局紧凑、高效的文字排布。
- **极端的行高范围**：标题压缩至 1.07，正文展开至 1.47，某些按钮场景甚至拉伸至 2.41。这种戏剧性的范围差仅凭节奏就创造了清晰的视觉层级。

## 4. 组件样式

### 按钮

**主要蓝色按钮（CTA）**
- 背景：`#0071e3`（Apple 蓝）
- 文字：`#ffffff`
- 内边距：8px 15px
- 圆角：8px
- 边框：1px solid transparent
- 字体：Inter, 17px, 字重 400
- 悬停：背景略微提亮
- 激活：背景色偏移至 `#ededf2`
- 焦点：`2px solid var(--sk-focus-color, #0071E3)` 轮廓
- 用途：主要行动号召（"购买"、"选购 iPhone"）

**深色主要按钮**
- 背景：`#1d1d1f`
- 文字：`#ffffff`
- 内边距：8px 15px
- 圆角：8px
- 字体：Inter, 17px, 字重 400
- 用途：次要 CTA，深色变体

**胶囊链接（了解更多 / 选购）**
- 背景：transparent
- 文字：`#0066cc`（浅色背景）或 `#2997ff`（深色背景）
- 圆角：980px（全胶囊形）
- 边框：1px solid `#0066cc`
- 字体：Inter, 14px-17px
- 悬停：下划线装饰
- 用途："了解更多"和"选购"链接——Apple 标志性的行内 CTA

**筛选/搜索按钮**
- 背景：`#fafafc`
- 文字：`rgba(0, 0, 0, 0.8)`
- 内边距：0px 14px
- 圆角：11px
- 边框：3px solid `rgba(0, 0, 0, 0.04)`
- 焦点：`2px solid var(--sk-focus-color, #0071E3)` 轮廓
- 用途：搜索栏、筛选控件

**媒体控件**
- 背景：`rgba(210, 210, 215, 0.64)`
- 文字：`rgba(0, 0, 0, 0.48)`
- 圆角：50%（圆形）
- 激活：scale(0.9)，背景色偏移
- 焦点：`2px solid var(--sk-focus-color, #0071e3)` 轮廓，白色背景，黑色文字
- 用途：播放/暂停、轮播箭头

### 卡片与容器
- 背景：`#f5f5f7`（浅色）或 `#272729`-`#2a2a2d`（深色）
- 边框：无（Apple 的设计体系中极少使用边框）
- 圆角：5px-8px
- 阴影：`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`，用于凸起的产品卡片
- 内容：居中，充裕的内边距
- 悬停：无标准悬停状态——卡片是静态的，其中的链接才是交互元素

### 导航
- 背景：`rgba(0, 0, 0, 0.8)`（半透明深色）配合 `backdrop-filter: saturate(180%) blur(20px)`
- 高度：48px（紧凑）
- 文字：`#ffffff`，12px，字重 400
- 激活：悬停时显示下划线
- Logo：Apple 标志（SVG）居中或左对齐，17x48px 视口
- 移动端：折叠为汉堡菜单，配合全屏覆盖式菜单
- 导航悬浮于内容之上，无论下方区块背景如何，始终保持深色半透明毛玻璃效果

### 图片处理
- 产品置于纯色背景（黑色或白色）——无背景、无场景、只有产品本身
- 通栏区块图片横跨整个视口宽度
- 产品摄影采用超高分辨率，配以微妙阴影
- 生活方式图片限定在圆角容器中（12px+ 圆角）

### 特色组件

**产品主视觉模块**
- 全视口宽度区块，纯色背景（黑色或 `#f5f5f7`）
- 产品名称作为主标题（Inter Display, 56px, 字重 600）
- 下方一行轻字重描述文字
- 两个并排胶囊 CTA："了解更多"（描边）和"购买" / "选购"（填充）

**产品网格瓷砖**
- 正方形或近方形卡片，置于对比色背景上
- 产品图片占据瓷砖 60-70% 的面积
- 下方为产品名称 + 一行描述
- 底部为"了解更多"和"选购"链接对

**功能对比条**
- 产品变体的水平滚动展示
- 每个变体以纵向卡片呈现，包含图片、名称和核心规格
- 极简装饰——让产品自己说话

## 5. 布局原则

### 间距体系
- 基准单位：8px
- 刻度：2px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 14px, 15px, 17px, 20px, 24px
- 显著特征：刻度在小尺寸端密集（2-11px），以 1px 为增量粒度递增，然后以较大步长跳跃。这允许对排版和图标对齐进行精确的微调。

### 网格与容器
- 最大内容宽度：约 980px（胶囊按钮中反复出现的"980px 圆角"正呼应了这一宽度）
- 主视觉：全视口宽度区块，居中内容块
- 产品网格：居中容器内的 2-3 列布局
- 主视觉场景采用单列——一个产品、一个信息、全部注意力
- 无可见网格线或间距槽——间距本身暗示结构

### 留白哲学
- **电影般的呼吸空间**：每个产品区块占据接近整个视口高度。产品之间的留白不是"空白"——它是电影场景之间的"停顿"。
- **通过色块建立纵向节奏**：Apple 不仅依靠间距来分隔区块，更通过交替的背景色（黑色、`#f5f5f7`、白色）来区分。每次色彩变化都标志着一个新的"场景"。
- **内紧外松**：文字块排列紧凑（负字间距、紧凑行高），而周围的留白则极为广阔。这在密集与开阔之间制造了一种张力。

### 圆角刻度
- 微型（5px）：小型容器、链接标签
- 标准（8px）：按钮、产品卡片、图片容器
- 舒适（11px）：搜索输入框、筛选按钮
- 大号（12px）：功能面板、生活方式图片容器
- 全胶囊（980px）：CTA 链接（"了解更多"、"选购"）、导航胶囊
- 圆形（50%）：媒体控件（播放/暂停、箭头）

## 6. 层次与抬升

| 层级 | 处理方式 | 用途 |
|------|----------|------|
| 平面（层级 0） | 无阴影，纯色背景 | 标准内容区块、文字块 |
| 导航毛玻璃 | 在 `rgba(0,0,0,0.8)` 上应用 `backdrop-filter: saturate(180%) blur(20px)` | 固定导航栏——毛玻璃效果 |
| 微妙抬升（层级 1） | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` | 产品卡片、浮动元素 |
| 媒体控件 | `rgba(210, 210, 215, 0.64)` 背景配合缩放变换 | 播放/暂停按钮、轮播控件 |
| 焦点（无障碍） | `2px solid #0071e3` 轮廓 | 所有交互元素的键盘焦点 |

**阴影哲学**：Apple 极其节制地使用阴影。主要阴影（`3px 5px 30px`，透明度 0.22）柔和、宽广且带偏移——模拟漫射影棚灯光在实体物体下方投射的自然阴影。这强化了"产品即实体雕塑"的隐喻。大多数元素完全没有阴影；层级感来自背景色的对比（暗色卡片置于更深的背景上，或浅色卡片置于略不同的灰色上）。

### 装饰性深度
- 导航毛玻璃：半透明、模糊的导航栏是最具辨识度的深度元素，营造出 UI 悬浮于滚动内容之上的感觉
- 区块色彩过渡：深度感通过黑色与浅灰区块的交替来暗示，而非通过阴影
- 产品摄影阴影：产品本身在摄影中即投射阴影，因此 UI 不需要添加人工阴影

## 7. 设计准则

### 应该做的
- 20px 及以上使用 Inter Display，20px 以下使用 Inter——尊重光学尺寸边界
- 在所有文字尺寸下应用负字间距（不仅限于标题）——Apple 全局使用紧凑字距
- 仅将 Apple 蓝（`#0071e3`）用于交互元素——它必须是唯一的强调色
- 在黑色与浅灰（`#f5f5f7`）区块背景之间交替，营造电影般的节奏感
- CTA 链接使用 980px 胶囊圆角——Apple 标志性的链接形状
- 将产品图片置于纯色背景上，排除任何竞争性视觉元素
- 固定导航使用半透明深色毛玻璃（`rgba(0,0,0,0.8)` + 模糊）
- 将标题行高压缩至 1.07-1.14——Apple 的标题以紧凑著称

### 不应该做的
- 不要引入额外的强调色——全部色彩预算都花在了蓝色上
- 不要使用浓重阴影或多层阴影——Apple 的阴影体系要么是一个柔和弥散阴影，要么完全没有
- 不要在卡片或容器上使用边框——Apple 几乎从不使用可见边框（特定按钮除外）
- 不要对 Inter 施加宽松字间距——它在每个尺寸下都设计为紧凑排列
- 不要使用 800 或 900 字重——最大为 700（粗体），即便如此也很少使用
- 不要在背景上添加纹理、图案或渐变——仅使用纯色
- 不要让导航栏变为不透明——毛玻璃模糊效果是 Apple UI 身份的核心要素
- 不要将正文居中对齐——Apple 的正文采用左对齐；仅标题居中
- 不要在矩形元素上使用超过 12px 的圆角（980px 仅用于胶囊形按钮）

## 8. 响应式行为

### 断点
| 名称 | 宽度 | 关键变化 |
|------|------|----------|
| 小型移动端 | <360px | 最低支持尺寸，单列 |
| 移动端 | 360-480px | 标准移动端布局 |
| 大型移动端 | 480-640px | 更宽的单列，更大的图片 |
| 小型平板 | 640-834px | 开始出现两列产品网格 |
| 平板 | 834-1024px | 完整平板布局，展开导航 |
| 小型桌面 | 1024-1070px | 标准桌面布局开始 |
| 桌面 | 1070-1440px | 完整布局，最大内容宽度 |
| 大型桌面 | >1440px | 居中展示，充裕边距 |

### 触控目标
- 主要 CTA：8px 15px 内边距，形成约 44px 触控高度
- 导航链接：48px 高度，间距充足
- 媒体控件：50% 圆角的圆形按钮，最小 44x44px
- "了解更多"胶囊：充裕的内边距，确保舒适的点击体验

### 折叠策略
- 主视觉标题：56px Display → 40px → 移动端 28px，按比例保持紧凑行高
- 产品网格：3 列 → 2 列 → 单列堆叠
- 导航：完整水平导航 → 紧凑移动端菜单（汉堡图标）
- 产品主视觉模块：所有尺寸保持通栏，文字等比缩小
- 区块背景：所有断点下保持全宽色块——电影般的节奏永不中断
- 图片尺寸：产品等比缩放，绝不裁剪——产品轮廓是神圣不可侵犯的

### 图片行为
- 产品摄影在所有断点下保持宽高比
- 主视觉产品图片等比缩小但始终居中
- 通栏区块背景在每个尺寸下持续展示
- 生活方式图片在移动端可能裁剪，但保持圆角
- 折叠线以下的产品图片采用懒加载

## 9. Agent 提示词指南

### 快速色彩参考
- 主要 CTA：Apple 蓝（`#0071e3`）
- 页面背景（浅色）：`#f5f5f7`
- 页面背景（深色）：`#000000`
- 标题文字（浅色背景）：`#1d1d1f`
- 标题文字（深色背景）：`#ffffff`
- 正文文字：浅色背景上 `rgba(0, 0, 0, 0.8)`，深色背景上 `#ffffff`
- 链接（浅色背景）：`#0066cc`
- 链接（深色背景）：`#2997ff`
- 焦点环：`#0071e3`
- 卡片阴影：`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`

### 组件提示词示例
- "创建一个黑色背景的主视觉区块。标题使用 56px Inter Display 字重 600，行高 1.07，字间距 -0.28px，颜色白色。下方一行副标题使用 21px Inter Display 字重 400，行高 1.19，颜色白色。两个胶囊 CTA 并排：'了解更多'（透明背景，白色文字，1px 白色描边，980px 圆角）和'购买'（Apple 蓝 #0071e3 背景，白色文字，8px 圆角，8px 15px 内边距）。"
- "设计一张产品卡片：#f5f5f7 背景，8px 圆角，无边框，无阴影。产品图片占据卡片上方 60%，纯色背景。标题使用 28px Inter Display 字重 400，字间距 0.196px，行高 1.14。描述使用 14px Inter 字重 400，颜色 rgba(0,0,0,0.8)。'了解更多'和'选购'链接使用 #0066cc，14px。"
- "构建 Apple 导航栏：固定定位，48px 高度，背景 rgba(0,0,0,0.8) 配合 backdrop-filter: saturate(180%) blur(20px)。链接使用 12px Inter 字重 400，白色文字。Apple logo 居左，链接居中，搜索和购物袋图标居右。"
- "创建交替区块布局：第一个区块黑色背景配白色文字和居中产品图片，第二个区块 #f5f5f7 背景配 #1d1d1f 文字。每个区块接近全视口高度，含 56px 标题和下方两个胶囊 CTA。"
- "设计一个'了解更多'链接：浅色背景上文字颜色 #0066cc 或深色背景上 #2997ff，14px Inter，悬停时显示下划线。文字后包含右箭头字符（>）。用 980px 圆角的容器包裹，作为独立 CTA 使用时呈胶囊形状。"

### 迭代指南
1. 所有交互元素使用 Apple 蓝（`#0071e3`）——不使用其他强调色
2. 区块背景交替使用：黑色用于沉浸式场景，`#f5f5f7` 用于信息展示场景
3. 排版光学尺寸：20px 及以上使用 Inter Display，以下使用 Inter——绝不混用
4. 所有尺寸下使用负字间距：56px 时 -0.28px，17px 时 -0.374px，14px 时 -0.224px，12px 时 -0.12px
5. 导航毛玻璃效果（半透明深色 + 模糊）是不可妥协的——它定义了 Apple 的网页体验
6. 产品始终出现在纯色背景上——主视觉模块中绝不使用渐变、纹理或生活方式背景
7. 阴影极其罕见且始终柔和：`3px 5px 30px 透明度 0.22` 或完全不使用
8. 胶囊 CTA 使用 980px 圆角——这创造了 Apple 标志性的"看起来像胶囊的圆角矩形"形状

---

**版本历史**:
- v1.0.0 (2026-04-19): 初始化 ISOS 模板
- v4.1.0 (2026-04-16): 字体体系跨平台调整 — SF Pro Display/Text → Inter Display/Inter + Noto Sans SC + JetBrains Mono；§3 字体族/层级体系/设计原则全面重写；§1/§4/§5/§7/§9 字体引用同步更新
- v4.0.0 (2026-04-14): 初始创建