情緒板經(jīng)常被吐槽？簡(jiǎn)單4步幫你做出用得上的情緒板！

幾乎大部分 UI 設(shè)計(jì)師在作品集里都會(huì)放入“情緒板”這個(gè)模塊，但是這個(gè)模塊的利弊其實(shí)都很明顯，大家都想通過(guò)展示情緒板來(lái)告訴面試官我是如何定義色彩和產(chǎn)品的視覺(jué)風(fēng)格調(diào)性的，但是大部分設(shè)計(jì)其實(shí)在做界面之前都沒(méi)有做過(guò)情緒板，而是反套的。也就是做完界面后，看用到了什么舒服的顏色，然后再去找一些圖片和關(guān)鍵詞，做成“情緒板”。

所以大家看到的情緒板幾乎都特別的雞肋，一是關(guān)鍵詞太普遍寬泛，幾乎所有產(chǎn)品都能夠用。二是圖片和關(guān)鍵詞關(guān)聯(lián)性并不大，只是好看或者帶有需要的顏色而已。

例如上方我在設(shè)計(jì)平臺(tái)截取的一些例子，關(guān)鍵詞包括：品質(zhì)、自然、舒服、簡(jiǎn)約等等，幾乎可以用到每一種產(chǎn)品，圖片和關(guān)鍵詞也并沒(méi)有太強(qiáng)的關(guān)聯(lián)，為什么自由是一座雪山？為什么活躍是一些電子產(chǎn)品？為什么簡(jiǎn)約是一幢高樓？為什么專(zhuān)業(yè)是一臺(tái)黃色的電腦？這樣的案例比比皆是。

所以很多設(shè)計(jì)師對(duì)情緒板的理解出現(xiàn)了問(wèn)題，風(fēng)格定義這件“事”，其實(shí)是很難的，需要沉淀非常多的經(jīng)驗(yàn)，從初學(xué)、臨摹、原創(chuàng)、大量風(fēng)格探索嘗試后才能逐漸形成風(fēng)格定義的能力。風(fēng)格定義也絕對(duì)不是找一些圖片吸取一些色彩，就搞定了，所以市面上 UI 作品同質(zhì)化的原因就是大家還沒(méi)有掌握定義風(fēng)格的方法。

什么是情緒板

用白話來(lái)說(shuō)，情緒板反饋的就是產(chǎn)品的相關(guān)利益者對(duì)產(chǎn)品的感受和期望，并將其具像化的方法和過(guò)程。每一個(gè)產(chǎn)品利益者對(duì)產(chǎn)品的期望都不同，一千個(gè)人心里都有一千個(gè)哈姆雷特，那么產(chǎn)品呈現(xiàn)出什么樣子，我們需要能夠?qū)⑦@些感受和想法進(jìn)行視覺(jué)具像化。這些感受和想法包括了產(chǎn)品的定位、用戶(hù)的需求、管理者的戰(zhàn)略規(guī)劃等等。

為什么要做情緒板

情緒板的結(jié)果并不會(huì)直接告訴設(shè)計(jì)師具體設(shè)計(jì)的參數(shù)，不會(huì)告訴設(shè)計(jì)師應(yīng)該用什么顏色，應(yīng)該用什么字體。而是一種視覺(jué)導(dǎo)向與感知指引，用來(lái)給設(shè)計(jì)師進(jìn)行參考，并且設(shè)計(jì)師要始終如一的貫徹這些引導(dǎo)，這是原因之一。另一個(gè)很重要的原因就是在做情緒板的過(guò)程中，能夠讓設(shè)計(jì)團(tuán)隊(duì)、產(chǎn)品管理者對(duì)該產(chǎn)品呈現(xiàn)的感知和理念能夠達(dá)成一致。和情緒板類(lèi)似的方法還有例如品牌沖刺、人格化塊等一系列用于探索產(chǎn)品在視覺(jué)感知和產(chǎn)品品牌定位上的方法。

情緒板的步驟

