# 受 Apple 啟發的設計系統

> Category: 媒體與消費電子
> 消費電子產品。高級的留白、SF Pro、電影感影像。

## 1. 視覺主題與氛圍

Apple 的網頁語言是一套精準的編輯式系統，在如畫廊般的沉靜與零售密度的資訊區塊之間交替切換。視覺語調始終克制：寬廣的中性畫布、低調的介面色彩，並把幾乎全部的表現重量交給產品影像。介面被刻意設計成隱身，好讓硬體、材質與外觀選項成為敘事的前景主角。

在所分析的五個頁面中，節奏一致卻並非單一不變。行銷介面（首頁與「環境」頁）採用電影感的黑與光分章手法，而商務介面（Store 與購買流程）則導入更緊湊的間距、更多功能性控制項，以及更密集的卡片堆疊，卻不破壞核心的品牌語法。結果是一套系統、兩種檔位：展示模式與交易模式。

字體排印是穩定器。SF Pro Display 以緊湊的行高與受控的字距撐起主視覺與商品陳列的層級，而 SF Pro Text 則負責產品中繼資料、導覽、篩選器與密集的選擇 UI。字體排印保持低調，但尺度範圍足夠寬廣，既能支撐看板級的主視覺訊息，也能容納微型的功能標籤。

**關鍵特徵：**
- 二元式分區節奏：深黑場景（`#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`

### 主色
- **絕對黑** (`#000000`)：沉浸式主視覺畫布、高戲劇張力的產品章節、深色 UI 錨點。
- **淡 Apple 灰** (`#f5f5f7`)：功能帶、比較區塊與編輯式轉場的主要淺色表面。
- **近黑墨色** (`#1d1d1f`)：淺色畫布上的主要文字與深色填充控制項色彩。

### 輔色與強調色
- **Apple 動作藍** (`#0071e3`)：主要動作填充與聚焦訊號的品牌強調色。
- **內文連結藍** (`#0066cc`)：針對長篇可讀性最佳化的行內連結色彩。
- **高亮度連結藍** (`#2997ff`)：在較深場景上需要更強對比時所用的明亮連結處理。

### 表面與背景
- **純白畫布** (`#ffffff`)：零售／產品清單背景與密集的交易區段。
- **石墨表面 A** (`#272729`)：深色卡片與媒體控制情境層。
- **石墨表面 B** (`#262629`)：用於控制項分組的略深深色功能層。
- **石墨表面 C** (`#28282b`)：抬升的深色支援表面。
- **石墨表面 D** (`#2a2a2c`)：在更豐富的深色場景中用於分隔的最深抬升層級。

### 中性色與文字
- **次要中性灰** (`#6e6e73`)：內文次要文案、輔助說明、第三層中繼資料。
- **柔和邊框灰** (`#d2d2d7`)：分隔線、細緻外框與低調的功能性包覆。
- **中等邊框灰** (`#86868b`)：產品配置與篩選情境中較強的欄位外框。
- **功能性深灰** (`#424245`)：商店情境中深中性文字／表面的交界用色。

### 語意與強調
- **選取／聚焦訊號** (`#0071e3`)：行銷與商務情境間共用的聚焦與已選取狀態訊號。
- **錯誤／警告／成功**：在擷取的介面集合中，未一致地觀察到明確的語意調色盤。

### 漸層系統
- 擷取的頁面壓倒性地以純色表面驅動。視覺豐富度來自攝影與外觀表面的呈現，而非持續性的 UI 漸層。

## 3. 字體排印規則

### 字型家族
- **Display 家族：** `SF Pro Display`，備援 `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
- **Text 家族：** `SF Pro Text`，備援 `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
- **用途分工：** Display 家族負責主視覺／產品標題與商品陳列標題；Text 家族負責導覽、控制項、標籤與密集的商務文案。

