受 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 标题字重统一为 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. 深度与层次

阴影哲学：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. 响应式行为

断点

触摸目标

• 所有胶囊按钮：最小高度 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，构建平衡的双操作布局