0 Fork 0

Files

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

19 KiB

Raw Blame History

受 Nike 启发的设计系统

Category: 电子商务与零售运动零售。单色 UI，巨幅大写字体，全出血摄影。

1. 视觉主题与氛围

Nike.com 是一座充满动感的零售大教堂——将运动的爆发性能量转化为数字购物体验。其设计遵循极简主义原则：将一切剥离至黑、白、灰，让运动摄影和产品色彩无需竞争便能主导视觉。最终效果不像一个网站，更像是以奢侈杂志精准度排版的体育编辑专题。每一个像素要么在销售产品，要么在引导用户走向产品。

"Podium CDS"（Nike 内部核心设计系统）确立了一套极为单色调的基础。UI 融入黑色（#111111）文字与白色表面，让英雄摄影——挥汗如雨的运动员、凌空飞翔的球鞋、体育场的澎湃能量——承载情感重量。当 UI 中出现颜色时，几乎都是功能性的：红色表示错误，蓝色表示链接，绿色表示成功。产品本身才是色彩故事。这种克制创造出一种视觉悖论：互联网上色彩最丰富的页面反而感觉最简约，因为所有活力来自商品而非界面。

字体系统是 Nike 视觉识别的另一半。Nike Futura ND——一款定制的窄体 Futura 变体，行高极度压缩（0.90）——以巨幅大写标题穿透英雄图像，如同排版冲击波。标题之下，Helvetica Now 字族以瑞士精确度负责从导航到产品描述的一切内容。这种表现型展示字体与功能性正文字体之间的分裂，映照了 Nike 品牌的双重性：激励与执行相遇。

主要特征：

单色调 UI（黑/白/灰），让产品摄影成为唯一的色彩来源
巨幅大写展示字体（96px，行高 0.90），穿透英雄图像
无边框圆角的全出血摄影——图像填充每一个可用边缘
药丸形按钮（30px 圆角）作为主要交互元素
8px 间距网格，严格的运动纪律——每个尺寸都对齐到系统
以类别为驱动的购物架构，配以大型导航图像卡片
无阴影、边框极简的层级模型——仅通过灰度变化区分表面

2. 色彩调色板与角色

主色

