受 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——特定语言替代字体

层级

原则

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 的倍数）

网格与容器

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

空白哲学

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

边框圆角比例

6. 深度与层级

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. 响应式行为

断点

触控目标

• 最小触控目标：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”

迭代指南

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

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