Joline：關(guān)于一個(gè)APP，或者是一個(gè)互聯(lián)網(wǎng)產(chǎn)品的視覺(jué)風(fēng)格和主題顏色是怎么確定的，其實(shí)是有一套系統(tǒng)方法論的。這個(gè)方法論叫做：情緒板（Mood Board）。下面由網(wǎng)易設(shè)計(jì)師來(lái)解釋情緒板的運(yùn)用方法，附實(shí)戰(zhàn)演示，特別實(shí)用！

什么是情緒板？

視覺(jué)設(shè)計(jì)師可能會(huì)花很長(zhǎng)時(shí)間產(chǎn)出了精致的，高品質(zhì)的設(shè)計(jì)，得到的卻是用戶或客戶的一句話：“這不是我想要的！”一般來(lái)說(shuō)，在沒(méi)有實(shí)物前，人們并不清楚自己要的是什么。但是在看到成品后，他們可以輕易地判斷是否符合自己的喜好或期望。因此，在為錯(cuò)誤的設(shè)計(jì)方向投入過(guò)多前，了解用戶對(duì)風(fēng)格的期望和需求，從而確定整個(gè)網(wǎng)站或產(chǎn)品的視覺(jué)風(fēng)格是有必要的。

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

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

如何創(chuàng)建情緒板？

首先，需要明確體驗(yàn)關(guān)鍵詞，在一個(gè)設(shè)計(jì)項(xiàng)目中，通過(guò)進(jìn)行涉眾訪談和用戶研究，研究，設(shè)計(jì)人員創(chuàng)建了產(chǎn)品的人物角色，基于人物角色，綜合用戶研究結(jié)果以及品牌/營(yíng)銷文檔，可以得出體驗(yàn)關(guān)鍵詞（Experience Keywords）。當(dāng)人物角色和體驗(yàn)關(guān)鍵詞都確定后，可以通過(guò)使用情緒板來(lái)探索網(wǎng)站或產(chǎn)品的視覺(jué)風(fēng)格，并作為和內(nèi)部人員進(jìn)行早期溝通的基礎(chǔ)。

體驗(yàn)關(guān)鍵詞（Experience Keywords）舉例：

其次，應(yīng)基于時(shí)間限制，個(gè)人工作習(xí)慣以及用戶的需求對(duì)情緒板的呈現(xiàn)方式進(jìn)行選擇。一般來(lái)說(shuō)，可以從實(shí)體/數(shù)碼，以及拼貼/精致模板兩個(gè)維度來(lái)區(qū)分情緒板的呈現(xiàn)方式。

A. 拼貼畫

這是一種最簡(jiǎn)單地創(chuàng)建情緒板的方式。使用這一模式，無(wú)需考慮諸如字體和特定顏色之類的細(xì)節(jié)問(wèn)題。找到那些可以激發(fā)靈感的素材，其中可能包含那些傳達(dá)相似風(fēng)格和情緒的網(wǎng)站的截圖。這種方式快速，有趣，但是，具有一定的含混性。

B.?精致化的模板

模板可用來(lái)展示不同的元素。如：

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

一般來(lái)說(shuō)，情緒板可以以實(shí)體的方式呈現(xiàn)，也可以以數(shù)碼方式呈現(xiàn)的，考慮到成本，時(shí)間等因素，我們多選用數(shù)碼的方式，因?yàn)檫@種方式更為設(shè)計(jì)師提供了更靈活，多樣的選擇。

第三步是選擇素材創(chuàng)建情緒板，這是一個(gè)迭代的過(guò)程。

如何使用情緒板？

在使用情緒板過(guò)程中，體驗(yàn)關(guān)鍵詞的作用相當(dāng)重要。這里首先要說(shuō)明下什么是體驗(yàn)關(guān)鍵詞，可以參考以下的PPT截圖（此PPT為UCD CHINA2009年會(huì)上工作坊所用的PPT）。

獲得體驗(yàn)關(guān)鍵詞是情緒板的第一項(xiàng)工作，一般從內(nèi)部涉眾（相關(guān)的產(chǎn)品和設(shè)計(jì)人員）及外部用戶兩種渠道獲得。

自涉眾訪談和用戶研究中，可以收集大量的體驗(yàn)詞樣本。在獲得這些樣本后，可以內(nèi)部進(jìn)行討論，通過(guò)歸納整理精簡(jiǎn)為幾個(gè)關(guān)鍵詞。

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

在內(nèi)部，由視覺(jué)設(shè)計(jì)師來(lái)完成，要注意以下幾點(diǎn)：

1. 需要制作3套以上情緒板供評(píng)審。
2. 制作的過(guò)程是個(gè)迭代的過(guò)程，需要內(nèi)部團(tuán)隊(duì)慎重討論決定。
3. 情緒板的形式可以有多種，如拼貼畫或精致化的模板（二者的區(qū)別在文檔中有）

如果招募外部用戶，則要注意以下幾點(diǎn)：

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

可以呈現(xiàn)給用戶的圖片有限的，因此，在挑選圖片時(shí)，需要內(nèi)部研究和設(shè)計(jì)人員協(xié)同，根據(jù)視覺(jué)設(shè)計(jì)所需要考慮的幾個(gè)維度結(jié)合已有的關(guān)鍵詞進(jìn)行圖片的篩選。一般來(lái)說(shuō)，在將圖片呈現(xiàn)給用戶之前，內(nèi)部人員已經(jīng)明確了每一張圖片所代表的意義，在用戶選擇和訪談結(jié)束后，兩方面的數(shù)據(jù)綜合分析才能獲得最終的結(jié)果。

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

OK，那么現(xiàn)在我們已經(jīng)知道了情緒板的運(yùn)用方法，就來(lái)馬上動(dòng)手試試。（以下內(nèi)容僅作演示，可能略顯粗糙）

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

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

根據(jù)關(guān)鍵詞尋找的一些圖片（色系盡量豐富，風(fēng)格盡量多樣）：

然后根據(jù)查找的圖片提取出用色：

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

接著是第二次顏色篩選，主要去掉競(jìng)品色（美團(tuán)外賣、餓了么、百度外賣、達(dá)達(dá)、派樂(lè)趣、點(diǎn)評(píng)、京東到家、愛(ài)鮮蜂等）和臟色。當(dāng)然去掉之后發(fā)現(xiàn)基本沒(méi)什么可用的顏色了，因此還有一個(gè)問(wèn)題就是，如果競(jìng)品色不足以影響到我們的品牌色的話（在可控范圍內(nèi)），還是可以采用的。具體這個(gè)決策過(guò)程需要大家一起討論決定。

篩選出以下顏色：

現(xiàn)在我們基本可以控制可選擇的主題色了，如果人力足夠的話，建議多做幾個(gè)版本以查看具體使用效果。當(dāng)然，也可能是老板拍板來(lái)決定。

其他的視覺(jué)風(fēng)格，如圖像風(fēng)格、文字排版等也可以在這個(gè)調(diào)研基礎(chǔ)上進(jìn)行確定。

【優(yōu)設(shè)名師訪談系列】

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

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量108萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com