Joline：關于一個APP，或者是一個互聯網產品的視覺風格和主題顏色是怎么確定的，其實是有一套系統方法論的。這個方法論叫做：情緒板（Mood Board）。下面由網易設計師來解釋情緒板的運用方法，附實戰演示，特別實用！

什么是情緒板？

視覺設計師可能會花很長時間產出了精致的，高品質的設計，得到的卻是用戶或客戶的一句話：“這不是我想要的！”一般來說，在沒有實物前，人們并不清楚自己要的是什么。但是在看到成品后，他們可以輕易地判斷是否符合自己的喜好或期望。因此，在為錯誤的設計方向投入過多前，了解用戶對風格的期望和需求，從而確定整個網站或產品的視覺風格是有必要的。

情緒板是一種啟發式和探索性的方法，可以對如下問題進行研究：圖像風格（photography style），色彩（color palettes），文字排版（typography），圖案（pattern）以及整體外觀以及感覺。視覺設計和人的情緒緊密相連，不同的設計總是會引發不同的情感。

此外，情緒板也可以作為可視化的溝通工具，快速地向他人傳達設計師想要表達的整體“感覺（feel）”。

如何創建情緒板？

首先，需要明確體驗關鍵詞，在一個設計項目中，通過進行涉眾訪談和用戶研究，研究，設計人員創建了產品的人物角色，基于人物角色，綜合用戶研究結果以及品牌/營銷文檔，可以得出體驗關鍵詞（Experience Keywords）。當人物角色和體驗關鍵詞都確定后，可以通過使用情緒板來探索網站或產品的視覺風格，并作為和內部人員進行早期溝通的基礎。

體驗關鍵詞（Experience Keywords）舉例：

其次，應基于時間限制，個人工作習慣以及用戶的需求對情緒板的呈現方式進行選擇。一般來說，可以從實體/數碼，以及拼貼/精致模板兩個維度來區分情緒板的呈現方式。

A. 拼貼畫

這是一種最簡單地創建情緒板的方式。使用這一模式，無需考慮諸如字體和特定顏色之類的細節問題。找到那些可以激發靈感的素材，其中可能包含那些傳達相似風格和情緒的網站的截圖。這種方式快速，有趣，但是，具有一定的含混性。

B.?精致化的模板

模板可用來展示不同的元素。如：

在這種形式的情緒板中，界定了配色，字體處理（如標題和副標題），按鈕風格甚至是圖片風格。標準模板可以讓人們聚焦于特征化元素。

一般來說，情緒板可以以實體的方式呈現，也可以以數碼方式呈現的，考慮到成本，時間等因素，我們多選用數碼的方式，因為這種方式更為設計師提供了更靈活，多樣的選擇。

第三步是選擇素材創建情緒板，這是一個迭代的過程。

如何使用情緒板？

在使用情緒板過程中，體驗關鍵詞的作用相當重要。這里首先要說明下什么是體驗關鍵詞，可以參考以下的PPT截圖（此PPT為UCD CHINA2009年會上工作坊所用的PPT）。

獲得體驗關鍵詞是情緒板的第一項工作，一般從內部涉眾（相關的產品和設計人員）及外部用戶兩種渠道獲得。

自涉眾訪談和用戶研究中，可以收集大量的體驗詞樣本。在獲得這些樣本后，可以內部進行討論，通過歸納整理精簡為幾個關鍵詞。

體驗關鍵詞提取好之后，可以在內部使用情緒板（如果受限于資源或公司的保密政策），也可以招募用戶來完成。

在內部，由視覺設計師來完成，要注意以下幾點：

1. 需要制作3套以上情緒板供評審。
2. 制作的過程是個迭代的過程，需要內部團隊慎重討論決定。
3. 情緒板的形式可以有多種，如拼貼畫或精致化的模板（二者的區別在文檔中有）

如果招募外部用戶，則要注意以下幾點：

