#經(jīng)驗分享# APP、網(wǎng)頁中的情感化設計-設計心理學

干貨有點多...

1裙秋、簡述為什么著重從情感化設計角度分析,說明情感化設計的重要性缨伊。

2、情感化設計的基本定義、分類部逮。

3醋虏、多個網(wǎng)頁、UI案例分析谭胚。

? ? ? 情感是人格的核心徐块,根據(jù)大多數(shù)現(xiàn)代人的生活狀況未玻,結合馬斯洛夫需求層次理論,感受到一個現(xiàn)象:就是很多優(yōu)秀的產(chǎn)品是可以通過滿足人們的情感需求來體現(xiàn)其重大價值的胡控“饨耍“隨著人們消費需求的提高以及市場競爭的日益激烈,人的感性心理需求得到了前所未有的關注昼激,人們已經(jīng)不在滿足單純的物質(zhì)需求庇绽,人的需求正向著情感互動層面的方向發(fā)展〕壤В” 個人認為瞧掺,情感化設計是與用戶體驗是否優(yōu)秀關聯(lián)最緊密的一點。所以借著這次設計心理學作業(yè)的機會凡傅,想要整理一些關于在APP和網(wǎng)頁中的情感化設計的案例并分析辟狈。

首先通過網(wǎng)絡和書籍,算是比較全面地找到了情感化設計定義:“情感化設計是指旨在抓住用戶注意力夏跷、誘發(fā)情緒反應(有意識或無意識的)以提高執(zhí)行特定行為的可能性設計哼转。”可能有點不太好懂...也有其他描述:“情感化設計只是一種創(chuàng)意工具,表達和發(fā)揮設計師的思想和設計目的拓春,隨著時代的發(fā)展释簿,這種創(chuàng)意工具將變得日益銳利∨鹈В”

? ??《情感化設計》一書中大致描述了情感和情緒對于日常生活做決策的重要性庶溶,分為三種水平的設計與產(chǎn)品特點的對應關系:本能水平、行為水平懂鸵、反思水平偏螺。而在“反思水平”的解釋里面,最能體現(xiàn)情感化設計:反思水平的設計與物品的意義有關匆光,受到環(huán)境套像、文化、身份终息、認同等的影響夺巩,會比較復雜,變化也較快周崭。這一層次柳譬,事實上與顧客長期感受有關,需要建立品牌或者產(chǎn)品長期的價值续镇。只有在產(chǎn)品/服務和用戶之間建立起情感的紐帶美澳,通過互動影響了自我形象、滿意度、記憶等制跟,才能形成對品牌的認知舅桩,培養(yǎng)對品牌的忠誠度,品牌成了情感的代表或者載體雨膨。

在感受案例之前擂涛,根據(jù)自己的想法以及廣大設計師對情感化設計的幾個討論點總結如下。

情感化設計重要性:社會發(fā)展哥放,情感訴求愈發(fā)強烈歼指、我們喜歡和人交談,而不是機器甥雕、打動用戶才可能成功...

情感化設計的組成:正能量的傳達踩身、積極合理富有感情的交互回應、驚喜彩蛋社露、吸引力(鼓勵引導用戶愿意嘗試)...

情感化設計點:登錄界面挟阻、引導頁、吐槽反饋峭弟、客服附鸽、刷新加載、404瞒瘸、游戲場景坷备、微交互與用戶互動....

---------------------------------一條放輕松的分割線--------------------------------

APP和網(wǎng)頁中的情感化設計案例賞析:

1、一直以來印象很深刻的一個小例子就是情臭,在Readme的登錄界面中省撑,當用戶輸入密碼時,上面可愛的貓頭鷹就遮住自己的眼睛俯在,在輸入密碼的過程中給用戶傳遞了安全感和趣味竟秫。

在注冊時,貓頭鷹的手和眼睛還會一同指向我所選中的輸入框跷乐。讓用戶感受到關懷肥败,用“賣萌”的形象化解用戶登錄時的負面情緒。

體驗鏈接:https://dash.readme.io/login

2愕提、很多情感化設計即便體現(xiàn)在極其微小的細節(jié)里面馒稍,也有可能打動用戶;比如Betterment的注冊流程中浅侨,用戶輸入完出生年月日之后會在時間下面顯示還剩多少天過生日筷黔,一個小小的關懷立馬讓注冊的流程有了驚喜。

體驗鏈接:https://www.betterment.com/

注冊之后的信息采集也是與用戶親切對話的方式仗颈,擬人化交互。

3、石墨文檔一直是我非常鐘愛的一款在線協(xié)作工具挨决,它的設計里面也存在著很多類似的小細節(jié):