Nike 黑 (#111111)：基础——主要文字、按钮背景、导航文字、英雄叠加层。刻意不用纯黑（#000000），营造略微柔和的阅读体验
Nike 白 (#FFFFFF)：主要页面画布、深色背景上的按钮文字、卡片表面、导航栏背景

表面与背景

雪白 (#FAFAFA)：最浅表面，接近白色的微妙差异（--podium-cds-color-grey-50）
浅灰 (#F5F5F5)：次级背景、搜索输入填充、图像占位符、加载骨架屏（--podium-cds-color-grey-100）
悬停灰 (#E5E5E5)：悬停状态背景、禁用按钮填充（--podium-cds-color-grey-200）
深色表面 (#28282A)：深色/反色区块的主背景（--podium-cds-color-grey-800）
深炭灰 (#1F1F21)：反色主背景，最深的非黑色表面（--podium-cds-color-grey-900）
深色悬停 (#39393B)：深色背景上的悬停状态（--podium-cds-color-grey-700）

中性色与文字色

主要文字 (#111111)：正文主体、标题、导航链接（--podium-cds-color-text-primary）
次要文字 (#707072)：描述性文案、元数据、时间戳、价格标签（--podium-cds-color-text-secondary）
禁用文字 (#9E9EA0)：非活动元素、不可用选项（--podium-cds-color-text-disabled）
禁用反色 (#4B4B4D)：深色背景上的禁用文字（--podium-cds-color-text-disabled-inverse）
主要边框 (#707072)：标准边框颜色，与次要文字一致
次要边框 (#CACACB)：细微边框、输入框边框、分隔线（--podium-cds-color-grey-300）
禁用边框 (#CACACB)：非活动边框状态
激活边框 (#111111)：激活/聚焦边框，与主要文字一致

语义色与强调色

Nike 红 (#D30005)：严重错误、促销角标、紧急通知（--podium-cds-color-red-600）
亮红 (#EE0005)：红色-500，略浅的红色用于强调
Nike 橙色角标 (#D33918)：角标文字、促销标注（--podium-cds-color-text-badge）
橙闪 (#FF5000)：富有表现力的橙色强调（--podium-cds-color-orange-400）
成功绿 (#007D48)：确认、可用性、积极状态（--podium-cds-color-green-600）
成功反色 (#1EAA52)：深色背景上的成功色（--podium-cds-color-green-500）
链接蓝 (#1151FF)：文字链接、信息高亮（--podium-cds-color-blue-500）
信息反色 (#1190FF)：深色背景上的链接（--podium-cds-color-blue-400）
警告黄 (#FEDF35)：警告背景、注意横幅（--podium-cds-color-yellow-200）
焦点环 (rgba(39, 93, 197, 1))：键盘焦点指示环

扩展色谱（Podium CDS）

每个色阶从 50 到 900，用于活动和产品页面的表现性使用：

红色: #FFE5E5 → #EE0005 → #530300
橙色: #FFE2D6 → #FF5000 → #3E1009
黄色: #FEF087 → #FCA600 → #99470A
绿色: #DFFFB9 → #1EAA52 → #003C2A
青色: #D4FFFB → #008E98 → #043441
蓝色: #D6EEFF → #1151FF → #020664
紫色: #E4E1FC → #6E0FF6 → #1C0060
粉色: #FFE1F3 → #ED1AA0 → #4C012D

渐变系统

Nike 避免使用 UI 渐变。出现渐变时，均为摄影渐变——应用于产品英雄背景（例如，红色鞋款置于红到深红的渐变背景上）。设计系统本身仅使用纯色。

3. 排版规则

字体族

展示字体： Nike Futura ND（Nike 专属定制窄体 Futura 变体）

备用字体：Helvetica Now Text Medium、Helvetica、Arial
专用于大型大写展示标题
特有的紧密行高（0.90）与大写变换

标题字体： Helvetica Now Display Medium

备用字体：Helvetica、Arial
用于 24–32px 的章节标题和产品名称

正文 Medium： Helvetica Now Text Medium（字重 500）

备用字体：Helvetica、Arial
用于链接、按钮、说明文字、强调正文

正文： Helvetica Now Text（字重 400）

备用字体：Helvetica、Arial
用于标准正文、描述、元数据

阿拉伯语： Neue Frutiger Arabic——特定语言替代字体

层级

角色	尺寸	字重	行高	字间距	备注
展示	96px	500	0.90	—	Nike Futura ND，大写，英雄标题
标题 1	32px	500	1.20	—	Helvetica Now Display Medium，章节标题
标题 2	24px	500	1.20	—	Helvetica Now Display Medium，子章节
标题 3	16px	500	1.50	—	Helvetica Now Text Medium，卡片标题
正文	16px	400	1.75	—	Helvetica Now Text，产品描述
正文 Medium	16px	500	1.75	—	Helvetica Now Text Medium，强调文字
链接	16px	500	1.75	—	Helvetica Now Text Medium，导航链接
小链接	14px	500	1.86	—	Helvetica Now Text Medium，页脚/实用链接
按钮	16px	500	1.50	—	Helvetica Now Text Medium，CTA 文字
小按钮	14px	500	1.50	—	Helvetica Now Text Medium，次级按钮
说明	14px	500	1.50	—	Helvetica Now Text Medium，价格标签
小号	12px	500	1.50	—	Helvetica Now Text Medium，时间戳
微小	12px	400	1.50	—	Helvetica Now Text，法律文字

原则

Nike 的排版是一种张力研究。展示层——Nike Futura ND，96px，行高压缩至 0.90——被设计得如同体育场计分板：巨幅、窄体、大写、无法忽视。它将标题变成战斗口号。展示层之下，Helvetica Now 提供临床式的对应：瑞士精确度的可读性，1.75 行高确保舒适的产品浏览体验。字重 500（Medium）贯穿正文始终，赋予 Nike 文案一种轻微的自信感而不显厚重——每一句话读起来都像一个有把握的建议，而非呼喊。

4. 组件样式

按钮

主要按钮

背景：Nike 黑（#111111）
文字：白色（#FFFFFF），16px/500，Helvetica Now Text Medium
边框：无
边框圆角：完全圆润药丸形（30px）
内边距：约 12px 24px
悬停：背景变为灰色-500（#707072），文字悬停颜色
激活：scale(0) 涟漪效果，透明度 0.5
焦点：2px 盒阴影环，颜色 rgba(39, 93, 197, 1)
过渡：背景 200ms ease

深色背景上的主要按钮

背景：白色（#FFFFFF）
文字：黑色（#111111）
悬停：背景变为灰色-300（#CACACB）

次要按钮（描边）

背景：透明
文字：Nike 黑（#111111）
边框：1.5px solid #CACACB（灰色-300）
边框圆角：30px
悬停：边框加深至 #707072，背景变为灰色-200

禁用按钮

背景：灰色-200（#E5E5E5）
文字：灰色-400（#9E9EA0）
光标：not-allowed

图标按钮

背景：灰色-100（#F5F5F5）
形状：30px 圆角（或 50% 圆形）
内边距：6px
悬停：灰色-500 背景

卡片与容器

背景：白色（#FFFFFF）——大多数情况下无可见卡片边界
边框圆角：产品图像卡片为 0px（边缘到边缘图像），交互容器为 20px
阴影：无——Nike 完全不使用卡片阴影
悬停：产品卡片无上浮效果；卡片内文字链接下划线
产品卡片：图像在上（无圆角），文字元数据在下，间距 12px
类别卡片：全出血摄影，深色渐变叠加层上显示文字
过渡：悬停时图像切换的透明度 200ms ease

输入框与表单

背景：灰色-100（#F5F5F5）
边框：可见时 1px solid #CACACB，搜索框无边框
边框圆角：24px（搜索输入），8px（表单输入）
字体：Helvetica Now Text，16px
焦点：边框变为 #111111（边框激活），2px 焦点环 rgba(39, 93, 197, 1)
错误：边框 #D30005（严重）
占位符：灰色-500（#707072）
过渡：边框颜色 200ms ease

背景：白色（#FFFFFF），粘性定位
高度：桌面端约 60px
左侧：Nike Swoosh 标志（24x24px SVG）
中间：类别链接（新品与精选、男款、女款、童款、特卖），16px/500 Helvetica Now Text Medium
右侧：搜索（24px 圆角输入框）、收藏、购物车图标
悬停：文字颜色变为灰色-500（#707072）
移动端：汉堡菜单，全屏叠加层
顶部横幅：深色背景（#111111）白色文字的促销信息栏

图像处理

英雄图像：全出血，无边框圆角，边缘到边缘
产品网格：正方形（1:1）或 4:3 宽高比，无边框圆角
类别卡片：16:9 或 4:3，全出血并带文字叠加层
图像占位符：灰色-100（#F5F5F5）纯色背景
懒加载：原生 loading="lazy"，骨架屏使用 #F5F5F5 背景
产品悬停：切换至次级图像（正面 → 侧面视图）

促销横幅

全宽深色（#111111）背景，白色文字
紧凑内边距（垂直 8-12px）
文字居中，12px/500 Helvetica Now Text Medium
用于运费促销、会员权益、特卖公告

5. 布局原则

间距系统

基础单位：4px（主网格为 8px 的倍数）

令牌	值	用途
space-1	4px	紧凑图标间距、行内间距
space-2	8px	基础单位、按钮图标间距
space-3	12px	卡片内边距、紧凑外边距
space-4	16px	标准内边距、导航间距
space-5	20px	产品卡片间距
space-6	24px	章节内边距、网格间距
space-7	32px	章节分隔
space-8	48px	主要章节内边距
space-9	64px	英雄区域内边距
space-10	80px	大型章节间距

网格与容器

最大容器宽度：1920px
标准内容宽度：约 1440px，带水平内边距
产品网格：桌面端 3 列，平板端 2 列，移动端 1 列
类别网格：3 列，全出血图像
网格间距：产品卡片之间 4-12px（刻意紧凑）
水平内边距：桌面 48px，平板 24px，移动 16px

空白哲学

Nike 的空白策略刻意激进——不是时尚品牌那种奢侈的呼吸感，而是一种压缩的、高密度的方式，用内容或刻意的留白填满每一个像素。产品网格使用最小间距（4-12px）营造丰盛感和选择感。章节分隔较宽（48-80px）以区分购物情境。整体效果是一家感觉商品琳琅满目却保持可导航性的商店——如同一家布局良好的运动超市。

边框圆角比例

值	上下文
0px	产品图像、英雄摄影（锐利边缘）
8px	表单输入（非搜索）
18px	小型交互元素
20px	容器、带 UI 内容的卡片
24px	搜索输入、中等药丸形
30px	按钮、标签、筛选（完整药丸形）
50%	圆形图标按钮、头像占位符

6. 深度与层级

层级	处理	用途
扁平	无阴影，无边框	一切的默认状态
分隔线	`0px -1px 0px 0px #E5E5E5 inset`	章节之间的细微嵌入线
焦点	`0 0 0 2px rgba(39, 93, 197, 1)`	键盘焦点环
叠加层	摄影上的深色遮罩	图像上文字的可读性

Nike 的层级哲学是激进的扁平化。没有卡片阴影，没有悬停上浮，没有浮动元素。深度完全通过颜色传递——深色区块后退，浅色区块前进，灰度变化表示状态变化。这种扁平感强化了运动、务实的品牌个性：没有视觉装饰，只有直接的沟通。整个系统中唯一的"阴影"是 1px 嵌入分隔线和无障碍必需的焦点环。

装饰性深度

英雄摄影叠加层：全出血摄影上的深色渐变遮罩，确保文字可读性
产品背景渐变：英雄产品图背后的彩色背景（例如，红色鞋款置于红色渐变背景上）
横幅条：页面顶部的纯深色（#111111）促销条

7. 规范与禁忌

规范

所有主要文字使用 Nike 黑（#111111）——绝不使用纯黑 #000000
保持按钮药丸形（30px 圆角），限定为主要/次要变体
英雄区域使用全出血、边缘到边缘的摄影——图像不加边框圆角
让产品摄影提供所有色彩活力；保持 UI 单色调
大写 Nike Futura ND 仅用于展示标题（96px+）
保持紧凑的产品网格间距（4-12px）营造密集、丰盛的感觉
所有输入框和占位符背景使用灰色-100（#F5F5F5）
将颜色专门保留用于语义含义（红色=错误，绿色=成功，蓝色=链接）
所有交互文字元素使用字重 500（Medium）

禁忌

不为卡片添加阴影——Nike 的层级模型完全扁平
不为产品图像添加边框圆角——只有 UI 元素才有圆角
不为 UI 元素引入灰度以外的品牌颜色
不在 24px 以下使用 Nike Futura ND——它专属于展示字体
不添加悬停上浮效果——Nike 卡片悬停时不会产生动画
不为按钮或链接使用常规字重（400）——始终使用 500
不在 UI 元素后方添加彩色背景——颜色专用于产品场景
每张卡片不要超过两级文字层级（标题 + 正文）
不添加装饰性分隔线——1px 嵌入线是唯一的分隔线模式
不弱化对比度——Nike 的设计刻意将黑白对比推向最大值

8. 响应式行为

断点

名称	宽度	主要变化
移动端	<640px	单列，汉堡导航，展示文字缩小，紧凑 16px 内边距
小平板	640-768px	开始 2 列产品网格，导航仍折叠
平板	768-960px	2 列网格，类别卡片缩放，水平内边距 24px
小桌面	960-1024px	导航展开为完整水平，3 列产品网格
桌面	1024-1440px	完整布局，展开导航，3 列网格，48px 内边距
大桌面	>1440px	最大宽度容器居中，增加外边距，英雄图像全出血

触控目标

最小触控目标：44x44px（WCAG AAA）
移动端导航图标：48x48px 触控区域
产品卡片：整个表面均可点击
筛选药丸：最小 36px 高度，12px 内边距

折叠策略

导航：960px 以下完整类别链接 → 汉堡菜单；搜索、收藏、购物车图标保持可见
产品网格：3 列 → 960px 时 2 列 → 640px 时 1 列
英雄区域：展示文字从 96px → 64px → 48px 缩小；英雄图像在所有尺寸保持全出血
类别卡片：3 列 → 2 列 → 1 列，保持全出血图像
章节内边距：随视口缩小，80px → 48px → 32px → 24px
促销横幅：文字换行或截断，保持深色背景

图像行为

通过 Nike CDN（c.static-nike.com）使用宽度参数提供响应式图像
产品图像：srcset 多分辨率（w_320、w_640、w_960、w_1920）
英雄图像：所有断点均全出血，宽高比变化（桌面 16:9 → 移动端 4:3）
懒加载：原生 loading="lazy"，加载期间灰色-100 占位符
艺术指导：英雄裁剪在桌面端和移动端构图之间变化

9. 智能体提示指南

快速颜色参考

主要 CTA：Nike 黑（#111111）
背景：白色（#FFFFFF）
次要表面：浅灰（#F5F5F5）
标题文字：Nike 黑（#111111）
正文文字/悬停：次要文字（#707072）
边框：次要边框（#CACACB）
错误：Nike 红（#D30005）
链接：链接蓝（#1151FF）

组件提示示例

"创建一个产品英雄区，全出血边缘到边缘摄影，无边框圆角，深色渐变叠加层用于文字，96px/500 巨幅大写标题采用 Nike Futura 风格，行高 0.90，Nike 黑（#111111）药丸形按钮（30px 圆角）"
"设计一个 3 列产品卡片网格，正方形图像（无边框圆角），卡片间距 4px，产品名称 16px/500 Nike 黑（#111111），价格 14px/500，次要文字灰色-500（#707072）"
"构建一个粘性白色导航栏，左对齐标志，中间类别链接 16px/500（#111111），悬停颜色 #707072，右对齐搜索（24px 圆角，#F5F5F5 背景）、收藏和购物车图标"
"创建一个促销横幅条，#111111 背景，白色 12px/500 居中文字，垂直内边距 8px——全宽，无边框圆角"
"设计一个次要描边按钮，透明背景，1.5px #CACACB 边框，30px 药丸圆角，16px/500 #111111 文字，悬停时边框加深至 #707072"

迭代指南

使用此设计系统精修已有界面时：

一次专注于一个组件
引用本文档中的具体颜色名称和十六进制代码
记住：产品摄影是颜色——UI 保持单色调
使用灰度进行状态变化：#F5F5F5 → #E5E5E5 → #CACACB → #707072
如果 UI 中某处感觉过于丰富多彩，它很可能确实如此——Nike 保持 UI 灰度
展示字体（Nike Futura）应始终大写，绝不低于 24px
正文字体（Helvetica Now）交互元素几乎应始终使用字重 500

19 KiB Raw Blame History Unescape Escape