1. 主持人需要不斷詢問被訪者，去探究選擇圖片背后的原因：“為什么你會選擇這張圖片？能否和大家分享一下你的想法？”
2. 注意差異的挖掘。注意挖掘被訪者之間的觀點差異，一百個人心中有一百個哈雷姆特，同一張圖片對于不同被訪者可能會有不同的解釋，如果好幾位被訪者同時選擇一張圖片代表他們各自對某個品牌的感覺，注意詢問他們選擇這張圖片的原因是否一樣。

可以呈現給用戶的圖片有限的，因此，在挑選圖片時，需要內部研究和設計人員協同，根據視覺設計所需要考慮的幾個維度結合已有的關鍵詞進行圖片的篩選。一般來說，在將圖片呈現給用戶之前，內部人員已經明確了每一張圖片所代表的意義，在用戶選擇和訪談結束后，兩方面的數據綜合分析才能獲得最終的結果。

以上是操作情緒板的一些技巧的總結。

OK，那么現在我們已經知道了情緒板的運用方法，就來馬上動手試試。（以下內容僅作演示，可能略顯粗糙）

首先，我給自己定義一個主題：外賣APP。

關鍵詞提取：美食 快速 送餐 打電話 （越多越好）

根據關鍵詞尋找的一些圖片（色系盡量豐富，風格盡量多樣）：

然后根據查找的圖片提取出用色：

當然，現在提取出的顏色是雜亂的，且不具代表性。因此我做了第一次顏色篩選，提取出了最高頻的16種顏色。

接著是第二次顏色篩選，主要去掉競品色（美團外賣、餓了么、百度外賣、達達、派樂趣、點評、京東到家、愛鮮蜂等）和臟色。當然去掉之后發現基本沒什么可用的顏色了，因此還有一個問題就是，如果競品色不足以影響到我們的品牌色的話（在可控范圍內），還是可以采用的。具體這個決策過程需要大家一起討論決定。

篩選出以下顏色：

現在我們基本可以控制可選擇的主題色了，如果人力足夠的話，建議多做幾個版本以查看具體使用效果。當然，也可能是老板拍板來決定。

其他的視覺風格，如圖像風格、文字排版等也可以在這個調研基礎上進行確定。

【優設名師訪談系列】

1. 曾任騰訊大粵網設計主管的跨域達人：《優設訪談！騰訊設計師米田的設計之道與成長之路》
2. 沒有聽過馮叔的設計師不是好設計師：《優設訪談！著名設計師馮鐵的設計思考與經驗之談》
3. 前端重構視覺交互無一不精的設計師：《優設訪談！騰訊高級交互設計師C7210的十年設計路》
4. 非議不斷前行不止，用心的設計團隊：《優設訪談！國內知名設計團隊專訪之滴滴DISIGN》
5. 前網易現阿里寫的書是交互領域必讀：《優設訪談！阿里交互設計專家劉津的設計管理之路》
6. 職業路徑最為清晰的科班交互設計師：《優設訪談！LBE安全大師產品總監曉生的職場進階之路》
7. 能靠臉吃飯偏偏不的設計界「鹿晗」：《優設訪談！阿里資深設計師的自學設計之路》
8. 300多人的百度設計團隊該如何運轉：《優設訪談！國內知名設計團隊專訪之百度大UE》
9. 百度上海團隊負責人的非科班設計師：《優設訪談！百度設計大咖JJ YING的自學成才之路》
10. 他帶的學生已經是國內的設計大咖了：《優設訪談！灰晝：從非科班生到首席美術總監的15年設計路》
11. 設計的產品有幾億人在用的非科班生：《優設訪談！騰訊電腦管家視覺負責人張曉翔的UI自學之路》
12. 英雄聯盟穿越火線天天愛消除都有他：《優設訪談！騰訊游戲Tgideas團隊設計總監李若凡的十年設計路》

原文地址：uedc.163
作者：nihongyun

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量108萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com