上周我們分享了什么是情緒板以及情緒板如何在設(shè)計中去運用，幫助我們很好的做一些設(shè)計改版和提案。這周和大家簡單分享一下，實際項目中如何用這個方法去完成一個方案的設(shè)計。

項目背景

任何一個項目的開始，第一個要做的就是了解項目背景，以及要解決商業(yè)目標(biāo)是什么。

簡單說下這個項目，這個項目是某大牌品牌在淘寶開了一家旗艦店，其中主打產(chǎn)品是口紅。買過口紅的朋友都知道，口紅是分很多色系，質(zhì)地和色號，用戶訴求希望在淘寶詳情頁面，展現(xiàn)200多個色號。

200多個SKU，內(nèi)心是很崩潰的。因為我們傳統(tǒng)的SKU選擇最多也就是6、7個，像衣服尺碼，鞋碼等，幾百個在當(dāng)時設(shè)計上是一大挑戰(zhàn)。

當(dāng)時頁面是這樣的，10幾個已經(jīng)很多。如果在已有的框架下面去增加幾百個視覺體驗緯度，全部展現(xiàn)出來，很明顯不合理，體驗會更差。

當(dāng)時交互是這樣的，在這里做了一個入口等級進(jìn)去展開全部口紅顏色

那么拿到這個需求，我們要去思考，如果我們按照當(dāng)前這個邏輯，點進(jìn)去一堆顏色列表的設(shè)計，用戶是否看得懂，是否有更好的形式去幫助用戶更好的理解這個使用場景。

運用情緒板去思考？

1. 生活映射

設(shè)計源于生活又高于生活，想像一下你在生活中怎么陪女朋友去逛彩妝店，如果你沒有女朋友（扎心了，老鐵）也應(yīng)該見過彩妝店，或者現(xiàn)在比較火的李佳琦直播；他們是如何去線下買彩妝的，你去觀察絲芙蘭專柜就會知道答案。

一般用戶會先去看熱門色號，再看顏色質(zhì)地，光澤等，線下那些精致的專柜，會讓你更直觀地看見口紅質(zhì)地，顏色，以及涂抹在嘴上的效果。所以當(dāng)時在思考，怎么讓用戶在線上也有這種體感感受，我們制定出相對應(yīng)的情緒板，還原真實購物場景。

2. 顏色映射

對于美妝場景，顏色和我們UI里面顏色是完全不一樣。在現(xiàn)實世界里，女生對于顏色有著很直觀的感受，我們把這種顏色感受記錄在情緒板。

通過在情緒板里面記錄，能很好地把我們想要的色彩如何去表達(dá)能有個大概的思考?？隙ú皇且粋€純色塊，這個體驗一定是直觀的，有趣的。

3. 質(zhì)感映射

那么如何去體現(xiàn)口紅，彩妝這種設(shè)計質(zhì)感？

大家都知道口紅、粉底都是有各種質(zhì)感：啞光，滋潤，閃亮等等。那么對于這種質(zhì)感，如何通過色彩去很好傳遞給用戶，需要我們?nèi)ニ伎肌?/p>

結(jié)合我們想要做的感覺，需要傳遞給用戶的感受制定到質(zhì)感情緒板，為后續(xù)做提案作為指導(dǎo)。

4. 構(gòu)成映射

思考下在現(xiàn)實生活里面，比如去染發(fā)，發(fā)型師都會給我們一個頭發(fā)冊子，還有平面設(shè)計的潘通色卡，以及裝文件的文件夾等，是否可以把這些形式去放在我們設(shè)計里面去？

最終設(shè)計方案

我們運用文件夾這種形式為視覺容器載體，文件夾有打開關(guān)閉效果，打開文件夾我們可以清晰看見里面的色彩質(zhì)地和顏色，方便用戶去理解，觸達(dá)用戶內(nèi)心感受。

▲ 文件夾作為視覺容器載體來承載顏色

▲ 每個文件夾點擊展開是一張對應(yīng)的質(zhì)感質(zhì)地圖片，幫助用戶理解這個口紅實際效果

最后

以上經(jīng)驗就是我之前一個項目案例，如何通過觀察生活，以及如何通過情緒板方法，幫助我們?nèi)ピO(shè)計一些好的方案，幫忙我們很好的把好的創(chuàng)意運用到設(shè)計中去，希望大家都能掌握這套設(shè)計方法。

#相關(guān)閱讀#

身為設(shè)計達(dá)人，你需要知道這個技巧