# 受 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"

### 迭代指南

使用此設計系統精修已有介面時：
1. 一次專注於一個元件
2. 引用本文件中的具體顏色名稱和十六進位代碼
3. 記住：產品攝影是顏色——UI 保持單色調
4. 使用灰度進行狀態變化：#F5F5F5 → #E5E5E5 → #CACACB → #707072
5. 如果 UI 中某處感覺過於豐富多彩，它很可能確實如此——Nike 保持 UI 灰度
6. 展示字體（Nike Futura）應始終大寫，絕不低於 24px
7. 正文字體（Helvetica Now）互動元素幾乎應始終使用字重 500