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

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

 

 怎樣表達孤獨？

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

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

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

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

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

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

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

1.不要用命令式的、指令性很強的語氣。

2.避免傻瓜式的敘述。

3.如果出錯了，提供一個解決辦法。

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

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

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

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

 

怎樣表達喜歡？

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

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

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

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

 

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

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

這個例子我沒有用到任何場景，而是通過兩個角色之間的強烈對比，增加這種戲劇效果。在這個畫面里，你可以理解為上面的形象在萌萌的求關(guān)注，也可以理解為下面的形象因為只剩下一只貓頭鷹為伴而倍感氣氛，一上一下兩種截然不同的情緒形成了搞笑的反差，戲外甚至飄來了歌聲來戲謔這兩個可憐的小生物。

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

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

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

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

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

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

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

tips4：注意文字的魅力

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

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

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

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

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

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