雖然只是個工具類應用请祖,但是工作時間里客服基本一直在線,隨時接待解答用戶的問題脖祈,而且我遇到的都是秒回的情況肆捕。在我以前的日記里有過一段內(nèi)容:

打開石墨回收站:”你一定有潔癖“,仿佛產(chǎn)品隨時在跟我積極交流盖高。

4慎陵、bilibili是國內(nèi)最大的年輕人潮流文化娛樂社區(qū),在它的APP設計中也存在許多情感化設計的細節(jié):

下拉刷新:人設之間的趣味性互動喻奥,產(chǎn)品“詼諧有趣”的氣質(zhì)便從這些隱秘于界面細節(jié)之中的設計傳遞給了用戶席纽。?

彈窗:圖案采用姐妹花形象,文案牢牢抓住用戶喜好撞蚕,獲得好感并提高通過率润梯。

功能包裝:打賞功能經(jīng)過二次元術語包裝,變得趣味十足甥厦,并讓用戶從中獲得參與感纺铭。

空狀態(tài):姐妹花出現(xiàn)的地方文案相應都會變成可愛風。

5刀疙、閑魚APP的情感化設計舶赔。

閑魚中巧妙的插畫不僅刺激眼球,而且增進用戶對產(chǎn)品的好感谦秧,大大增加進一步操作的可能性竟纳。?

內(nèi)置可愛表情包,不僅使聊天變得有趣油够,同時表情包會變成一種形象資源蚁袭,方便設計師運用在APP的各個角落,加深形象印象石咬。

品牌形象是一只魚揩悄,品牌與衍生物形成一個生態(tài),呼應強化品牌印象鬼悠。根據(jù)魚的特性衍生出很多別的設定删性,比如:?

空白頁插畫師空魚缸;?

商品(魚)很多的地方焕窝,稱為魚塘蹬挺;?

圍繞魚塘產(chǎn)生的積分,好比是在魚塘邊撿貝殼(魚貝積分)它掂;?

因為商品是魚巴帮,用戶設定為愛吃魚的貓咪溯泣;?

雖然這些角色設定可以幫助產(chǎn)品和用戶快速建立情感聯(lián)系,但是反思設計的核心并不只停留在表面榕茧。有設計師提醒說:“吉祥物是建立情感聯(lián)系的捷徑垃沦,但不是最終目的,重要的是做有溫度的產(chǎn)品”用押。

? ? ? 6肢簿、一些充滿情感化設計的網(wǎng)頁404頁面。

推特的404

這個404界面里面的星空 可以根據(jù)鼠標的移動而移動蜻拨,減少用戶瞬間的失落感池充。

給人清新放輕松的感覺,圖片寓意也很形象缎讼。

設計師通過情感化的圖形設計收夸,以及充滿人文關懷和社會責任的設計,讓原本冷冰冰的服務器反饋變得充滿人情味休涤。

? ? ? ?7咱圆、包括我們每天常見的,微信的啟動界面:孤獨望天的人功氨。

? ? ? 8序苏、說到社交,想起一個由歌手許嵩官方團隊運營的APP:vae+捷凄。無意間發(fā)現(xiàn)了這個APP之后趕緊下載體驗忱详, 主要用戶為許嵩的歌迷粉絲。APP包含:首頁的動態(tài)(許嵩最新發(fā)布日常跺涤、新聞專訪圖集和視頻等記錄內(nèi)容)匈睁、許嵩的工作行程、舉辦的活動桶错、除此之外則是其他用戶之間的各種形式的互動(社交廣場做任務商城等)...融入這個大家庭的時候APP已經(jīng)運營地有聲有色了航唆,明顯感受到用戶非常活躍院刁,剛加入也很輕易就能與其他用戶頻繁互動糯钙,個人情感上極大欣慰和滿足。仔細品味之后退腥,不僅僅是作為粉絲的私心任岸,從設計角度來看,對這個APP也深感喜愛狡刘。借此機會從情感化設計的角度來分享下這個產(chǎn)品:

APP的LOGO從許嵩的英文名vae出發(fā)享潜,"+"意思為“家”,與目標用戶之間默契傳達:“這里是vae的家嗅蔬,來了就是一家人”剑按,使人倍感親切疾就。

簡單啟動的第一印象細膩,清新吕座,撩人虐译。啟動頁的字句很貼切APP的本質(zhì),就是由一群喜愛許嵩的人聚集親密互動的平臺吴趴。完善資料時一個情緒化的進度條使人不忍直接跳過,小心翼翼填完信息侮攀。

