在很多項(xiàng)目總結(jié)中窗宦，我們幾乎都能看到情緒板的運(yùn)用赦颇，精美的圖片搭配符合主題的關(guān)鍵詞，可以向需求方和產(chǎn)品側(cè)準(zhǔn)確地表達(dá)出頁面的設(shè)計(jì)方向和風(fēng)格赴涵。那什么是情緒版呢沐扳，我們又該怎么建立情緒版呢，以下是我寫的一點(diǎn)點(diǎn)總結(jié)句占。

什么是情緒板沪摄？

情緒板定義

情緒板（Mood Board），主要是對設(shè)計(jì)的產(chǎn)品和相關(guān)主題方向的色彩纱烘、圖片杨拐、影像或其他材料的收集，從而引起某些情緒反應(yīng)擂啥，以此作為設(shè)計(jì)方向或者形式的參考哄陶，是常用的表達(dá)設(shè)計(jì)定義和方向的設(shè)計(jì)方法論。幫助設(shè)計(jì)師明確視覺設(shè)計(jì)需求哺壶，用于提取配色方案屋吨、視覺風(fēng)格蜒谤、質(zhì)感材質(zhì)，以指導(dǎo)視覺設(shè)計(jì)至扰，為設(shè)計(jì)師提供靈感鳍徽。

情緒版@1x

情緒板的作用

情緒板首先能組織整個(gè)項(xiàng)目的靈感，保持風(fēng)格和美學(xué)的一致性敢课，并與客戶的目標(biāo)和期望保持一致阶祭。

情緒板是在開始實(shí)際設(shè)計(jì)前確定和完善產(chǎn)品風(fēng)格的好方法。在資源和時(shí)間方面直秆，情緒版比模型或原型的成本要低得多濒募，并且能直接傳達(dá)出關(guān)于最終設(shè)計(jì)風(fēng)格的信息。

對設(shè)計(jì)師來說：情緒板是定義視覺風(fēng)格和指導(dǎo)設(shè)計(jì)方向的依據(jù)圾结；對團(tuán)隊(duì)：在團(tuán)隊(duì)之間傳遞設(shè)計(jì)靈感與設(shè)計(jì)思路瑰剃，從而使想法充分融合，深化設(shè)計(jì)筝野。情緒板能夠巧妙地向客戶傳達(dá)設(shè)計(jì)理念培他。例如當(dāng)設(shè)計(jì)師在說扁平化或極簡等設(shè)計(jì)風(fēng)格時(shí)，客戶或者我們的產(chǎn)品可能并不知道這些風(fēng)格是怎樣的遗座。這個(gè)時(shí)候我們就需要建立情緒版向客戶和產(chǎn)品傳達(dá)我們的想法舀凛。

情緒板的組成

每個(gè)情緒板都是不同的，包含的內(nèi)容會(huì)根據(jù)項(xiàng)目需要而有所不同途蒋。

重要的是要包含盡可能多的元素猛遍，讓想表現(xiàn)的設(shè)計(jì)思路更清晰。情緒板中包含的內(nèi)容包括以下幾種号坡。

（1）圖片

主要包括品牌圖片懊烤、圖庫上的攝影/產(chǎn)品圖片、插畫宽堆、logo等腌紧。

圖片

（2）顏色

色板是情緒板的重要組成部分，根據(jù)搜集的素材我們能確定哪種色系跟整體需求更相近畜隶，再通過吸色來獲得配色信息壁肋。

色彩情緒版

（3）文字

搜集與品牌或主題相關(guān)的文案，或者展示選用的某種特定的字體籽慢。

文字

（4）紋理

設(shè)計(jì)中涉及到的紋理或圖案都應(yīng)該包含在情緒板上浸遗。

紋理

建立情緒板的步驟

當(dāng)我們接到一個(gè)界面改版需求時(shí)，會(huì)考慮哪些點(diǎn)呢箱亿？大部分人都會(huì)重點(diǎn)關(guān)注美觀度跛锌，但是這往往是不夠的，我們既要把界面做得好看届惋，也要做得科學(xué)髓帽。這次要說的情緒板菠赚，就可以幫助我們做出一個(gè)更加有理有據(jù)的界面設(shè)計(jì)。

那么情緒板到底如何使用呢郑藏？我們先來看看整體的操作流程:

流程

（1）確定原生關(guān)鍵詞

通過產(chǎn)品定位衡查、涉眾訪談和以往的用戶研究數(shù)據(jù)，可以獲得大量的關(guān)鍵詞译秦，而這些關(guān)鍵詞并不是都能用得上峡捡，我們需要篩選出既符合產(chǎn)品定位又能達(dá)到用戶心理預(yù)期的击碗。比如我們要做一個(gè)金融產(chǎn)品筑悴，最終可以提取3個(gè)基礎(chǔ)關(guān)鍵詞：收益、安全稍途、靈活阁吝。

注意要點(diǎn)：基礎(chǔ)關(guān)鍵詞一般在3-5個(gè)之間，同時(shí)原生關(guān)鍵詞械拍，一定要抽象化突勇，不能過于具體。（例如：咖啡就是個(gè)具體名次坷虑，腦海中一下子就能聯(lián)想出該物體）

