在我們平時(shí)的工作中，經(jīng)常需要?jiǎng)?chuàng)建各種各樣的情緒板：用于品牌、App、海報(bào)、服裝……等涉及到設(shè)計(jì)領(lǐng)域，但我經(jīng)常會(huì)發(fā)現(xiàn)在整理素材和歸納的時(shí)候，很容易遺漏某些步驟，或者創(chuàng)建過(guò)程晚了被客戶拒絕，所以我決定寫一篇總結(jié)文章，其中包含一系列技巧和工具。
什么是情緒板？
有些人將其稱為風(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ò)程中占有一席之地，但在一開始的時(shí)候肯定是沒(méi)有的。假設(shè)你已經(jīng)從客戶那里收集了所有信息，現(xiàn)在我們準(zhǔn)備進(jìn)一步推進(jìn)情緒板創(chuàng)建的實(shí)際步驟：
1） 研究并搜集參考
2） 排版和優(yōu)化
3） 情緒版展示（可選）
接下來(lái)，會(huì)詳細(xì)的為大家分享每一個(gè)步驟。
研究并搜集參考
在我開始找圖之前，我喜歡把需求介紹中的形容詞或其他關(guān)鍵詞放在自己面前，這樣我就可以檢查研究的內(nèi)容是否與關(guān)鍵詞產(chǎn)生共鳴。
另外，不要忘記還要了解目標(biāo)受眾和市場(chǎng)細(xì)節(jié)！
在我們談?wù)撗芯恐埃蚁敕窒韼讉€(gè)我喜歡使用的圖像收集工具。
Pinterest 幾乎是圖像收集的首選工具之一。你們中的許多人可能已經(jīng)在用了， 優(yōu)點(diǎn)是很容易設(shè)置收集畫板，并且關(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 開發(fā)。這是一個(gè)瀏覽器擴(kuò)展程序，它可以幫助你保存圖像、文本、視頻、完整的文章、產(chǎn)品或其他內(nèi)容，方法是使用插件擴(kuò)展或右鍵單擊添加到一個(gè)大集合（收集上也可以用）。
這是對(duì)不太喜歡打標(biāo)簽和分組的人做的工具，因?yàn)樗鼤?huì)自動(dòng)搜索已保存材料之間的聯(lián)系并添加標(biāo)簽，因此在某些方面要比 Pinterest 更易于搜索
好了，工具夠用了！你準(zhǔn)備好獲得靈感了嗎？在開始搜索之前，我們需要記住我們之前定義的那些品牌形容詞（工業(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)向客戶（或我自己）展示并在以后為設(shè)計(jì)決策提供信息：顏色、排版、行業(yè)和整體氛圍、包裝、攝影、插圖風(fēng)格、紋理、圖案、logo。
這聽(tīng)起來(lái)很簡(jiǎn)單，但如果品牌形容詞沒(méi)有太多引導(dǎo)作用呢？這里有一些提示可以嘗試：
- 搜索類似的詞。例如，在Solomo的例子中，一開始我試圖搜索功能，但這樣搜索出來(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）
將圖片組合成可展示的格式。我建議選擇一些客戶無(wú)需安裝即可輕松使用的東西，這樣反饋周期會(huì)更短。如果平臺(tái)也有一些主題選項(xiàng)，那就太好了，例如，你可以根據(jù)客戶的品牌顏色對(duì)其進(jìn)行定制，并且可以將相同的結(jié)構(gòu)重新用于不同的產(chǎn)品。
2. 挑選和組織圖片
將每個(gè)圖片下載到本地并把它們歸納分配在相關(guān)的風(fēng)格或品牌形容詞下。
如果只需要部分圖片，記得裁切好需要的部分。
3. 將圖片進(jìn)行排版分組
在組織這些圖片時(shí)，首先要記住的是顏色。我們需要避免用戶在單個(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)題：
- 客戶可能會(huì)過(guò)于字面理解嗎？
- 情緒板是否反映了品牌氣質(zhì)？（逐個(gè)檢查品牌形容詞）
- 有什么特別突出的地方嗎？
- 品牌所處的環(huán)境是否合適？
如果一切都考慮妥當(dāng)，就該進(jìn)行情緒板演示了。 最后，我收集了一些最終筆記，它們可能有助于你將其展示給其他人。
情緒板展示
如何與客戶交流情緒板？
提醒客戶不要從字面上理解任何內(nèi)容，情緒板上的任何元素都不意味著要對(duì)他們的品牌(或項(xiàng)目)進(jìn)行一對(duì)一的翻譯。例如，如果在一張圖片上有紫色的魔方飛來(lái)飛去，這并不意味著品牌會(huì)用魔方做任何事情，可能是形狀，也可能是顏色。
強(qiáng)調(diào)這是品牌所在的視覺(jué)世界，而不是具體的元素。總而言之，鼓勵(lì)客戶關(guān)注整體，而不是個(gè)別部分。
如果在這個(gè)階段一切都很糟糕并客戶不認(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)卷開始回到開頭。盡管這一步看起來(lái)令人生畏，但客戶的舒適度確實(shí)至關(guān)重要，否則當(dāng)你在整個(gè)設(shè)計(jì)過(guò)程中進(jìn)一步推進(jìn)時(shí)，他們將不會(huì)感到這是設(shè)計(jì)是為他們做的。
原文地址：medium作者：Peter Javorkai譯文地址：彩云譯設(shè)計(jì)（公眾號(hào)）
譯者：彩云Sky
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》情緒版還能這樣做？難怪大廠的設(shè)計(jì)師那么強(qiáng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.skdbbs.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)