workbuddy_skills/open-design/design-systems/uber/DESIGN-zh.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
- 内边距：标准舒适间距
- 焦点：无自定义焦点状态提取——依赖标准浏览器焦点圆环

### 导航
- 顶部固定导航，白色背景
- Logo：24x24px 黑色 Uber 字标/图标
- 链接：UberMoveText，14-18px，字重 500，Uber Black 色
- 胶囊形导航标签，Chip Gray（`#efefef`）背景，用于分类导航（"打车"、"接单"、"企业"、"Uber Eats"）
- 菜单切换：50% 圆角的圆形按钮
- 移动端：汉堡菜单模式

### 图像处理
- 温暖的手绘插画场景（功能区块不使用摄影照片）
- 插画风格：略带风格化的人物，插画内使用暖色调，富有当代感
- 英雄区块使用大胆摄影或插画作为全宽背景
- 应用下载 CTA 使用二维码
- 所有在卡片内的图像使用标准 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
- **页脚**：多列链接网格折叠为手风琴或单列堆叠
- **分类胶囊**：在较小屏幕上水平滚动溢出

### 图像行为
- 插画在容器内等比例缩放
- 英雄区图像保持纵横比，在较小屏幕上可能裁剪
- 二维码区块在移动端隐藏（应用下载改为直链商店链接）
- 卡片图像在所有尺寸下保持 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，构建平衡的双操作布局