・ 設計風格企劃（Mood Board）與視覺意象確立
視覺設計不是憑空想像，而是將品牌的內涵與受眾心理，精準轉換為可被感知之視覺語言的過程。
本單元學習目標（Learning Objectives）
- 掌握設計風格企劃（Mood Board）：學會運用關鍵字與視覺意象板，確立專案獨特之品牌氣質。
- 建立標準 UI Style Guide：建構符合 WCAG 2.1 AA 無障礙規範之色彩 Token、字體階層與 12 欄網格系統（Grid System）。
- 理解 RWD 斷點與元件化（Component）：掌握跨裝置版型轉化邏輯（Reflow）與 Figma Auto Layout 彈性元件庫。
- 完成首頁高保真草圖：結合設計系統，繪製具備競標水準的網站首頁（Home Page）高保真視覺稿。
・ 何謂視覺情緒板（Mood Board）？
Mood Board 是一張將色彩、影像質感、字型氣質、UI 元件範例與材質進行結構化拼貼的視覺看板。其核心目的在於：
- 建立團隊視覺共識：避免成員對「現代感」、「質感」等抽象詞彙產生理解偏差。
- 向客戶/評委提案簡報：在投入大量繪圖工時前，先取得視覺調性（Vibe）的認可。
・ Mood Board 製作三步驟
- 定義品牌視覺關鍵字（Brand Keywords）：從 RFP 需求與 Persona 探勘中提煉 3 個核心形容詞（例如：當代人文、永續數位、低認知阻力）。
- 多管道圖像素材蒐集：於 Pinterest、Behance、Dribbble 蒐集符合關鍵字的優質範例，包含：攝影光影、建築線條、商業字體排版、配色組合與動效微互動。
- 提取與歸納視覺元素：從蒐集的圖板中，歸納出主色與輔色調性、圓角造型（Border Radius）與版面留白率。
・ 當代網頁視覺風格趨勢
Bento Grid（便當盒格圖）：
將多元資訊封裝於不同大小之圓角卡片中，兼具秩序感與高閱讀效率。Minimalism & Generous Spacing（極簡大留白）：
大幅增加區塊間距（Section Padding），提升閱讀舒適度。Glassmorphism（毛玻璃質感）：
運用輕微背景模糊（Backdrop Blur）與細緻白邊，營造層次豐富的數位空間感。
・ 網頁色彩、字體與
網格系統（Grid System）規範
數位介面的視覺規範必須兼顧視覺美感與工程落地嚴謹度。
・ 色彩計畫 (Color Tokens) & 無障礙對比
為確保所有人（包含樂齡族與弱視使用者）皆能順暢閱讀，網頁色彩必須遵守 W3C WCAG 2.1 AA 級規範：
- 一般內文字級（< 18pt / < 24px）：文字與背景對比度必須 ≥ 4.5 : 1。
- 大標題字級（≥ 18pt / ≥ 24px 或粗體 ≥ 14pt / ≥ 19px）：文字與背景對比度必須 ≥ 3.0 :1。
色彩對比無障礙檢視網站
輸入前景色與背景色的 Hex 色碼，即時計算對比度並顯示是否符合 AA/AAA 標準。
網站無障礙規範
| Color Token 類別 | 建議色號 (HEX) | UI 應用情境 | WCAG AA 對比檢核 |
|---|---|---|---|
| Primary （品牌主色） |
#0F2C59 (深藍) | 頁首 Header、大標題、權威感區塊底色。 | ✓ 14.2:1 (通過) |
| Secondary （輔助色） |
#2563EB (亮藍) | 互動按鈕、當前分頁 (Active)、連結顏色。 | ✓ 4.6:1 (通過) |
| Accent （強點/CTA色） |
#D97706 (暖琥珀) | 「立即預約」、「送出表單」核心轉化按鈕。 | ✓ 4.5:1 (通過) |
| Neutral Light （背景中性色） |
#F8FAFC (極淺灰) | 全站畫布底色、卡片區塊背景，降低視覺疲勞。 | 舒適眼感畫布 |
・字體階層系統 (Typography Hierarchy)
建議採用跨平台渲染極佳之無襯線字體家族：英文採用 Inter，中文採用 思源黑體 (Noto Sans TC)
| 字級階層 | 字級 (Font Size) | 行高 (Line Height) | 字重 (Weight) | 應用範例 |
|---|---|---|---|---|
| H1 (Hero Heading) |
36px ~ 48px | 1.2 (120%) | Bold (700) | 首頁 Hero 區塊核心主標題 |
| H2 (Section Title) |
24px ~ 32px | 1.3 (130%) | Bold (700) | 各大區塊（如：最新消息、主題展區）標題 |
| H3 (Card Title) |
18px ~ 20px | 1.4 (140%) | Semi-Bold (600) | Bento Grid 卡片標題、文章小標 |
| Body Regular (內文) |
15px ~ 16px | 1.6 (160%) | Regular (400) | 文章段落內文、表單輸入文字 |
| Caption (提示/麵包屑) | 12px ~ 13px | 1.4 (140%) | Medium (500) | 麵包屑導航、日期標籤、頁尾版權宣告 |
・ 網格系統 (Grid System) 原理
現代網頁採用 12 欄網格（12-Column Grid） 作為排版骨架。因 12 能被 1, 2, 3, 4, 6 整除，具備極高的分欄彈性：
- Columns（欄數）：桌機端設為 12 欄。
- Gutter（欄間距）：欄與欄之間的空隙，桌機建議設為 24px。
- Margin（外邊距）：網格與螢幕兩側的邊距，建議設為 40px ~ 80px 或採用固定最大寬度（如 1200px Centered）。
・ 網頁斷點（Breakpoint）
與元件化（Component）觀念
・ 跨裝置斷點（Breakpoints）規範
響應式網頁（RWD）透過 CSS Media Queries 偵測螢幕寬度，並於關鍵斷點自動調整網格與組件排版：
| 裝置類別 | 螢幕斷點寬度 (Breakpoint) | 網格設定 (Grid) | 版型轉化行為 (Layout Shift) |
|---|---|---|---|
| Desktop (桌機) | ≥ 1200px | 12 Columns (Gutter: 24px) | 完整橫向多欄佈局、展開式主導覽列。 |
| Tablet (平板) | 768px ~ 1199px | 8 Columns (Gutter: 16px) | 3 欄轉為 2 欄，部分次要資訊轉為收合選單。 |
| Mobile (手機) | < 768px | 4 Columns (Gutter: 12px) | 單欄垂直堆疊 (Stack)，主選單轉為漢堡選單。 |
・版型轉化四大策略 (Reflow Strategies)
- Stack（垂直堆疊）：桌面上的多欄卡片，在手機端自動轉為單欄向下排列。
- Scale（流體伸縮）：容器與圖片寬度設為 100%，隨螢幕縮放，不產生水平滾動條。
- Accordion（漸進收合）：長篇文字或腳頁（Footer）連結在手機端轉為手風琴折疊選單。
- Reorder（順序重排）：利用 Flexbox/Grid 屬性，將手機端最核心的行動呼籲（CTA）按鈕移至最頂端。
・ UI 元件化（Component）與 Figma Auto Layout 觀念
為了建立可維護的大型設計系統，設計師應採用
原子設計理論（Atomic Design）：
- Atoms（原子）：按鈕、顏色變數、圖示、字體樣式。
- Molecules（分子）：搜尋列（圖示 + 輸入框 + 按鈕）、卡片標頭。
- Organisms（組織）：完整的 Hero 區塊、Header 導覽列、Footer 頁尾。
💡 Figma Auto Layout 關鍵設定實務：
- Fill Container（填滿容器）：讓卡片或輸入框隨父容器寬度彈性伸展（實現 RWD 的靈魂）。
- Hug Contents（擁抱內容）：讓按鈕長度隨內文文字多寡自動推擠伸縮。
- Touch Target 防誤觸規範：行動端所有可點擊元件（按鈕、Icon）最小邊框不得小於 44 X 44 px。
・ 課堂實作指南
— 建立 UI Style Guide 與首頁草圖
本週課堂作業要求各組於 Figma 中建立專案的 UI Style Guide，並完成網站首頁（Home Page）高保真視覺草圖。
・ 步驟一：建立 Figma UI Style Guide 畫布
設定 Color Variables（色彩變數）：
在 Figma 右側面板建立 Primary、Secondary、Accent 與 Neutral 色彩樣式。設定 Text Styles（文字樣式）：
建立 H1、H2、H3、Body-Regular 與 Caption 字體規範。建立 Layout Grid（網格樣式）：
建立 Desktop (1200px / 12 Cols / Gutter 24px) 與 Mobile (375px / 4 Cols / Gutter 12px) 網格。
・步驟二：繪製核心 UI 元件庫（Components）
- Primary / Secondary Buttons：包含 Default、Hover 與 Active 三種狀態。
- Bento Grid Cards：包含圖片佔位符、標題、內文與標籤（Tag）。
- Header / Navigation Bar：包含 Logo、導覽連結與 Active 高亮膠囊塊。
繪製核心 UI 元件庫實作
建立標準 Component Variants（按鈕變體庫）
命名規範：建立 Component Set 後，透過 Figma 右側面板新增屬性（Properties）： - State：Default / Hover / Active / Disabled
- Type：Primary / Secondary (Outline) / Text
規範 Touch Target：確保行動端可點擊區域高度小不低於 44 px，Padding 設為 Vertical: 12px、Horizontal: 24px。 打造彈性 Bento Grid 模組化卡片
Auto Layout 防溢出組合： - 卡片外框：Resizing: Fill Container（適應 12 欄網格）。
- 圖片 Occupant/Slot：Resizing: Fill Container，高度固定或設為比例。
- 卡片內文：Resizing: Fill Container（文字過長時自動向上推擠換行，防範破版）。
頁首 Header 與導覽列 (Space-Between)
Desktop Variant： 採用水平 Auto Layout，Primary Axis Alignment 設為 Space between，讓 Logo 靠最左、CTA 按鈕與選單靠最右。Active 當前頁面高亮： 加入圓角膠囊塊背景（如 #EFF6FF）標示當前分頁。Mobile Variant： 手機端收合導覽連結，替換為大小不小於 44 X 44 px 的漢堡選單按鈕（Hamburger Icon）。
・ 步驟三：組裝網站首頁（Home Page）高保真視覺圖
依據第三週的 Relume AI 線框圖，將 UI Style Guide 的元件填入畫布中：
- Hero Section：加入大膽標題、品牌攝影背景圖與明確之 CTA 按鈕（低摩擦力路徑）。
- Bento Grid 卡片區塊：將核心服務或亮點景點，以高質感卡片佈局呈現。
- 無障礙與錨點元素：於頁頭加入麵包屑導航與高對比對齊標籤。
・RWD 行動端轉化最佳實踐教學說明
RWD 行動端轉化四大核心策略對照表
| 轉化策略 | 核心原理 | Desktop 佈局形態 | Mobile (375px) 轉化應用 | UI/UX 效益 |
|---|---|---|---|---|
| 01. 垂直堆疊 (Stack) |
多欄維度降低，轉為單欄縱向流動。 | 多欄併排卡片、左右分欄圖文區塊。 | 改為垂直 Auto Layout 堆疊，組件設為 Fill Container。 |
防止內容擠壓與文字溢出。 |
| 02. 流體伸縮 (Scale) |
容器與影像隨 viewport 寬度等比縮放。 | 寬幅 Hero Banner、固定尺寸照片佔位。 | 影像與容器設定 max-width: 100% 自適應。 |
絕不產生水平滾動條。 |
| 03. 漸進收合 (Accordion) |
隱藏次要資訊，提供開關手動展開。 | 頁尾 (Footer) 完整展開、多欄 FAQ。 | 選單改為漢堡選單 (☰) Overlay 或手風琴摺疊。 | 大幅縮短手機頁面長度。 |
| 04. 順序重排 (Reorder) |
依行動端用戶視覺權重重新編排順序。 | 文字在左、核心 CTA 預約按鈕在右。 | 運用 Flexbox order 屬性，將 CTA 按鈕優先置頂。 |
建立低摩擦路徑，提升轉換率。 |
Figma RWD 實物操作與最佳實踐教學流程表
| 教學階段 | 重點說明 (Best Practice) | Figma 具體操作步驟 | 工程交付與無障礙 (A11y) 規範 |
|---|---|---|---|
| Step 1 & 2 Token 與組件建置 |
語意化命名與彈性組件： 建立全站認領之色彩與字型規範，組件具備跨裝置拉伸能力。 |
|
100% 映射 CSS 屬性：Gap ➔ gapPadding ➔ padding
|
| Step 3 Desktop 高保真交付 |
黃金網格對齊： 以 12 欄黃金數字進行佈局，確保 1欄、2欄、3欄、4欄無縫切換。 |
|
容器設定置中 Center，避免超大寬螢幕導致視覺拉伸變形。
|
| Step 4 Mobile 響應式重構 |
觸控防誤觸與單欄優化： 將網格降維至 4 欄，全面優化行動端觸控尺寸與閱讀流利度。 |
|
WCAG 2.1 AA 認證： • 觸控目標高 ≥ 44px • 文字與背景對比度 ≥ 4.5:1 |
RWD 行動端響應式轉化步驟圖解
・單元隨堂小結與自我檢核表
自我檢核表
在將首頁視覺草圖匯出前，請各組對照以下清單進行 UI/UX 檢查：
| 檢核範疇 | 自我檢查指標 | 狀態 |
|---|---|---|
| 1. 無障礙對比度 | 所有文字與背景色之對比度均通過 WCAG 2.1 AA 級標準（≥ 4.5:1）。 | [ ] 通過 |
| 2. 網格對齊 (Grid Alignment) | 桌機版 UI 元件是否嚴格對齊 12 欄網格，且兩側留有足夠 Margin。 | [ ] 通過 |
| 3. RWD 手機版彈性 | 是否完成 Mobile (< 768px) 排版，且點擊目標區域均 ≥ 44x44px。 | [ ] 通過 |
| 4. Figma 元件化 | 按鈕與卡片是否綁定 Auto Layout（Fill / Hug），方便團隊協同擴充。 | [ ] 通過 |
・課後作業
・ 作業概覽與交付清單
| 項目 (Item) | 詳細內容與要求 (Details & Requirements) |
|---|---|
| 專案主題 | 島嶼新浪潮 Island New Wave |
| 單元聚焦 | RWD 響應式轉化與動態原型實作 |
| 核心交付項目 1： 行動端畫布組裝 |
|
| 核心交付項目 2： Figma 原型製作 |
|
| 核心交付項目 3： 設計系統與無障礙 |
|
・ RWD 版型轉化策略自我檢查表
| 轉化策略 | Desktop 佈局形態 | Mobile (375px) 預期轉化結果 |
|---|---|---|
| 01. 垂直堆疊 (Stack) | 多欄併排卡片 / 左右分欄圖文區塊 | 自動折疊為垂直單欄 (Vertical Stack)，防止擠壓破版。 |
| 02. 流體伸縮 (Scale) | 固定或寬幅大圖 Banner | 圖片與容器設為 max-width: 100%，隨螢幕等比縮放。 |
| 03. 漸進收合 (Accordion) | 頁尾 (Footer) 完整展開多欄連結 | 手機端收合為點擊展開之「手風琴開關 (Accordion)」。 |
| 04. 順序重排 (Reorder) | 文字在左、核心 CTA 按鈕在右 | 利用 Auto Layout 權重，將核心預約按鈕 (CTA) 置頂優先呈現。 |
・ 作業評分標準 (Evaluation Rubric)
| 評分項目 | 配分比例 | 評分細項與要求指標 |
|---|---|---|
| RWD 版型轉化邏輯 | 30% | 準確套用四大轉化策略，Mobile 畫布網格對齊良好，完全無文字溢出或水平滾動條破版問題。 |
| Auto Layout 健全度 | 25% | 正確認用 Hug Contents 與 Fill Container，伸縮畫布時元件能自動自動彈性拉伸。 |
| 原型互動體驗 | 25% | 漢堡選單 Overlay 開關順暢，按鈕 Hover 狀態正確，Prototype 連結無死路。 |
| Design Tokens 與 A11y | 20% | 100% 綁定 Variables 與 Text Styles，觸控範圍 ≥ 44px，對比度通過 WCAG 2.1 AA 認證。 |
・ 作業繳交說明與專案規範
| 規範項目 | 具體要求與交付標準 |
|---|---|
| Figma 連結匯出權限 | 繳交 Figma 專案連結，權限開啟為 Anyone with the link can view。 |
| Figma 分頁命名規範 |
依序整理為： 1. 01-Style-Guide (Variables/Styles)2. 02-Components (Variants)3. 03-Desktop-Home (上一單元稿)4. 04-Mobile-RWD (本單元畫布與 Prototype)。
|
| Prototype 演示驗證 | 確保點擊 Play (▶) 即可流暢演算 Mobile 原型互動。 |
| 繳交期限 | 請於下周上課前 24 小時（週日 23:59 前）上傳至平台。 |