幫你理清創(chuàng)意的情緒板，是設(shè)計(jì)項(xiàng)目前期的利器。

想想看，你花費(fèi)了大量的時(shí)間來(lái)構(gòu)思，設(shè)計(jì)，最后做出了一個(gè)完整的原型，可是客戶直接拒絕了你的設(shè)計(jì)，甚至吐槽你的設(shè)計(jì)和他之前的需求毫無(wú)關(guān)聯(lián)。這種情況聽(tīng)起來(lái)和你熟悉吧？的確，每個(gè)設(shè)計(jì)師都有過(guò)類似的不快經(jīng)歷，并且希望有規(guī)避這種情況的辦法，或者建議。然而，實(shí)際上，并不存在完美的解決方案。

不過(guò)，設(shè)計(jì)師如果能夠善用情緒板（Mood Boarding）的話，倒是能夠在很大程度上降低這一風(fēng)險(xiǎn)，讓整個(gè)工作流程更加順暢。

什么是情緒板

情緒板不僅僅受到越來(lái)越多的設(shè)計(jì)師的歡迎，而且它原本就流行于創(chuàng)意工作者當(dāng)中。情緒板的概念并不難理解，實(shí)際上和它字面的意思差不多，設(shè)計(jì)師和創(chuàng)意工作者將想要設(shè)計(jì)的對(duì)象的相關(guān)的圖片和素材都整理到一起，將他們的想法和概念視覺(jué)化地呈現(xiàn)出來(lái)。

情緒板和線框圖、原型不一樣，它不會(huì)顯示未來(lái)項(xiàng)目所涉及到的詳細(xì)圖片，它旨在營(yíng)造產(chǎn)品對(duì)應(yīng)的正確的情緒和符合預(yù)期的感覺(jué)。

情緒板通常是設(shè)計(jì)師和客戶通力協(xié)作共同完成的，情緒板可以在相對(duì)緊湊的時(shí)間框架內(nèi)完成，并且將抽象的概念專戶為相對(duì)真實(shí)的感覺(jué)。在情緒板前，設(shè)計(jì)師能夠更好地分享想法，這比幾個(gè)短語(yǔ)構(gòu)成的描述來(lái)的更加真實(shí)。

如何創(chuàng)建情緒板

情緒板本身是試驗(yàn)配色、字體、樣式和視覺(jué)層次結(jié)構(gòu)的好地方。每個(gè)人都可以將自己認(rèn)為合適的組件加入到情緒板當(dāng)中，而UI/UX設(shè)計(jì)師則通常會(huì)使用使用各種不同的樣本，來(lái)創(chuàng)造不同特征的界面元素。常見(jiàn)的情緒板有幾種不同的類型，我們分別來(lái)看看。

拼貼式情緒板

設(shè)計(jì)師通常會(huì)搜集一些免費(fèi)可用的高分辨率圖片，作為素材，以便今后能夠用到項(xiàng)目項(xiàng)目當(dāng)中去。這些圖片可以制作為情緒板。這些拼貼當(dāng)中還可以加入字體、配色、插畫(huà)作為示例。

這種類型的情緒板是制作最快、最簡(jiǎn)單的。不過(guò)如果客戶需要知道細(xì)節(jié)，那么這樣的情緒板可能無(wú)法滿足他們的需求。

參考合集

另外一種獲取靈感的方式，是在Behance 和Dribbble 這樣的平臺(tái)上找到真實(shí)的設(shè)計(jì)項(xiàng)目，從中篩選出可用的，和當(dāng)前項(xiàng)目風(fēng)格、功能相似的，借用現(xiàn)成的項(xiàng)目來(lái)表達(dá)你的設(shè)計(jì)思路。這樣還能創(chuàng)造出讓客戶易于理解的情緒板。

模板式情緒板

這種情緒板的設(shè)計(jì)和原型、線框圖有很多相似的地方，設(shè)計(jì)師借用這種模板式的設(shè)計(jì)，展示出產(chǎn)品的結(jié)構(gòu)和視覺(jué)層次。不同于嚴(yán)謹(jǐn)?shù)腢I設(shè)計(jì)和線框圖、原型，這種模板式的情緒板相對(duì)更加粗糙，不涉及細(xì)節(jié)，組件隨機(jī)分布，圖片和粗略的布局結(jié)合在一起，說(shuō)明了基本的構(gòu)思。這種情緒板成型更快，因?yàn)樗恍枰?xì)節(jié)支撐。

為何UI/UX設(shè)計(jì)師需要?jiǎng)?chuàng)建情緒板？

其實(shí)很多人都會(huì)發(fā)現(xiàn)這樣的狀況，線框圖和原型常常被描述為設(shè)計(jì)過(guò)程中必不可少的組成部分，而情緒板則并沒(méi)有被視作為必須的組成部分。有些設(shè)計(jì)師認(rèn)為情緒板只是好玩或者僅僅只具備娛樂(lè)性。但是，很多設(shè)計(jì)師依然將其視作為創(chuàng)作的重要組成部分，我們將原因總結(jié)為下面7個(gè)部分：

1、節(jié)省時(shí)間和精力

