大廠都在用的情緒板，到底是什么？（二）

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

往期回顧：

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

情緒板創建使用流程

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

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

并且，情緒板的執行流程是沒有一個固定的方式的，完全可以根據自己的需要進行調整和變更，可以簡單也可以復雜，下面是我自己總結和應用的情緒板執行流程。

1. 關鍵詞提取

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

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

以及高效、簡潔、實用、精致、質感、格調等等。

2. 映射衍生詞

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

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

在大廠專業的用研中，這些映射是通過對用戶進行訪談，咨詢他們對這些關鍵字的聯想統計出來的，比如下面這樣的表格。

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

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

3. 圖片檢索

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

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

4. 情緒板制作

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

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

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

5. 風格分析

有了上面這些相關聯的大量圖片素材以后，就到了我們進行風格分析的環節了，在這個環節不是直接就能定義好我們后續設計的風格，而是要先對下面兩個目標做一個粗略的制定 —— 色彩和目標風格參考。

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

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

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

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

總結

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

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

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

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

并且，熟練掌握情緒板的設計師，就可以跳出流程的條條框框，根據自己的需要靈活的創建和應用情緒板。

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

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

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