workbuddy_skills/open-design/design-systems/uber/DESIGN-zh-tw.md

# 受 Uber 啟發的設計系統

> Category: 媒體與消費
> 出行平台。大膽的黑白配色、緊湊的字體、都市活力。

## 1. 視覺主題與氛圍

Uber 的設計語言是自信極簡主義的典範——一個黑白宇宙，每一個像素都有其用途，沒有任何裝飾是無端存在的。整體體驗建立在鮮明的二元對立之上：純黑（`#000000`）與純白（`#ffffff`），幾乎沒有任何中間灰色來稀釋訊息。這不是一個尚未完成設計的新創公司那種貧瘠的極簡主義——這是一個足夠成熟的品牌所刻意為之的克制，成熟到可以用低語傳達一切。

標誌性字體 UberMove 是一款專有的幾何無襯線字體，具有鮮明的方形工程感。52px 的 UberMove Bold 標題如同廣告牌般有份量——權威、直接、毫不妥協。配套字體 UberMoveText 以中等字重（500）處理正文和按鈕，字形略柔和、可讀性更強。兩者共同構建了一套排版系統，感覺如同交通地圖：清晰、高效、專為快速瀏覽而生。

Uber 設計真正與眾不同之處，在於將全出血攝影與插畫和膠囊形互動元素（999px 圓角半徑）搭配使用。導航標籤、CTA 按鈕和分類選擇器都共享這種膠囊造型，創造出一套觸感友好、拇指操作順手的介面語言，讓人一眼即認出是 Uber。插畫——溫暖、略帶風格化的司機、乘客與城市風貌場景——為原本可能冰冷的單色系系統注入了人情味。頁面在白色內容區塊與全黑頁腳之間交替，卡片式版面使用盡可能輕柔的陰影（rgba(0,0,0,0.12-0.16)），在不破壞扁平美感的前提下製造微妙的層次感。

**關鍵特徵：**
- 純黑白基礎，UI 主體結構中幾乎不使用中間灰色
- UberMove（標題）+ UberMoveText（正文/UI）——專有幾何無襯線字體家族
- 萬物膠囊化：按鈕、標籤、導航項目均使用 999px 圓角半徑
- 溫暖的人文插畫與冷峻的單色介面形成對比
- 卡片式版面配以極輕柔的陰影（不透明度 0.12-0.16）
- 8px 間距網格，版面緊湊、資訊密度高
- 大膽攝影作品以全出血方式融入英雄區背景
- 黑色頁腳以高對比的深色環境錨定頁面

## 2. 色彩方案與角色

### 主色
- **Uber Black**（`#000000`）：定義品牌的顏色——用於主要按鈕、標題、導航文字和頁腳。不是「近黑」或「偏黑」，而是真正毫不妥協的純黑。
- **Pure White**（`#ffffff`）：主要介面底色與反色文字。用於頁面背景、卡片表面以及黑色元素上的文字。

### 互動與按鈕狀態
- **Hover Gray**（`#e2e2e2`）：白色按鈕的懸停狀態——乾淨、冷靜的淺灰，提供清晰回饋而不帶溫度。
- **Hover Light**（`#f3f3f3`）：浮起白色按鈕的微妙懸停——幾乎感受不到的灰，輕柔的互動回饋。
- **Chip Gray**（`#efefef`）：次要/篩選按鈕及導航標籤的背景——中性、超淺的灰色。

### 文字與內容
- **Body Gray**（`#4b4b4b`）：次要文字和頁腳連結——無冷暖偏向的純中灰色。
- **Muted Gray**（`#afafaf`）：第三層文字、弱化的頁腳連結和佔位內容。

### 邊框與分隔
- **Border Black**（`#000000`）：用於結構界定的細 1px 邊框——少量用於分隔線和表單容器。

### 陰影與深度
- **Shadow Light**（`rgba(0, 0, 0, 0.12)`）：標準卡片層次——為內容卡片提供羽量級的懸浮感。
- **Shadow Medium**（`rgba(0, 0, 0, 0.16)`）：浮動操作按鈕和疊加層稍強的層次感。
- **Button Press**（`rgba(0, 0, 0, 0.08)`）：次要按鈕啟用/按下狀態的內嵌陰影。