### 層級
| 角色 | 尺寸 | 字重 | 行高 | 字距 | 備註 |
|------|------|--------|-------------|----------------|-------|
| Hero Display XL | 80px | 600 | 1.00-1.05 | -1.2px | 「環境」／商店主視覺尺度 |
| 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 | 密集的中繼資料與法律輔助文字 |

### 原則
- **跨頁面類型的連續性：** 相同的字體排印 DNA 貫穿電影感的發表與產品購買流程，避免行銷與商務之間出現品牌斷裂。
- **大尺度下的壓縮：** Display 層級採用緊湊的行距與受控的字距，營造出機械感與產品優先的觀感。
- **零售深度下的可讀密度：** SF Pro Text 在緊湊度與足夠的垂直節奏之間取得平衡，以容納長產品清單與選項矩陣。
- **度量分明的字重階梯：** 600 是主導的強調字重；700 選擇性出現；300 在較大行中節制使用以製造對比。

### 關於字型替代方案的註記
- 最接近的免費可得替代方案：`Inter` 用於文字密集的實作，而以 `Inter Tight` 近似 `SF Pro Display-like` 的量度來處理標題。
- 替代時，將內文尺寸的行高略微增加（+0.02 到 +0.06），並降低負字距的強度以維持可讀性。

## 4. 元件樣式

### 按鈕
- **主要填充動作：** `#0071e3` 背景、`#ffffff` 文字、8px 圓角、緊湊的水平內距（常見為 8px 15px）。用於果斷的購買／前進動作。
- **深色填充動作：** `#1d1d1f` 背景、`#ffffff` 文字、8px 圓角。當淺色表面需要克制的高對比主要動作時使用。
- **膠囊／圓角矩形動作家族：** 大型圓角矩形動作採用 `18px`-`56px` 圓角，極端膠囊連結則採用 `980px`。確立 Apple 柔和而精準的行動呼籲輪廓。
- **功能性篩選器／按鈕外殼：** 淺色外殼（`#fafafc` 或半透明白）搭配細緻的灰色邊框（`#d2d2d7` / `#86868b`），用於密集的配置情境。
- **按下行為：** 啟用中的控制項通常會略微縮小尺度或微移填充色，以表示實體按壓的確認。

### 卡片與容器
- **編輯式／產品卡片：** 在 `#f5f5f7` 或白色區域上的淺色卡片，框架極簡且以影像為先的構圖。
- **深色功能性卡片：** 石墨層級（`#272729` 到 `#2a2a2c`）用於覆蓋層、媒體控制項與深色情境模組。
- **配置器面板：** 圓角容器（通常為 12px-18px），邊框界定清晰卻克制。
- **輪播／聚光模組：** 較大的圓角外殼（`28px`-`36px`），用於精選內容通道。

### 輸入與表單
- **零售輸入欄位：** 半透明或白色背景、深色文字（`#1d1d1f`）、以邊框為主的包覆（`#86868b`）。
- **選擇控制項：** 圓形／切換式的控制項幾何頻繁出現於產品選擇介面中。
- **密度策略：** 表單欄位在視覺上保持安靜，以維持裝置影像與定價層級的主導地位。

### 導覽
- **全域行銷導覽：** 緊湊的深色半透明列，配上小尺寸文字連結與克制的圖示。
- **商店／子商店導覽層：** 額外的功能列、晶片與分段控制項，用於收斂類別與產品。
- **連結層級：** 連結藍色仍是主要的互動訊號，而中性文字支援密集的導覽集合。

### 影像處理
- **物件優先攝影：** 硬體與配件在受控的純色表面上被置於前景。
- **高擬真的外觀呈現：** 反射／材質細節是視覺說服力的核心。
- **混合構圖：** 滿版主視覺場景與圓角零售卡片及緊密裁切的商品陳列縮圖並存。

### 其他特色元件
- **產品配置器矩陣：** 選項堆疊與選擇器，結合晶片、單選式控制項，以及情境化的定價／摘要區塊。
- **輪播控制圓點／箭頭：** 在低調覆蓋層中的圓形控制詞彙，用於畫廊的推進。
- **「環境」故事面板：** 將編輯式字體排印與電影感的產品／環境視覺融合的敘事章節。

