如何讓UI設(shè)計(jì)能調(diào)動(dòng)用戶的情感

我們對(duì)產(chǎn)品的風(fēng)格定義是賤萌，所有插圖的設(shè)計(jì)應(yīng)該緊貼品牌調(diào)性。讓用戶‘共情’？方法大家都知道——單一的情緒表達(dá)很難讓用戶產(chǎn)生共鳴，場(chǎng)景化的講故事，卻很容易代入人的情感。但這里要注意的是，場(chǎng)景之間也是有區(qū)別的，比如：

 

 怎樣表達(dá)孤獨(dú)？

一盞昏黃的油燈下，年輕人不知所歸，這是一種孤獨(dú)，但是這樣的場(chǎng)景不是我們需要的，它透出來的是一種負(fù)面消極的情緒。產(chǎn)品所有能傳遞情緒的地方都應(yīng)該和品牌情緒是一致的。我們要的是戲謔的表達(dá)孤獨(dú)。如果你覺得靈感枯竭，這里有個(gè)小竅門：適度關(guān)聯(lián)，豐富場(chǎng)景。將有關(guān)的無(wú)關(guān)的場(chǎng)景進(jìn)行拼接，你甚至可以從任何地方汲取有用的“佐料”。

可以換一種和產(chǎn)品氣質(zhì)相符的口吻來講孤獨(dú)這件事——‘“沒人和我一起玩，好無(wú)聊呀（打滾狀）”。

畫面的氣質(zhì)是不是馬上變得容易捕捉了？但光有這些還不夠，在你通過發(fā)散、聯(lián)想獲得了很多idea后，還要對(duì)每一個(gè)故事的可塑性進(jìn)行評(píng)估，畢竟，只通過靜幀圖片來傳達(dá)復(fù)雜的故事并希望用戶能快速的攫取到趣味是不太可能的，所以你要考慮的是，在對(duì)故事進(jìn)行精簡(jiǎn)收縮后，你想表達(dá)的東西是否依然能躍然紙上？在這個(gè)階段，設(shè)計(jì)師包括我自己，最容易陷進(jìn)去的一個(gè)盲區(qū)是，沉浸在自己的想法中無(wú)法自拔并拼命去享受和揣摩那些極細(xì)微的細(xì)節(jié)，而忽略了去研究快速傳達(dá)這件事，所以，當(dāng)自負(fù)的我們?nèi)ヂ裨褂脩舻臅r(shí)候也要想想是不是因?yàn)槲覀兿萑肓俗哉f自話而忽略了去做情感的橋接？

換一種描述，再來表現(xiàn)“孤獨(dú)”：好無(wú)聊（打滾狀），找不到人跟我一起玩，去看看那邊在干嗎（默默地…）。

在這個(gè)對(duì)場(chǎng)景幻想的句式中，我加入了很多形容詞、前后文的聯(lián)想和因果，神奇的是，畫面的張力馬上被增強(qiáng)了。

于是我開始構(gòu)思圖形，最開始，我想設(shè)計(jì)一個(gè)人在地上畫圈圈數(shù)螞蟻。而這時(shí)候我停下來了，就像上面我說的那樣，這個(gè)場(chǎng)景圖形化以后可能效果并不好，為了把故事表達(dá)清楚我很有可能會(huì)把畫面搞的很復(fù)雜零散，這不是我要的。我希望的是，空頁(yè)面的插圖既要簡(jiǎn)潔明快又要直指人心，讓用戶可以快速的識(shí)別并感受到有趣，于是我把螞蟻這個(gè)互動(dòng)對(duì)象改成了大家熟知并且本身就有一定喜感的小黃鴨，主角鬼鬼祟祟的偷窺和鴨子?jì)寢尩暮π咝纬蓪?duì)比，構(gòu)成張力，更具喜感效果更足。

