在我們平時(shí)的工作中，經(jīng)常需要?jiǎng)?chuàng)建各種各樣的情緒板：用于品牌、App、海報(bào)、服裝……等涉及到設(shè)計(jì)領(lǐng)域，但我經(jīng)常會(huì)發(fā)現(xiàn)在整理素材和歸納的時(shí)候，很容易遺漏某些步驟，或者創(chuàng)建過(guò)程晚了被客戶(hù)拒絕，所以我決定寫(xiě)一篇總結(jié)文章，其中包含一系列技巧和工具。

什么是情緒板？

有些人將其稱(chēng)為風(fēng)格圖、參考圖，但它們之間的差異存在爭(zhēng)議，但總而言之，它是一組圖像，把它們匯總在一起代表品牌（或項(xiàng)目）將采用的視覺(jué)方向。

我們可以將情緒板的作用總結(jié)為三個(gè)主要目標(biāo)：

• 為視覺(jué)設(shè)計(jì)過(guò)程奠定基礎(chǔ)
• 建立了品牌的世界觀
• 提供視覺(jué)標(biāo)準(zhǔn)，便于以后的視覺(jué)延展和一致性

如何制作情緒板

我在剛參加工作時(shí)的項(xiàng)目中所犯的第一個(gè)錯(cuò)誤就是收到一個(gè)新的設(shè)計(jì)需求簡(jiǎn)介后，就立即瘋狂收集參考圖，我想這是與品牌匹配的，沒(méi)有任何問(wèn)題。（然而這樣的設(shè)計(jì)方式非常錯(cuò)誤且痛苦）

現(xiàn)在看來(lái)，與之相反的，應(yīng)該先花點(diǎn)時(shí)間分析下設(shè)計(jì)需求簡(jiǎn)介，讓自己真正了解品牌的背景、歷史、未來(lái)計(jì)劃、行業(yè)、競(jìng)爭(zhēng)、目標(biāo)受眾、品牌信息和價(jià)值主張。如果以上任何一塊缺失并影響了創(chuàng)建情緒板，你最好都需要先跟需求方溝通清楚缺失部分的細(xì)節(jié)。針對(duì)這些缺失的細(xì)節(jié)發(fā)送品牌調(diào)查問(wèn)卷，避免甲方推翻重新設(shè)計(jì)，影響設(shè)計(jì)進(jìn)程。

情緒板在品牌推廣過(guò)程中占有一席之地，但在一開(kāi)始的時(shí)候肯定是沒(méi)有的。假設(shè)你已經(jīng)從客戶(hù)那里收集了所有信息，現(xiàn)在我們準(zhǔn)備進(jìn)一步推進(jìn)情緒板創(chuàng)建的實(shí)際步驟：

1） 研究并搜集參考

2） 排版和優(yōu)化

3） 情緒版展示（可選）

接下來(lái)，會(huì)詳細(xì)的為大家分享每一個(gè)步驟。

研究并搜集參考

在我開(kāi)始找圖之前，我喜歡把需求介紹中的形容詞或其他關(guān)鍵詞放在自己面前，這樣我就可以檢查研究的內(nèi)容是否與關(guān)鍵詞產(chǎn)生共鳴。

另外，不要忘記還要了解目標(biāo)受眾和市場(chǎng)細(xì)節(jié)！

在我們談?wù)撗芯恐?，我想分享幾個(gè)我喜歡使用的圖像收集工具。

Pinterest 幾乎是圖像收集的首選工具之一。你們中的許多人可能已經(jīng)在用了， 優(yōu)點(diǎn)是很容易設(shè)置收集畫(huà)板，并且關(guān)聯(lián)圖片和以圖搜圖都非常方便，而且還是免費(fèi)的。

Sample board from Pinterest 來(lái)自 Pinterest 的樣板

（彩云注：原作者這里還介紹了另外兩款工具，但經(jīng)過(guò)彩云的研究，發(fā)現(xiàn)不那么好用，不符合中國(guó)設(shè)計(jì)師的使用習(xí)慣，所以我去掉了這部分的內(nèi)容。）