APP用戶黏性由許嵩本人緊緊維系锣枝,首頁懸浮的一個半藏半露的圓形按鈕就暗藏“玄機”,點進去是許嵩為原型的如下插畫場景兰英,初次進入的時候?qū)υ拑?nèi)容大致是:“hello撇叁,我是你們的許老師,歡迎來到這個大家庭畦贸,今后我會每天在這里等你...”伴隨許嵩自己風格的背景音樂和親自錄音的語音對話陨闹,每天智能匹配不同對話內(nèi)容,也可以親自輸入想說的話薄坏,好像愛豆就在身邊趋厉,非常貼心的設計了。

在動態(tài)互動里面也有一些“小心思”胶坠,因為每一位用戶都有建立一個“賬戶”君账,賬戶里面有“松果”、“松子”沈善、“積分”乡数。賬戶積累的方式有:每日完成任務(登錄、評論帖子闻牡、被贊净赴、贊他人主頁、看排行榜罩润、分享玖翅、聽歌、在線時長)或與許老師對話哨啃、免費抽獎烧栋;購買松果;連續(xù)簽到拳球、參加線下活動审姓、線上活動、提升等級祝峻、上熱門等魔吐。賬戶積累可用于更好玩的操作:比如拿松子找許老師開禮盒扎筒、投喂其他用戶松果、購買補簽卡酬姆、提升關注數(shù)量嗜桌、獲得積分獎勵、積累人氣報名會優(yōu)先被考慮見到許嵩本人辞色、積分可以在商城兌換實物骨宠、神秘道具神秘禮包等等∠嗦總結來說就是幾乎用戶的每一種參與互動都會被系統(tǒng)記錄层亿,獎勵回饋機制很妥帖,讓用戶知道自己的每一次操作都是可積累價值的立美,極大增加用戶黏性匿又。整個體系設計把用戶緊緊包圍,又不至于像游戲一樣費心沉迷建蹄,產(chǎn)品和用戶的相處恰到好處碌更。

vae+ APP本身在”本能水平、行為水平“這些層面的設計雖然沒有具體說到洞慎,但其實也很貼心痛单,”反思設計“里面的情感化體現(xiàn)使產(chǎn)品更加增添了萬分精彩。下圖中的數(shù)據(jù)和內(nèi)容可以輕易感受到每一位普通用戶的熱情和愛意(APP store里的評論)拢蛋,而這是產(chǎn)品本身有溫度才能換來的桦他。


9、游戲APP更是以情感化設計為主要設計手法的對象谆棱,幾乎所有游戲都喜歡以講故事的方式快压,用生動的故事情節(jié)帶動用戶積極性,并使其展開想象垃瞧。這種案例舉不勝舉蔫劣,簡單取一個闡述:

紀念碑谷:游戲每個小關卡開頭都會說一句,充滿神秘含義的話个从,暗喻整個故事脉幢。

10、對于情感化設計這一塊嗦锐,支付寶也一直在努力下功夫嫌松。印象比較深刻的是從”螞蟻森林“到”螞蟻莊園“,支付寶這個應用在我和身邊的朋友生活中存在感越來越高奕污,相信大家對此也都不陌生萎羔。細想螞蟻森林的體系是一個很簡單卻也很巧妙的設計,以”在沙漠種樹“為由碳默,用行為方式和支付方式獲取能量贾陷,吸引了很多用戶的注意力缘眶,還建立了好友之間緊密的互動關系。比如身邊很多人愿意在大清早還沒睡醒的時候抓起手機收取森林里的能量髓废,所謂早期的鳥兒有蟲吃巷懈,越早的人收到的能量越多,種的樹越多慌洪,做的貢獻也越多顶燕。不僅是清晨,平時的空閑時間里也是時不時打開支付寶偷下能量蒋譬,眼看著自己種的小樹苗一天天長大割岛,最終形成一片森林。過程中參與感強烈犯助,成就感也很多,內(nèi)心想著能靠自己的行為在沙漠種些樹也是很酷的维咸,樂此不疲剂买,用戶黏性可以說是很強了。不僅如此癌蓖,支付寶緊跟著又推出新的類似的功能:螞蟻莊園瞬哼,也是愛心慈善活動,喂雞養(yǎng)雞捐贈愛心租副,也是憑靠每個人的行為方式和支付方式坐慰。簡單有趣的游戲規(guī)則,可愛的小樹苗和小胖雞用僧,每個普通用戶都能輕易參與進來结胀,也愿意形成習慣堅持下去。