圖形的創(chuàng)意有了往往還不夠，文案的作用在于錦上添花。個(gè)性化的文案設(shè)計(jì)，不要一紙捅破也不要離主題十萬(wàn)八千里遠(yuǎn)，雖然我們說出現(xiàn)在產(chǎn)品中的文字要有高效率，但是在一些可以個(gè)性化展現(xiàn)的地方，要好好把玩斟酌住文字的情緒。同時(shí)，還有幾點(diǎn)：

1.不要用命令式的、指令性很強(qiáng)的語(yǔ)氣。

2.避免傻瓜式的敘述。

3.如果出錯(cuò)了，提供一個(gè)解決辦法。

這兩個(gè)文案對(duì)比，右側(cè)的‘啊哦，還沒有關(guān)注任何人’很顯然是一句毫無(wú)意義的陳白，文字沒有和圖形很好的配合上，就算你的圖形創(chuàng)意再好，在文案的情緒表達(dá)上也被扣了分。要讓畫面更和諧，更易調(diào)動(dòng)觀者的心，圖形和文字要配合得相得益彰，請(qǐng)多加注重文字的情緒表達(dá)。

在上面講的這個(gè)例子里，你是不是已經(jīng)找到一些方法了？我來總結(jié)一下，單一的情緒不好表現(xiàn)，我們?yōu)榱四芸熳x調(diào)動(dòng)用戶的情感，需要找到一個(gè)合適的場(chǎng)景代入設(shè)計(jì)，場(chǎng)景和場(chǎng)景的表達(dá)又不一樣，我們需要遵循我們的黃金準(zhǔn)則，情緒點(diǎn)的設(shè)計(jì)要統(tǒng)一，選擇一種戲謔的手法來增強(qiáng)喜感。你的想法在圖形化以后要足夠簡(jiǎn)潔有說服力，而不是設(shè)計(jì)者自我陶醉旁人卻完全感受不到。

讓我們?cè)倏匆粋€(gè)例子——“無(wú)關(guān)注的人”。不要受限制于 ‘啊哦，你沒有關(guān)注任何人，快去添加關(guān)注吧’ 這種常規(guī)表達(dá)，跳出圈子，比如我在這里將‘你沒有關(guān)注任何人’這個(gè)概念巧妙的嫁接成了“默默關(guān)注一個(gè)人好久卻不敢表達(dá)”。

有趣的事物可以讓人產(chǎn)生愉悅的感受，在一定程度上其實(shí)也轉(zhuǎn)化了為空狀態(tài)的尷尬和失落。找到了更有趣的表達(dá)后，接下來的任務(wù)就是怎么圖形化傳達(dá)這種情緒。

 

怎樣表達(dá)喜歡？

我設(shè)計(jì)的場(chǎng)景是這樣的：放學(xué)后蹲在墻角等那個(gè)偷偷關(guān)注好久的人。我們需要的是逗比的小開心，而不是緊張焦急的等待，為了避免畫面?zhèn)鬟f出錯(cuò)誤的情緒，需要在圖形創(chuàng)意上深加工。

圖形創(chuàng)意上的深加工：頭帶一枝花，而不是手里拿著花，后者看上去太虔誠(chéng)，不是我要的情緒。煽情同樣不是我想要的，我沒有讓主人公看起來是很緊張的在等待誰(shuí)，而是壞壞的讓他躲在樹叢里似乎是想隨時(shí)跳出來嚇誰(shuí)一跳?？傊蚁胱龅氖?，避免正面刻板的形象，避免那種一眼就能看到底的設(shè)計(jì)，盡可能不落俗套讓用戶看到這個(gè)畫面之后可以有更多想象的空間。

注意文字的情緒，第一段文字只是在簡(jiǎn)單的陳述，第二段文案指令性過強(qiáng)，我們需要一種戲謔的娛樂式的語(yǔ)言。第三段文案里，前面的反問，首先做一個(gè)開場(chǎng)，把用戶的情緒調(diào)起來，然后的錯(cuò)愕驚訝是一種夸張，最后用戲謔的口吻婉轉(zhuǎn)的表示你可以去做什么，而不是命令用戶去做。

