OpenDesign·你的设计资产库

网页参考

Uber

一个高实用性的消费者出行平台,在高端极简主义与大胆的排版清晰度之间取得平衡。

ProductApp UICleanGeometricRestraint

封面待补录,可通过原站查看设计。

01

设计气质 DNA

出行交通服务全球化物流

一个简洁高效的机场航站楼——干净、功能性强、易于导航。

02

色彩

#000000Ink
#333333Ink soft
#ffffffBG
#f3f3f3BG soft
#efefefBG quiet
#5e5e5eMuted
rgba(0,0,0,0.12)Line

以高对比度的黑白单色为基础,辅以功能性的灰色以构建层次感和视觉深度。

03

字体

geometric-sans · humanist-sans

  • display56px · 500
  • h144px · 500
  • h236px · 500
  • body16px · 400
  • caption14px · 400

标题使用几何无衬线字体,字间距紧密,营造大胆、现代的视觉感受。 · 正文使用人文主义无衬线字体,确保在各种设备上都具有最佳可读性。 · 保持清晰的字重层级:标题使用 500,正文使用 400。 · 避免使用装饰性或手写体字体,以保持平台的功能性定位。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

一致的 4px 基础单位,确保视觉和谐与组件尺寸的可预测性。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 999px

rgba(0,0,0,0.16) 0px 2px 8px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

采用双栏主布局,左侧为突出的表单,右侧为说明性图像。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing

交互元素使用平滑的背景过渡效果。 · 悬停状态下的细微缩放和色彩变化。 · 模态窗口和覆盖层内容采用干净的淡入效果。

通过细微的背景色变化或透明度改变来指示可交互性。 · 通过背景色过渡提供即时的视觉反馈。

08

组件

  • button 胶囊形和矩形按钮,采用纯黑或纯白背景,搭配高对比度文本。
  • card 简洁的白色卡片,带有细微边框或阴影,用于服务探索。
  • chip 最小化使用标签,主要用于位置指示,采用胶囊形状。
  • input 简洁的文本输入框,圆角、细微边框和占位符文本。
  • hero 全宽主区域,包含大标题、功能性表单和辅助插图。

09

文案语气与禁用清单

  • 语气 自信、乐于助人且直截了当,强调便捷性和全球覆盖。
  • 标题风格 大胆、以行动为导向的陈述,清晰传达平台价值。
  • 按钮文案 直接且具指令性,使用明确的动词,如'立即开始'、'查看价格'或'注册'。
  • 不要使用多种强调色——截图显示采用严格的黑、白、灰色板。
  • 不要使用装饰性或手写体字体——截图显示使用干净的几何和人文主义无衬线字体。
  • 不要使用厚重的投影——截图显示使用细微、柔和的阴影来体现深度。
  • 不要使用复杂的渐变——截图显示使用纯色填充和简洁的背景图像。
  • 不要使用拥挤的布局——截图显示拥有充足的留白和清晰的板块分隔。
  • 不要使用俏皮或过于圆润的 UI 元素——截图显示使用功能性、略带圆润但专业的组件。
  • 避免: 避免使用过于技术性的术语或复杂的比喻。
  • 避免: 避免使用攻击性或过于随意的语言。
  • 避免: 避免过度使用感叹号或最高级形容词。

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是 Uber 面向消费者的网络平台,定位为一个高实用性、全球化的出行服务。其设计基因基于高对比度的单色板(#000000, #ffffff, #f3f3f3),并辅以干净、功能性的灰色。排版上,几何无衬线字体用于大胆的标题(字重 500),人文主义无衬线字体用于易读的正文(字重 400)。关键禁忌:绝不使用多种强调色(色板严格为单色系),避免装饰性字体(系统使用干净、专业的无衬线字体),绝不使用厚重的阴影或复杂的渐变(设计偏好细微的深度和纯色填充)。布局为简洁的双栏主区域,突出功能性表单,强调实用性和易用性。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。