Uber

難度:
行業風格
Uber 效果預覽

效果預覽

設計規範

由官方品牌資料與該風格提示詞推導出的關鍵 token,可複製或搭配下方 DESIGN.md 使用。

顏色

  • primary品牌色

    主要操作與強調

  • on-primary推導

    主色上的文字

  • secondary推導

    標籤、徽章與次要強調

  • on-secondary推導

    輔色上的文字

  • neutral人工確認

    頁面底色

  • on-neutral推導

    底色上的文字

  • surface推導

    卡片、面板與浮層

  • on-surface推導

    表面上的文字

  • border推導

    邊框與分隔線

圓角與形狀

提示詞
sm · 4px
md · 8px
lg · 12px
full

互動元件使用全圓角膠囊形狀。

間距

推導
  • sm8px
  • md12px
  • lg24px

陰影與層級

提示詞

層級以柔和、低對比的陰影表達。

字型

推導
  • Ag

    標題 32px · 粗體

    Inter

  • Ag

    內文 16px · 一般

    Inter

  • Ag

    標籤 13px · 中等

    Inter

Uber 是全球出行與外送平台,連結乘客、司機、外送員與商家。其介面建立在純黑白之上——UI 外殼幾乎不出現中間灰,UberMove 與 UberMoveText 兩款專屬幾何無襯線承擔全部層級;按鈕、標籤、導覽一律 999px 膠囊,暖色人文插畫與冷峻單色介面形成反差,卡片只用 0.12-0.16 透明度的極輕陰影。適合出行、在地服務與平台型產品。

Uber媒體與消費

提示詞範本

基礎範本
Design a Uber-inspired interface. - Pure black-and-white foundation with virtually no mid-tone grays in the UI chrome; - UberMove (headlines) + UberMoveText (body/UI) -- proprietary geometric sans-serif family; - Pill-shaped everything: buttons, chips, nav items all use 999px border-radius; - Warm, human illustrations contrasting the stark monochrome interface; - Card-based layout with whisper-soft shadows (0.12-0.16 opacity). Colors: #000000, #ffffff, #e2e2e2, #f3f3f3 with #0000ee accent. Typography: - Background: Uber Black (.

變體提示詞

📱 行動裝置
Design a mobile app with Uber aesthetics. Use Uber color identity with #0000ee accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Uber style. Use Uber color identity with #0000ee accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Uber design language. Use Uber color identity with #0000ee accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Uber visual identity. Use Uber color identity with #0000ee accents. Compelling, conversion-focused.

使用範例

Uber 應用程式

Web 端
Build a web app with Uber design language and #0000ee color system.

Uber 儀表板

儀表板
Create a dashboard using Uber style with data visualization and - Background: Uber Black ( typography.

✅ 適用情境

  • 消費級產品
  • 出行平台介面
  • 高對比品牌頁

❌ 不適用情境

  • 柔和生活品牌
  • 復古裝飾網站

DESIGN.md 檔案

符合 design.md 開放格式的設計系統描述,可複製或下載後交給 AI 程式設計工具使用。

下載