### 連結狀態
- **Default Link Blue**（`#0000ee`）：正文內容中帶底線的文字連結所用的標準瀏覽器藍色。
- **Link White**（`#ffffff`）：深色表面上的連結——用於頁腳和深色區塊。
- **Link Black**（`#000000`）：淺色表面上帶底線裝飾的連結。

### 漸層系統
- Uber 的設計**完全無漸層**。黑白二元對立和平鋪色塊構建了所有視覺層次。系統中任何地方都沒有漸層——每個表面都是純色，每次過渡都是硬邊界或陰影。

## 3. 字體規範

### 字體家族
- **標題/展示**：`UberMove`，備用字體：`UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`
- **正文/UI**：`UberMoveText`，備用字體：`system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`

*注意：UberMove 和 UberMoveText 是專有字體。外部實作可用 `system-ui` 或 Inter 作為最接近的替代。UberMove 的幾何方形比例可用 Inter 或 DM Sans 近似。*

### 層級

| 角色 | 字體 | 字級 | 字重 | 行高 | 備註 |
|------|------|------|--------|-------------|-------|
| 展示/英雄 | UberMove | 52px（3.25rem） | 700 | 1.23（緊湊） | 最大衝擊力，廣告牌級存在感 |
| 區塊標題 | UberMove | 36px（2.25rem） | 700 | 1.22（緊湊） | 主要區塊錨點 |
| 卡片標題 | UberMove | 32px（2rem） | 700 | 1.25（緊湊） | 卡片與功能標題 |
| 次級標題 | UberMove | 24px（1.5rem） | 700 | 1.33 | 次級區塊標題 |
| 小標題 | UberMove | 20px（1.25rem） | 700 | 1.40 | 緊湊標題、列表標題 |
| 導航/UI 大 | UberMoveText | 18px（1.13rem） | 500 | 1.33 | 導航連結、突出 UI 文字 |
| 正文/按鈕 | UberMoveText | 16px（1rem） | 400-500 | 1.25-1.50 | 標準正文、按鈕標籤 |
| 說明文字 | UberMoveText | 14px（0.88rem） | 400-500 | 1.14-1.43 | 後設資料、描述、小連結 |
| 微型文字 | UberMoveText | 12px（0.75rem） | 400 | 1.67（寬鬆） | 細則、法律文字 |

### 原則
- **粗體標題，中等正文**：UberMove 標題字重統一為 700（加粗）——每個標題都有廣告牌般的衝擊力。UberMoveText 正文和 UI 文字使用 400-500，透過字重對比形成清晰的視覺層次。
- **緊湊標題行高**：所有標題行高在 1.22-1.40 之間——緊湊有力，為快速瀏覽而設計，而非細讀。
- **功能性排版**：沒有任何裝飾性文字處理。沒有字間距、沒有文字變換、沒有裝飾性尺寸。每個文字元素都直接服務於傳達目的。
- **兩款字體，嚴格分工**：UberMove 專用於標題，UberMoveText 專用於正文、按鈕、連結和 UI。邊界從不逾越。

## 4. 元件樣式

### 按鈕

**主要黑色（CTA）**
- 背景：Uber Black（`#000000`）
- 文字：Pure White（`#ffffff`）
- 內距：10px 12px
- 圓角：999px（完整膠囊）
- 外框：無
- 焦點：內嵌圓環 `rgb(255,255,255) 0px 0px 0px 2px`
- 主要操作按鈕——粗體、高對比、不可錯過

**次要白色**
- 背景：Pure White（`#ffffff`）
- 文字：Uber Black（`#000000`）
- 內距：10px 12px
- 圓角：999px（完整膠囊）
- 懸停：背景變為 Hover Gray（`#e2e2e2`）
- 焦點：背景變為 Hover Gray，出現內嵌圓環
- 用於深色表面或與主要黑色按鈕並列的次要操作

**標籤/篩選**
- 背景：Chip Gray（`#efefef`）
- 文字：Uber Black（`#000000`）
- 內距：14px 16px
- 圓角：999px（完整膠囊）
- 啟用：內嵌陰影 `rgba(0,0,0,0.08)`
- 導航標籤、分類選擇器、篩選切換

