使用 Sketch 練習 UI 設計風格 是進步設計能力最實用的方法之一。你可以透過模仿、重構、設計系統化三種方式來精進技巧。以下我會幫你整理:
🎯 練習 UI 設計風格的 3 大目標
| 目標 | 說明 |
|---|
| 1️⃣ 視覺一致性 | 學會配色、字型、空間節奏一致設計 |
| 2️⃣ 元件組織能力 | 熟悉 Buttons、Cards、Forms 等重複元件處理 |
| 3️⃣ 設計語言轉譯力 | 能臨摹 Material、iOS、Neumorphism、Brutalism 等不同風格 |
🧪 推薦練習方式:從簡單風格開始
A. 臨摹經典設計風格
選一個 UI Design Style,每週練一種,照以下方式執行:
🟢 1. Flat Design(極簡扁平風格)
| 特徵 | 建議設定 |
|---|
| 色塊明亮 | 使用 #2D9CDB, #27AE60 等原色 |
| 無陰影/立體 | 不加 Drop Shadow |
| 簡單圖示 | 使用 Line Icons |
| 字型 | SF Pro / Inter, 16-18pt |
🎯 練習方向:
- 設計一個 To-do App 或 登入畫面
- 用簡潔配色、扁平化按鈕、清楚字距來設計
🔵 2. Material Design(Google)
| 特徵 | 建議設定 |
|---|
| 卡片樣式 UI | 使用白色卡片搭配陰影 |
| 明確階層 | z-index 層級分明 |
| 元件有反饋動作 | 按鈕點擊顏色變化 |
| 色彩系統 | 使用 Material Color Palette |
🎯 練習方向:
- 仿 Google 設計一個設定頁
- 用 Elevation(卡片陰影)管理畫面分層
⚫ 3. Neumorphism(新擬真風格)
| 特徵 | 建議設定 |
|---|
| 柔和陰影 | 外陰影 #FFFFFF + 內陰影 #D1D9E6 |
| 淺灰背景 | 背景色建議使用 #E0E5EC |
| 圓角邊緣 | Buttons / Inputs 圓角 20-30px |
🎯 練習方向:
- 設計一個音樂播放介面 / 音量控制器
- 著重於滑桿、按鈕的擬真感與觸感
🟠 4. Brutalism(野性風格)
| 特徵 | 建議設定 |
|---|
| 對比強烈的色彩 | 黑底白字、大紅大綠不避忌 |
| 無修飾粗線條 | Border 明顯,不加陰影、不裝飾 |
| 字型可選 Monospace | 如 Courier、IBM Plex Mono |
🎯 練習方向:
- 設計一個部落格首頁 / 註冊頁
- 試著用大字 + 明顯粗邊界創造獨特感覺
🛠 Sketch 練習建議方式
1️⃣ 每週主題練習
- 一週選一種風格 → 設計 2~3 頁畫面(如登入頁、主頁、Profile 頁)
- 整理顏色、字型、按鈕元件,做成小型 Style Guide
2️⃣ 製作元件 Symbol 化
- 每一個設計頁都轉為元件(如
Button/Primary, Input/Text, Card/Flat) - 學會用 Overrides 自訂文字與 Icon
3️⃣ 比對原版(Benchmarking)
- 模仿知名 App(如 Airbnb、Notion、Instagram)
- 拍照原畫面 / 找 UI Kit → 自己畫出來看相似度
🧰 工具資源補充
✨ 建議練習任務(你可挑選一個開始)
| 任務 | 難度 |
|---|
| 設計一個「登入 / 註冊頁」 | 🟢 初階 |
| 設計一個「電商 App 主頁」 | 🟡 中階 |
| 製作一套「UI Style Guide」 | 🟡 中階 |
| 仿 Airbnb App 做一頁主畫面 | 🔴 進階 |
| 自製 UI 元件系統(按鈕、表單) | 🔴 進階 |
Post Views: 1