在 UI 設計流程中，風格設定與情緒板（Moodboard）扮演著承上啟下的重要角色。情緒板並不是最終視覺稿，而是一種以「氛圍先行」的工具，用於探索產品的性格、品牌調性與視覺方向。透過彙整圖片、顏色、排版、介面元素、材質與關鍵字，設計師能以更感性且快速的方式建立共識，讓團隊在正式進入 UI Layout 與介面細節繪製之前，就能精準掌握未來的視覺走向。

Moodboard 能有效降低溝通成本，避免「想像不一致」所造成的修正循環；同時也能提供靈感，協助設計師跳脫既定框架，找到更符合產品定位的風格方案。在專案中，情緒板更像是一張「視覺指南地圖」，讓風格不再抽象，而變得可比較、可討論、可決策。透過 Moodboard 的建立，UI 設計將從感覺走向策略，從直覺走向系統，使最終作品具備更一致、更完整的品牌體驗。

MoodBoard 情緒版｜範例 Example

產品開發的流程-視覺介面設計開發

產品設計流程大致分為五個階段：

1. 認知分析階段（解決什麼問題？）
2. 交互原型階段（尋找解決方案）
3. 介面設計階段（解決方案，更好的表達）
4. 研發實施階段（生產）
5. 驗證改良階段（質量監控、改良）

其中介面設計階段如下圖所示

---

UI風格設定-情緒版

情緒板（英：Mood Board）是一種啟發式和探索性的方法，設計師將自己認為合適的組件、圖片和素材都整理到一起，在紙或者螢幕上進行拼貼組合，快速地向他人傳達設計師想要表達的整體「感覺（feel）」，可作為一種可視化的溝通工具。一般包括：視覺風格、色彩、字體排版、圖案和紋理整體外觀。

原文網址：設計師進階筆記｜情緒板應用，提高工作效率

情緒板運用到移動端介面視覺設計中，通過探索用戶的心理情緒和需求，可以將感受可視化，並作用於介面視覺風格、圖標風格的走向、關鍵圖標的選取等各個方面。為視覺細節的產出奠定理論基礎。

1. 第一步 確定原生關鍵詞

基礎關鍵詞一般在3-5個之間，同時原生關鍵詞，一定要抽象化，不能過於具體。主要關鍵詞要少而精，列出最重要的三個

2. 第二步 確定衍生關鍵詞

由於第一步的原生關鍵詞大多都比較抽象，因此我們需要對其進行發散和聯想。從而需要更多具體關鍵詞，後續才能更容易找到相應的圖片，具體關鍵詞一般都是具體的物體，可分為：
• 視覺映射
可以理解為聯想到的視覺表現，比如：品質——金色、黑色、幾何形；簡潔——白色、明亮、硬的；友好——鄰近色、圓角、圓形等
• 物化映射
可以理解為聯想到的具體事物，比如：品質——iPhone、寶馬、香奈兒；簡潔——白盤子、玻璃、白紙；友好——枕頭、毛絨玩具、海豚等。

總結：為了更科學地找圖，第一步確定3-5個原生關鍵詞，第二步在每個原生關鍵詞下拓展3個衍生關鍵詞。

3. 第三步 搜集圖片素材

可至相關網站搜尋情緒板關鍵圖。搜集好圖片後，可先內部篩選，再將挑選出來的圖片打亂並依次排列，邀請目標用戶進行再次挑選。相關資源網站如：

設計資源：從好的設計中，尋找靈感、創意與提升設計質感｜

1. unsplash｜專業免費圖資資源。
2. Pinterest｜可以讓使用者利用其平台作為個人創意及專案工作所需的視覺探索工具。
3. Behance｜是一款Adobe旗下用於展示並發現創意作品的在線平台。
4. Dribbble ｜是一個用於展示用戶製作的藝術作品的線上社群，同時也是用於推廣平面設計、網頁設計、插畫、攝影等其他創造性領域的商業社交平台。
5. Muzli Collections｜設計靈感系列
6. Muzli Search ｜用於設計靈感的全網搜尋引擎

4. 第四步 創建圖庫式的情緒板

在生成情緒板圖片後，結合衍生關鍵詞的分析結果，進行視覺風格的提取，主要包括：圖形、色彩、字體、構成、質感。

---

參考網址：情緒板在移動UI設計中的應用

---

情緒版相關製作檔案

1. 情緒板製作軟體：線上免費編輯設計| Adobe Spark
2. 使用 Canva 線上創作激發靈感的情緒板
3. 🔲 Moodboard Kit (Community)
4. Figma社區資源-幫助您學習和加快工作流程。
5. Moodboard
6. moodboard_templates

---

範例情緒板（UI 風格示意）

範例專案：我的心情日記 (Mood Diary)

為了讓大家更理解流程，以打造一款「心情日記 App」為例。

1. 目標客群： 20-35 歲，重視心理健康，需要抒發出口的現代人。
2. 核心價值： 提供一個安全、無壓力的私密空間，紀錄每日情緒波動。
3. 視覺期待： 不想要太過理性冰冷的數據感，而是希望有一種被包容、被理解的溫暖氛圍。

定義「心情日記」的感覺，品牌關鍵字

1. 柔軟 (Soft)

圓潤的線條，沒有銳利的邊角，像枕頭一樣舒適。

2. 私密 (Private)

