網(wǎng)頁設(shè)計(jì)中那些暖到心窩里的情感化設(shè)計(jì)

情感化設(shè)計(jì)是指旨在抓住用戶注意、誘發(fā)情緒反應(yīng)(有意識(shí)的或無意識(shí)的)以提高執(zhí)行特定行為的可能性的設(shè)計(jì)。

一下沒看懂是吧?(再看50遍)或者，看看這兩個(gè)栗子：

想象一下在偉大的國慶節(jié)，你帶著親愛的女票和未來丈母娘&丈母爹一起來到大京城游玩，想瞻仰一下大故宮的雄偉壯麗，借此來表達(dá)未來女婿的一點(diǎn)心意?？傻搅斯蕦m門口，卻看到了這幅景象…好不容易排了幾個(gè)小時(shí)隊(duì)買了票，又排了幾個(gè)小時(shí)隊(duì)進(jìn)了門，發(fā)現(xiàn)已經(jīng)大下午了，匆匆忙忙轉(zhuǎn)了一圈，又排了幾個(gè)小時(shí)隊(duì)出了門，“美好的”故宮之旅就這樣結(jié)束了(一段愛情也就這樣結(jié)束了)。

在當(dāng)今這個(gè)生活節(jié)奏極快的社會(huì)，等待通常伴隨著焦慮、抱怨、憤怒，甚至是絕望等負(fù)面情緒，人們都不愿意等待。要是辛辛苦苦的等待能夠換來一個(gè)自己期待的結(jié)局還好，要是等完之后才發(fā)現(xiàn)等到的是個(gè)鬼，那心情就可想而知了。等待有時(shí)是不可避免的，否則一定會(huì)造成不同程度的混亂。那么，是不是就沒有一個(gè)好的辦法能夠減輕大家對(duì)等待的抱怨呢?

國內(nèi)知名火鍋餐飲行業(yè)“某撈”在這方面就做得非常成功。他們會(huì)為等餐的用戶提供各種免費(fèi)的飲料和小吃，還有上網(wǎng)、擦皮鞋、按摩、做指甲等服務(wù)。面對(duì)這些優(yōu)質(zhì)的服務(wù)，再漫長的等待客人們往往都能夠接受，甚至有些消費(fèi)者把這種等待也當(dāng)做消費(fèi)的一部分。

對(duì)于上面兩個(gè)例子，同樣是面臨等待的問題，人們?cè)诼糜尉皡^(qū)的等待是純粹的干等，這種等待無疑隨著時(shí)間的推移，引發(fā)的焦慮躁動(dòng)情緒會(huì)越來越明顯，最后可能導(dǎo)致的是很多人放棄等待而離開。而某撈針對(duì)類似的等待問題，提供了一系列在消費(fèi)者等待過程中可以消遣打磨等待時(shí)間的活動(dòng)，而且這些活動(dòng)多多少少對(duì)消費(fèi)者還是有利可圖的，而且這些利是“免費(fèi)”的。這樣會(huì)給消費(fèi)者一種撿了小便宜的感覺，同時(shí)在無意之中，等待時(shí)間已經(jīng)悄然度過，等待你的是服務(wù)員熱情的呼喚：“XXX號(hào)客人請(qǐng)用餐!”

通過上面兩個(gè)生活中的常見例子，大家有沒有對(duì)情感化設(shè)計(jì)有個(gè)初步的了解呢?其實(shí)通俗一點(diǎn)講(以下說法僅代表個(gè)人觀點(diǎn)，本人最高學(xué)歷初中畢業(yè))：我們有一個(gè)目標(biāo)，為了達(dá)成這個(gè)目標(biāo)我們需要用戶去幫忙，但是有的時(shí)候用戶并不買賬，這時(shí)我們需要探測用戶的情感，嘗試著去理解他們想要什么、需要什么，從而找到一種方法打動(dòng)用戶，讓用戶心甘情愿地參與到我們的目標(biāo)中去。

為何需要情感化設(shè)計(jì)呢?

1、隨著社會(huì)的發(fā)展，情感的訴求愈發(fā)強(qiáng)烈

科學(xué)技術(shù)的發(fā)展，使得消費(fèi)者和制造商對(duì)產(chǎn)品滿足人的心理需求方面提出了更高的要求。隨著人們消費(fèi)需求的提高以及市場競爭的日益激烈，人的感性心理需求得到了前所未有的關(guān)注，人們已經(jīng)不在滿足單純的物質(zhì)需求，人的需求正向著情感互動(dòng)層面的方向發(fā)展。

每一天都有很多南亞勞動(dòng)力來到迪拜工作賺錢以獲得更好的生活。他們平均一天只有6美元的收入，可打電話給家里卻不得不花每分鐘0.91美元的費(fèi)用。為了節(jié)省每一分錢，這些外來務(wù)工人員都不舍得打電話回家。