情緒板通常無(wú)需太多時(shí)間就能完成，這意味著只需要在幾個(gè)小時(shí)內(nèi)就能夠快速構(gòu)建出來(lái)。設(shè)計(jì)師可以以此為基礎(chǔ)為用戶提供一個(gè)快速可用的視覺(jué)指南。情緒板可以被輕松編輯，并不費(fèi)力。

設(shè)計(jì)師可以在此基礎(chǔ)上快速跳轉(zhuǎn)到下一個(gè)階段，進(jìn)行原型設(shè)計(jì)。此外，如果客戶對(duì)于概念設(shè)計(jì)并不滿意，設(shè)計(jì)人員也不用耗費(fèi)太多的時(shí)間制作詳細(xì)的演示文稿，快速調(diào)整設(shè)計(jì)方向即可。

2、獲取靈感

當(dāng)然，設(shè)計(jì)師不能總依靠靈感來(lái)做設(shè)計(jì)，畢竟設(shè)計(jì)更多的是要靠思考來(lái)完成的。但是如果設(shè)計(jì)師真能從獲得啟發(fā)，設(shè)計(jì)則可以被更為有效的完成。情緒板的作用，是將想法和情緒都匯集到一起，幫設(shè)計(jì)師催生出產(chǎn)品應(yīng)有的感覺(jué)。有的時(shí)候，親自動(dòng)手的過(guò)程，能夠讓設(shè)計(jì)更好的理解，也更為容易找到合理的想法，為什么不試試呢？

3、找到正確的配色方案

以拼貼為主的情緒板常常是由引人注目的作品所構(gòu)成的，其中所包含的圖片、照片和插畫(huà)常常包含著不錯(cuò)的配色方案，即使的UI尚未搭建起來(lái)，配色方案總能從中找到一些不錯(cuò)的搭配。

4、加強(qiáng)和客戶的溝通

當(dāng)產(chǎn)品尚且處于早期的抽象概念的階段之時(shí)，設(shè)計(jì)師和客戶在討論的時(shí)候很難完全互相理解，在沒(méi)有實(shí)際可討論的設(shè)計(jì)稿的前提下，在風(fēng)格、細(xì)節(jié)上往往很難達(dá)成一致。而這個(gè)時(shí)候，情緒板的作用就顯得很突出了，它往往能夠讓溝通和討論有一個(gè)實(shí)在的落腳點(diǎn)。

5、少說(shuō)，多展示

正如同我們常說(shuō)的一圖勝千言，任何長(zhǎng)時(shí)間的報(bào)告都不如視覺(jué)化的方式來(lái)呈現(xiàn)你的計(jì)劃和想法。詞匯很難直觀地在客戶眼中轉(zhuǎn)化成圖片，但是視覺(jué)素材卻是更為可靠的指南。

在項(xiàng)目早期，信息豐富的但是集中的情緒板是描繪未來(lái)產(chǎn)品形態(tài)的有效工具。

6、找到確定的設(shè)計(jì)風(fēng)格

如果創(chuàng)意團(tuán)隊(duì)沒(méi)有從客戶那里收到明確的設(shè)計(jì)風(fēng)格的要求，那么這個(gè)任務(wù)就要落在設(shè)計(jì)師的肩膀上了。想要確定大體風(fēng)格，你沒(méi)有必要構(gòu)建一個(gè)詳細(xì)的、完整的原型。將不同的紋理、細(xì)節(jié)、字體和配色添加到情緒板上，快速的構(gòu)建風(fēng)格化的特征，可以比原型更快地確定設(shè)計(jì)風(fēng)格。

7、讓客戶參與到這個(gè)過(guò)程中

獲得客戶的信任的方法之一，就是讓他們盡可能的參與到項(xiàng)目當(dāng)中。在這個(gè)階段，如果他們?cè)敢猓梢苑e極地參與到樣式的選取和樣品的選擇上。情緒板的好處在于，無(wú)論是不是設(shè)計(jì)師，都能夠簡(jiǎn)單快速地參與進(jìn)來(lái)。

無(wú)論是拼貼式的情緒板還是參考合集情緒板，都不難制作，最關(guān)鍵的是，設(shè)計(jì)師可以在這個(gè)過(guò)程中很好地了解客戶的品味和喜好，并且了解他們對(duì)于項(xiàng)目的期望。

情緒板實(shí)例

為了更好的理解情緒板在實(shí)際設(shè)計(jì)實(shí)戰(zhàn)中的應(yīng)用，下面將會(huì)展示 Tubik Studio 的設(shè)計(jì)師 Dima Panchenko 為他的項(xiàng)目所制作的情緒板。在展示情緒板的時(shí)候，他還針對(duì)不同的情緒板制作了一般性的說(shuō)明。

1、這個(gè)情緒板是用來(lái)幫助客戶確定風(fēng)格偏好的

2、這個(gè)情緒板呈現(xiàn)的是客戶要求的風(fēng)格

3、這個(gè)是情緒板呈現(xiàn)的是一個(gè)足球相關(guān)應(yīng)用的概念

情緒板是創(chuàng)意工作的好幫手，無(wú)論是用來(lái)尋找靈感還是強(qiáng)化工作流程，都頗為實(shí)用。

譯者：@陳子木

原文作者：Tubik Studio

原文地址：uxplanet

譯文地址：優(yōu)設(shè)網(wǎng)

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖由作者提供