使用 Sketch 製作網站首頁的 Layout 是非常實用的 UI/UX 練習與展示方式。下面是一步步引導你完成「網站首頁版型設計（Layout）」，從版型規劃、畫面結構、設計元件到輸出規格都有涵蓋。
✅ 目標：設計一個完整的網站首頁 Layout（Desktop 版）
🖥 建議尺寸
- Artboard 尺寸建議使用：
- 1440 x 3000 px（寬度固定，高度彈性）
- 或 1280px 寬度也可（視設計偏好）
🔧 Step-by-Step 製作流程
🔹 Step 1：設定格線與佈局
| 設定類型 | 建議數值 |
|---|---|
| Columns | 12 Columns |
| Gutter Width | 20 px |
| Margin | 左右各 80 px（可依情境調整） |
在 Sketch 中設定：
View > Canvas > Layout Settings
🔹 Step 2：畫出網站基本區塊
網站首頁 Layout 通常包含以下幾個區塊（你可以當作 Section Artboard 的群組）：
| 區塊名稱 | 說明 |
|---|---|
| 1. 頁首（Header） | Logo + 導覽列（Navigation）+ CTA（按鈕） |
| 2. Hero Banner | 主視覺區：大標題、文字敘述、主圖或插圖、按鈕 |
| 3. Features | 三～四個重點功能 / 資訊卡（Icon + Text） |
| 4. About / Intro | 關於產品或服務介紹段落 + 圖片 |
| 5. Testimonials | 使用者好評 / 客戶 Logo 區 |
| 6. CTA 區塊 | 再次引導用戶行動（註冊、了解更多） |
| 7. Footer | 網站資訊、聯絡方式、社群連結 |
🧱 範例版型結構建議（從上到下）
1. Header
├── Logo（左上）
├── Menu Items（右上）
└── Call to Action Button（右上）
2. Hero Section
├── Headline
├── Subheading
├── CTA Button（主行動）
└── Image / Illustration（右側）
3. Feature Section
├── 三欄 Icons + Text
├── 使用 Grid 排列
4. About Section
├── 左圖右文（或反之）
└── 強調內容段落
5. Testimonial / Logos
├── 使用者評語
├── 信任 Logo 排列（如 Google, Slack, Airbnb）
6. Secondary CTA
└── 註冊按鈕 / 表單
7. Footer
├── 分欄：產品 / 關於 / 聯絡我們 / 社群
🎨 設計風格建議
| 項目 | 建議做法 |
|---|---|
| 色彩 | 選擇一組品牌色 + 1~2 個輔助色 |
| 字型 | 建議使用 Inter / SF Pro / Roboto |
| 標題層級 | H1（48pt）、H2（32pt）、H3（24pt） |
| 間距 | 使用 8pt / 16pt / 24pt 系統 |
| CTA 按鈕 | 大按鈕，顯眼色，圓角 8px |
🧩 使用 Sketch 中的元件（Symbols）
可以預先建立以下 Symbol 來模組化首頁：
| 元件名稱 | 用途 |
|---|---|
| NavBar / Header | 含 logo、nav items、按鈕 |
| Hero / Banner | 含標題 + 副標題 + 圖片 |
| Feature Card | Icon + 標題 + 內文 |
| CTA Button | 標準主按鈕元件 |
| Footer | 頁尾資訊模組 |
透過 Symbol + Overrides 可以重複使用設計元件，並快速修改。
🛠 Tips：提升 Layout 專業感的小技巧
- ✅ 使用圖標集： 如 Feather、Heroicons（用 Plugin 插入 SVG）
- ✅ 圖片建議尺寸一致： Hero 圖與 Section 圖維持統一風格（可用 Unsplash 插件）
- ✅ 留白空間要夠： 每區上下建議空 100~200px，不要擠滿整個畫面
- ✅ 設計 Style Guide： 事先定義色彩、字型、按鈕樣式再開始設計頁面
📤 最後輸出
- 完成設計後，可以：
- 匯出整張首頁為 PNG / JPG / PDF
- 或將各元件用 Zeplin 或 Sketch Cloud 分享給團隊/開發
📁 想練習？這裡有練習任務
🌟 練習任務：設計一個 SaaS 官網首頁
題目：你是一個新創公司，要推出一個任務管理工具的網站首頁
要求：
- Hero Banner + CTA
- 3 個功能介紹
- 用戶好評區
- 註冊按鈕（CTA）