精选 · 开放 · 免费
Waymo
一个为领先自动驾驶技术平台打造的、干净、专业且注重信任感的设计。
automotiveav
01
设计气质 DNA
自主安全易用可信赖可持续
一家高端、值得信赖的科技公司，业务横跨汽车与软件领域。
02
色彩
#006feeAccent
#23233cInk
#ffffffBG
#f2f2f2BG soft
#808080Muted
rgba(35, 35, 60, 1.0)Line
高对比度且专业，使用深海军蓝作为主要文本色，鲜明蓝色作为交互强调色。
03
字体
humanist-sans · monospace
- display
40px · 500 - h2
24px · 500 - body
16px · 400
所有字体都使用紧凑的负字间距。 · 标题字体加粗且字号较大，而正文字体则保持高度可读性。 · 文本颜色严格限定为深海军蓝墨色或深色背景上的白色。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
标准4px网格，通过充裕的留白形成清晰的视觉分组。
05
表面 (圆角 / 阴影 / 边线)
sm · 3px
md · 8px
lg · 12px
pill · 999px
按钮使用2px实线边框，提供清晰的交互提示。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中容器，配有标准顶部导航、分区式主内容区域和堆叠的全宽内容块。
07
动效与交互
150msmicro
400mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
UI元素揭示使用平滑的淡入和位移动画。 · 交互元素使用微妙的hover过渡效果。 · 分组元素使用错开的入场动画。
按钮和链接使用微妙的透明度变化或背景色偏移。 · 即时响应，带有微妙的状态过渡。
08
组件
- button 实心或描边按钮，具有充裕的内边距和尖角或微圆角边框。
- card 未突出使用，更多依赖分区文本和全宽图像。
- chip 未使用。
- input 未使用。
- hero 分区布局，一侧为大型标题，另一侧为描述性文本和行动号召（CTA），并配有醒目的主视觉图像。
09
文案语气与禁用清单
- 语气 自信、专业且以使命驱动。
- 标题风格 加粗、直接的陈述，强调安全与体验。
- 按钮文案 清晰、以行动为导向，并以邀请的形式呈现。
- 不要在UI元素上使用投影——截图显示的是完全扁平、干净的设计。
- 不要在主按钮上使用圆角——截图显示的是尖角或微圆角边缘。
- 不要使用多种相互竞争的强调色——截图显示的是严格的海军蓝、白色和单一蓝色强调色方案。
- 不要用密集的信息块使界面显得杂乱——截图显示的是充裕的留白和清晰的视觉层次。
- 不要对正文使用全大写——截图显示的是标准的大小写混合以利于阅读。
- 不要将深色模式作为主要界面——截图显示的是以浅色模式为主的设计。
- 避免: 模糊的营销术语
- 避免: 激进的销售语言
- 避免: 未经解释的技术复杂性
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Waymo的网站设计是一个干净、专业且注重信任感的布局，面向消费者自动驾驶平台。配色方案以深海军蓝墨色（#23233c）和纯净白色背景（#ffffff）为主导，使用鲜明的蓝色（#006fee）作为主要操作的强调色。字体是一组人文主义无衬线字体家族，特点是紧凑的负字间距，营造出现代且自信的感觉。关键设计约束包括保持扁平UI设计（无投影），使用充裕的留白来建立清晰的视觉层次，以及避免界面杂乱。设计语言克制而高端，专注于大尺寸摄影和加粗标题，以传达安全和科技领先感。
en · zh-CN · zh-TW · ja · ko