所謂幸福，對(duì)他們而言，就是能聽到孩子的叫聲，能聽到家人的聲音。了解到這批人的實(shí)際情況后，迪拜可口可樂聯(lián)合揚(yáng)羅必凱廣告公司開發(fā)了一款可以用可樂瓶蓋當(dāng)通話費(fèi)的“hello happiness“電話亭裝置，把這些電話亭放到工人們生活的地區(qū)，每一個(gè)可口可樂瓶蓋都可以免費(fèi)使用三分鐘的國際通話費(fèi)。

2、我們喜歡和人交流，而不是機(jī)器

人性化是人機(jī)交互學(xué)科中很重要的研究，充分考慮到用戶的心理感受，將產(chǎn)品化身成一個(gè)有個(gè)性、有脾氣的人，相比冷冰冰的機(jī)器更能得到用戶的好感和共鳴。

為自己的小孩量體溫是每一個(gè)媽媽都會(huì)有的經(jīng)驗(yàn)。每次小朋友發(fā)燒的時(shí)候，媽媽們總是時(shí)時(shí)刻刻關(guān)心寶貝的體溫，可是體溫計(jì)長得那么不親切，就會(huì)讓某些生病中的小朋友產(chǎn)生排斥感。那怎么辦呢?

來自韓國的設(shè)計(jì)師Duck-Young將充滿距離感的溫度計(jì)和最自然的手結(jié)合在一起，讓我們用最自然的方式來替自己的小孩量體溫。雖然這個(gè)溫度計(jì)外形看起來簡單，但這可是設(shè)計(jì)師經(jīng)過不斷地研究使用者行為之后才誕生出來的符合人體工學(xué)的溫度計(jì)。

3、一切的一切都是為了打動(dòng)你

產(chǎn)品真正的價(jià)值是可以滿足人們的情感需要，最重要的一個(gè)需要是建立其自我形象和其在社會(huì)中的地位需要。當(dāng)以物品的特殊品質(zhì)使他成為我們?nèi)粘Ｉ畹囊徊糠謺r(shí)，當(dāng)它加深了我們的滿意度時(shí)，愛就產(chǎn)生了。

這真不是啤酒，這是一款用易拉罐封裝的大米，名叫“旬米新缶”(ShunmaiShinkanRice)，日本CTC公司的產(chǎn)品。旬米新缶定位為緊急情況下的食物，普通易拉罐大小，每罐300克，經(jīng)過嚴(yán)格的密封包裝，防米蟲，免洗，里面的米可以保存5年!它內(nèi)部充有高壓氣體，能經(jīng)受海水的長期浸泡而飄在水面，同時(shí)又具有一定強(qiáng)度，能經(jīng)受外力敲擊而無凹陷不破裂。

看到這些就不難理解，為什么在2012年日本一項(xiàng)地震防災(zāi)品調(diào)查的排行榜上，旬米新缶能夠排名第二了吧。

情感化設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中有哪些應(yīng)用呢?

以上所說的都是體現(xiàn)在產(chǎn)品方面的情感化設(shè)計(jì)的應(yīng)用，那么針對(duì)網(wǎng)頁設(shè)計(jì)這塊，隨著大家對(duì)用戶體驗(yàn)關(guān)注度的逐漸提高，情感化設(shè)計(jì)也在網(wǎng)頁設(shè)計(jì)中越來越受到重視。

在Readme的登陸頁面上，當(dāng)你輸入密碼時(shí)，上面萌萌的貓頭鷹會(huì)遮住自己的眼睛，在輸入密碼的過程中給用戶傳遞了安全感。在注冊(cè)時(shí)，貓頭鷹的手和眼睛還會(huì)一同指向你所選中的輸入框，呆萌的形象給本身枯燥乏味的登錄注冊(cè)界面增添了一絲趣味，從而也減少了用戶在登錄注冊(cè)時(shí)的負(fù)面情緒。

地址：https://dash.readme.io/login (請(qǐng)用PC端體驗(yàn))

這里有兩個(gè)loading頁面，第一個(gè)頁面只給出“加載中”三個(gè)字，然后不停的閃。對(duì)于這種加載無疑是令人抓狂的，既不知道會(huì)等待多久，也無法想象迎接等待的是什么鬼…相比之下，第二個(gè)頁面的形式就要好很多，用戶可以很清楚地知道當(dāng)葫蘆加載滿頁面即可打開，下方的數(shù)字也交代了當(dāng)前的進(jìn)度，而且通過宣紙和葫蘆的形象也多多少少給用戶帶來了一些關(guān)于頁面的信息。

第一個(gè)頁面想必大家不陌生吧，毫無疑問，瀏覽網(wǎng)站的時(shí)候遭遇404是最讓人沮喪的事情之一。你費(fèi)時(shí)費(fèi)力地研究，在信息冗雜的網(wǎng)頁之間搜索有用的信息，好不容易找到一個(gè)接近目標(biāo)的鏈接，點(diǎn)進(jìn)去卻是一個(gè)坑爹的404頁面，憤怒與沮喪在心中膨脹的感覺的確不好受。盡管開發(fā)者想盡量避免用戶遭遇404，但是當(dāng)用戶不可避免地一頭扎入錯(cuò)誤頁的時(shí)候，也希望用戶盡量在網(wǎng)頁中多待一會(huì)兒。所以，在設(shè)計(jì)404頁面的時(shí)候，做好情感化設(shè)計(jì)是首要任務(wù)。