其實(shí)很多人對(duì)一些方法比較排斥，我個(gè)人也是如此。大家一聽(tīng)到方法、方法論頭都炸了，你不如直接講案例來(lái)的更直接一點(diǎn)。好，我們今天會(huì)將方法和步驟都給大家講解一下，保證大家能夠看懂。

先來(lái)將具體的執(zhí)行步驟，方法流程的簡(jiǎn)單和復(fù)雜還是來(lái)自于當(dāng)下的條件和資源，以及我們的期望。同時(shí)情緒板運(yùn)用的時(shí)機(jī)也有講究，它并不適合運(yùn)用在比較成熟的產(chǎn)品設(shè)計(jì)中，而適合用在 0-1 或者 1-2 版本的階段。在這個(gè)階段里產(chǎn)品品牌初具雛形，用戶(hù)數(shù)據(jù)和特征也逐漸成型，所以我們有更多的數(shù)據(jù)來(lái)對(duì)這些反饋進(jìn)行準(zhǔn)確的描述。

如果我們的條件和資源豐富，那么需要邀請(qǐng)用戶(hù)一起來(lái)參與，如果條件不允許，那么至少也要將公司其他部門(mén)以及高層管理一起來(lái)參與，當(dāng)然如果這些條件都不具備，那么設(shè)計(jì)團(tuán)隊(duì)和設(shè)計(jì)個(gè)人也可以進(jìn)行，但是對(duì)個(gè)人經(jīng)驗(yàn)要求比較高。

那么我們先理想化的來(lái)一次講解。

第一步-邀請(qǐng)相關(guān)利益者并進(jìn)行訪談研究

我們需要邀請(qǐng)一下人員參與此次情緒板的方法研究：1.用戶(hù)（注意覆蓋多類(lèi)樣本 3 名左右即可）2.設(shè)計(jì)團(tuán)隊(duì)成員（覆蓋到其他參與方法的人員人數(shù)）3.其他利益相關(guān)部門(mén)負(fù)責(zé)人（2-3 人）4.老板（必須邀請(qǐng)）。由牽頭設(shè)計(jì)師進(jìn)行主持。

首先每一位設(shè)計(jì)師找到其他參與方法的人員，一對(duì)一開(kāi)始進(jìn)行訪談，主要圍繞以下幾個(gè)問(wèn)題：

1. 產(chǎn)品帶給你什么感受

2. 您覺(jué)得和 xx（競(jìng)品）比起來(lái)有什么差別

3. 如果將我們的產(chǎn)品比作一個(gè)人，你覺(jué)得他是誰(shuí)

4. 如何向朋友介紹這個(gè)產(chǎn)品

5. 它和你身邊的那種物品有相似的氣質(zhì)

……

還有更多的問(wèn)題可以根據(jù)不同產(chǎn)品定位進(jìn)行拓展。為什么要問(wèn)這些問(wèn)題呢？這些問(wèn)題將覆蓋到用戶(hù)對(duì)產(chǎn)品的一種主觀感受，并將其擬人、擬物化，讓用戶(hù)能描述出和競(jìng)品在主觀感知上的差異和區(qū)別。于是我們會(huì)得到一些關(guān)于這些問(wèn)題的關(guān)鍵詞。

第二步-產(chǎn)出體驗(yàn)關(guān)鍵詞并進(jìn)行三維映射

得出的關(guān)鍵詞例如我們經(jīng)常會(huì)說(shuō)的品質(zhì)、自然這樣比較抽象的詞，也會(huì)得到像父親、皮帶這樣具像化的關(guān)鍵詞。這里要注意的是當(dāng)用戶(hù)描述出他心中的關(guān)鍵詞后一定要進(jìn)行追問(wèn)，例如為什么您覺(jué)得它像父親而不是母親呢？這里就要時(shí)刻去找到用戶(hù)關(guān)鍵詞背后的真實(shí)想法。

接下來(lái)我們會(huì)用到三維映射法，將所有關(guān)鍵詞都劃分出 3 種類(lèi)型：

