@喪心病狂十六夜貓?：你經歷過如果有很多設計師參與了同一個項目，在會見客戶的時候，設計的認識和圖片不一致而導致打回重做這樣的事情嗎？

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

這一次為大家帶來的是情緒板的制作方法參考，讓我們一起來看一下制作的方法與要點吧。

詳細從以下開始。

什么是情緒板？

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

你是因為下面兩種中的哪一種理由來制作情緒板的呢？

1）為了自己

在開始設計之前，通過收集一些想法與靈感，可以簡化設計的流程，將茫然的盯著雪白的屏幕的時間大幅縮短。另外，你的概念被用戶送承認，也能節約你的時間和勞力。

2）為了客戶

通過制作情緒板，在完成最終產品之前，你就可以得到一個大致的概念供客戶參考，同時當你的設計概念太過超前時，你們也可以得到一個方向上的參考。另外，設計圖片還能避免因為語言而產生的誤解。就算你們再說同一件事情，因為溝通上的問題也會出現不同的理解，而可視化的圖片則可以讓大家的意見都統一起來。

不管你制作情緒板是為了自己還是為了別人，讓我們先來研究一下如何制作一個漂亮的情緒板吧。

01. 為自己干吧

當你在考慮公司或者網站的品牌設計該用什么好時，你可以將各種不同的要素組合成情緒板來進行參考。

如果這么做，最終設計的全部要素都組合在一起，省去了復雜工作的時間。那么以下面的樣本為例，通過將特定的紋理、插圖、字體類型、配色方案組合在一起，客戶能夠將樣式的全部一起確認。

02. 將品牌質量和內容進行匹配

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

在下面這個樣本案例中，為了讓人在品牌形象中聯想到夏天、戶外、熱，所以添加了這些照片。在這種情緒板中，通過插入能反應出設計主題的圖片，將公司的風格與受眾層都通過設計表達出來了。

03. 化簡為繁

對于設計師而言，同一個設計項目是沒有辦法提出各種不同的構思的。在這種情況下使用情緒板，對于發表設計想法是最合適不過的了。在來看下面這個案例，其中每個情緒板都有著三種不同的設計概念。

首先是暖色系的配色，溫暖干凈的現代復古風（英: Vintage-Modern）是其顯著特征。

接下來在第二個陰沉的（英: Muted-Color）配色中，除了使用噪點密布的紋理，表現出復古的風格。

在第三個里面使用了棱角分明的直線，表現出了建筑受幾何圖案的影響的大都市風格。

04. 來確定一個設計理念吧

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

05. 限制解除

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

06. 整理一下

從頭腦風暴后對于靈感的簡單概括到成為井井有條的項目概要，你需要認真的梳理你的情緒板來使他們在各種各樣的類別上一一對應。但作為探討一個新的技術，你可以嘗試一下將各種不同的設計要素整理在一起成為一個全新的風格。

在下面這個為網頁設計而制作的情緒板中，除了基本的配色與字體這些基本的風格之外，按鈕、圖標、標題與正文樣式、具有特色的內容等等這些實際設計中需要用到的要素也一并呈現在了你的眼前。

07. 列出所有的要點

當你制作出一個井然有序的情緒板（特別是給領導與客戶看的那種）時，一定要將必要的信息全部給列出來，給人一種看上去這是經過深思熟慮后制作出來的感覺。

以下面這個面相界面設計的案例來說，字體、信息、圖標、配色等最低限度的項目都列舉出來了。當你開始設計時，有這樣一個可視化的計劃書作為你的設計參考，可以節約你的時間提高你的工作效率。

08. 應用靈感

將你的設計靈感直接表現在大家眼前而不是通過行為描述。尤其是在品牌設計上尤為明顯。

在下面的設計案例中，通過將名片與LOGO和字體的組合會有哪些效果出現，將他們全部展現出來會更容易使客戶理解。

09. 多去實驗

