參考自：網(wǎng)易UEDC澎羞、簡書 庖丁開發(fā)整理
一個產(chǎn)品的視覺效果無異于一個人的外形打扮髓绽，它是用戶對你的產(chǎn)品的第一印象，直接影響到用戶接下來的使用體驗(yàn)妆绞，尤為重要顺呕，那么一個好的視覺風(fēng)格是怎么設(shè)計(jì)出來的呢？今天丁丁給大家介紹一個名詞：情緒板（Mood Board）括饶。它是一個系統(tǒng)的確定主視覺風(fēng)格的方法株茶。
什么是情緒板？
MOOD BOARD（情緒板）图焰，是指對要設(shè)計(jì)的產(chǎn)品以及相關(guān)主題方向的色彩启盛，圖片，影像或其他材料的收集，從而引起某些情緒反應(yīng)僵闯， 以此作為設(shè)計(jì)方向或者是形式的參考卧抗。幫助設(shè)計(jì)師明確視覺設(shè)計(jì)需求，用于提取配色方案鳖粟、視覺風(fēng)格社裆、質(zhì)感材質(zhì)，以指導(dǎo)視覺設(shè)計(jì)牺弹，為設(shè)計(jì)師提供靈感浦马。
視覺設(shè)計(jì)師可能會花很長時間產(chǎn)出了精致时呀、高品質(zhì)的設(shè)計(jì)张漂，得到的卻是用戶或客戶的一句話：這不是我想要的！一般來說谨娜，在沒有見到效果前航攒，人們并不清楚自己要的是什么。但是在看到成品后趴梢，他們可以輕易地判斷是否符合自己的喜好或期望漠畜。因此，在為錯誤的設(shè)計(jì)方向投入過多前坞靶，了解用戶對風(fēng)格的期望和需求憔狞，從而確定整個網(wǎng)站或產(chǎn)品的視覺風(fēng)格是有必要的。
情緒板是一種借助圖像彰阴，啟發(fā)和探索用戶的體驗(yàn)瘾敢，然后再作用于視覺設(shè)計(jì)的研究方法。 可以調(diào)查并形成具有指導(dǎo)意義的「風(fēng)格感受」和「設(shè)計(jì)元素」尿这。情緒板的核心原理是依靠「圖像」簇抵，溝通產(chǎn)品與用戶、用戶的潛意識與意識射众、用戶的感性（情緒）與理性碟摆，其神經(jīng)心理學(xué)基礎(chǔ)為：
- 大部分溝通為非語言的
- 思考是通過影像產(chǎn)生的
- 感官影像為重要隱喻，而這些影像大多是視覺的
- 思考中的深層結(jié)構(gòu)是可觸及的
- 體驗(yàn)是理性與感性（情緒）的混合
此外叨橱，情緒板也可以作為可視化的溝通工具典蜕，快速地向他人傳達(dá)設(shè)計(jì)師想要表達(dá)的整體感覺（feel）。
如何創(chuàng)建一個情緒板
首先罗洗，需要明確體驗(yàn)關(guān)鍵詞愉舔。在一個設(shè)計(jì)項(xiàng)目中，通過進(jìn)行涉眾訪談和用戶研究栖博，研究設(shè)計(jì)人員創(chuàng)建了產(chǎn)品的人物角色屑宠，然后基于人物角色，綜合用戶研究結(jié)果以及品牌/營銷文檔仇让，可以得出體驗(yàn)關(guān)鍵詞典奉。當(dāng)人物角色和體驗(yàn)關(guān)鍵詞都確定后躺翻，可以通過使用情緒板來探索網(wǎng)站或產(chǎn)品的視覺風(fēng)格，并作為和內(nèi)部人員進(jìn)行早期溝通的基礎(chǔ)卫玖。
丨確定體驗(yàn)關(guān)鍵詞
主要是通過事先涉眾訪談以及對既往用戶的研究公你，比如這個產(chǎn)品給用戶帶來什么特別的感受，和 xx 競品相比有什么差異等問題來確定體驗(yàn)關(guān)鍵詞假瞬。
丨圖片素材的收集
體驗(yàn)關(guān)鍵詞提取好之后陕靠，可以在內(nèi)部使用情緒板，由視覺設(shè)計(jì)師來完成脱茉，要注意以下幾點(diǎn)：
1剪芥、需要制作3套以上情緒板供評審。
2琴许、制作的過程是個迭代的過程税肪，需要內(nèi)部團(tuán)隊(duì)慎重討論決定。
3榜田、情緒板的形式可以有多種益兄，如拼貼畫或精致化的模板。
丨邀請用戶來參與創(chuàng)建情緒板
最終你的產(chǎn)品時為用戶服務(wù)的箭券，所以還要由用戶參與創(chuàng)建净捅、更改情緒板。這時候要注意可以呈現(xiàn)給用戶的圖片有限的辩块，因此蛔六，在挑選圖片時，需要內(nèi)部研究和設(shè)計(jì)人員協(xié)同庆捺，根據(jù)視覺設(shè)計(jì)所需要考慮的幾個維度結(jié)合已有的關(guān)鍵詞進(jìn)行圖片的篩選古今。一般來說，在將圖片呈現(xiàn)給用戶之前滔以，內(nèi)部人員已經(jīng)明確了每一張圖片所代表的意義捉腥，在用戶選擇和訪談結(jié)束后，兩方面的數(shù)據(jù)綜合分析才能獲得最終的結(jié)果你画。
情緒板用于視覺設(shè)計(jì)的實(shí)踐
實(shí)踐才是真理抵碟。我們用一個案例來分析闡述如何利用情緒板的結(jié)果，并與視覺設(shè)計(jì)很好地結(jié)合起來坏匪。在 App Store 隨意選擇一款手機(jī)應(yīng)用《老偏方》拟逮，用作實(shí)踐。
對《老偏方》采用情緒板的用戶研究方法（具體過程略去）适滓。情緒板結(jié)果如下：
情緒板結(jié)果分析敦迄、及提取視覺元素：
設(shè)計(jì)過程如下：
丨背景
丨導(dǎo)航
丨點(diǎn)擊導(dǎo)航
****丨最終成果（對比）
一個看似簡單的 logo 其實(shí)是經(jīng)過無數(shù)的調(diào)研，分析設(shè)計(jì)出來的，同樣罚屋，一個頁面的主視覺頁面也不是隨便設(shè)計(jì)出來的苦囱。周一學(xué)會用情緒板確定主視覺風(fēng)格的目標(biāo)完成了，如何去做好就要在工作實(shí)踐中去摸索總結(jié)了脾猛。