1.視覺(jué)映射 2.感受映射 3.具象映射，并繼續(xù)訪談?dòng)脩?hù)：您剛才說(shuō)產(chǎn)品給您的感覺(jué)是時(shí)尚的，那么您覺(jué)得時(shí)尚在你心中是什么顏色的，時(shí)尚給您一種什么感覺(jué)以及如果讓您用一個(gè)物品來(lái)代替時(shí)尚，您會(huì)選擇什么物品？

這樣做的好處是能夠讓抽象的概念具像化，讓設(shè)計(jì)師能夠切實(shí)理解用戶(hù)的主觀感受。一般如果我們只讓用戶(hù)描述主觀感受其實(shí)是不準(zhǔn)確的。

第三步-讓參與者創(chuàng)建情緒板

當(dāng)我們把所有提煉出來(lái)的關(guān)鍵詞都找到對(duì)應(yīng)的三維映射后，我們將針對(duì)最后的結(jié)果進(jìn)行可視化圖片收集。例如用戶(hù)覺(jué)得香奈兒包包可以用來(lái)代替時(shí)尚這個(gè)關(guān)鍵詞，那么我們就需要收集更多有關(guān)香奈兒包包的圖片。在收集圖片過(guò)程中要注意這幾點(diǎn)：

1. 圖片必須高清不模糊

2. 圖片的數(shù)量必須大于 6 張

3. 圖片的色彩盡量覆蓋多種

4. 圖片盡量簡(jiǎn)潔有主體

將所有關(guān)鍵詞都收集完圖片后，我們讓用戶(hù)在其中進(jìn)行挑選，讓其選出最符合他說(shuō)出來(lái)的那個(gè)關(guān)鍵詞的圖片，每個(gè)關(guān)鍵詞選擇 1-3 張圖片。這三個(gè)步驟中，老板的建議和感知也是很關(guān)鍵的，因?yàn)槲覀冎烙脩?hù)一般都會(huì)做很多利己的選擇，所以也只能作為一定的參考。而老板則是產(chǎn)品的創(chuàng)始人，對(duì)產(chǎn)品的定位和期望有更深入的想法，同時(shí)這也將為我們后續(xù)推動(dòng)工作提供很有價(jià)值的參考。

那有小伙伴說(shuō)，老板沒(méi)有審美，很土怎么辦。其實(shí)這個(gè)不重要，在這幾個(gè)環(huán)節(jié)中同時(shí)也要避免為了迎合老板而做出的決定，我們只需要聽(tīng)老板的感知然后去分析即可，并不是老板說(shuō)要什么就一定要去實(shí)現(xiàn)，否則就違背了本次方法的初衷。

第四步-結(jié)合情緒板制定設(shè)計(jì)風(fēng)格

情緒板最后輸出的其實(shí)就是關(guān)鍵詞+具像化的圖片。到最后一個(gè)步驟，大家覺(jué)得是不是還是很迷茫，那和我們做設(shè)計(jì)到底有什么關(guān)系呢？所以我們?cè)谧鐾赀@一系列操作之后，需要由資深、專(zhuān)家來(lái)牽頭完成風(fēng)格的腦爆和定義。例如我們可以在設(shè)計(jì)團(tuán)隊(duì)內(nèi)繼續(xù)進(jìn)行討論，圍繞形、色、字、構(gòu)、質(zhì)五個(gè)維度進(jìn)行腦暴。每個(gè)人對(duì)這五個(gè)維度進(jìn)行效果制作，可以是 UI 首頁(yè)、海報(bào)、插畫(huà)，以提煉出來(lái)的關(guān)鍵詞和圖片為準(zhǔn)繩進(jìn)行設(shè)計(jì)。可能需要幾天時(shí)間，之后再次進(jìn)行會(huì)議討論，為什么每個(gè)人的設(shè)計(jì)是這樣的，思路是什么。

所以其實(shí)情緒板最后的效果，很大程度上取決于設(shè)計(jì)師的設(shè)計(jì)能力。如果團(tuán)隊(duì)都是設(shè)計(jì)新人，那么也沒(méi)有必要做這個(gè)方法了。

案例

