admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f2d07b47adde0ca4a04e3af461a1c48e9917cc2d
workbuddy_skills/open-design/design-systems/apple/DESIGN-zh.md
T
admin 5afeb6b78a ④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根 
一、④段整套同步（用户选候选 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。
2026-10-15 21:17:28 +08:00

16 KiB
Raw Blame History

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