UI設(shè)計(jì)師怎樣設(shè)計(jì)出有感情的網(wǎng)頁(yè)

在諸多規(guī)律當(dāng)中，使用包含人臉或者人物的圖片來(lái)同用戶(hù)建立情感聯(lián)系，是最常見(jiàn)的一種結(jié)合了心理學(xué)的策略。人臉元素能夠讓APP/網(wǎng)站/海報(bào)看起來(lái)更加人性化，更容易創(chuàng)造明確的情感和情緒上的共鳴。那么，在實(shí)際的設(shè)計(jì)過(guò)程中，這種設(shè)計(jì)手法具體有著哪些講究呢？今天的文章，我們來(lái)聊聊這些技巧。

 

與用戶(hù)關(guān)聯(lián)

對(duì)于可能同用戶(hù)產(chǎn)生關(guān)聯(lián)的元素，每個(gè)設(shè)計(jì)師心中可能都有一個(gè)列表。色彩，按鈕大小，文案這些元素都可能都會(huì)影響到用戶(hù)參與度和頁(yè)面的轉(zhuǎn)化率，但是一張真實(shí)的人類(lèi)面孔所帶來(lái)的影響可能會(huì)更加顯著。

想想你最喜歡的那些網(wǎng)站，人類(lèi)的面孔是不是會(huì)更容易讓你注意到，更容易被聚焦？仔細(xì)回想一下那些能夠影響到你決策的廣告、文章、內(nèi)容，其中是不是有相當(dāng)一部分都包含有各種個(gè)月的面孔和表情？

屏幕上包含有人物和面孔的圖片，能夠更好地觸發(fā)用戶(hù)的情緒，這些被精心設(shè)計(jì)的面孔能夠引起用戶(hù)共情：“他們和我是同一類(lèi)的人”或者“我想要和他一樣”。這樣的情緒是隱晦而非直接的，但是它們能夠讓用戶(hù)對(duì)于這個(gè)面孔背后的產(chǎn)品或者服務(wù)產(chǎn)生興趣。

Kissmetrics 這個(gè)博客列舉出了提升用戶(hù)參與度和轉(zhuǎn)化率的5種心理學(xué)原則，其中之一就是用戶(hù)對(duì)于面孔的識(shí)別，能夠吸引用戶(hù)注意力，并且傳達(dá)情感：

人的面孔對(duì)于用戶(hù)的吸引力比其他的元素要大得多，這是一種生物本能。所以，你可以借助這一規(guī)律引導(dǎo)用戶(hù)注意到頁(yè)面中關(guān)鍵性的元素。尤其是當(dāng)你頁(yè)面中的面孔雙眼正好指向CTA按鈕，那么絕大多數(shù)的用戶(hù)會(huì)沿著視線(xiàn)去尋找位于那個(gè)方向的按鈕。

用表情來(lái)營(yíng)造情感基調(diào)

當(dāng)你注意到別人打哈欠的時(shí)候，你會(huì)不會(huì)也有類(lèi)似的沖動(dòng)呢？情緒、行為其實(shí)都會(huì)受到別人的影響，有的是從眾心理，有的則源于暗示，但是無(wú)論如何，情緒和行為是具有“傳染性”的。幾乎所有的情緒都具有某種意義上的傳染性，而帶有面孔的圖片會(huì)借由氛圍、色彩、布局和表情來(lái)傳遞快樂(lè)、振奮、痛苦、孤獨(dú)、厭惡、憤怒等不同的情緒。換句話(huà)來(lái)說(shuō)，圖片能夠營(yíng)造出情感氛圍。

這種說(shuō)法并非主觀認(rèn)知，而是有科學(xué)和理論支撐的：

我們認(rèn)知體系當(dāng)中的各種感覺(jué)和印象，很大程度上是外部的社會(huì)化的影響所造就的。外觀、表情和人物形象之所以這么重要，是因?yàn)樗鼈兗词购圹E很細(xì)微也同樣可以有效地傳遞感覺(jué)，塑造觀者腦中的印象。

當(dāng)然，情感聯(lián)系的建立不僅僅是依靠圖片中人物的表情，圖片的質(zhì)量、氛圍和內(nèi)容以及傳遞信息的方式與質(zhì)量也同樣會(huì)影響情感聯(lián)系。而這些又會(huì)隨著文化、用戶(hù)年齡和領(lǐng)域而出現(xiàn)差異，因此，在選擇設(shè)計(jì)項(xiàng)目的圖片的時(shí)候，請(qǐng)仔細(xì)思考你的用戶(hù)受眾和他們想要的東西，精準(zhǔn)地設(shè)計(jì)內(nèi)容。（這也是為什么你需要做足夠的用戶(hù)研究）