暴雪告訴我們404也可以做成這樣，他們并沒有讓用戶感覺自己立刻脫離整體網(wǎng)站的大環(huán)境，而是打造了一個(gè)被破壞的場景，一句簡單的“Grats.You broke it”反而告訴用戶是你搞砸了網(wǎng)站，看到這，是不是還有點(diǎn)沾沾自喜呢…

地址：http://us.blizzard.com/en-us/games/war1/ (請(qǐng)用PC端體驗(yàn))

Blue Daniel告訴我們404還可以做成這樣，我會(huì)告訴你我玩了好幾遍這個(gè)404么?自己去體驗(yàn)吧。

地址：http://www.bluedaniel.com/404 (請(qǐng)用PC端體驗(yàn))

作為一名菜鳥級(jí)游戲網(wǎng)(mei)頁(gong)設(shè)(kou)計(jì)(tu)師，我深深地意識(shí)到，如果我再不說點(diǎn)跟游戲頁面設(shè)計(jì)相關(guān)的，可能我下個(gè)月就吃不了灌餅了…主管大大，你別出來，我這就編…

情感化設(shè)計(jì)在游戲網(wǎng)頁設(shè)計(jì)的應(yīng)用

1、盡可能地打造一個(gè)偏真實(shí)的場景

用戶往往對(duì)真實(shí)的場景有一種親近感，因此，如果能將真實(shí)場景融入網(wǎng)站的設(shè)計(jì)中，很容易讓用戶產(chǎn)生一種愿意自我?guī)肭榫车母杏X，有利于引起他們對(duì)網(wǎng)站中的其他內(nèi)容的興趣。

2、通過講故事來帶動(dòng)用戶的情緒

生動(dòng)有趣的情節(jié)能夠?qū)⒂脩粑秸麄€(gè)故事中，這對(duì)引起用戶情感上的共鳴有很好的效果，故事情節(jié)不僅可以帶動(dòng)用戶的情緒，也讓用戶順勢展開想象。

3、利用小交互讓用戶充分參與到網(wǎng)站中

前期由于用戶長時(shí)間觀看網(wǎng)站進(jìn)入疲勞階段，此時(shí)，如果出現(xiàn)一個(gè)非常適宜的小交互，讓用戶親自操作去達(dá)成相應(yīng)的效果，無疑可以將用戶的情緒重新喚醒至興奮狀態(tài)。

4、嘗試喚醒用戶內(nèi)心潛在的情緒

這方面其實(shí)在目前朋友圈里廣泛傳播的一些h5頁面中有較好的體現(xiàn)，我們可以想象下當(dāng)我們體驗(yàn)完一個(gè)h5頁面準(zhǔn)備分享的那一刻，除了對(duì)創(chuàng)意、執(zhí)行、技術(shù)方面的贊嘆以外，是不是還有別的原因?打個(gè)比方吧，作為一個(gè)北漂糙漢子，沒有搶到過年回家的票，年三十看著別家團(tuán)團(tuán)圓圓，自己卻孤零零一個(gè)人默默打開朋友圈，這時(shí)非常應(yīng)景的看到一個(gè)關(guān)于“回家過年”的h5頁面，忍不住點(diǎn)了進(jìn)去，看完后含著淚點(diǎn)擊分享的那一刻，是什么促使你產(chǎn)生這個(gè)舉動(dòng)?我想，答案一定是你內(nèi)心那種沒買到票，不能回家過年的無比酸爽的情緒。這里的這個(gè)h5就很好地抓住了一個(gè)點(diǎn)，一個(gè)能夠觸動(dòng)你內(nèi)心的點(diǎn)(不是那個(gè)點(diǎn)，別瞎想)，從而你看完會(huì)心甘情愿地幫他去推廣。

《天龍八部3D》丐世英雄版本專題的h5推廣頁，玩天龍的玩家都知道游戲中的各個(gè)幫派，其中丐幫是受很多玩家青睞的一個(gè)門派。此次新版本因?yàn)橐瞥鋈碌摹柏汀甭殬I(yè)，所以頁面在前期的創(chuàng)意中也是立足于對(duì)丐幫中人的描述，力求能夠打動(dòng)鐘愛丐幫和武俠游戲的玩家，頁面上線后也是引起了一致的好評(píng)。

總結(jié)：

好了，寫了這么多關(guān)于情感化設(shè)計(jì)的應(yīng)用，不知道大家看了有沒有什么感受。這個(gè)話題很廣，不管是在任何設(shè)計(jì)領(lǐng)域都可以詳細(xì)列出很多應(yīng)用。這里，我們只能說是簡單聊聊，不管你接不接受，情感化設(shè)計(jì)已經(jīng)越來越受到關(guān)注，它讓我們接觸到的各種產(chǎn)品越來越人性化，它已經(jīng)形成了一種趨勢。而我們要做的，就是把這種好的趨勢繼續(xù)發(fā)展下去，在我們所處的領(lǐng)域創(chuàng)造出更多優(yōu)秀的作品。