Uber 网站预览
Uber 网站预览

Uber

白色基底、胶囊形控件与扁平表面。

页面以白色为基底,搭配近黑色文字。字体采用 UberMove、UberMoveText。视觉特点包括胶囊形控件、扁平表面、分屏构图、网格布局。适合参考的场景:餐饮品牌介绍页、产品展示页。

查看原始网站

使用规范

建议采用

  • 所有填充按钮、导航栏、底部栏均使用#000000——这三个黑色条带构成了系统的结构节奏。
  • 主标题使用UberMove字号52px、字重400;永不加粗至700。
  • 所有卡片、输入框和标准按钮使用8px圆角;仅在导航CTA和模式切换控件中使用9999px圆角。
  • 所有UI元素保持无色彩——让插图承载色彩,而非控件或文本。
  • 输入框使用1px #767676细线边框;永不使用阴影来实现分隔。
  • 默认垂直节奏为64px区块间距和16px元素间距。
  • 当卡片直接位于#ffffff背景页面上时,使用#f6f6f6作为卡片背景色。

建议避免

  • 不要在按钮、链接或交互控件中引入彩色强调色——该系统在UI层上刻意保持单色。
  • 不要在卡片、弹窗或输入框上使用阴影或投影——深度来自表面色彩的渐变,而非层级堆叠。
  • 不要将UberMove标题加粗超过400字重;系统以正常字重表达,而非显示加粗。
  • 不要在卡片或输入框上使用9999px圆角——圆角仅保留用于导航CTA和行程模式切换控件。
  • 不要使用居中正文;所有文本始终在最大1200px容器内左对齐。
  • 不要让插图溢出其边界面板或与周围文本重叠。
  • 不要在标签条之外使用#9dcdd6青绿色——该色仅用于激活状态的信号,非通用强调色。