在產(chǎn)品設(shè)計或日常的設(shè)計溝通中，相關(guān)人員可能都產(chǎn)生過類似的疑惑，即如何才可以將抽象的情緒與思考，轉(zhuǎn)化為有效溝通的設(shè)計語言，并推動后續(xù)產(chǎn)品視覺的探索與誕生。本篇文章里，作者便結(jié)合案例，對情緒板的結(jié)合應用進行了解讀，一起來看。

想象一下，當你加班加點花了大量時間設(shè)計了細節(jié)豐富的原型圖，但客戶卻反饋“這不是我們想要的感覺”，會是什么樣的心情？

在設(shè)計溝通中，一旦出現(xiàn)了“感覺”這個詞，大概率會讓這場溝通陷入僵局。相信，每位設(shè)計師至少都有過一次這樣的經(jīng)歷。那么，如何將抽象的情緒和思考順利轉(zhuǎn)化為能有效溝通的設(shè)計語言，并幫助設(shè)計師朝著同一方向探索產(chǎn)品視覺？這時候情緒板的作用就凸顯出來了。下面就和大家分享一下“情緒板在視覺風格定義中的應用”。

一、情緒板方法介紹

1. 情緒板是什么？

情緒板（Mood Board）指一系列圖片的拼貼，是常用的表達設(shè)計定義和方向的設(shè)計工具/方法，協(xié)助設(shè)計師明確設(shè)計方向，提供靈感支持。

簡單來說，就是將抽象的想法變成具象的素材定義設(shè)計方向。其本質(zhì)是將用戶的情緒可視化，因此稱為情緒板。情緒板既不是初稿也不是最終的風格方向，可以理解為是一種產(chǎn)品設(shè)計風格的參考，設(shè)計師在了解了相關(guān)的產(chǎn)品背景后，基于設(shè)計主題給出的一個較為初始的設(shè)計想法，用于提取最終視覺風格的工具。

2. 情緒板的使用環(huán)節(jié)與作用

情緒板主要應用于“概念設(shè)計”階段，也經(jīng)常用于產(chǎn)品改版前的視覺風格探索。其主要作用有以下5點：

作用1：在概念設(shè)計之初，作為連接用戶需求與設(shè)計師想法的工具，避免設(shè)計師只憑直覺去理解用戶和設(shè)計產(chǎn)品。

作用2：情緒板能夠巧妙地向用戶傳達設(shè)計理念，并獲得用戶的理解和反饋。

作用3：作為設(shè)計師背后的方法論支持，提高設(shè)計的科學性與效率。

作用4：進一步驗證設(shè)計師想法，對后續(xù)的設(shè)計方向提供幫助。

作用5：將抽象的想法轉(zhuǎn)化成視覺符號，更加直觀。大大降低用戶、研究員、設(shè)計師的溝通成本。

3. 情緒板傳統(tǒng)的使用方法

如何創(chuàng)建情緒板？根據(jù)過往經(jīng)驗，在情緒板傳統(tǒng)的使用方法中主要有五大步驟：

第一步：明確原生關(guān)鍵詞。

原生關(guān)鍵詞可以來自產(chǎn)品定位、品牌調(diào)性、功能特色、目標用戶的需求特征等，通過內(nèi)部討論或者用戶訪談明確得出。例如：品質(zhì)、可靠、易用，關(guān)鍵詞不宜太多，3-5個比較合適。

第二步：挖掘衍生關(guān)鍵詞。

衍生關(guān)鍵詞是原生關(guān)鍵詞的發(fā)散和聯(lián)想，可以通過內(nèi)部頭腦風暴或用戶訪談挖掘。例如：原生關(guān)鍵詞是品質(zhì)，衍生關(guān)鍵詞就可能是莫蘭迪色、柔和、陶瓷質(zhì)感等。

如何獲得衍生關(guān)鍵詞？

設(shè)計師或用戶研究員可以通過頭腦風暴或者目標用戶簡單訪談獲取，看看通過原生關(guān)鍵詞能映射到什么具體的內(nèi)容，將“抽象的關(guān)鍵詞”落到“具象的定義”，可以圍繞著視覺映射、心境映射、物化映射等三個維度來發(fā)散。