你也可以直接保存到桌面。但我喜歡用工具進(jìn)行整理，所以當(dāng)我完成研究過(guò)程后，我至少對(duì)于搜集整理方面的工具有一個(gè)廣泛的了解。

一個(gè)非常新的收藏工具叫做  mymind ( https://mymind.com )，由設(shè)計(jì)師 Tobias van Schneider 開(kāi)發(fā)。這是一個(gè)瀏覽器擴(kuò)展程序，它可以幫助你保存圖像、文本、視頻、完整的文章、產(chǎn)品或其他內(nèi)容，方法是使用插件擴(kuò)展或右鍵單擊添加到一個(gè)大集合（收集上也可以用）。

這是對(duì)不太喜歡打標(biāo)簽和分組的人做的工具，因?yàn)樗鼤?huì)自動(dòng)搜索已保存材料之間的聯(lián)系并添加標(biāo)簽，因此在某些方面要比 Pinterest 更易于搜索

好了，工具夠用了！你準(zhǔn)備好獲得靈感了嗎？在開(kāi)始搜索之前，我們需要記住我們之前定義的那些品牌形容詞（工業(yè)、堅(jiān)定、空靈等等）。

因?yàn)槲抑浪阉鬟^(guò)程會(huì)讓我陷入困境，所以第一件事就是給自己設(shè)置一個(gè)計(jì)時(shí)器（對(duì)我來(lái)說(shuō)大部分搜索收集圖片時(shí)間是 1.5 小時(shí)）。

我首選的工具是 Google 和 Pinterest，重要的是在這個(gè)階段不要把自己限制在任何事情上并保存所有吸引你眼球的東西，這樣你就有足夠的材料可以使用。

我會(huì)有針對(duì)性的找一些關(guān)鍵元素來(lái)向客戶(hù)（或我自己）展示并在以后為設(shè)計(jì)決策提供信息：顏色、排版、行業(yè)和整體氛圍、包裝、攝影、插圖風(fēng)格、紋理、圖案、logo。

這聽(tīng)起來(lái)很簡(jiǎn)單，但如果品牌形容詞沒(méi)有太多引導(dǎo)作用呢？這里有一些提示可以嘗試：

• 搜索類(lèi)似的詞。例如，在Solomo的例子中，一開(kāi)始我試圖搜索功能，但這樣搜索出來(lái)的可能全是無(wú)聊的辦公場(chǎng)所，所以我會(huì)嘗試尋找同義詞。
• 如果沒(méi)想法的時(shí)候，嘗試關(guān)掉電腦并閉上眼睛想想，當(dāng)我聽(tīng)到這個(gè)詞時(shí)我會(huì)想到什么，這也有幫助。
• 如果你和和團(tuán)隊(duì)有時(shí)間的話，可以組織一場(chǎng)腦爆會(huì)一起討論探索想法，讓更多人參與，這樣也能快速幫助你找到靈感。

分享一些我常用的額外資源：

[Designspriration] — 精選靈感搜索

[PICDIT] — 高級(jí)攝影作品網(wǎng)站（彩云看了下貌似近期沒(méi)有更新了,但以前的內(nèi)容還是值得一看的）

[Flickgraphics] — 藝術(shù)排版靈感庫(kù)

[Adultartclub] — 藝術(shù)攝影靈感庫(kù)

[Dayinthelandofnobody] — 藝術(shù)攝影

[Visualgraphic] — 版式靈感

[typophile] — 排版靈感

[logos.ai] — 排版和logo

在你收集了一堆圖片之后，接下來(lái)我們將看看如何處理它們。

排版和優(yōu)化

1. 選擇一個(gè)工具（Canva、Figma、Miro 等，彩云經(jīng)常用sketch）

將圖片組合成可展示的格式。我建議選擇一些客戶(hù)無(wú)需安裝即可輕松使用的東西，這樣反饋周期會(huì)更短。如果平臺(tái)也有一些主題選項(xiàng)，那就太好了，例如，你可以根據(jù)客戶(hù)的品牌顏色對(duì)其進(jìn)行定制，并且可以將相同的結(jié)構(gòu)重新用于不同的產(chǎn)品。

