在設(shè)計(jì)上圖片比其他要素更容易讓人理解，所以我們可以利用情緒板（英: Mood Board），來(lái)使設(shè)計(jì)工作更加流暢，縮短制作的時(shí)間、改善工作流程。

你經(jīng)歷過(guò)如果有很多設(shè)計(jì)師參與了同一個(gè)項(xiàng)目，在會(huì)見(jiàn)客戶的時(shí)候，設(shè)計(jì)的認(rèn)識(shí)和圖片不一致而導(dǎo)致打回重做這樣的事情嗎？

在設(shè)計(jì)上圖片比其他要素更容易讓人理解，所以我們可以利用情緒板（英: Mood Board），來(lái)使設(shè)計(jì)工作更加流暢，縮短制作的時(shí)間、改善工作流程。

這一次為大家?guī)?lái)的是情緒板的制作方法參考，讓我們一起來(lái)看一下制作的方法與要點(diǎn)吧。

詳細(xì)從以下開(kāi)始。

什么是情緒板？

情緒板（英: Mood Board），在平面設(shè)計(jì)領(lǐng)域尤其是室內(nèi)設(shè)計(jì)和時(shí)尚界被廣泛使用，它將靈感和概念在紙或者屏幕上進(jìn)行拼貼組合。照片與插畫(huà)設(shè)計(jì)，配色版與質(zhì)地，他可以包含任何信息，在進(jìn)行項(xiàng)目的時(shí)候可以為你提供幫助。

你是因?yàn)橄旅鎯煞N中的哪一種理由來(lái)制作情緒板的呢？

1. 為了自己：在開(kāi)始設(shè)計(jì)之前，通過(guò)收集一些想法與靈感，可以簡(jiǎn)化設(shè)計(jì)的流程，將茫然的盯著雪白的屏幕的時(shí)間大幅縮短。另外，你的概念被用戶送承認(rèn)，也能節(jié)約你的時(shí)間和勞力。
2. 為了客戶：通過(guò)制作情緒板，在完成最終產(chǎn)品之前，你就可以得到一個(gè)大致的概念供客戶參考，同時(shí)當(dāng)你的設(shè)計(jì)概念太過(guò)超前時(shí)，你們也可以得到一個(gè)方向上的參考。另外，設(shè)計(jì)圖片還能避免因?yàn)檎Z(yǔ)言而產(chǎn)生的誤解。就算你們?cè)僬f(shuō)同一件事情，因?yàn)闇贤ㄉ系膯?wèn)題也會(huì)出現(xiàn)不同的理解，而可視化的圖片則可以讓大家的意見(jiàn)都統(tǒng)一起來(lái)。

如何制作一個(gè)漂亮的情緒板

不管你制作情緒板是為了自己還是為了別人，讓我們先來(lái)研究一下：如何制作一個(gè)漂亮的情緒板？

01. 為自己干吧

當(dāng)你在考慮公司或者網(wǎng)站的品牌設(shè)計(jì)該用什么好時(shí)，你可以將各種不同的要素組合成情緒板來(lái)進(jìn)行參考。

如果這么做，最終設(shè)計(jì)的全部要素都組合在一起，省去了復(fù)雜工作的時(shí)間。那么以下面的樣本為例，通過(guò)將特定的紋理、插圖、字體類型、配色方案組合在一起，客戶能夠?qū)邮降娜恳黄鸫_認(rèn)。

02. 將品牌質(zhì)量和內(nèi)容進(jìn)行匹配

與之相反的，為了反應(yīng)出品牌形象，表現(xiàn)出氛圍等各種各樣的理由，這些并不是項(xiàng)目所必須的元素，但也會(huì)加入到情緒板中。

在下面這個(gè)樣本案例中，為了讓人在品牌形象中聯(lián)想到夏天、戶外、熱，所以添加了這些照片。在這種情緒板中，通過(guò)插入能反應(yīng)出設(shè)計(jì)主題的圖片，將公司的風(fēng)格與受眾層都通過(guò)設(shè)計(jì)表達(dá)出來(lái)了。

03. 化簡(jiǎn)為繁

對(duì)于設(shè)計(jì)師而言，同一個(gè)設(shè)計(jì)項(xiàng)目是沒(méi)有辦法提出各種不同的構(gòu)思的。在這種情況下使用情緒板，對(duì)于發(fā)表設(shè)計(jì)想法是最合適不過(guò)的了。在來(lái)看下面這個(gè)案例，其中每個(gè)情緒板都有著三種不同的設(shè)計(jì)概念。

首先是暖色系的配色，溫暖干凈的現(xiàn)代復(fù)古風(fēng)（英: Vintage-Modern）是其顯著特征。

接下來(lái)在第二個(gè)陰沉的（英: Muted-Color）配色中，除了使用噪點(diǎn)密布的紋理，表現(xiàn)出復(fù)古的風(fēng)格。