為了創(chuàng)建出足以驅(qū)動(dòng)用戶(hù)參與甚至融入的設(shè)計(jì)，你需要在設(shè)計(jì)中加入和產(chǎn)品或者服務(wù)相匹配的表情和情感。很多產(chǎn)品一味地使用笑臉來(lái)創(chuàng)建積極的情緒，但是很多時(shí)候，正確比積極更重要。

 

建立信任

如果用戶(hù)能夠看到產(chǎn)品和服務(wù)的創(chuàng)建者的臉，有助于建立產(chǎn)品品牌和用戶(hù)之間的情感關(guān)聯(lián)，通過(guò)真實(shí)的人讓用戶(hù)對(duì)于產(chǎn)品更加信任。在這種設(shè)計(jì)策略之下，面孔和表情能夠通過(guò)下面的方式來(lái)實(shí)現(xiàn)這一點(diǎn)：

• 用戶(hù)通過(guò)團(tuán)隊(duì)成員照片看到項(xiàng)目的參與者的臉
• 可以讓用戶(hù)以積極的方式看到產(chǎn)品或服務(wù)同人交互的場(chǎng)景
• 用戶(hù)可以通過(guò)面部表情和肢體語(yǔ)言中了解到用戶(hù)對(duì)于項(xiàng)目的實(shí)際感受，視頻是個(gè)不錯(cuò)的展現(xiàn)渠道
• 讓某些使用者真實(shí)地闡述使用體驗(yàn)
• 圖片和視頻是展現(xiàn)品牌可信度的重要渠道，當(dāng)然你得讓它們看起來(lái)足夠真實(shí)

越多真實(shí)的用戶(hù)查看你的網(wǎng)站，才能讓更多的用戶(hù)逐步對(duì)它產(chǎn)生信任。假模特有的時(shí)候不知道如何正確地與產(chǎn)品交互，這實(shí)際上可能對(duì)品牌造成危害。當(dāng)然，使用真實(shí)的工作人員和用戶(hù)會(huì)更有效果，但是一定要確保圖片素材足夠優(yōu)質(zhì)，氛圍也營(yíng)造得到位。

 

引導(dǎo)視覺(jué)

圖片中人物形象的臉?biāo)軇?chuàng)造的情感聯(lián)系，合理的運(yùn)用還能在頁(yè)面中起到視覺(jué)引導(dǎo)的作用。借助這些人物形象，你可以幫助用戶(hù)了解接下來(lái)要看哪里。

用戶(hù)可以通過(guò)圖片中人物的眼睛朝向，被引導(dǎo)著看接下來(lái)的內(nèi)容。

眼神接觸是絕大多數(shù)人在溝通交流的時(shí)候，必要的行為之一，而用戶(hù)面對(duì)設(shè)計(jì)作品的時(shí)候，也遵循著同樣的規(guī)律。讓屏幕上的人物向下看，用戶(hù)會(huì)向下滾動(dòng)瀏覽；向左右看，用戶(hù)會(huì)沿著視線(xiàn)發(fā)現(xiàn)其他的CTA元素。

 

警惕“假臉”

另外，值得一提的是，要警惕那些看起來(lái)就很假的假臉。我想你應(yīng)該看過(guò)那樣的素材，尤其是那些被精心設(shè)計(jì)的模特的臉，上面常常有著被設(shè)計(jì)的、能被分辨出來(lái)的帶著假表情的臉。

面部表情是用來(lái)建立情感聯(lián)系，獲取用戶(hù)信任的，假臉無(wú)論是從哪個(gè)角度上來(lái)看都無(wú)法達(dá)成這些目標(biāo)，甚至?xí)?duì)整個(gè)設(shè)計(jì)產(chǎn)生危害。

 

結(jié)語(yǔ)

訪客喜歡看到真實(shí)的人類(lèi)，想去了解別人在使用某些產(chǎn)品和物品時(shí)候的感受，這也使得各種人物形象和表情在設(shè)計(jì)中發(fā)揮著巨大的作品。展示出你的團(tuán)隊(duì)，你的用戶(hù)和真實(shí)的表情反饋，這會(huì)讓你的設(shè)計(jì)更具有感染力。