受 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

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. 景深与抬升

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

Decorative Depth

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

7. 该做与不该做

Do

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

Don’t

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

8. 响应式行为

Breakpoints

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。
• 少数零售模块暴露出特定上下文的排版覆盖，并未贯穿全部五个页面。