當(dāng)然，有的時(shí)候你也不需要費(fèi)盡心力去勾畫一個(gè)場(chǎng)景，接下來看看最后一個(gè)例子。

 

 利用反差萌表現(xiàn)趣味

（假裝自己是圖片）這個(gè)例子我就不放設(shè)計(jì)圖了，給大家簡(jiǎn)單描述一下，下方是主人公，主人公頭上頂著他的小寵物，小寵物萌萌的在表達(dá)歡喜，而主人公則是一臉黑線，下方的文案是“?要我怎么做，你才會(huì)愛我? 抱歉，粉絲團(tuán)粒只剩它了。。。”

這個(gè)例子我沒有用到任何場(chǎng)景，而是通過兩個(gè)角色之間的強(qiáng)烈對(duì)比，增加這種戲劇效果。在這個(gè)畫面里，你可以理解為上面的形象在萌萌的求關(guān)注，也可以理解為下面的形象因?yàn)橹皇Ｏ乱恢回堫^鷹為伴而倍感氣氛，一上一下兩種截然不同的情緒形成了搞笑的反差，戲外甚至飄來了歌聲來戲謔這兩個(gè)可憐的小生物。

最后，我來整理一下：情感化的設(shè)計(jì)最重要的是要想辦法和用戶‘共情’，研究產(chǎn)品目標(biāo)用戶群身上的特質(zhì)，設(shè)計(jì)和他們有過共同記憶片段的場(chǎng)景。舉個(gè)例子，如果你的用戶是80后，你又要表現(xiàn)復(fù)古情懷的時(shí)候，你的設(shè)計(jì)中出現(xiàn)卡帶這種東西是沒有問題的。而如果你的用戶群是00后，你設(shè)計(jì)卡帶可能就有點(diǎn)設(shè)計(jì)師自我陶醉的嫌疑了。而如果你想和我一樣，來點(diǎn)畫風(fēng)清奇、搞怪有趣的創(chuàng)意表達(dá)，又一直苦于打不開腦洞的話，這里有幾個(gè)tips希望能對(duì)你有幫助：

tips1：使用和你產(chǎn)品氣質(zhì)一致的描述詞，同時(shí)避免空洞的鋪陳

我記得曾經(jīng)為一個(gè)叫做‘一起神回復(fù)’的模塊配場(chǎng)景圖，創(chuàng)意的發(fā)揮一度很受限制，因?yàn)槲以谀X海里一直搜索的關(guān)鍵詞是討論、熱情、知識(shí)、激烈，最后我沒有得到任何想法。這之后，我又去反復(fù)的研究這句文案，我發(fā)現(xiàn)我的表述詞和文案給出的性格甚至和我們整體的用戶群是毫無(wú)共性的。而有時(shí)候，鬼點(diǎn)子和創(chuàng)意是需要一些方法召喚出來的，于是，我把描述詞換成了‘神經(jīng)質(zhì)，屌，一本正經(jīng)的胡說八道，中二病’后，靈感撲面而來，半小時(shí)不到方案成型：

tips2：適度關(guān)聯(lián)，豐滿場(chǎng)景

靈感這種東西是可遇不可求的，而在平時(shí)的設(shè)計(jì)工作中，由于時(shí)間點(diǎn)任務(wù)量和審核的壓力，設(shè)計(jì)師總會(huì)處在一種壓力之下，這是有礙靈感來找你的，那是不是我們就毫無(wú)對(duì)策出好作品了呢？不然，創(chuàng)意的構(gòu)思也不光是憑空而來，將有關(guān)系的和沒有關(guān)系的場(chǎng)景、元素拼貼組合，往往能給你很多驚喜，甚至有時(shí)會(huì)有一點(diǎn)出其不意。在你打了一套天馬行空的組合拳后終于撕開了靈感的一道口子，不要止步，就像寫一篇文章一樣，你現(xiàn)在有了最核心的部分，但是還不夠，你需要或前或后再續(xù)一點(diǎn)篇幅，把想象空間填滿，讓故事更豐滿，在這其中再找到那個(gè)最能勾起情緒的突破口。