**浮動操作**
- 背景：Pure White（`#ffffff`）
- 文字：Uber Black（`#000000`）
- 內距：14px
- 圓角：999px（完整膠囊）
- 陰影：`rgba(0,0,0,0.16) 0px 2px 8px 0px`
- 變換：`translateY(2px)` 輕微偏移
- 懸停：背景變為 `#f3f3f3`
- 地圖控件、返回頂部、浮動 CTA

### 卡片與容器
- 背景：白色頁面上使用 Pure White（`#ffffff`）；無明顯卡片背景差異化
- 邊框：預設無——卡片由陰影而非描邊定義
- 圓角：標準內容卡片 8px；精選/推廣卡片 12px
- 陰影：標準層次 `rgba(0,0,0,0.12) 0px 4px 16px 0px`
- 卡片內容密度高，內距極少
- 圖片主導卡片使用全出血影像，文字疊加或置於下方

### 輸入框與表單
- 文字：Uber Black（`#000000`）
- 背景：Pure White（`#ffffff`）
- 邊框：1px 純黑（`#000000`）——唯一明顯出現邊框的地方
- 圓角：8px
- 內距：標準舒適間距
- 焦點：無自訂焦點狀態提取——依賴標準瀏覽器焦點圓環

### 導航
- 頂部固定導航，白色背景
- 標誌：24x24px 黑色 Uber 字標/圖示
- 連結：UberMoveText，14-18px，字重 500，Uber Black 色
- 膠囊形導航標籤，Chip Gray（`#efefef`）背景，用於分類導航（「叫車」、「接單」、「企業」、「Uber Eats」）
- 選單切換：50% 圓角的圓形按鈕
- 行動裝置：漢堡選單模式

### 圖像處理
- 溫暖的手繪插畫場景（功能區塊不使用攝影照片）
- 插畫風格：略帶風格化的人物，插畫內使用暖色調，富有當代感
- 英雄區塊使用大膽攝影或插畫作為全寬背景
- 應用程式下載 CTA 使用 QR Code
- 所有在卡片內的影像使用標準 8px 或 12px 圓角

### 特色元件

**分類膠囊導航**
- 水平排列的膠囊形按鈕用於頂級導航（「叫車」、「接單」、「企業」、「Uber Eats」、「關於」）
- 每個膠囊：Chip Gray 背景，黑色文字，999px 圓角
- 啟用狀態：黑色背景加白色文字（反色）

**雙操作英雄區**
- 分割英雄區：左側文字/CTA，右側地圖/插畫
- 並排兩個輸入框用於出發地/目的地
- 黑色膠囊「查看價格」CTA 按鈕

**提前計劃卡片**
- 推廣「Uber Reserve」和行程規劃等功能的卡片
- 以插畫為主，溫暖、以人為中心的影像
- 底部黑底白字 CTA 按鈕

## 5. 版面原則

### 間距系統
- 基礎單位：8px
- 間距刻度：4px、6px、8px、10px、12px、14px、16px、18px、20px、24px、32px
- 按鈕內距：10px 12px（緊湊）或 14px 16px（舒適）
- 卡片內距：約 24-32px
- 區塊垂直間距：充裕但高效——主要區塊之間約 64-96px

### 網格與容器
- 最大容器寬度：約 1136px，置中
- 英雄區：左側文字、右側視覺的分割版面
- 功能區塊：兩欄卡片網格或全寬單欄
- 頁腳：黑色背景上的多欄連結網格
- 全寬區塊延伸至視埠邊緣

### 留白哲學
- **高效而非寬鬆**：Uber 的留白是功能性的——足以分隔，絕不讓人感到空曠。這是交通系統式的間距：緊湊、清晰、目的明確。
- **資訊密集的卡片**：卡片以最少的內部間距緊密排布資訊，依靠陰影和圓角定義邊界。
- **區塊喘息空間**：主要區塊獲得充裕的垂直間距，但區塊內部元素緊密分組。

