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