tips3：圖形化思維，合理放大

不是每一個(gè)你認(rèn)為的想法都會(huì)有一個(gè)完美的展現(xiàn)，這受限于圖形化的形式。如果你是一個(gè)四格漫畫或者動(dòng)態(tài)圖，可能表達(dá)的空間會(huì)更大，但是靜幀圖片信息的含有量是固定的，并且同時(shí)你還要去思考高效的讓用戶接受這件事，因此每一處的設(shè)計(jì)都必須是經(jīng)過深度思考和權(quán)衡的。不必過分在意那些極度細(xì)微的地方（這里我的意思并不是說放棄設(shè)計(jì)細(xì)節(jié)），而是將你想表達(dá)的那個(gè)點(diǎn)放大，夸張出來，會(huì)更有助益讓觀者最快的接近你想傳遞的東西。

tips4：注意文字的魅力

文字和圖形一樣，也是一種情緒的載體，文案和圖形配合的越是天衣無(wú)縫，你的畫面就越和諧。你可能覺得我夸大了文字的力量，再來看個(gè)例子：???????

問題：這是某個(gè)興趣領(lǐng)域下對(duì)簽到用戶的展示，這個(gè)模塊穿插在信息流里所以對(duì)展示效果有很多限制，不能渲染過重，要柔和，能盡量與其他信息相融，不要讓用戶的視覺線走到這里的時(shí)候感到突兀。

目標(biāo)：我不可以把整個(gè)卡片做重，但還要讓用戶注意到，并且如果能通過設(shè)計(jì)，給他一種快去簽到的正向鼓勵(lì)是最好的。怎么達(dá)成這個(gè)目標(biāo)？

解決：這個(gè)地方我串聯(lián)了用戶頭像和前方引導(dǎo)的卡通形象，巧妙的造成一種‘排隊(duì)做某件事’的假象，大眾心理是愛湊熱鬧，這時(shí)候能略微勾起人的好奇心是最好的。除此之外，文案發(fā)揮了很重要的作用，他增強(qiáng)了這種‘他們都在做，我也去看看或者我不能落下’的心理暗示，和整個(gè)形式的設(shè)計(jì)配合的相得益彰。

結(jié)果：最終上線后有一些反饋的聲音，產(chǎn)品發(fā)現(xiàn)這個(gè)地方非常容易誘發(fā)點(diǎn)擊，所以在探討是否將簽到功能直接補(bǔ)進(jìn)去。這種反饋正好從一個(gè)側(cè)面驗(yàn)證了設(shè)計(jì)的正確性。我們不光是能完成基本的功能表達(dá)，甚至能從一些角落正向的完善產(chǎn)品意圖，這正是說明了設(shè)計(jì)的價(jià)值所在。

由這個(gè)例子有感而發(fā)，說一些題外話。我總在思考設(shè)計(jì)價(jià)值的體現(xiàn)是什么？我們不管做什么事，要么是喜好牽引，從心而為；要么是有利益驅(qū)動(dòng)有目標(biāo)的行進(jìn)。如果你的任務(wù)沒有明確的策略、機(jī)制去鼓勵(lì)用戶，而又希望他們?nèi)シe極的參與和使用，那就要好好設(shè)計(jì)一番了，這個(gè)設(shè)計(jì)并不是指的狹隘的視覺展現(xiàn)，而是去研究人的行為動(dòng)機(jī)。好奇是人的天性，容易被簡(jiǎn)單有趣的事物吸引也是天性之一。設(shè)計(jì)師很多時(shí)候是站在產(chǎn)品的立場(chǎng)隔著屏幕和人對(duì)話，你可能沒有辦法強(qiáng)迫用戶去做什么事，但如果能找到一些自然驅(qū)動(dòng)他的辦法出來，這也許就是設(shè)計(jì)價(jià)值體現(xiàn)出來的一面。