### 圓角刻度
- 尖銳（0px）：互動元素中不使用直角
- 標準（8px）：內容卡片、輸入框、列表框
- 舒適（12px）：精選卡片、較大容器、連結卡片
- 完整膠囊（999px）：所有按鈕、標籤、導航項目、膠囊
- 圓形（50%）：頭像圖片、圖示容器、圓形控件

## 6. 深度與層次

| 層級 | 處理方式 | 用途 |
|-------|-----------|-----|
| 平面（層級 0） | 無陰影，純色背景 | 頁面背景、內嵌內容、文字區塊 |
| 微妙（層級 1） | `rgba(0,0,0,0.12) 0px 4px 16px` | 標準內容卡片、功能區塊 |
| 中等（層級 2） | `rgba(0,0,0,0.16) 0px 4px 16px` | 懸浮卡片、疊加元素 |
| 浮動（層級 3） | `rgba(0,0,0,0.16) 0px 2px 8px` + translateY(2px) | 浮動操作按鈕、地圖控件 |
| 按下（層級 4） | `rgba(0,0,0,0.08) inset`（999px 擴散） | 按鈕啟用/按下狀態 |
| 焦點圓環 | `rgb(255,255,255) 0px 0px 0px 2px inset` | 鍵盤焦點指示器 |

**陰影哲學**：Uber 將陰影純粹用作結構工具，而非裝飾。陰影始終為極低不透明度（0.08-0.16）的黑色，製造分隔內容層所需的最低限度層次感。模糊半徑適中（8-16px）——足以自然，但絕不誇張。沒有彩色陰影、沒有疊加陰影堆疊、沒有環境光暈效果。深度更多透過黑白區塊對比來傳達，而非陰影層次。

## 7. 應做與禁忌

### 應做
- 使用純黑（`#000000`）和純白（`#ffffff`）作為主色調——這種強烈對比本身就是 Uber
- 所有按鈕、標籤和膠囊形導航元素使用 999px 圓角半徑
- 所有標題保持 UberMove Bold（700），達到廣告牌級衝擊力
- 使用極輕柔的陰影（不透明度 0.12-0.16）營造卡片層次——幾乎不可見
- 保持緊湊、資訊密集的版面風格——Uber 優先考慮效率而非寬鬆感
- 使用溫暖、以人為中心的插畫軟化單色介面
- 內容卡片使用 8px 圓角，精選容器使用 12px 圓角
- 導航和突出 UI 文字使用字重 500 的 UberMoveText
- 雙操作版面中將黑色主按鈕與白色次要按鈕搭配使用

### 禁忌
- 不要在 UI 主體結構中引入顏色——Uber 的介面嚴格限於黑、白、灰
- 不要在按鈕上使用小於 999px 的圓角——完整膠囊形狀是核心身份標識
- 不要使用濃重陰影或高不透明度的投影——深度效果應極度克制
- 不要使用襯線字體——Uber 的字體系統完全是幾何無襯線
- 不要創建留白過多的寬鬆版面——Uber 的密度是有意為之的
- 不要使用漸層或色彩疊加——每個表面都是平鋪純色
- 不要將 UberMove 用於正文，也不要將 UberMoveText 用於標題——層次是嚴格的
- 不要使用裝飾性邊框——邊框是功能性的（輸入框、分隔線）或不存在
- 不要用不純白或不純黑來軟化黑白對比——這種二元性是刻意為之的

## 8. 響應式行為

### 中斷點
| 名稱 | 寬度 | 關鍵變化 |
|------|-------|-------------|
| 小型行動裝置 | 320px | 最小版面，單欄，堆疊輸入框，緊湊字體 |
| 行動裝置 | 600px | 標準行動裝置，堆疊版面，漢堡導航 |
| 小型平板 | 768px | 開始出現兩欄網格，卡片版面擴展 |
| 平板 | 1119px | 完整平板版面，英雄內容並排顯示 |
| 小型桌機 | 1120px | 桌機網格啟動，水平導航標籤 |
| 桌機 | 1136px | 完整桌機版面，最大容器寬度，分割英雄區 |

