admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
251 lines
16 KiB
Markdown
251 lines
16 KiB
Markdown
# 受 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。
|
||
- 少数零售模块暴露出特定上下文的排版覆盖，并未贯穿全部五个页面。
|