森林和莊園的背景都會隨著一天時間的變化而發(fā)生變化责循,樹苗和小雞也有成長變化糟港,它們隨機和用戶對話互動,排行榜激勵用戶行為院仿。小雞可愛的言語秸抚、俏皮的動作、幽默的表情歹垫、還會互相偷食吃剥汤,幫別人趕雞獲得獎勵...很多細節(jié)都盡情利用情感化設計這張牌抓住用戶的小心思。?

11排惨、最后想集中搜集討論一下在APP中使用情感化設計的重點對象:啟動頁吭敢、引導頁、空狀態(tài)若贮、刷新加載..

“想去”APP里面的向下刷新加載省有,是一條簡單的線條在動痒留,卻勾勒出一只鯊魚不停追著一只小魚跑的活潑場景,同時也與LOGO和品牌形象相互呼應蠢沿,加深印象伸头。

喜馬拉雅、網(wǎng)易新聞舷蟀、支付寶恤磷、網(wǎng)易美學、MONO野宜。不難發(fā)現(xiàn)許多APP會在刷新加載這個產(chǎn)品和用戶尷尬相處的瞬間扫步,試圖用各種方式與用戶愉快交流,以此優(yōu)化體驗匈子。

啟動頁和引導頁作為用戶產(chǎn)生第一印象的重要角色河胎,在設計的時候同樣需要多花心思,不僅要靠視覺的美感帶來愉悅虎敦,還要準確表達情感主題深入人心游岳。網(wǎng)絡上有很多啟動頁或是引導頁喜歡以節(jié)日為主題、以二十四節(jié)氣為主題其徙,我覺得這些都是很好的情感化切入點胚迫,給人關懷的同時也帶來新鮮感。

還有很多好例子舉不完唾那。

總結到最后愈發(fā)感受到互聯(lián)網(wǎng)產(chǎn)品中访锻,情感化設計的魅力和重要性。就像剛進入大學的時候闹获,班主任老師跟我們說的:好的設計師必定首先是一個有愛期犬,懂得熱愛生活和感悟生活的人。今后在做設計的時候也會考慮處處融入情感昌罩,讓理性和感性完美融合哭懈,期待自己在這方面的進步。

注:封面中的動圖截取自

dribbble設計師:Denis Sazhin

behance設計師:Jonas Mosesson

本文轉(zhuǎn)自:UI中國 au小鹿

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末茎用,一起剝皮案震驚了整個濱河市遣总,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌轨功,老刑警劉巖旭斥,帶你破解...
    沈念sama閱讀 219,589評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異古涧,居然都是意外死亡垂券,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評論 3 396
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來菇爪,“玉大人算芯,你說我怎么就攤上這事〉手妫” “怎么了熙揍?”我有些...
    開封第一講書人閱讀 165,933評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長氏涩。 經(jīng)常有香客問我届囚,道長,這世上最難降的妖魔是什么是尖? 我笑而不...
    開封第一講書人閱讀 58,976評論 1 295
  • 正文 為了忘掉前任意系,我火速辦了婚禮,結果婚禮上饺汹,老公的妹妹穿的比我還像新娘蛔添。我一直安慰自己,他們只是感情好兜辞,可當我...
    茶點故事閱讀 67,999評論 6 393
  • 文/花漫 我一把揭開白布作郭。 她就那樣靜靜地躺著,像睡著了一般弦疮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蜘醋,一...
    開封第一講書人閱讀 51,775評論 1 307
  • 那天胁塞,我揣著相機與錄音,去河邊找鬼压语。 笑死啸罢,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的胎食。 我是一名探鬼主播扰才,決...
    沈念sama閱讀 40,474評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼厕怜!你這毒婦竟也來了衩匣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,359評論 0 276
  • 序言:老撾萬榮一對情侶失蹤粥航,失蹤者是張志新(化名)和其女友劉穎琅捏,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體递雀,經(jīng)...
    沈念sama閱讀 45,854評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡柄延,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,007評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了缀程。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搜吧。...
    茶點故事閱讀 40,146評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡市俊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出滤奈,到底是詐尸還是另有隱情摆昧,我是刑警寧澤,帶...
    沈念sama閱讀 35,826評論 5 346
  • 正文 年R本政府宣布僵刮,位于F島的核電站据忘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏搞糕。R本人自食惡果不足惜勇吊,卻給世界環(huán)境...
    茶點故事閱讀 41,484評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望窍仰。 院中可真熱鬧汉规,春花似錦、人聲如沸驹吮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碟狞。三九已至啄枕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間族沃,已是汗流浹背频祝。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留脆淹,地道東北人常空。 一個月前我還...
    沈念sama閱讀 48,420評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像盖溺,于是被迫代替她去往敵國和親漓糙。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,107評論 2 356

推薦閱讀更多精彩內(nèi)容