在第三個(gè)里面使用了棱角分明的直線，表現(xiàn)出了建筑受幾何圖案的影響的大都市風(fēng)格。

04. 來(lái)確定一個(gè)設(shè)計(jì)理念吧

不管是維多利亞風(fēng)格還是上個(gè)世紀(jì)中葉，設(shè)計(jì)總是受著特定時(shí)代的影響。在下面這些樣品是對(duì)1950年、60年的【航空旅行的黃金時(shí)代（英: The Golden Age of Air Travel）】的再現(xiàn)。事實(shí)上通過(guò)參考那個(gè)時(shí)候的明信片和行李標(biāo)簽，就可以得到像活版印刷樣式與配色等相互之間組合的靈感。

05. 限制解除

情緒板所包含的內(nèi)容，沒(méi)有必要一定要與項(xiàng)目有著直接的聯(lián)系。例如下面的針對(duì)用戶界面的項(xiàng)目，就表現(xiàn)出了【看起來(lái)是新鮮干凈的空氣】這樣的感覺(jué)。我們可以看到，從食品包裝到藝術(shù)繪畫(huà)，靈感從各種各樣的地方匯聚到了一起。并沒(méi)有什么不能使用的。

06. 整理一下

從頭腦風(fēng)暴后對(duì)于靈感的簡(jiǎn)單概括到成為井井有條的項(xiàng)目概要，你需要認(rèn)真的梳理你的情緒板來(lái)使他們?cè)诟鞣N各樣的類別上一一對(duì)應(yīng)。但作為探討一個(gè)新的技術(shù)，你可以嘗試一下將各種不同的設(shè)計(jì)要素整理在一起成為一個(gè)全新的風(fēng)格。

在下面這個(gè)為網(wǎng)頁(yè)設(shè)計(jì)而制作的情緒板中，除了基本的配色與字體這些基本的風(fēng)格之外，按鈕、圖標(biāo)、標(biāo)題與正文樣式、具有特色的內(nèi)容等等這些實(shí)際設(shè)計(jì)中需要用到的要素也一并呈現(xiàn)在了你的眼前。

07. 列出所有的要點(diǎn)

當(dāng)你制作出一個(gè)井然有序的情緒板（特別是給領(lǐng)導(dǎo)與客戶看的那種）時(shí)，一定要將必要的信息全部給列出來(lái)，給人一種看上去這是經(jīng)過(guò)深思熟慮后制作出來(lái)的感覺(jué)。

以下面這個(gè)面相界面設(shè)計(jì)的案例來(lái)說(shuō)，字體、信息、圖標(biāo)、配色等最低限度的項(xiàng)目都列舉出來(lái)了。當(dāng)你開(kāi)始設(shè)計(jì)時(shí)，有這樣一個(gè)可視化的計(jì)劃書(shū)作為你的設(shè)計(jì)參考，可以節(jié)約你的時(shí)間提高你的工作效率。

08. 應(yīng)用靈感

將你的設(shè)計(jì)靈感直接表現(xiàn)在大家眼前而不是通過(guò)行為描述。尤其是在品牌設(shè)計(jì)上尤為明顯。

在下面的設(shè)計(jì)案例中，通過(guò)將名片與LOGO和字體的組合會(huì)有哪些效果出現(xiàn)，將他們?nèi)空宫F(xiàn)出來(lái)會(huì)更容易使客戶理解。

09. 多去實(shí)驗(yàn)

情緒板不僅對(duì)你的設(shè)計(jì)靈感有幫助，還能夠?qū)⑻囟ǖ南敕ň唧w的表現(xiàn)在你的眼前。下面這些設(shè)計(jì)案例，對(duì)同一種標(biāo)志設(shè)計(jì)，它提供了不同的配色和風(fēng)格可以進(jìn)行參考。

10. 添加補(bǔ)充文本

都說(shuō)百聞不如一見(jiàn)，但語(yǔ)言也是十分強(qiáng)大的工具。在你的情緒板上添加上補(bǔ)充說(shuō)明的文字吧。

在下面這個(gè)設(shè)計(jì)案例中，通過(guò)添加簡(jiǎn)短的說(shuō)明文字，將重要的情報(bào)和照片一一對(duì)應(yīng)，使內(nèi)容得到了充分的解釋。

11. 混合＆匹配

LOGO、圖標(biāo)、字體組合等你至今為止需要使用的所有設(shè)計(jì)要素想要全部展現(xiàn)出來(lái)，使用情緒板是非常有效的。在下面的案例中，將反應(yīng)整體風(fēng)格的全部要素分門(mén)別類的整理好，讓人很輕松的就能看懂。

12. 決定風(fēng)格

選擇一個(gè)統(tǒng)一的風(fēng)格，會(huì)讓你的設(shè)計(jì)主題看起來(lái)更加順眼，也能幫助讀者輕松的了解你的設(shè)計(jì)理念。在下面的案例中，結(jié)合扁平化的風(fēng)格選用了清爽干凈的配色，整體的優(yōu)化做的非常棒。