低調、沈穩，給予使用者足夠的安全感。

3. 真誠 (Honest)

不加過多裝飾，直觀且純粹的情緒表達。

搜集素材

去哪裡找靈感？推薦使用 Pinterest, Behance, Dribbble 或 Unsplash。

心情日記的搜集重點：

1. 色彩搭配： 尋找輕柔的莫蘭迪色系或粉嫩色調。
2. 質感： 玻璃擬態 (Glassmorphism)、紙張紋理。
3. 介面元素： 圓角的卡片、可愛的情緒表情圖示 (Emoji)。
4. 攝影圖片： 晨光、雲朵、咖啡、日記本等情境圖。

我的心情日記 (Mood Diary) Dribbble範例參考

---

範例情緒板（UI 風格示意）

此為文字版結構草稿，可作為製圖時的指引。

1. 品牌關鍵字（3–5 個）

Modern / Minimal / Friendly / Clean UI / Soft Motion

2. 色彩風格（Color Palette）

1. 主色（Primary）：#4A63FF
2. 副色（Secondary）：#FFE680
3. 中性色（Neutral）：#F5F7FA、#2E2E2E

3. 字體（Typography）

1. 英文：Inter / Regular, Medium, Semi-bold
2. 中文：Noto Sans TC / Regular, Medium
3. 氛圍：清晰、現代、閱讀性佳

4. UI 介面元素（Component Snippets）

1. 按鈕（主按鈕、次按鈕）示意
2. Input Field / Checkbox / Tab / Tag
3. 常用卡片（資訊卡、商品卡）

5. Layout／介面參考圖

3–10 張具有風格代表性的 UI Snapshot（如 Dashboard、Landing Page Section、App Home）

6. 氛圍影像／品牌生活感素材

1. 燈光柔和、輕盈、科技感／互動性強的照片
2. 可包含產品使用場景、用戶輪廓影像

---

相關推薦文章連結

1. 十個常用的UI靈感及工具網站
2. Figma社區資源-幫助您學習和加快工作流程。
3. UX 設計師寫給 UI 新手的 7 個法則（上）
4. UX 設計師寫給 UI 新手的 7 個法則（下）
5. 五個階段，了解產品設計流程
6. 理性地定義視覺風格——情緒板
7. 設計師進階筆記｜情緒板應用，提高工作效率
8. 讓視覺設計變得高效+有說服力的4個步驟
9. 情緒板在移動UI設計中的應用
10. APP定義視覺風格，如何開始？
11. 12個關於用戶體驗的介面設計細節
12. App UI設計基礎知識
13. 情緒版的視覺設計表現方法與運用
14. UI介面設計顏值哪家強
15. UI設計界大勢潮流：扁平化設計
16. 解讀！介面設計的風格
17. 知名設計師展望 2019 年：UI、UX 設計將會出現十大趨勢
18. 如何成為一個 UI Designer？
19. 設計師在日本的 UI 專案設計流程

• 範例一：原生關鍵字-慢調、典雅、自然

1. 確定原生關鍵字與衍生關鍵字



2. 蒐集與篩選情緒板圖片



3. 產生主色調



---

• 範例二：原生關鍵字：生活、休閒、舒適

1. 確定原生關鍵字與衍生關鍵字



2. 搜集與篩選情緒板圖片，並產生風格色調



---

• 範例三：統一發票兌獎APP——原生關鍵字：快速、理性、生活

統一發票兌獎APP｜Figma範例檔案

---

1. 確定原生關鍵字



2. 確定衍生關鍵字



3. 搜集情緒板圖片

可至相關網站搜尋情緒版關鍵圖。搜集好圖片後，我們可以先在公司內部篩選一次，再將挑選出來的圖片打亂並依次排列，邀請目標用戶進行再次挑選。



4. 篩選情緒板圖片

可至相關網站搜尋情緒版關鍵圖。搜集好圖片後，我們可以先在公司內部篩選一次，再將挑選出來的圖片打亂並依次排列，邀請目標用戶進行再次挑選。



5. 產生風格色調

將選定的情緒板，以photoshop利用高斯模糊，選取三組主色調。

---

設定標準色、輔助色等樣式

1. Image Palette｜ 圖像配色提取｜

點選連結後，點擊Install安裝Image Palette plugins。

Image Palette 幫你從所選圖片中提取5種顏色，很適合用來定義產品與品牌形象類型的介面色彩 使用設定好的情緒板（MoodBoard），選取 image Palette｜ 圖像配色提取工具，快速產生產品建議色彩。可由這些色彩中調整為主色調與輔助色等。當然也可以直接使用從photoshop中取得的色彩。


2. 選取圖庫框架，在搜尋框下拉選擇Image Palette



3. 利用Image Palette，快速產生產品建議色彩



4. 選取產生之色彩建立標準色樣式



5. 選取產生之色彩建立標準色樣式



6. 建立完成主色調標準色樣式

線上配色工具-Colors

風格設定｜情緒板製作

情緒板參考：

1. MoodBoard 情緒版｜範例 Example

1. 請依據期中題目繼續往下延伸。
2. 根據參考檔案，進行概念分析、主要關鍵、衍生關鍵字以及圖片的搜尋。
3. 製作情緒板，以作為後續風格、色彩、構圖、插畫等設計依據
4. 本作業為期末作業其中一部份，後續將陸續完成