接下去我說(shuō)一下之前我們項(xiàng)目中的案例。我們當(dāng)時(shí)根據(jù)用戶(hù)以及產(chǎn)品定位提煉出來(lái)這些關(guān)鍵詞：沙發(fā)、撞色、口紅、香奈兒包、潮流、多彩、品質(zhì)。針對(duì)這些關(guān)鍵詞我們繼續(xù)尋找圖片。

根據(jù)這些圖片，我們從形色質(zhì)構(gòu)質(zhì)五個(gè)維度去尋找設(shè)計(jì)的靈感，例如在形狀方面我們提煉出了棱形作為一個(gè)特征符號(hào)，可以運(yùn)用在圖標(biāo)、背景修飾元素以及容積形狀等地方。

顏色我們提煉出了產(chǎn)品主色以及輔助色，讓頁(yè)面更加活潑、輕量化。在金剛區(qū)圖標(biāo)以及 banner 背景的運(yùn)用上，用到了撞色以及淺色背景突出主題的設(shè)計(jì)。

字體方面主要是運(yùn)用到一些特殊字體時(shí)候的字體設(shè)計(jì)，例如在今日特賣(mài)以及明日預(yù)告等一些固定欄目標(biāo)題的場(chǎng)景。

構(gòu)，運(yùn)用在了一些氛圍大圖的結(jié)構(gòu)布局上，采用了大標(biāo)題結(jié)合大主體的對(duì)角線構(gòu)圖以及對(duì)稱(chēng)構(gòu)圖。還有在 banner 的設(shè)計(jì)中利用前中后景營(yíng)造的縱深感。

質(zhì)，運(yùn)用到的是在圖片背景中采用了氛圍元素的搭配以及一些微漸變，讓模塊的視覺(jué)豐富更有質(zhì)感。

之前給大家介紹的 NOKNOK 應(yīng)用，一款像素風(fēng)格的游戲社區(qū)產(chǎn)品。其實(shí)設(shè)計(jì)風(fēng)格這回事，大家不要過(guò)度的追求，能營(yíng)造出非常獨(dú)特的風(fēng)格必須要滿足以下幾個(gè)條件：

1. 功能簡(jiǎn)單。大家覺(jué)得淘寶和新浪微博的風(fēng)格是什么？是不是很難明顯的感知有什么獨(dú)特的風(fēng)格？因?yàn)楫a(chǎn)品題量大、功能復(fù)雜用戶(hù)多，所以很難設(shè)計(jì)出滿足所有用戶(hù)且很獨(dú)特的風(fēng)格。

2. 風(fēng)格小眾。例如像素、極簡(jiǎn)、搖滾、潮流，這些風(fēng)格是很容易出效果的，平時(shí)我們接觸的大部分產(chǎn)品都是滿足大部分用戶(hù)的視覺(jué)偏好，突然有一天你看到這些小眾風(fēng)格你就會(huì)覺(jué)得很特別。但是這些小眾的風(fēng)格是很有局限的，例如你讓淘寶去做成極簡(jiǎn)風(fēng)，或者大眾點(diǎn)評(píng)去做成很潮流的風(fēng)格，人家功能點(diǎn)這么多，沒(méi)有空間讓你去做視覺(jué)的發(fā)揮，就無(wú)法展示出用來(lái)表達(dá)風(fēng)格的細(xì)節(jié)。

所以，如果你們不是正在創(chuàng)業(yè)或者從零開(kāi)始設(shè)計(jì)，那么就不要太追求小眾化的設(shè)計(jì)風(fēng)格。情緒板這回事聽(tīng)起來(lái)很專(zhuān)業(yè)，但實(shí)際操作起來(lái)還是有很多問(wèn)題的，一味的追求方法不如自己多練習(xí)幾種不同的設(shè)計(jì)風(fēng)格，多看看國(guó)內(nèi)外的優(yōu)秀作品。希望大家在不久的將來(lái)都可以成為獨(dú)當(dāng)一面的設(shè)計(jì)專(zhuān)家。

歡迎關(guān)注作者的微信公眾號(hào)：「應(yīng)謀鬼計(jì)」