1）視覺映射

視覺映射可以理解為聯(lián)想到的視覺表現(xiàn)，比如“看到品質(zhì)這個詞，你能聯(lián)想到什么顏色，什么顏色可以代表品質(zhì)？”，也可以是“什么樣的形狀、質(zhì)感能代表品質(zhì)？”等等。

2）心境映射

心境映射可以理解為聯(lián)想到的心境感受，比如“看到品質(zhì)這個詞，你有什么感受？”、“還有什么詞語可以給你帶來與品質(zhì)這個詞語相似的感受？”等等。

3）物化映射

物化映射可以理解為聯(lián)想到的具體事物，比如“根據(jù)品質(zhì)這個詞能聯(lián)想到什么產(chǎn)品，什么品牌？”等等。

通過上述步驟，設(shè)計師或用戶研究員已經(jīng)獲取了原生關(guān)鍵詞所映射到的具體內(nèi)容，即衍生關(guān)鍵詞，也是設(shè)計師尋找相關(guān)圖片的起點。

第三步：搜索圖片素材。

獲得衍生關(guān)鍵詞后，接下來要看設(shè)計師。設(shè)計師可以利用Pinterest、Behance、Unsplash等圖片資源豐富的平臺收集與關(guān)鍵詞相匹配的圖片素材。

在選取圖片的過程中也應當注意以下三大原則：

1. 避免選擇帶有l(wèi)ogo、或者非高清的圖片；
2. 應盡量選取抽象反映這種風格或者感覺的圖片，而非具體的某個人或物；
3. 避免局限在固定的領(lǐng)域。設(shè)計是相通的，可以涵蓋界面設(shè)計、家居、建筑等領(lǐng)域。

第四步：創(chuàng)建情緒板，讓用戶挑選圖片。

對搜集的圖片進行內(nèi)部篩選，挑選合適的圖片進行用戶測試。測試前研究員需要將圖片進行打亂，邀請目標用戶根據(jù)原生關(guān)鍵詞進行挑選，選擇他們認為最接近他們內(nèi)心想法的圖片然后進行追問。比如哪些圖片能代表“品質(zhì)”、為什么選擇這張圖片、圖片中哪些元素給你傳遞這樣的感覺等等。

第五步：提取設(shè)計元素。

最后結(jié)合用戶的選擇和訪談結(jié)果，進行視覺風格的元素提取，主要包括：色彩、圖形、結(jié)構(gòu)、質(zhì)感等。

以色彩提取舉例，根據(jù)圖片提取到的顏色，進行調(diào)整、補充，并擴展部分元素，以豐富的配色來提升色彩層次與細節(jié)，具體如下：

二、結(jié)合實際案例看情緒板的創(chuàng)新應用

以上是情緒板的傳統(tǒng)使用方法，雖然可以幫助設(shè)計師有意識地捕捉和固化感性的因素，解決“感覺”的困擾。但在實際的運用過程中，也存在著以下3點局限性：

1. 情緒板傳統(tǒng)使用方法的局限性

做一次完整的情緒板所耗費的時間、人力成本是比較高的：需要召集相關(guān)利益者如產(chǎn)品研發(fā)人員、設(shè)計師、用戶研究員、具有代表性的用戶等角色，后期也需要花時間進行圖片的搜集、結(jié)果統(tǒng)計，以及設(shè)計要素的提煉。

用戶依據(jù)關(guān)鍵詞所選擇的圖片不足以明確設(shè)計風格走向：因為不同用戶對關(guān)鍵詞的心理感受、所能代表的圖片可能不一致，導致圖片選擇結(jié)果差異很大，缺乏統(tǒng)一性和方向性，設(shè)計師也較難提取共性的設(shè)計元素。

