- 軟體名稱：Sketch
- 支援語系：英文
- 支援系統：Mac
- 官方網站：Sketch
✏️ Sketch 是一套專門為 UI/UX 設計、App 原型製作 和 介面排版 開發的向量設計工具，主要在 macOS 上運行。它是設計師界的常青樹，特別適合製作網站、App 介面、icon、wireframe 和互動設計。
🎨 Sketch 入門教學（UI/UX 設計新手友善）
🔧 1. 為什麼選擇 Sketch？
| 優點 | 說明 |
|---|
| 專為 UI/UX 設計打造 | 比 Photoshop / Illustrator 更輕量化與直觀 |
| 向量工具為主 | 圖形不失真，可自由縮放 |
| 組件元件（Symbol） | 可以重複使用的設計元件（像按鈕、卡片） |
| 支援原型互動（Prototype） | 基本互動流程預覽 |
| 與 Zeplin、InVision、Abstract 等工具整合好 | |
| 支援 Plug-in 擴充功能 | 可自定義設計流程，提高效率 |
🧭 2. 介面快速認識（macOS 版）
主畫面區域：
| 區域 | 說明 |
|---|
| 左側 | 圖層列表：顯示你目前的所有設計元素 |
| 中間 | 畫布（Canvas）：實際編輯設計的空間 |
| 右側 | 屬性面板：對齊、樣式、尺寸、邊框、陰影等設定 |
| 上方工具列 | 新增圖形、文字、符號、Prototype、預覽等工具 |
🧱 3. 基本操作流程（從零開始做 UI）
✅ Step 1：建立新畫面（Artboard）
- 點選工具列的「Artboard」 ➜ 選擇裝置模板（如 iPhone 13, Web 1440px）
✅ Step 2：放置元件
- 使用工具列上的形狀工具：
R ➜ 矩形（Rectangle）O ➜ 圓形（Oval）T ➜ 文字（Text）
- 自訂尺寸、圓角、顏色、邊框
✅ Step 3：製作 UI 組件（Button、Navbar）
- 做一個按鈕 ➜ 加上背景、文字
- 選取它們 → 點右鍵「Create Symbol」 ➜ 可重複使用
✅ Step 4：建立多個畫面頁面
- 複製 Artboard ➜ 模擬登入頁、首頁、設定頁等
- 修改畫面內容，例如按鈕點下後變換畫面
✅ Step 5：加上原型互動（Prototype）
- 選擇元件 ➜ 點右上「Prototype」 ➜ 拖拉箭頭連到另一個畫面
- 點右上「預覽」圖示 ➜ 模擬使用者操作流程
💎 4. Symbol、Text Style、Layer Style（Sketch 超強功能）
| 功能 | 作用 |
|---|
| Symbol（符號） | 可重複使用元件（改一個同步更新） |
| Text Style | 統一管理字型、字重、行高 |
| Layer Style | 管理陰影、邊框、顏色樣式 |
| Overrides | 更換 Symbol 內文字或圖片，不改動整體樣式 |
✅ 幫助你做出 可維護、可擴展、可共享的 UI 系統
⚡ 5. 常用快捷鍵整理
| 功能 | 快捷鍵 |
|---|
| 插入矩形 | R |
| 插入文字 | T |
| 插入圓形 | O |
| 複製 | Command + D |
| 群組 | Command + G |
| 解散群組 | Shift + Command + G |
| 創建符號 | Command + K |
| 預覽 Prototype | Command + P |
🌐 6. 插件推薦（提高效率）
| 插件 | 功能 |
|---|
| Anima | 更進階的原型動畫 |
| Craft by InVision | 與 InVision 串接、自動填資料 |
| Sketch Measure | 設計交付與測量工具 |
| Auto Layout | 自動對齊與響應式排版 |
| Icons8 | 直接嵌入免費 icon 庫 |
💼 8. 實作建議：練習主題推薦
| 主題 | 學會的技能 |
|---|
| 做一個 App 登入畫面 | Artboard、表單、文字排版 |
| 製作 iOS 設定頁 | 分段控制、開關 UI 組件 |
| 製作網站首頁 Layout | 排版、Icon 使用、元件化 |
| 設計 UI Kit | Symbol 建構、樣式管理 |
| 加上 Prototype | 體驗使用者流程操作 |
📦 9. 免費資源網站推薦
📌 10. 該選 Sketch、Figma 還是 XD？
| 比較項目 | Sketch | Figma | Adobe XD |
|---|
| 安裝平台 | macOS only | 雲端（全平台） | mac / Windows |
| 協作 | 較弱（可用 Abstract/Zeplin） | 最強，雲端多人同時編輯 | 有協作功能但較弱 |
| 原型 | 基礎 | 互動豐富 | 一般 |
| 開源資源 | 多 | 多 | 一般 |
| 初學者難度 | 低中 | 低 | 低 |
✅ 如果你是 mac 使用者，又偏好離線工作，Sketch 是很穩定的選擇。
