在上一篇文章中，我們已經(jīng)對情緒板的內(nèi)容做了掃盲，我們知道，情緒面板是一個用來提煉設(shè)計思路的工具，包含各種圖片、設(shè)計素材。

往期回顧：

但光知道它是什么，必然是不夠的，掃盲不能只掃一半，我們還要再來說說它要怎么用。

情緒板創(chuàng)建使用流程

學(xué)會怎么應(yīng)用情緒板，就要先了解情緒板的創(chuàng)建方法和流程。網(wǎng)上流傳的流程大多來自幾年前淘寶UED團隊的分享，大致如下圖：

具體流程怎么樣我就不多做解釋了，因為這個流程對于一般團隊或者設(shè)計師來說，都太復(fù)雜了，完全不利于我們實際產(chǎn)出的落地和執(zhí)行。

并且，情緒板的執(zhí)行流程是沒有一個固定的方式的，完全可以根據(jù)自己的需要進行調(diào)整和變更，可以簡單也可以復(fù)雜，下面是我自己總結(jié)和應(yīng)用的情緒板執(zhí)行流程。

1. 關(guān)鍵詞提取

在項目設(shè)計前，我們要獲取3-5個必要的關(guān)鍵字詞組，這些關(guān)鍵字就是我們本次設(shè)計所要實現(xiàn)的產(chǎn)品、交互或視覺目標(biāo)，通常由一些比較抽象的形容詞組成。

常見的比如：高端、大氣、上檔次……

以及高效、簡潔、實用、精致、質(zhì)感、格調(diào)等等。

2. 映射衍生詞

第二部，就是在原有這些詞匯的基礎(chǔ)上，來衍生出一些新的詞語。而這種衍生詞匯，不是簡單腦暴一下就能產(chǎn)生出來的，而是要有目的性的進行提取。

而我將這種衍生詞匯的方式劃分成了視覺、心境、物化三個類型。

在大廠專業(yè)的用研中，這些映射是通過對用戶進行訪談，咨詢他們對這些關(guān)鍵字的聯(lián)想統(tǒng)計出來的，比如下面這樣的表格。

如果還要通過用研的方式去獲取這些內(nèi)容，不僅操作起來非常麻煩，而且訪談樣本數(shù)不夠的話獲得的詞匯準(zhǔn)確性也會有非常大的誤差（訪談一直是我認為最沒用的用研流程）。

所以，這個操作是我們可以通過自己的聯(lián)想發(fā)散來完成，如果覺得思路枯竭，也可以自己找同事、朋友來進行「看詞填空」活動，獲取相應(yīng)的衍生詞，衍生詞匯的數(shù)量適中即可，千萬不要認為越多越好。

3. 圖片檢索

之所以我們有一個映射衍生詞的流程，是因為初始獲得的關(guān)鍵字通常都是一些「假大空」的套話，例如耳熟的高端、大氣、上檔次，直接使用些詞匯去獲得指定的圖片素材內(nèi)容是不現(xiàn)實的，需要縮小范圍。

所以，我們要在衍生詞的基礎(chǔ)上，分別對幾個關(guān)鍵字增加不同的圖片檢索關(guān)鍵字和方向，然后就可以去不同的圖庫中進行查找了。

4. 情緒板制作

搜索了大量的圖片，我們要從中挑選出符合我們需要的素材內(nèi)容，然后進行下載和整理。而整理的工具重點推薦使用 Eagle，如果沒有購買 Eagle 的情況下，花瓣或本地文件夾管理也可以做為替代品。

首先，為本次項目創(chuàng)建一個文件夾，然后在下級創(chuàng)建不同關(guān)鍵字的文件夾，再根據(jù)每個關(guān)鍵字相關(guān)的衍生詞創(chuàng)建子文件夾，將我們挑選到的圖片置入其中，如果習(xí)慣使用標(biāo)簽的同學(xué)也可以使用衍生詞標(biāo)簽進行替代。

這樣操作完成以后，我們就可以在項目根目錄中，選中文件夾，并開啟 「顯示子文件夾內(nèi)容」，就可以看到下級有關(guān)的所有圖片內(nèi)容了。

5. 風(fēng)格分析

有了上面這些相關(guān)聯(lián)的大量圖片素材以后，就到了我們進行風(fēng)格分析的環(huán)節(jié)了，在這個環(huán)節(jié)不是直接就能定義好我們后續(xù)設(shè)計的風(fēng)格，而是要先對下面兩個目標(biāo)做一個粗略的制定 —— 色彩和目標(biāo)風(fēng)格參考。

對于色彩的分析上，就是根據(jù)我們整體收集的素材中，哪一個色系的觀感和產(chǎn)品的關(guān)鍵字以及整體的需求相近，那么我們就重點挑選這個色系的圖片出來，并通過手動吸色或相關(guān)工具來獲得它的配色信息，如下圖所示。

然后，我們要再去搜索和情緒板呈現(xiàn)的感受近似的設(shè)計案例，作為設(shè)計參考。這是一個將抽象的感受在UI中具象化的過程，而最好的方式并不是我們直接對著圖去想設(shè)計的細節(jié)，而是用已經(jīng)完成的案例來做參考總結(jié)，比如下面收集的這些相關(guān)案例。

從這些設(shè)計的實際案例中，我們就可以得到一些設(shè)計細節(jié)上的指示，比如使用直角按鈕、橫線分割、純色填充、留白較大等等，和大量使用漸變、投影、毛玻璃的設(shè)計明顯不是一種類型。所以總結(jié)了這些參考，那么我們腦子里也就有畫面了，可以展開具體的設(shè)計了。

到這一步，我們對于情緒板的創(chuàng)建和使用，也就完成了。而剩下的，就是通過在具體的設(shè)計過程中對前面的內(nèi)容進行嘗試，設(shè)計出一套符合目標(biāo)和讓我們滿意的結(jié)果出來。

總結(jié)

我們在網(wǎng)上看到的很多UI展示案例中，都是直接在情緒板的模塊里放了幾個關(guān)鍵字和圖片，然后直接給出細節(jié)制定的結(jié)果。

除了一些牽強附會的引用以外，項目展示的部分都是經(jīng)過大量精簡后的結(jié)果，并沒有把使用的過程展示出來。

情緒板對于我們完成項目視覺風(fēng)格的制定是有非常好的幫助，但情緒板的應(yīng)用不像做應(yīng)用題一樣通過公式求解，獲取一個固定的值。而是通過流程去獲得一個風(fēng)格的范圍，并在這個范圍內(nèi)進行風(fēng)格化的嘗試建立最終的項目視覺風(fēng)格。

剛開始應(yīng)用情緒板，肯定會覺得流程特別繁瑣，執(zhí)行起來特別麻煩，但隨著我們對它理解的深入，以及使用經(jīng)驗的提升，應(yīng)用起來就會越來越順手。

并且，熟練掌握情緒板的設(shè)計師，就可以跳出流程的條條框框，根據(jù)自己的需要靈活的創(chuàng)建和應(yīng)用情緒板。

關(guān)于情緒板的介紹也就講到這里，之后有機會的話，我還會展示一個更具體的設(shè)計案例從創(chuàng)建情緒板到具體完成設(shè)計的全過程記錄。

感謝大家的收看，我們下次再見~

歡迎關(guān)注作者的微信公眾號：「超人的電話亭」