不同關(guān)鍵詞所代表圖片的差異讓設(shè)計風格產(chǎn)生割裂感：第二點局限性是說用戶選擇結(jié)果的不一致性，而第三點則是不同關(guān)鍵詞之間存在圖片風格沖撞或者交叉的問題，如果還是按照元素來提取容易讓最終的視覺風格和設(shè)計要素存在一種割裂感，很難融合到一起。

2. 情緒板的敏捷應用

由于意識到傳統(tǒng)情緒板方法的局限性，我們在幫某車企進行APP視覺風格改版時進行了一些不一樣的嘗試：

把傳統(tǒng)的情緒板流程“明確原生關(guān)鍵詞——挖掘衍生關(guān)鍵詞——搜索圖片素材——創(chuàng)建情緒板，并讓用戶挑選圖片——提取設(shè)計元素”。調(diào)整為：“明確原生關(guān)鍵詞——挖掘衍生關(guān)鍵詞——搜索圖片素材，并創(chuàng)建風格板——讓用戶挑選風格板的偏好與雷區(qū)——提取設(shè)計風格”，根據(jù)目標用戶選擇最高頻的風格板結(jié)果來指導下一步設(shè)計方向，在節(jié)約時間成本、設(shè)計風格高效明確、結(jié)果更具說服力三大優(yōu)勢，具體如下：

1. 節(jié)省時間，包括結(jié)果統(tǒng)計、要素提取等時間成本；
2. 用戶想要的設(shè)計風格更為明確，既可以驗證設(shè)計師想法，也能從用戶側(cè)獲取 TA 對這種風格的看法，以及設(shè)計上避免踩雷的地方，指導設(shè)計更為高效；
3. 結(jié)果更有說服力，直接獲得多少用戶喜歡這種風格，而不是多少用戶喜歡這幾張圖片。

下面結(jié)合某車企APP視覺風格改版，來說明情緒板的敏捷應用：

第一步和第二步：原生關(guān)鍵詞的確認和衍生關(guān)鍵詞的挖掘。

前兩步與傳統(tǒng)情緒板的使用方法是一致的。在正式開始之前，我們從已有用戶對該車企品牌的看法、產(chǎn)品定位、品牌調(diào)性等方面提取了五個關(guān)鍵詞：品質(zhì)、可靠、經(jīng)濟、經(jīng)典、舒適；設(shè)計師和研究員通過內(nèi)部頭腦風暴對原生關(guān)鍵詞進行聯(lián)想和發(fā)散，輸出衍生關(guān)鍵詞。

到這里為止基本與常規(guī)方法是一樣的，接下來第三、四、五步與傳統(tǒng)情緒板方法有些差異。

第三步：搜索圖片素材，創(chuàng)建風格板

結(jié)合衍生關(guān)鍵詞，設(shè)計師按照圖片的選取原則，利用 Pinterest、Behance 等平臺挑選合適的素材。在這個過程中，設(shè)計師還需要對未來將要改版的視覺風格形成一定的想法和假設(shè)，不是機械地對著關(guān)鍵詞搜集圖片；其次，除了本品的衍生關(guān)鍵詞所代表的圖片以外，還可以搜集競品的作為參照。

以下是設(shè)計師通過搜集圖片形成的風格板（僅舉例）

第四步：讓用戶挑選風格板的偏好與雷區(qū)。

接下來就是用戶挑選圖片組的環(huán)節(jié)，研究員出示風格板，用戶全部瀏覽后選擇偏好與雷區(qū)。在選擇偏好時可以問用戶“請選擇認為最喜歡/符合該車企印象的圖片”，可以限定選擇數(shù)量，也可以不限制，可以是1張圖片，也可以是圖片中的元素。

以下是風格板的統(tǒng)計結(jié)果展示（僅舉例）。

用戶喜歡什么樣的視覺風格：簡單、干凈、舒適 | 科技感、穩(wěn)重。

選擇完偏好后，也請用戶選擇“不能接受的圖片是什么”，此外還需要用戶作出原因解釋。這樣可以讓視覺設(shè)計貼近偏好，避免踩雷，也能更直接地指導整體風格、主色調(diào)&配色、氛圍感等等。以下是設(shè)計雷區(qū)的舉例，設(shè)計師在設(shè)計過程中盡量避免使用以下元素：