13. 不斷調(diào)整，找出最優(yōu)方案

在這里請(qǐng)?jiān)试S我再次強(qiáng)調(diào)，一旦涉及到多個(gè)項(xiàng)目，視覺(jué)上的統(tǒng)一感是非常有必要的。這樣做的話，就算你有一些微小的調(diào)整，在整體上都能很輕松的進(jìn)行確認(rèn)。尤其是在多個(gè)項(xiàng)目同時(shí)進(jìn)行時(shí)這會(huì)對(duì)你非常有幫助。

14. 將重點(diǎn)集于一處

如果創(chuàng)建一個(gè)和設(shè)計(jì)全體相關(guān)的情緒板感到非常困難的話，嘗試著將重點(diǎn)集中在一個(gè)要素上吧。

下面這個(gè)案例是一個(gè)非常漂亮的配色方案。將沙灘主題和品牌概念相結(jié)合，選用了非常鮮艷的配色。利用配色很好的向你暗示了品牌氛圍。

接下來(lái)的這個(gè)也是將實(shí)際使用的配色方案和字體進(jìn)行組合。從第一個(gè)設(shè)計(jì)要素開(kāi)始一個(gè)接一個(gè)的將設(shè)計(jì)開(kāi)發(fā)方案添加上去，最終得到了一個(gè)完整的情緒板。

15. 檢查設(shè)計(jì)背景

面相雜志設(shè)計(jì)的情緒板，我們可以看到包含一些雜志特有的風(fēng)格（例如巨大的首字母Q和特別大的引號(hào)）。設(shè)計(jì)的背景，要和上下文相匹配，通過(guò)提前預(yù)想將要用到的必要要素，你可以完成一個(gè)非常棒的情緒板。

16. 修修補(bǔ)補(bǔ)，更進(jìn)一步

當(dāng)你和客戶一起制作情緒板時(shí)，不斷地被客戶要求修改是很正常的。在下面這個(gè)案例中，在最初的情緒板完成之后，根據(jù)來(lái)自客戶的需求，變成了和之前并不一樣卻很受客戶喜歡的設(shè)計(jì)。

明亮、生動(dòng)、自然系的圖片是其最初的概念。

而修改后的概念，雖然運(yùn)用到還是相同的圖片，卻變得更加灰暗，體現(xiàn)出了一種復(fù)古的氛圍。

17. 貫徹主題

和客戶共同完成情緒板的另一種方法，就是沿著公司或品牌形象的主題，多做幾個(gè)情緒板供客戶選擇。

在下面這個(gè)案例中，他做了三種切合主題又不一樣的情緒板。不管哪一版都很好的進(jìn)行了總結(jié)，第二版圍繞著時(shí)事畫(huà)刊來(lái)設(shè)計(jì)，第三版則運(yùn)用了相同的風(fēng)格以出版物為中心總結(jié)的。

主題：信賴（英: Trustworthy）和現(xiàn)代（英: Modern）。突出清爽干凈的感覺(jué)，在傳統(tǒng)的配色加上簡(jiǎn)潔的襯線字體，強(qiáng)調(diào)出了誠(chéng)信（英: Credibility）/ 可靠（英: Trustworthiness）的感覺(jué)。

圍繞可靠與現(xiàn)代的主題，總結(jié)設(shè)計(jì)要素。

圍繞出版物為中心總結(jié)，表現(xiàn)出可靠與現(xiàn)代的感覺(jué)。

主題：美（英: Beautiful）與專業(yè)（英: Professional）。伴隨著溫暖的配色，選擇字體和紋理，表現(xiàn)出人性化的氛圍。實(shí)現(xiàn)了易于訪問(wèn)的友好配色。

美（英: Beautiful）與專業(yè)（英: Professional）是設(shè)計(jì)要素的主題。

包含了美（英: Beautiful）與專業(yè)（英: Professional）主題的各種各樣的出版物。

主題：現(xiàn)有品牌形象（多彩、簡(jiǎn)單、人為中心）的擴(kuò)張。利用自然的配色作為要點(diǎn)，賦予人類柔和的印象，將圖形要素表現(xiàn)出了明快生動(dòng)的瑞士風(fēng)情。

配合這個(gè)主題選擇配色等設(shè)計(jì)要素。

反應(yīng)這個(gè)主題的文具商品和雜志，海報(bào)等出版物。

最后

情緒板非常的方便，在各種方面都能夠靈活的運(yùn)用。這作為設(shè)計(jì)的一部分，使用這一次介紹的要點(diǎn)，在下個(gè)項(xiàng)目中使用來(lái)幫助你的作品一氣呵成吧。那么，一起享受設(shè)計(jì)的樂(lè)趣吧。

原文地址：photoshopvip

譯者：@喪心病狂十六夜貓

本文由 @喪心病狂十六夜貓?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。