2. 挑選和組織圖片

將每個(gè)圖片下載到本地并把它們歸納分配在相關(guān)的風(fēng)格或品牌形容詞下。

如果只需要部分圖片，記得裁切好需要的部分。

3. 將圖片進(jìn)行排版分組

在組織這些圖片時(shí)，首先要記住的是顏色。我們需要避免用戶(hù)在單個(gè)對(duì)象上花費(fèi)太多時(shí)間，也不是自然地從一張圖流向另一張圖。

你可以嘗試限定好圖片的數(shù)量，對(duì)我來(lái)說(shuō)10-15是一個(gè)很好的起點(diǎn)。

彩云也收集了一些比較優(yōu)秀的情緒版排版供大家參考

4. 檢查并最終確定方案

如果你已經(jīng)到了這個(gè)階段，那就太好了！現(xiàn)在是時(shí)候?qū)ψ畛醯钠放菩稳菰~做檢查標(biāo)記，看看情緒版是否整體傳達(dá)了品牌氛圍。

在情緒版中有一個(gè)能自檢的列表非常不錯(cuò)，我們要問(wèn)自己的問(wèn)題：

• 客戶(hù)可能會(huì)過(guò)于字面理解嗎？
• 情緒板是否反映了品牌氣質(zhì)？（逐個(gè)檢查品牌形容詞）
• 有什么特別突出的地方嗎？
• 品牌所處的環(huán)境是否合適？

如果一切都考慮妥當(dāng)，就該進(jìn)行情緒板演示了。 最后，我收集了一些最終筆記，它們可能有助于你將其展示給其他人。

情緒板展示

如何與客戶(hù)交流情緒板？

提醒客戶(hù)不要從字面上理解任何內(nèi)容，情緒板上的任何元素都不意味著要對(duì)他們的品牌(或項(xiàng)目)進(jìn)行一對(duì)一的翻譯。例如，如果在一張圖片上有紫色的魔方飛來(lái)飛去，這并不意味著品牌會(huì)用魔方做任何事情，可能是形狀，也可能是顏色。

強(qiáng)調(diào)這是品牌所在的視覺(jué)世界，而不是具體的元素?？偠灾?，鼓勵(lì)客戶(hù)關(guān)注整體，而不是個(gè)別部分。

如果在這個(gè)階段一切都很糟糕并客戶(hù)不認(rèn)同它怎么辦？

事情可能會(huì)出錯(cuò)，但請(qǐng)記住，我們可以隨時(shí)后退一步，然后再前進(jìn)。是時(shí)候回到關(guān)鍵詞了，尤其是基調(diào)部分。這時(shí)候與觀眾一起仔細(xì)閱讀每個(gè)詞，并質(zhì)疑相同的詞是否仍然與品牌愿景產(chǎn)生共鳴，這是很有幫助的。

如果答案是肯定的，那么最好再進(jìn)行一次會(huì)議，以了解觀眾根據(jù)關(guān)鍵詞所想象的內(nèi)容，以便下次符合預(yù)期。我的經(jīng)驗(yàn)是，如果情緒板與觀眾或決策者一起策劃，很容易獲得早期支持以避免這種情況發(fā)生。

如果答案是否定的，可能要探索品牌愿景是否有任何變化，并從問(wèn)卷開(kāi)始回到開(kāi)頭。盡管這一步看起來(lái)令人生畏，但客戶(hù)的舒適度確實(shí)至關(guān)重要，否則當(dāng)你在整個(gè)設(shè)計(jì)過(guò)程中進(jìn)一步推進(jìn)時(shí)，他們將不會(huì)感到這是設(shè)計(jì)是為他們做的。

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）
原文地址：medium作者：Peter Javorkai譯文地址：彩云譯設(shè)計(jì)（公眾號(hào)）

譯者：彩云Sky

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》情緒版還能這樣做？難怪大廠的設(shè)計(jì)師那么強(qiáng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)