160 lines
7.0 KiB
Markdown
160 lines
7.0 KiB
Markdown
|
# 受 Duolingo 啟發的設計系統
|
|||
|
|
|
|||
|
|
> Category: 效率與 SaaS
|
|||
|
|
> 語言學習平台。明亮的貓頭鷹綠、粗厚陰影、遊戲化的愉悅感。
|
|||
|
|
|
|||
|
|
## 1. 視覺主題與氛圍
|
|||
|
|
|
|||
|
|
Duolingo 是以視覺語言呈現的遊戲化設計。介面毫無保留地鮮亮，以**貓頭鷹綠**（`#58cc02`）為品牌主色，每個可互動元素底部都有粗厚的 4px 陰影，看起來像一個等待被按下的 3D 按鈕。頁面背景為白色（`#ffffff`），邊框為 2–3px 深灰色（`#e5e5e5`），整體系統讀起來就像一款 2015 年 iOS 應用以更好的層級感重生。
|
|||
|
|
|
|||
|
|
排版使用 **Feather Bold**（一種自訂圓角無襯線字體）用於介面框架，**Mona Sans**（或 Inter）用於正文。展示尺寸大而自信——Duolingo 從不低語。標題通常帶有綠色下劃線筆觸或置於綠色膠囊上，吉祥物 Duo（一隻綠色貓頭鷹）以活躍的插畫角色出現，而非靜態 logo。
|
|||
|
|
|
|||
|
|
形狀語言友好親切：卡片圓角 16–20px，按鈕 12px，標籤與進度條 9999px。圖示系統為填充、圓角風格，並按技能進行色彩編碼——每個課程介面都有一對一眼就能辨識的配色。
|
|||
|
|
|
|||
|
|
**關鍵特徵：**
|
|||
|
|
- 貓頭鷹綠（`#58cc02`）作為主導品牌色，在介面中佔據 30% 以上的面積
|
|||
|
|
- 每個按鈕底部有粗厚 4px 陰影（「觸覺按壓」可供性）
|
|||
|
|
- 2–3px 實線邊框，從不使用細線
|
|||
|
|
- Feather Bold（圓角展示字體）+ Mona Sans（正文）
|
|||
|
|
- 大而自信的文字——展示尺寸從 48px 起步並向上攀升
|
|||
|
|
- 吉祥物即角色：Duo 貓頭鷹出現在引導、錯誤、連擊等場景中
|
|||
|
|
- 連擊橙（`#ff9600`）和寶石粉（`#ce82ff`）作為次級品牌色
|
|||
|
|
|
|||
|
|
## 2. 色彩方案與角色
|
|||
|
|
|
|||
|
|
### 主色
|
|||
|
|
- **貓頭鷹綠**（`#58cc02`）：品牌主色、主要行動按鈕、正確答案。
|
|||
|
|
- **深貓頭鷹綠**（`#58a700`）：綠色按鈕的按壓/陰影色。
|
|||
|
|
- **淺貓頭鷹綠**（`#89e219`）：懸停狀態、柔和填充。
|
|||
|
|
- **淡貓頭鷹綠**（`#dbf8c5`）：柔和表面、成功橫幅。
|
|||
|
|
|
|||
|
|
### 次級強調色
|
|||
|
|
- **連擊橙**（`#ff9600`）：連擊計數器、火焰圖示、付費能量。
|
|||
|
|
- **深連擊橙**（`#cc7a00`）：橙色按壓狀態。
|
|||
|
|
- **寶石粉**（`#ce82ff`）：寶石貨幣、Super Duolingo。
|
|||
|
|
- **鰻魚藍**（`#1cb0f6`）：提示按鈕、資訊連結。
|
|||
|
|
- **紅衣主教紅**（`#ff4b4b`）：答錯、失去生命。
|
|||
|
|
- **蜜蜂黃**（`#ffc800`）：專業徽章、成就。
|
|||
|
|
|
|||
|
|
### 表面色
|
|||
|
|
- **雪白**（`#ffffff`）：主背景。
|
|||
|
|
- **鰻魚灰**（`#f7f7f7`）：區塊分隔、次級表面。
|
|||
|
|
- **天鵝灰**（`#e5e5e5`）：停用背景、內嵌塊。
|
|||
|
|
- **狼灰**（`#777777`）：深色分隔線、次要文字。
|
|||
|
|
|
|||
|
|
### 墨色與文字
|
|||
|
|
- **鰻魚黑**（`#3c3c3c`）：主要文字。
|
|||
|
|
- **狼灰**（`#777777`）：次要文字、說明文字。
|
|||
|
|
- **野兔灰**（`#afafaf`）：停用、佔位符。
|
|||
|
|
|
|||
|
|
### 邊框
|
|||
|
|
- **天鵝灰**（`#e5e5e5`）：標準 2px 邊框。
|
|||
|
|
- **野兔灰**（`#afafaf`）：懸停時的強調邊框。
|
|||
|
|
|
|||
|
|
## 3. 排版規則
|
|||
|
|
|
|||
|
|
### 字體家族
|
|||
|
|
- **展示 / UI / 標題**：`Feather Bold`，備用字體：`'DIN Round Pro', 'Helvetica Neue', sans-serif`
|
|||
|
|
- **正文 / 長文**：`Mona Sans`，備用字體：`'Helvetica Neue', system-ui, sans-serif`
|
|||
|
|
- **程式碼（少用，學校/管理場景）**：`JetBrains Mono`，備用字體：`ui-monospace, Menlo, monospace`
|
|||
|
|
|
|||
|
|
### 層級
|
|||
|
|
|
|||
|
|
| 角色 | 字體 | 尺寸 | 字重 | 行高 | 字間距 | 備註 |
|
|||
|
|
|------|------|------|--------|-------------|----------------|-------|
|
|||
|
|
| 展示 | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | 引導主視覺 |
|
|||
|
|
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | 頁面標題 |
|
|||
|
|
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | 版塊標題 |
|
|||
|
|
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | 卡片標題、課程列 |
|
|||
|
|
| 大正文 | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | 課程提示、說明 |
|
|||
|
|
| 正文 | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | 標準文段 |
|
|||
|
|
| 說明文字 | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | 經驗值計數、元資料 |
|
|||
|
|
| 按鈕 | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | 標準按鈕標籤 |
|
|||
|
|
| 連擊 | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | 連擊數字、火焰上 |
|
|||
|
|
|
|||
|
|
### 原則
|
|||
|
|
- **800 是預設值**：Feather Bold 在標題和按鈕中以 800 字重運行。在此系統中，700 看起來偏弱。
|
|||
|
|
- **大字號**：標題尺寸比典型產品品牌大 25–40%——自信即身份。
|
|||
|
|
- **圓潤字形**：每個字形都有柔和末端；鋒利襯線會破壞親和感契約。
|
|||
|
|
|
|||
|
|
## 4. 元件樣式
|
|||
|
|
|
|||
|
|
### 按鈕
|
|||
|
|
|
|||
|
|
**主要按鈕（貓頭鷹綠）**
|
|||
|
|
- 背景：`#58cc02`
|
|||
|
|
- 文字：`#ffffff`
|
|||
|
|
- 內邊距：14px 24px
|
|||
|
|
- 圓角：16px
|
|||
|
|
- 底部邊框：4px solid `#58a700`（粗厚陰影）
|
|||
|
|
- 懸停：背景 `#89e219`
|
|||
|
|
- 激活：向下位移 4px，底部邊框 0（按鈕「按下」）
|
|||
|
|
- 用途：「繼續」、「檢查」、主要行動。
|
|||
|
|
|
|||
|
|
**次要按鈕（白色帶底部陰影）**
|
|||
|
|
- 背景：`#ffffff`
|
|||
|
|
- 文字：`#777777`
|
|||
|
|
- 邊框：2px solid `#e5e5e5`
|
|||
|
|
- 底部邊框：4px solid `#e5e5e5`
|
|||
|
|
- 圓角：16px
|
|||
|
|
- 內邊距：14px 24px
|
|||
|
|
- 懸停：文字 `#3c3c3c`，邊框 `#afafaf`
|
|||
|
|
|
|||
|
|
**連擊橙按鈕**
|
|||
|
|
- 背景：`#ff9600`
|
|||
|
|
- 文字：`#ffffff`
|
|||
|
|
- 底部邊框：4px solid `#cc7a00`
|
|||
|
|
- 用途：連擊目標、「開始連擊」
|
|||
|
|
|
|||
|
|
**錯誤按鈕（紅衣主教紅）**
|
|||
|
|
- 背景：`#ff4b4b`
|
|||
|
|
- 文字：`#ffffff`
|
|||
|
|
- 底部邊框：4px solid `#cc3b3b`
|
|||
|
|
- 用途：答錯回饋。
|
|||
|
|
|
|||
|
|
### 卡片 / 課程格
|
|||
|
|
- 背景：`#ffffff`
|
|||
|
|
- 邊框：2px solid `#e5e5e5`
|
|||
|
|
- 底部邊框：4px solid `#e5e5e5`
|
|||
|
|
- 圓角：16px
|
|||
|
|
- 內邊距：16px
|
|||
|
|
- 懸停：上浮 2px，陰影 `0 4px 0 #d7d7d7`
|
|||
|
|
|
|||
|
|
### 技能樹節點（課程氣泡）
|
|||
|
|
- 尺寸：80×72px
|
|||
|
|
- 背景：技能色調（激活為綠色，鎖定為灰色）
|
|||
|
|
- 底部邊框：6px solid 深色變體
|
|||
|
|
- 圓角：50%（圓形）
|
|||
|
|
- 激活：每 1.6s 在 1.0 → 1.05 之間脈衝
|
|||
|
|
|
|||
|
|
### 輸入框
|
|||
|
|
- 背景：`#ffffff`
|
|||
|
|
- 邊框：2px solid `#e5e5e5`
|
|||
|
|
- 圓角：12px
|
|||
|
|
- 內邊距：12px 16px
|
|||
|
|
- 聚焦：邊框 `#1cb0f6`（鰻魚藍），光暈 `0 0 0 3px rgba(28, 176, 246, 0.2)`
|
|||
|
|
|
|||
|
|
### 進度條
|
|||
|
|
- 軌道：`#e5e5e5`
|
|||
|
|
- 填充：`#58cc02`（或連擊時使用 `#ff9600`）
|
|||
|
|
- 圓角：9999px
|
|||
|
|
- 高度：16px
|
|||
|
|
- 動畫填充：遞增時 320ms ease-out。
|
|||
|
|
|
|||
|
|
## 5. 間距與版面
|
|||
|
|
|
|||
|
|
- **基礎單位**：4px。比例：4, 8, 12, 16, 24, 32, 48, 64。
|
|||
|
|
- **容器**：最大 1080px，24px 邊距。
|
|||
|
|
- **課程樹欄**：寬 320px；在桌面端置中。
|
|||
|
|
|
|||
|
|
## 6. 動效
|
|||
|
|
|
|||
|
|
- **時長**：按鈕按壓 180ms；技能節點解鎖 320ms；激活節點脈衝 1.6s。
|
|||
|
|
- **緩動**：`cubic-bezier(0.34, 1.56, 0.64, 1)`（回彈緩出，輕微過衝）用於解鎖動效。
|
|||
|
|
- **吉祥物**：Duo 每 4–6s 眨眼，在連擊里程碑時跳躍（480ms ease-out 彈簧）。
|
|||
|
|
|
|||
|
|
## 7. 使用守則
|
|||
|
|
|
|||
|
|
- 保持高飽和度貓頭鷹綠、粗厚底部陰影和圓潤課程幾何形狀的組合；單獨使用扁平綠色按鈕並不能讀出 Duolingo 的感覺。
|
|||
|
|
- 將超大粗體文字保留用於課程、連擊和進度等需要鼓勵或回饋的產品時刻。
|
|||
|
|
- 將趣味動效克制地用在進度狀態變化周圍，避免在每個控件上都使用通用的彈跳動畫。
|