原生關(guān)鍵詞

（2）確定衍生關(guān)鍵詞

由于第一步的原生關(guān)鍵詞大多都比較抽象甲馋，因此需要對其進(jìn)行發(fā)散和聯(lián)想。從而需要更多具體關(guān)鍵詞迄损，這樣我們后面才能更容易找到相應(yīng)的圖片定躏，具體關(guān)鍵詞一般都是具體的物體。為了更科學(xué)地找圖芹敌，第一步確定3-5個(gè)原生關(guān)鍵詞痊远，第二步在每個(gè)原生關(guān)鍵詞下拓展3個(gè)衍生關(guān)鍵詞。

衍生關(guān)鍵詞

（3）搜集圖片素材

關(guān)鍵詞確定好后氏捞，我們終于可以在圖庫中碧聪，使用關(guān)鍵詞進(jìn)行圖片的搜集了。這時(shí)候如果圖片太多液茎，不但會(huì)增加我們搜圖的工作量逞姿，后期也不方便用戶進(jìn)行篩選，如果圖片太多捆等，則可能搜到的圖片重復(fù)率太高哼凯，導(dǎo)致得出的結(jié)論不夠準(zhǔn)確。所以一般來說1個(gè)關(guān)鍵詞對應(yīng)搜3－5張圖片就足夠了楚里。

收益

（4）創(chuàng)建圖片庫式的情緒板

搜集好圖片后断部，可以先在部門內(nèi)部篩選一次，再將挑選出來的圖片打亂并依次排列班缎，邀請目標(biāo)用戶進(jìn)行再次挑選蝴光，下圖為一部分圖片：

收集圖片

在挑選圖片的過程中她渴，我們需要問產(chǎn)品或者客戶2個(gè)問題：

1. 分別選擇最能代表“投資收益”、“資金安全”蔑祟、“周轉(zhuǎn)靈活”的幾張圖片趁耗。

2. 為什么選擇了這張圖片？圖片的哪個(gè)元素讓你覺得有安全的感覺疆虚？

問題1：是為了挑選出最終能代表關(guān)鍵詞的圖片苛败；

問題2：是為了能讓我們了解用戶選擇圖片的原因，挖掘出用戶的心理情緒径簿，從而了解到用戶的視覺偏好罢屈，而這2個(gè)點(diǎn)都可以為我們后面做視覺設(shè)計(jì)做好鋪墊，如下圖：

經(jīng)過這樣一輪分析篇亭，我們選擇的任何一個(gè)顏色缠捌，都將會(huì)有理有據(jù)，具備科學(xué)度译蒂。

收益產(chǎn)品圖

情緒板的應(yīng)用

（1）情緒板在彩色化卡片的運(yùn)用

彩色化卡片曼月，是一個(gè)非常常見的功能入口，擁有各類顏色柔昼，但問題是：我們?nèi)绾涡兄行У靥嵘?xì)節(jié)感哑芹？

經(jīng)過之前情緒板的鋪墊，彩色化版塊在設(shè)計(jì)時(shí)應(yīng)該做到了色彩屬性與業(yè)務(wù)屬性相連接捕透，才能與用戶的認(rèn)知匹配聪姿。比如穩(wěn)健投資的業(yè)務(wù)屬性是穩(wěn)定，而藍(lán)色的色彩屬性也有安全激率、穩(wěn)定的意思咳燕，那么就做到了圖標(biāo)色彩的選取連接業(yè)務(wù)屬性。

彩色卡片

（2）情緒板在圖標(biāo)風(fēng)格上的運(yùn)用

根據(jù)用戶畫像可以發(fā)現(xiàn)用戶在投資過程中容易出現(xiàn)緊張不安的心理情緒乒躺，大多數(shù)用戶都傾向?qū)で笠粋€(gè)“靠譜”的平臺(tái)招盲。

且通過之前情緒板的調(diào)研發(fā)現(xiàn)，用戶覺得一個(gè)圖片能給他安全感嘉冒，除了顏色之外曹货，堅(jiān)固圓潤的造型，同樣也能傳遞安全的感受讳推。因此在圖標(biāo)設(shè)計(jì)中采用圓角而非直角的設(shè)計(jì)細(xì)節(jié)也是為了緩和用戶情緒顶籽，表達(dá)一種穩(wěn)重和安全感。如Tab欄圖標(biāo)和列表流圖標(biāo)银觅，都采用較為圓胖的圓角設(shè)計(jì)礼饱。

圖標(biāo)

（3）情緒板在界面呼吸感的運(yùn)用

同樣的，界面風(fēng)格采用大留白的設(shè)計(jì)來增加頁面的呼吸感，也是了緩解用戶緊張不安的心理情緒镊绪。

什么樣的圖片能給用戶帶來安全匀伏？探索圖片本質(zhì)，我們同樣能運(yùn)用至界面設(shè)計(jì)蝴韭，這就是情緒板的多樣性够颠。

界面

以上就是我所理解的情緒版的應(yīng)用。