情緒板不僅對你的設計靈感有幫助，還能夠將特定的想法具體的表現在你的眼前。下面這些設計案例，對同一種標志設計，它提供了不同的配色和風格可以進行參考。

10. 添加補充文本

都說百聞不如一見，但語言也是十分強大的工具。在你的情緒板上添加上補充說明的文字吧。

在下面這個設計案例中，通過添加簡短的說明文字，將重要的情報和照片一一對應，使內容得到了充分的解釋。

11. 混合＆匹配

LOGO、圖標、字體組合等你至今為止需要使用的所有設計要素想要全部展現出來，使用情緒板是非常有效的。在下面的案例中，將反應整體風格的全部要素分門別類的整理好，讓人很輕松的就能看懂。

12. 決定風格

選擇一個統一的風格，會讓你的設計主題看起來更加順眼，也能幫助讀者輕松的了解你的設計理念。在下面的案例中，結合扁平化的風格選用了清爽干凈的配色，整體的優化做的非常棒。

13. 不斷調整，找出最優方案

在這里請允許我再次強調，一旦涉及到多個項目，視覺上的統一感是非常有必要的。這樣做的話，就算你有一些微小的調整，在整體上都能很輕松的進行確認。尤其是在多個項目同時進行時這會對你非常有幫助。

14. 將重點集于一處

如果創建一個和設計全體相關的情緒板感到非常困難的話，嘗試著將重點集中在一個要素上吧。

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

接下來的這個也是將實際使用的配色方案和字體進行組合。從第一個設計要素開始一個接一個的將設計開發方案添加上去，最終得到了一個完整的情緒板。

15. 檢查設計背景

面相雜志設計的情緒板，我們可以看到包含一些雜志特有的風格（例如巨大的首字母Q和特別大的引號）。設計的背景，要和上下文相匹配，通過提前預想將要用到的必要要素，你可以完成一個非常棒的情緒板。

16. 修修補補，更進一步

當你和客戶一起制作情緒板時，不斷地被客戶要求修改是很正常的。在下面這個案例中，在最初的情緒板完成之后，根據來自客戶的需求，變成了和之前并不一樣卻很受客戶喜歡的設計。

明亮、生動、自然系的圖片是其最初的概念。

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

17. 貫徹主題

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

在下面這個案例中，他做了三種切合主題又不一樣的情緒板。不管哪一版都很好的進行了總結，第二版圍繞著時事畫刊來設計，第三版則運用了相同的風格以出版物為中心總結的。

主題：信賴（英: Trustworthy）和現代（英: Modern）。突出清爽干凈的感覺，在傳統的配色加上簡潔的襯線字體，強調出了誠信（英: Credibility）/ 可靠（英: Trustworthiness）的感覺。

圍繞可靠與現代的主題，總結設計要素。

圍繞出版物為中心總結，表現出可靠與現代的感覺。

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

美（英: Beautiful）與專業（英: Professional）是設計要素的主題。

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

主題：現有品牌形象（多彩、簡單、人為中心）的擴張。利用自然的配色作為要點，賦予人類柔和的印象，將圖形要素表現出了明快生動的瑞士風情。

配合這個主題選擇配色等設計要素。

反應這個主題的文具商品和雜志，海報等出版物。

最后

情緒板非常的方便，在各種方面都能夠靈活的運用。這作為設計的一部分，使用這一次介紹的要點，在下個項目中使用來幫助你的作品一氣呵成吧。那么，一起享受設計的樂趣吧。

「想少改稿，這兒有篇文章幫你」

1. 先搞懂流程丨學會這3招，跟反復改稿SAY NO！
2. 再確定視覺風格丨如何確定一個產品的主視覺風格？（附實戰演示）
3. 掌握溝通技巧，減少盲目改稿丨10個值得設計師學習的溝通技巧
4. 版本控制術，改回第一稿也不怕丨設計師最常用的三種版本控制方法（附工具盤點）
5. 高效操作，改再多也不怕丨四個不為人知的PHOTOSHOP高效操作秘籍

原文地址：photoshopvip

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com