上述步驟中，如果時間許可的情況下，可以結(jié)合關(guān)鍵詞來進行（比如讓用戶挑選能代表產(chǎn)品印象關(guān)鍵詞，哪些圖片組能代表某個關(guān)鍵詞等等）。這樣可以獲得更為多元化的信息，也可以看出用戶對該車企的印象是否契合原生關(guān)鍵詞，哪些圖片/元素所喚起的情感反應與品牌調(diào)性更符合等更加細致的內(nèi)容。

第五步：提取設(shè)計風格。

最后一步設(shè)計師可直接根據(jù)風格板的選擇結(jié)果，再進行重組，最后結(jié)合之前的用研結(jié)果、設(shè)計原則、品牌調(diào)性與產(chǎn)品定位輸出了三套視覺設(shè)計方案，具體如下：

當然，值得注意的是，最終的視覺方案是要經(jīng)過多輪討論才能確定下來的，改版設(shè)計還需要符合產(chǎn)品的定位、目標、業(yè)務(wù)價值與用戶訴求等，經(jīng)過多方面考量才會落地，是一個逐步打磨、反復修改的過程。

3. 如何衡量視覺改版效果是否受到用戶歡迎

那么，如何衡量視覺改版效果是否受到用戶歡迎？在正式深入設(shè)計各個頁面之前，我們還做了視覺風格的盲測，主要從測試產(chǎn)品、測試內(nèi)容、測試結(jié)果三大方面進行測試：視覺風格偏好盲測

測試產(chǎn)品：本品（原版&新版）、競品（燃油車和新能源），聚焦視覺風格改動較大的頁面。

測試內(nèi)容：包括對不同主頁面的量化評分，以及合意性測試，以此來了解、確定目標用戶對改版后的視覺風格偏好與直觀感受。

測試結(jié)果：

1. 某車企新版APP的視覺風格偏好得分顯著高于原版，與新能源車企APP差異不大；
2. 新版視覺給用戶的感受是，比原版更為簡潔、舒適、年輕。通過對比新能源發(fā)現(xiàn)，新版設(shè)計的方向還可以更著力于科技感的營造等。

在設(shè)計開發(fā)上線后，我們還可以采用以下方法來側(cè)面評價視覺改版的效果：

搭建指標體系來評價：指標體系是度量用戶體驗水平的一種常見手段，依據(jù)用戶體驗五要素模型，視覺美觀處于表現(xiàn)層，可以作為指標體系的其中一個重要維度。具體可通過視覺一致性、色彩搭配美觀度等細分維度來評價，獲得改版前后的視覺風格對比分值，從而來評估視覺效果是否有提升。

進行前后對比的可用性測試：我們也可以通過用戶側(cè)進行產(chǎn)品的可用性測試，看看改版后視覺類型的可用性問題是否有減少、視覺美觀的滿意度評分是否有提高等方面來評估。

三、寫在最后

在設(shè)計前期的用戶研究階段，我們可以通過專家走查、可用性測試等方法來發(fā)現(xiàn)產(chǎn)品的問題，在功能或者交互層面作出改進。但視覺設(shè)計更多是源于美學、外觀和感覺，能夠激發(fā)用戶特定的情感反應。優(yōu)秀的視覺設(shè)計可以在用戶剛接觸產(chǎn)品時，短時間內(nèi)營造出良好的第一印象。有研究還表明這種良好的印象還可以讓用戶忽視一些產(chǎn)品功能上的不足。

所以，視覺設(shè)計是很重要的一環(huán)，在用戶體驗領(lǐng)域中，探索視覺風格有很多方法，情緒板是我們常用的方法之一。它不僅僅可以在初期方向探索時用來摸索與定位，在設(shè)計項目深化的過程中，每次的評審和改進，前期做的情緒板仍然起著良好的參照作用；對于設(shè)計師而言，情緒板也是用來與客戶、老板交流的有效手段。