## 5. 版面原則

### 間距系統
- 基本單位實質上是 `8px`，但系統支援密集的微步進以供精準對齊。
- 跨頁面頻繁重複使用的間距值：`2`、`4`、`6`、`7`、`8`、`9`、`10`、`12`、`14`、`17`、`20` px。
- 在行銷與零售流程中皆可見的通用節奏常數：以 `8px` 為單位的骨架，搭配 `14-20px` 的功能性間隔用於元件內距與清單間距。

### 網格與容器
- **展示頁面：** 大型中央欄位，配上寬廣的水平喘息空間與滿寬的色塊章節。
- **商務頁面：** 較緊湊的多欄產品與控制網格，搭配頻繁的模組化堆疊。
- **容器行為：** 受約束的可讀核心，在桌面寬度下搭配寬裕的外側邊距。

### 留白哲學
- **場景節奏：** 主要視覺章節採用寬廣的上下喘息空間。
- **必要處的資訊壓縮：** 零售頁面刻意壓縮間距，以在每個視窗中揭露更多可操作的資訊。
- **以對比主導的分隔：** 區段轉場更仰賴表面變化，而非裝飾性分隔線。

### 邊框圓角尺度
- **5px：** 微型功能連結／標籤與細小外殼。
- **8px-12px：** 標準控制項與緊湊欄位。
- **16px-18px：** 卡片、模組框架與商務面板。
- **28px-36px：** 較大型的模組與聚光容器。
- **56px / 100px / 980px：** 膠囊、大型膠囊形與標誌性的細長 CTA 形態。
- **50%：** 圓形媒體與選擇控制項。

## 6. 深度與層級

| 層級 | 處理方式 | 用途 |
|------|-----------|-----|
| 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 偏好以色調對比、表面層級與構圖層次來取代厚重的陰影堆疊。

### 裝飾性深度
- 裝飾性深度主要由攝影擬真與材質呈現所創造，而非合成的 UI 效果。
- 半透明覆蓋層與玻璃感的功能列在導覽與控制項中提供溫和的氛圍層次。

## 7. 該做與不該做

### 該做
- 以中性三色組（`#000000`、`#f5f5f7`、`#ffffff`）作為結構基礎。
- 將藍色強調色保留給真正的動作與導覽語意。
- 保持字體排印緊湊而審慎，尤其在 Display 尺度上。
- 為控制項與關鍵動作維持膠囊／圓形的幾何語言。
- 讓產品影像承載視覺戲劇張力；保持介面色彩低調。
- 在密集的零售情境中使用以邊框為主的包覆，而非厚重的卡片裝飾。
- 在共用核心 token 的同時，維持展示模組與交易模組之間的清晰分隔。

### 不該做
- 不要引入與 Apple 藍競爭的廣泛次要強調調色盤。
- 不要在核心 UI 介面中過度使用陰影、發光效果或裝飾性漸層。
- 不要混用不相關的字型家族，或隨意放鬆字距。
- 不要把所有圓角都壓成單一圓角；Apple 使用有目的的圓角層級。
- 不要在商務模組上堆滿厚重邊框或喧鬧的視覺效果。
- 不要移除深色與淺色章節之間的中性對比節拍。
- 不要把行銷與購買流程當成兩套獨立的設計系統。

## 8. 響應式行為

### 斷點
| 名稱 | 寬度 | 關鍵變化 |
|------|-------|-------------|
| Small Mobile | 374px 及以下 | 收緊的零售控制項、單欄產品堆疊 |
| Mobile | 375px-640px | 單欄模組、緊湊的動作列、濃縮的選擇器 |
| Tablet | 641px-833px | 擴展的卡片與 1-2 欄混合轉換 |
| Tablet Wide | 834px-1023px | 更穩定的多欄商品陳列、較大的文字區塊 |
| Desktop | 1024px-1240px | 完整的零售版面與產品比較結構 |
| Desktop Wide | 1241px-1440px | 行銷主視覺擴展與更寬廣的區段間距 |
| Large Desktop | 1441px+ | 最大化的章節喘息空間與寬廣的編輯式構圖 |

