・視覺設計定調與 Moodboard (Visual Design Guidelines)
視覺設計定調與 Moodboard (Visual Design Guidelines)
|
視覺設計定調與 Moodboard (Visual Design Guidelines) 實務
|
|
本講義旨在引導各專案團隊整合 W1–W6 階段的使用者調研洞察與 HMW 設計機會點,將具體的量化問卷數據(驗證樣本 N=120)轉譯為具有情感共鳴的視覺語言。我們將定調品牌體驗意象,建立色彩、字體與材質規範,為期末 Hi-fi Prototype 奠定統一的視覺美學骨幹。
|
| 設計定調構面 |
執行規範與轉譯原則 |
專案實務與示範案例 (海廢聲景 vs. 老野野菜) |
1. 視覺意象與情感關鍵字
(Brand Imagery & Moodboard)
|
• 視覺洞察轉譯:將 HMW 中的「理想體驗」轉譯為 3–5 個核心的情感關鍵字。
• Moodboard 拼貼:透過收集大量符合情感關鍵字的圖像(攝影、幾何圖形、質感、建築),拼貼出期末 Hi-fi Prototype 的「氣質板(Design Direction)」。
• 驗證樣本對照:確保 Moodboard 傳達的親和感,能解決問卷數據驗證出的心理負擔(如無力感、罪惡感)。
|
• 《海廢聲景》:
情感關鍵字:沉浸聽覺、海洋流體幾何、永續、科技親和。
意象:深藍海洋與聲波電光藍的聽覺共振。
• 《老野野菜》:
情感關鍵字:自然大地質樸、永續育苗、樸實插畫、無負擔自煮。
意象:大地綠與牛皮紙質感的育苗溫暖感。
|
2. 色彩體系規範
(Color Palette Matrix)
|
• 色彩驗證:色彩心理學需符合 PersonaJamie(代表型)在特定休閒/自煮情境下的情感狀態。
• 色彩比例規劃:
- 主色 (60%):代表品牌與場域的主體情感(議題沉穩性)。
- 輔色 (25%):用於數位介面或實體互動件(科技感或育苗意象)。
- 點綴色 (10%):突顯數據、垃圾警示或育苗成果的高亮對比色。
- 中性色 (5%):用於背景、紙質或文字,確保易讀性。
|
• 《海廢聲景》色彩:
主色:深海藍 (#0F172A, 60%);輔色:電光藍 (#0284C7, 25%);點綴色:警示橘 (#F97316, 10%)。
• 《老野野菜》色彩:
主色:大地綠 (#16A34A, 60%);輔色:育苗胚土黃 (#D97706, 25%);點綴色:嫩綠亮 (#A3E635, 10%)。
|
3. 字體語彙規範
(Typography & Typography)
|
• 字體層級驗證:針對戶外場域(如海岸強光)或租屋小廚房(如蒸氣環境),驗證字體的易讀性。
• 字體語彙轉譯:無襯線黑體(Noto Sans)通常傳達科技現代感與去說教感;襯線體或手寫風則傳達質樸、人文溫度。
• 載體對應:明確區分數位介面(如 Web-AR、App UI)、實體小冊印刷(如聲音地圖、育苗指南)或實體裝置刻印之不同字體結構要求。
|
• 《海廢聲景》字體:
Noto Sans TC (Bold/Regular) ➔ 極簡黑體去說教感、科技親和力。
• 《老野野菜》字體:
思源宋體、樸實植物插畫風 ➔ 宋體質感傳達樸實人文、蔬菜溫暖手感。
|
4. 載體應用與材質
(Application & Material)
|
• 實體載體材質驗證:回收海廢塑料、牛皮紙育苗袋之材質紋理,需連結「永續議題」之本質與 HMW 機會點。
• 數位介面應用:色彩比例規劃 25% 的電光藍或育苗黃需作為 Web-AR 動態聲波、育苗數據視覺化的核心顏色,擺脫傳統問卷數據佐證出之生硬說教感與安全疑慮。
|
視覺設計定調與 Moodboard (Visual Design Guidelines)
視覺設計定調與 Moodboard (Visual Design Guidelines)
《老野野菜 Wild Plant》 視覺設計定調與 Moodboard (Visual Design Guidelines)
《老野野菜 Wild Plant》 視覺設計定調與 Moodboard (Visual Design Guidelines)
・期末 Prototype 交付藍圖 (Prototype Delivery Roadmap)
期末 Prototype 交付藍圖 (Prototype Delivery Roadmap)
「行為與情緒曲線(Emotional Curve)繪製與診斷」 單元,聚焦於如何將使用者在特定情境中的「客觀行為 (Do)」、「內心想法 (Think)」與「情緒波動曲線 (Feel)」進行三層式高度對照,並透過精準定位情緒低谷(Valley of Despair),找出破壞使用者體驗的核心關鍵痛點。
|
《海廢聲景》期末 Prototype 交付藍圖與執行實務講義
|
|
本單元引導團隊進入「Double Diamond」的第二個鑽石: Develop & Deliver。透過實體裝置、數位介面與服務系統的跨領域實作,將「機會點」落地為可體驗的原型,並透過時序規劃與測試指標,確保期末能交付具備「1:1 沉浸式體驗」的高擬真成果。
|
| 實作與交付構面 |
執行規範與階段演進 |
專案實務與 Prototype 規格 (海廢聲景) |
1. 執行時程演進
(Timeline & Evolution)
|
• 概念發想 (W8-W10):15 分鐘狂熱發想 (Brainstorming),挑選 1-2 個核心機會點進行紙上草圖與 Low-fi 草模製作。
• 迭代測試 (W11-W13):製作 Mid-fi 原型,整合使用者測試 (User Testing) 回饋,確認互動邏輯。
• 展演精緻化 (W14-W16):Hi-fi 高擬真成品製作,整合實體外殼、數位介面與服務流程。
|
• 階段交付標準:
- W10: 低擬真草模與紙上原型。
- W13: 可點擊的數位 Wireframe 互動模組。
- W16: 實體 1:1 沉浸式裝置、數位 Hi-fi AR App、精裝服務摺頁。
|
2. 實體互動裝置
(Physical Installation)
|
• 功能驗證:測試海廢材料的物理碰撞聲響,以及感測器與電子元件的互動邏輯。
• 擬真度演進:從瓦楞紙/寶特瓶草模,演進至結合 Arduino 與震動感測器的 Mid-fi 機構,最後整合回收塑料材質的 Hi-fi 成品。
|
• 實體 Prototype 規格:
- Hi-fi 材質:回收海廢塑料熱壓板材、霧面金屬件。
- 互動技術:Capacitive Touch 觸控、音頻輸出控制器。
- 測試指標:觸控直覺度、音效反饋延遲 (Latency) < 50ms。
|
3. 數位 AR 介面
(Digital Web-AR)
|
• 使用者路徑 (User Flow):驗證 Jamie 從手機鏡頭對準海廢、觸發聲景轉譯、到查看海廢資訊的完整路徑。
• 技術可行性:測試 Mobile Web-AR 的穩定性與耗能,確保免下載門檻的體驗流暢度。
|
• 數位 Prototype 規格:
- Mid-fi: Figma 可點擊流程模組 (Interactive Prototype)。
- Hi-fi: Mobile Web-AR 輕量化網頁 (Mobile Web)、即時音頻視覺化效果 (Audio Visualizer)。
- 測試指標:免下載體驗、單次掃描成功率 > 90%。
|
4. 服務系統觸點
(Service Design)
|
• 服務藍圖 (Service Blueprint):確保 Jamie 在 2 小時海岸休閒脈絡中,實體與數位觸點的切換是連貫、無縫且無心理阻力的。
• 體驗傳播:透過「聲音尋寶」的概念,將單點體驗轉化為系統性探索,並鼓勵社區共創 (Crowdsourcing)。
|
• 服務 Prototype 規格:
- 觸點小冊:精裝摺頁設計與 QR Code 導流測試。
- 服務地圖:整合聲音打卡點、海廢故事點與「共創」機制的服務全景圖。
- 測試指標:探索樂趣評分、延續擴散力 (NPS) 評估。
|
期末 Prototype 交付藍圖
期末 Prototype 交付藍圖
期末 Prototype 交付藍圖
期末 Prototype 交付藍圖
|
《老野野菜》期末 Prototype 交付藍圖與執行實務講義
|
|
本單元引導團隊將《老野野菜》的 HMW 機會點落地為可體驗的原型。透過實體野菜盲盒裝幀、數位 3 分鐘去苦指南與陽台綠意堆肥循環系統的跨領域實作,確保期末機能交付具備「高安心感與零罪惡感」的高擬真成果。
|
| 實作與交付構面 |
執行規範與階段演進 |
專案實務與 Prototype 規格 (老野野菜) |
1. 執行時程演進
(Timeline & Evolution)
|
• 概念發想 (W8-W10):15 分鐘狂熱發想,挑選「去苦簡化」與「盲盒體驗」進行紙盒結構草圖與試煮實驗。
• 迭代測試 (W11-W13):製作 Mid-fi 原型,邀請 6 位都市租屋自煮族進行廚房實境測試,優化去苦步驟。
• 展演精緻化 (W14-W16):Hi-fi 高擬真成品製作,整合牛皮紙盲盒、數位去苦 UI 與陽台育苗泥炭土磚。
|
• 階段交付標準:
- W10: 手作瓦楞紙盲盒草模與紙上料理卡。
- W13: Figma 可點擊流程與未漂白樣卡試作。
- W16: 1:1 野菜盲盒、3分鐘極速去苦 Web 介面、精裝手繪圖鑑小冊。
|
2. 實體載體
(Physical Packaging & Planting)
|
• 功能驗證:測試包裝開盒的驚喜感與拆封體驗,消解無履歷的未知毒性疑慮。
• 擬真度演進:從手作瓦楞紙箱,演進至未漂白粗糙牛皮紙樣卡與泥炭土壓縮磚,最後完成雷雕植纖盲盒。
|
• 實體 Prototype 規格:
- Hi-fi 材質:未漂白粗糙牛皮紙、植纖盲盒、泥炭土磚與種子包。
- 視覺風格:細緻植物圖鑑線稿印製。
- 測試指標:拆封安全感與驚喜滿意度 > 85%。
|
3. 數位介面
(Digital Quick Guide & Recipe)
|
• 使用者路徑 (User Flow):驗證 Jamie 掃描野菜包裝 QR Code ➔ 觀看 15秒去苦短影音 ➔ 使用倒數計時器去苦的流暢度。
• 技術可行性:採用 Mobile Web 輕量化網頁,無需下載 App,降低下廚時的閱讀門檻。
|
• 數位 Prototype 規格:
- Mid-fi: Figma 可點擊 Wireframe 互動模組。
- Hi-fi: Mobile Web RWD 網頁,包含野菜履歷查詢、15秒極速去苦短影音與料理計時器。
- 測試指標:3分鐘去苦達成率 100%、料理失敗率降低 80%。
|
4. 服務系統觸點
(Service Touchpoints & Eco-Cycle)
|
• 服務藍圖 (Service Blueprint):確保 Jamie 從買菜、下廚到廚餘轉化泥炭土培育新芽的過程無縫銜接。
• 體驗翻轉:透過「陽台綠意循環」機制,將試吃倒菜的罪惡感轉化為育苗共創的樂趣。
|
• 服務 Prototype 規格:
- 觸點小冊:精裝手繪野菜圖鑑與堆肥指南摺頁。
- 循環機制:泥炭土磚使用步驟卡與線上曬苗社群機制。
- 測試指標:浪費罪惡感消除率 > 90%、第二次回購意願提升。
|
期末 Prototype 交付藍圖
期末 Prototype 交付藍圖
・作業說明
本單元課後作業 (Assignment 06)
|
課程期中作業說明:期中調查成果報告(Midterm Research Review)
|
|
本作業為雙鑽石模型「 Discover & Define 」階段的驗收總結。各團隊須整合質性田野觀察、深度訪談與量化問卷數據,定位關鍵情緒低谷(Valley of Despair),並提出視覺定調與期末 Prototype 交付藍圖,接受教師與同儕審查。
|
| 作業規範構面 |
作業執行重點與規格要求 |
評分佔比與驗收指標 |
1. 發表形式與格式
(Submission Rules)
|
• 口頭發表時間:每組報告 8 分鐘 + Q&A 與評審回饋 4 分鐘(共 12 分鐘)。
• 簡報格式要求:16:9 PDF/PPTX 檔,簡報頁數建議 10-15 頁內。
• 必要附錄附件:問卷原始數據表格、訪談逐字稿/編碼表、顧客旅程地圖與 Moodboard 視覺圖檔。
|
• 時間控制 (10%):嚴格遵守 8 分鐘上限。
• 簡報視覺與結構 (10%):邏輯架構清晰,圖片與數據圖表呈現專業易讀。
|
2. 簡報內容四模組
(Required Modules)
|
• 模組 1:質量化調查發現:展示 Persona 描繪、田野觀察 (Shadowing) 與 N≥100 量化問卷數據交叉驗證。
• 模組 2:情緒低谷與痛點診斷:呈現顧客旅程地圖,突顯最低點(Valley ≤ -3分),並以 5-Whys 導出 P0 核心痛點。
• 模組 3:視覺設計規劃定調:說明設計意象、情緒板 (Moodboard)、60-25-10-5 色彩規範與字體/載體材質。
• 模組 4:HMW 與 Prototype 藍圖:提出由 P0 轉譯之 HMW 問句,並規劃 W8-W16 三維原型 (Physical, Digital, Service) 實作時程。
|
• 數據嚴謹度 (25%):質量化數據可信且具備交叉比對。
• 痛點診斷深度 (25%):精準定位根因而非停留在表象。
• 視覺與 HMW 可行性 (20%):轉譯邏輯連貫且具備創新潛力。
|
3. 評審與迭代機制
(Review & Iteration)
|
• 評審組成:授課教師(60%)+ 同儕互評與提問(40%)。
• 評審關注焦點:研究洞察是否真實支持發想方向?HMW 是否過寬或過窄?期末交付範疇是否切合團隊能力?
• 課後迭代任務 (Iteration):發表後 3 天內,團隊須整理「質性回饋紀錄表」,修正 HMW 題項與期末 Prototype Roadmap,經教師確認後方可展開 W8 腦力激盪。
|
• 臨場應答與 Q&A (10%):能否精準回應同儕與教師質疑。
• 修訂完成度:作為期末成績之關鍵比對基準。
|