### 觸控目標
- 所有膠囊按鈕：最小高度 44px（10-14px 垂直內距 + 行高）
- 導航標籤：寬裕的 14px 16px 內距，方便拇指點擊
- 圓形控件（選單、關閉）：50% 圓角確保大而易點的目標
- 卡片表面在行動裝置上作為全區域觸控目標

### 折疊策略
- **導航**：水平膠囊導航折疊為帶圓形切換按鈕的漢堡選單
- **英雄區**：分割版面（文字 + 地圖/視覺）堆疊為單欄——文字在上，視覺在下
- **輸入框**：並排的出發地/目的地輸入框垂直堆疊
- **功能卡片**：兩欄網格折疊為全寬堆疊卡片
- **標題**：52px 展示字級逐級縮小至 36px、32px、24px、20px
- **頁腳**：多欄連結網格折疊為手風琴或單欄堆疊
- **分類膠囊**：在較小螢幕上水平捲動溢出

### 圖像行為
- 插畫在容器內等比例縮放
- 英雄區影像保持縱橫比，在較小螢幕上可能裁切
- QR Code 區塊在行動裝置上隱藏（應用程式下載改為直連商店連結）
- 卡片影像在所有尺寸下保持 8-12px 圓角

## 9. Agent 提示指南

### 快速顏色參考
- 主要按鈕：「Uber Black（#000000）」
- 頁面背景：「Pure White（#ffffff）」
- 按鈕文字（黑色背景上）：「Pure White（#ffffff）」
- 按鈕文字（白色背景上）：「Uber Black（#000000）」
- 次要文字：「Body Gray（#4b4b4b）」
- 第三層文字：「Muted Gray（#afafaf）」
- 標籤背景：「Chip Gray（#efefef）」
- 懸停狀態：「Hover Gray（#e2e2e2）」
- 卡片陰影：「rgba(0,0,0,0.12) 0px 4px 16px」
- 頁腳背景：「Uber Black（#000000）」

### 示範元件提示
- 「在 Pure White（#ffffff）上建立英雄區，標題使用 52px UberMove Bold（700），行高 1.23。文字使用 Uber Black（#000000）。添加 Body Gray（#4b4b4b）副標題，16px UberMoveText 字重 400，行高 1.50。放置一個 Uber Black（#000000）膠囊 CTA 按鈕，純白文字，999px 圓角，內距 10px 12px。」
- 「設計分類導航列，包含水平膠囊按鈕。每個膠囊：Chip Gray（#efefef）背景，Uber Black（#000000）文字，14px 16px 內距，999px 圓角。啟用膠囊反色為 Uber Black 背景加純白文字。使用 UberMoveText 14px 字重 500。」
- 「在 Pure White（#ffffff）上建構功能卡片，8px 圓角，陰影 rgba(0,0,0,0.12) 0px 4px 16px。標題使用 UberMove 24px 字重 700，描述使用 Body Gray（#4b4b4b）16px UberMoveText。底部添加黑色膠囊 CTA 按鈕。」
- 「在 Uber Black（#000000）上建立深色頁腳，Pure White（#ffffff）標題文字，UberMove 20px 字重 700。頁腳連結使用 Muted Gray（#afafaf）14px UberMoveText。連結懸停變為純白。多欄網格版面。」
- 「設計浮動操作按鈕，Pure White（#ffffff）背景，999px 圓角，14px 內距，陰影 rgba(0,0,0,0.16) 0px 2px 8px。懸停時背景變為 #f3f3f3。用於返回頂部或地圖控件。」

### 迭代指南
1. 每次專注於**一個**元件
2. 引用嚴格的黑白色板——「使用 Uber Black（#000000）」而非「讓它深一點」
3. 始終為按鈕和膠囊指定 999px 圓角——這對 Uber 身份標識不可妥協
4. 明確描述字體家族——「標題用 UberMove Bold，標籤用 UberMoveText Medium」
5. 陰影使用「極輕柔陰影（rgba(0,0,0,0.12) 0px 4px 16px）」——絕不用濃重投影
6. 保持版面緊湊、資訊密集——Uber 追求高效，而非寬鬆
7. 插畫應溫暖且以人為本——描述「暖色調風格化人物」而非抽象形狀
8. 用白色次要按鈕搭配黑色 CTA，構建平衡的雙操作版面