### 觸控目標
- 主要與次要動作通常以利於點按的膠囊／按鈕幾何呈現。
- 圓形媒體與選擇控制項符合行動情境中的最小可觸意圖。
- 密集的商務 UI 使用緊湊標籤，但透過周圍形狀內距維持清晰的點擊區域。

### 收合策略
- 行銷主視覺字體排印以離散層級向下縮放，同時保留層級對比。
- 產品與商務網格從多欄收合為堆疊卡片，並維持選擇器的持續可見性。
- 功能性導覽壓縮為更簡單的連結／控制項分組，同時保留關鍵動作。
- 選項／配置叢集改為垂直排序，以在小螢幕上維持購買流程的線性。

### 影像行為
- 產品影像在各斷點間保留比例與置中。
- 主視覺在行動裝置上仍占主導，文字圍繞媒體優先重新定位。
- 零售縮圖透過更緊密的裁切邏輯與更密集的卡片堆疊維持可辨識度。
- 隨著版面密度增加，以影像主導的模組持續錨定節奏。

## 9. Agent 提示指南

### 快速色彩參考
- 主要動作藍：**Apple 動作藍**（`#0071e3`）
- 行內連結藍：**內文連結藍**（`#0066cc`）
- 深色章節畫布：**絕對黑**（`#000000`）
- 淺色章節畫布：**淡 Apple 灰**（`#f5f5f7`）
- 淺色上的主要文字：**近黑墨色**（`#1d1d1f`）
- 次要文字：**次要中性灰**（`#6e6e73`）
- 零售柔和邊框：**柔和邊框灰**（`#d2d2d7`）
- 零售強邊框：**中等邊框灰**（`#86868b`）

### 範例元件提示
- 「設計一個 Apple 風格的產品主視覺，置於黑色畫布（`#000000`）上，搭配 SF Pro Display semibold 標題（48-56px）、簡潔的輔助文案，以及兩個使用 `#0071e3` 與 `#1d1d1f` 的膠囊 CTA。」
- 「在白色（`#ffffff`）上建立一個商務配置面板，搭配 18px 圓角卡片、`#86868b` 邊框欄位、SF Pro Text 17px 內文，以及緊湊的選項選擇器。」
- 「建立一個商品陳列卡片網格，在 `#f5f5f7` 與白色表面間交替，採用影像優先的卡片、克制的陰影，以及 14-17px 的 SF Pro Text 中繼資料。」
- 「產生一個輪播控制叢集，使用圓形按鈕（50% 圓角）、低調的灰色覆蓋層，以及清晰的啟用回饋以供畫廊導覽。」
- 「組合一個行銷 + 零售混合的頁面節奏：深色展示章節 -> 淺色功能章節 -> 密集產品清單模組，同時只在動作與連結上保留藍色強調色。」

### 迭代指南
1. 先鎖定中性基礎（`#000000`、`#f5f5f7`、`#ffffff`），再調整強調色。
2. 讓藍色強調色保持稀少且有目的；若一切皆藍，層級便會崩潰。
3. 依此順序調整字體排印：Display 尺度、內文可讀性，然後是微型標籤。
4. 依元件類別（欄位、卡片、膠囊、圓形）匹配圓角，而非一體適用的圓化。
5. 從展示區段移向商務區段時，逐步增加密度。
6. 在每次修訂後，驗證產品影像仍是最強的視覺層。

### 已知缺口
- 在擷取的頁面集合中，未一致地觀察到明確的語意狀態色彩（錯誤／警告／成功）。
- 某些互動微狀態因模組而異，未以通用系統 token 的形式呈現。
- 少數零售模組暴露了情境特定的字體排印覆寫，這些並未出現在全部五個頁面中。