宋奕勤，孫亞斌

（武漢工程大學(xué)，武漢 430205）

一、App的情感化設(shè)計(jì)分析

（一）當(dāng)前App存在的問(wèn)題

App全稱為“Application”，指安裝在智能手機(jī)上的應(yīng)用軟件，以完善原有系統(tǒng)的不足之處和個(gè)性化為目的，為用戶提供更豐富的體驗(yàn)。憑借著廣闊的受眾群體，App已經(jīng)成為了用戶手機(jī)里不可或缺的內(nèi)容。當(dāng)今，主流的應(yīng)用下載中心有蘋果的應(yīng)用商店和安卓的谷歌市場(chǎng)，兩者的App數(shù)量均達(dá)到了200萬(wàn)左右，但用戶愿意長(zhǎng)期使用的App并不多見(jiàn)。以購(gòu)物類App為例，2017年，淘寶以53.3%的滲透率排名第一，京東和拼多多的滲透率分別為20.6%和19.4%，余下的則為其他同類App；可見(jiàn)，對(duì)于用戶來(lái)講，能使其長(zhǎng)期使用的購(gòu)物類App只有幾個(gè)而已①。一款優(yōu)秀的App應(yīng)擁有恰當(dāng)?shù)墓δ芘c科學(xué)的操作流程，美觀的界面與友好的交互，其設(shè)計(jì)是離不開(kāi)產(chǎn)品的情感化提升的。然而當(dāng)今市場(chǎng)上許多開(kāi)發(fā)者常常追求App的功能，而忽視了對(duì)用戶體驗(yàn)的完善；此外，許多App的界面設(shè)計(jì)同質(zhì)化現(xiàn)象嚴(yán)重，不足以培養(yǎng)忠實(shí)的用戶群體和使用習(xí)慣。但是如果在設(shè)計(jì)的界面與交互、形式與細(xì)節(jié)上多下工夫，在滿足功能需求的基礎(chǔ)上，把握住用戶的情感需求，便會(huì)給用戶留下深刻的印象。

（二）情感化設(shè)計(jì)及其三種層次

信息與技術(shù)的飛速發(fā)展，使人們的物質(zhì)世界逐漸豐富，而人與人之間的交往逐漸淡薄。未來(lái)學(xué)家約翰·奈斯比特②曾說(shuō)：“我們的社會(huì)里高技術(shù)越多，我們就越想創(chuàng)造一個(gè)高情感的環(huán)境，利用科技的軟性來(lái)平衡硬性的一面。”墨子也曾說(shuō)過(guò)：“衣必常暖，然后求麗；居必常安，然后求樂(lè)?！碑?dāng)人們的基本需要得到滿足時(shí)，就會(huì)有更高層次的精神需求。從心理學(xué)上講，人的情感活動(dòng)是一個(gè)由自然情感向?qū)徝狼楦械霓D(zhuǎn)化過(guò)程。因此，情感化設(shè)計(jì)可以理解為以滿足產(chǎn)品功能為前提，在用戶和產(chǎn)品之間建立情感聯(lián)系，給予用戶愉悅的使用體驗(yàn)，賦予產(chǎn)品特殊的情感意義。

美國(guó)認(rèn)知心理學(xué)家、計(jì)算機(jī)工程師、工業(yè)設(shè)計(jì)家唐納德·諾曼③將人的情感分為三個(gè)層次：本能層、行為層和反思層。投射到App設(shè)計(jì)中來(lái)講，本能層是人第一眼看到的、感覺(jué)到的東西，具體是指App界面元素是否會(huì)激發(fā)用戶興趣，以及其界面的可用性等；行為層指用戶在使用產(chǎn)品的過(guò)程中體會(huì)到的功能和樂(lè)趣，主要側(cè)重于實(shí)現(xiàn)交互上的易用性，用戶是否能夠順利地完成操作，操作是否符合用戶習(xí)慣，減少用戶記憶負(fù)擔(dān)等；反思層體現(xiàn)的是產(chǎn)品與用戶之間的獨(dú)特關(guān)系，是否會(huì)引起情感、記憶的反饋，其屬于更深層次的方面，會(huì)受到使用者的文化背景、經(jīng)驗(yàn)、教育程度等因素的影響。當(dāng)今用戶不希望面對(duì)的是冰冷的機(jī)器；一旦用戶內(nèi)心的心理模型與產(chǎn)品不符，難免會(huì)產(chǎn)生消極的情感；在操作一個(gè)陌生的軟件時(shí)，用戶渴望得到更多的提示與反饋。例如近幾年流行的404頁(yè)面，將錯(cuò)誤以風(fēng)趣幽默的方式呈現(xiàn)給用戶，堪稱“出錯(cuò)的藝術(shù)”，這種設(shè)計(jì)手法也運(yùn)用到了App上（圖1）。從用戶的角度來(lái)講，合理的情感化設(shè)計(jì)對(duì)于App來(lái)說(shuō)無(wú)疑是一種必要的優(yōu)化。

二、本能層面的界面設(shè)計(jì)

>圖1 “閑魚(yú)”與“餓了么”App“錯(cuò)誤”的頁(yè)面設(shè)計(jì) 圖片來(lái)源：“閑魚(yú)”App與“餓了么”App

>圖2 單手操作智能手機(jī)的舒適程度 圖片來(lái)源：www.uxmatters.com

>圖3 “開(kāi)眼”App與“Apple Store”首頁(yè)對(duì)比圖 圖片來(lái)源：“開(kāi)眼”App與“Apple Store”

>圖4 “今日頭條”與“網(wǎng)易云音樂(lè)”App的“Tab Bar”設(shè)計(jì)圖片來(lái)源：“今日頭條”與“網(wǎng)易云音樂(lè)”App

>圖5 “每日故宮”App 圖片來(lái)源：“每日故宮”App

本能層面的情感化設(shè)計(jì)主要指的是App的視覺(jué)元素是否可以被用戶接受，是決定App是否具有可用性的關(guān)鍵，這也是進(jìn)行App設(shè)計(jì)的首要原則。因?yàn)榧词故且曈X(jué)元素，其最終目標(biāo)仍然是幫助用戶完成各項(xiàng)任務(wù)。本能可以理解為觀察事物的一種先天感受，是調(diào)動(dòng)用戶情感的首要方面。如界面布局、色彩風(fēng)格、圖形元素等。這種視覺(jué)化要素設(shè)計(jì)的目的是為了讓用戶第一時(shí)間注意到App的內(nèi)容，并進(jìn)行引導(dǎo)。

（一）易于理解和操作的界面布局

從布局上講，由于手機(jī)的界面尺寸有限，App界面設(shè)計(jì)應(yīng)當(dāng)簡(jiǎn)潔，避免繁瑣，用精煉的欄目囊括App的主要內(nèi)容，突出核心功能，明確各個(gè)區(qū)域之間的聯(lián)系性，用戶從界面上就能了解App的定位。其次，要符合用戶的操作習(xí)慣。根據(jù)Steven Hoober在“移動(dòng)設(shè)備使用量”的調(diào)查中發(fā)現(xiàn)：如“圖2單手操作智能手機(jī)的舒適程度”所示，綠色是容易到達(dá)的區(qū)域；黃色表示需要延伸的區(qū)域；紅色表示觸達(dá)困難的區(qū)域。從中可以看出，中間、底部區(qū)域是用戶最經(jīng)常、最容易操作的區(qū)域。因此設(shè)計(jì)者在App初期的規(guī)劃中要盡可能地符合用戶認(rèn)知和先天本能，更重要的是，要符合用戶的生理結(jié)構(gòu)與心理特點(diǎn)，盡量將重要的信息放在屏幕的中間或者偏上的位置，將用戶需要點(diǎn)擊的功能性區(qū)域放在屏幕下方。以圖3“開(kāi)眼”App與“Apple Store”App首頁(yè)對(duì)比圖為例，兩者在界面版式的設(shè)計(jì)上相似，均采用了上下結(jié)構(gòu)的瀏覽方式，以圖形元素為主；標(biāo)題文本大部分被置于左側(cè)，雖然占比不大，但在視覺(jué)傳達(dá)過(guò)程中起著重要作用，輔助用戶理解內(nèi)容。兩款A(yù)pp均作了面積合適的留白處理，將標(biāo)簽欄放置在屏幕下方，并將單個(gè)欄目的點(diǎn)擊區(qū)域擴(kuò)大，方便用戶操作，增強(qiáng)了App的可用性，從而減少容錯(cuò)率。

（二）色彩的情感傳播

從顏色上來(lái)講，不同的顏色可以給用戶不同的感受，比如紅色的熱烈與喜慶、藍(lán)色的冷靜與理智、黑色的包容與穩(wěn)重等，色彩往往是App中首先傳遞給用戶的視覺(jué)元素，因此配色良好的界面會(huì)給予用戶極大的情感觸動(dòng)。在App的界面設(shè)計(jì)時(shí)，應(yīng)注意使用顏色來(lái)區(qū)分操作區(qū)域，突出視覺(jué)焦點(diǎn)。界面的色彩設(shè)計(jì)一般控制在三個(gè)以內(nèi)，避免使用過(guò)多的顏色區(qū)分，使用戶情緒趨于穩(wěn)定，App的可用性會(huì)大大增強(qiáng)。最簡(jiǎn)單的規(guī)則就是使用產(chǎn)品的品牌色來(lái)作為App的主要色調(diào)，如果App用戶群體分布廣泛，輔助顏色一般采用保守、中性的色彩，更容易被用戶接受。例如圖4“今日頭條”與“網(wǎng)易云音樂(lè)”App的“Tab Bar”設(shè)計(jì)，“今日頭條”使用了對(duì)比鮮明的品牌色“紅色”來(lái)區(qū)分選中和未選中的狀態(tài)，并將與標(biāo)簽相關(guān)的信息標(biāo)記在圖標(biāo)上，紅色也很好地凸顯了“今日頭條”的產(chǎn)品調(diào)性?！熬W(wǎng)易云音樂(lè)”為了適合不同人群，采用了中性的黑白來(lái)進(jìn)行區(qū)分，也與其品牌酷炫、多元與包容的調(diào)性相符。

（三）易于識(shí)別的圖形設(shè)計(jì)

從圖形設(shè)計(jì)上講，扁平化的極簡(jiǎn)主義符合當(dāng)代用戶的審美需求，仍然是當(dāng)前的主流。其弱化了多余的裝飾，相比擬物化風(fēng)格更能夠無(wú)障礙地向用戶傳遞信息，提高了App的可用性，并有效地減輕了用戶的記憶負(fù)擔(dān)。圖形作為一種十分有效的視覺(jué)語(yǔ)言，其不受使用者生活經(jīng)驗(yàn)、文化背景的限制，易于理解，有助于App整體情感氛圍的渲染。良好的圖形設(shè)計(jì)使界面更加直觀，設(shè)計(jì)意圖更加明顯，與用戶的情感密不可分，配合不同的色調(diào)也會(huì)影響App的整體氛圍。設(shè)計(jì)者應(yīng)當(dāng)注意的是圖形、圖像風(fēng)格的一致性以及按鈕、搜索框等部件的區(qū)分。以圖5“每日故宮”App為例，其圖形風(fēng)格類似于國(guó)畫清新淡雅的特點(diǎn)，也十分符合人們對(duì)于傳統(tǒng)文化、文物的認(rèn)知。帶有明顯特征的中國(guó)風(fēng)給人們帶來(lái)舒適的視覺(jué)享受，從“信息”和“情感”兩大方面，突出寓教于樂(lè)的方式，建立起良好的用戶體驗(yàn)?zāi)Ｊ健?/p>

三、行為層面的交互設(shè)計(jì)

行為層面的情感化設(shè)計(jì)，主要側(cè)重于App操作功能的實(shí)現(xiàn)，本能層所關(guān)注的視覺(jué)設(shè)計(jì)能否持續(xù)地打動(dòng)用戶，與App良好的行為交互設(shè)計(jì)密不可分。因此，App設(shè)計(jì)的第二原則就是必須具備良好的易用性，應(yīng)清楚地引導(dǎo)用戶的操作，減少學(xué)習(xí)成本。這種要求大多數(shù)的App都可以做到，但是如何將App現(xiàn)有的功能清晰地呈現(xiàn)在用戶面前，符合用戶的行為習(xí)慣才是設(shè)計(jì)者真正需要解決的問(wèn)題，打動(dòng)用戶的往往不是App便捷的功能，而是那些構(gòu)思巧妙的設(shè)計(jì)細(xì)節(jié)。因此易用性可以從兩方面進(jìn)行理解。

（一）設(shè)計(jì)良好的交互流程

雖然用戶所處的生活環(huán)境、文化背景千差萬(wàn)別，對(duì)于App的使用理解也不盡相同，但由于“心理模型”的作用，用戶都具有相似的思維邏輯，對(duì)于App的操作路徑也具有相似的理解。以微信和QQ向好友發(fā)送圖片的方式來(lái)比較（圖6）。微信的方式是：點(diǎn)擊發(fā)圖選項(xiàng)→進(jìn)入相冊(cè)→選中目標(biāo)圖片（組）→點(diǎn)擊右下角的發(fā)送選項(xiàng)；QQ是：點(diǎn)擊發(fā)圖選項(xiàng)→屏幕下方彈出圖庫(kù)→選中目標(biāo)圖片（組）→點(diǎn)擊發(fā)送選項(xiàng)或是直接將圖片拖入對(duì)話框。兩者相比較，雖然QQ的步驟更少，拖入對(duì)話框的發(fā)送方式減少了用戶的操作負(fù)擔(dān)，確保了用戶操作的流暢性和體驗(yàn)效果，減少負(fù)面情緒的發(fā)生，但是微信的發(fā)圖方式更能體現(xiàn)一種學(xué)習(xí)成本低的、符合用戶“心理模型”的交互方式。當(dāng)然，兩者各有特點(diǎn)，都體現(xiàn)了科學(xué)良好的交互流程。

（二）符合用戶使用習(xí)慣

在設(shè)計(jì)了良好的交互流程的基礎(chǔ)上，設(shè)計(jì)師應(yīng)該考慮如何使App的操作更符合用戶的使用習(xí)慣。具有良好品質(zhì)的產(chǎn)品并非給予用戶他們想要的功能，而是使用戶在操作上感受到App設(shè)計(jì)的“貼心”，即用戶在使用過(guò)程中能夠根據(jù)其習(xí)慣自如地進(jìn)行點(diǎn)擊、跳轉(zhuǎn)、滑動(dòng)等操作。如何通過(guò)觀察用戶使用行為，改進(jìn)產(chǎn)品，使其符合大多數(shù)用戶的使用習(xí)慣，是行為層面設(shè)計(jì)的重點(diǎn)，相比偏向邏輯的交互方式更容易博得用戶喜愛(ài)。在微信去年更新的6.6.7版本中，官方正式添加了懸浮窗功能（圖7）：當(dāng)用戶希望暫時(shí)退出當(dāng)前閱讀界面時(shí)，只需向右下角滑動(dòng)至懸浮窗，當(dāng)前頁(yè)面即可以懸浮球的方式保存，方面之后閱讀。這就解決了微信一直以來(lái)收到信息就要退出當(dāng)前閱讀界面進(jìn)行查看的問(wèn)題。雖然這個(gè)輔助功能不易被發(fā)現(xiàn)，但其仍然做到了解決問(wèn)題的作用，符合用戶的行為習(xí)慣，使交互體驗(yàn)更加順暢。

>圖6 微信和QQ向好友發(fā)送圖片的方式 圖片來(lái)源：“微信”與“QQ”App

>圖7 微信6.6.7版本的懸浮窗功能 圖片來(lái)源：“微信”App

>圖8 “QQ”App底部欄 圖片來(lái)源：“QQ”App

圖9 網(wǎng)易云音樂(lè)App播放界面 圖片來(lái)源：網(wǎng)易云音樂(lè)App

>圖10 Bilibili登陸界面 圖片來(lái)源：Bilibili App

>圖11 “抖音”App引導(dǎo)頁(yè)及內(nèi)容頁(yè)面圖片來(lái)源：“抖音”App

（三）及時(shí)反饋

好的交互設(shè)計(jì)一定是一種雙向的交流方式，這種“態(tài)度”存在于使用過(guò)程中的各個(gè)方面。App在用戶使用過(guò)程中應(yīng)該給予用戶充分的反饋，使其清楚地了解到其操作行為的有效性，減少負(fù)面心理。反饋不僅僅局限于一般的等待、加載界面，其可以是任何交互行為呈現(xiàn)給用戶的結(jié)果，如果能夠加入一點(diǎn)創(chuàng)新，便會(huì)引起用戶的參與感；以QQ為例（圖8），當(dāng)用戶選擇其中一個(gè)標(biāo)簽時(shí)，圖標(biāo)的正面就會(huì)面朝用戶微笑，而中間的小人在沒(méi)有選中的情況下也會(huì)微微望向被選的標(biāo)簽；當(dāng)用戶按住圖標(biāo)不放的時(shí)候，其的視角也會(huì)朝向用戶手指的運(yùn)動(dòng)軌跡移動(dòng)。這種微妙的交互方式既保留了原有的功能，又賦予了標(biāo)簽欄十分暖心的情感，給用戶留下了深刻的印象。在同質(zhì)化嚴(yán)重的環(huán)境中，這種溫情有趣的反饋效果無(wú)疑會(huì)觸及用戶內(nèi)心柔軟的一面，提高用戶粘度。

四、反思層面的認(rèn)知設(shè)計(jì)

反思層面的情感化設(shè)計(jì)基于本能、行為的作用，可以在產(chǎn)品和用戶之間建立起友好的關(guān)系。用戶可以通過(guò)產(chǎn)品的形態(tài)來(lái)獲取滿足感或是熟悉感，進(jìn)一步引發(fā)情感共鳴，其決定了用戶對(duì)特定產(chǎn)品的總體印象，來(lái)自于用戶于App界面、操作、交互流程等方面的整體感受。優(yōu)秀的反思水平設(shè)計(jì)可以在App和用戶之間建立起長(zhǎng)期的關(guān)系，以培養(yǎng)用戶對(duì)App的忠誠(chéng)度。由于用戶生活習(xí)慣、文化背景的千差萬(wàn)別，反思層面的設(shè)計(jì)并不能保持高度的有效性；但正是這種千差萬(wàn)別才能夠表現(xiàn)出其設(shè)計(jì)手法的無(wú)限可能性。

（一）情感驅(qū)動(dòng)

用戶與產(chǎn)品之間友好的關(guān)系首先體現(xiàn)在情感驅(qū)動(dòng)上。如果說(shuō)行為層更多的是與理性大腦進(jìn)行對(duì)話，那么反思層便和感性大腦進(jìn)行對(duì)話。對(duì)話的關(guān)鍵在于產(chǎn)品是否與用戶有著情感共鳴。用戶的所有行為都是通過(guò)大腦操縱的，而使大腦產(chǎn)生命令的關(guān)鍵在于如何影響用戶的思維，也就說(shuō)如何讓用戶的情感來(lái)驅(qū)動(dòng)他們的行為，其不同于情感共鳴。優(yōu)秀的反思層面設(shè)計(jì)總是選擇與用戶的情感對(duì)話。例如網(wǎng)易云音樂(lè)App在播放界面使用了古樸的黑膠唱片，象征著經(jīng)典、高雅，再現(xiàn)了懷舊時(shí)代的“音樂(lè)情懷”（圖9），其體現(xiàn)的是對(duì)優(yōu)質(zhì)音樂(lè)的追求，與具有相同追求的用戶一拍即合，因此引發(fā)使用欲望；除此之外，“Bilibili”App的登陸界面也體現(xiàn)了反思層面情感驅(qū)動(dòng)的效果：用戶在輸入賬號(hào)時(shí)，屏幕上方的兩個(gè)卡通人物會(huì)小心翼翼的偷看，當(dāng)用戶輸入密碼時(shí)，她們便會(huì)捂住眼睛，其幽默可愛(ài)的形象，非常符合Bilibili目標(biāo)群體對(duì)于年輕化、幽默化、二次元等風(fēng)格的追求，并傳遞出一種安全感（圖10），與用戶的“初次見(jiàn)面”便引發(fā)了使用興趣。

（二）自我實(shí)現(xiàn)

App作為一種第三方的應(yīng)用程序，如果能幫助用戶完成自身價(jià)值觀、生活狀態(tài)的表達(dá)，也就實(shí)現(xiàn)了其最高價(jià)值。從反思層面來(lái)講，App彰顯的是用戶個(gè)人的價(jià)值取向，實(shí)現(xiàn)的是用戶高層次的需要。以圖11“抖音”App為例，其最初吸引用戶的地方便是圖標(biāo)設(shè)計(jì)，利用顏色疊加來(lái)產(chǎn)生復(fù)古、曝光的效果，極易使觀者追溯到20世紀(jì)90年代；用戶初次使用不必登錄便可以瀏覽視頻，減少了操作路徑；UI設(shè)計(jì)十分簡(jiǎn)潔，容易使用戶專注于自動(dòng)播放的視頻與興趣推送；在視頻封面的左下方顯示著用戶收藏的次數(shù)，容易引起用戶的點(diǎn)擊欲望，在好奇中滿足需求。除了專注于短視頻和音樂(lè)創(chuàng)意以外，用戶還能夠分享生活中的小竅門來(lái)吸引人們的關(guān)注。在與其他用戶互動(dòng)的過(guò)程中，用戶的自我形象便建立起來(lái)，實(shí)現(xiàn)了對(duì)App的價(jià)值和自我價(jià)值的認(rèn)知，使得此類App有著龐大的用戶基數(shù)。

總之，一款優(yōu)秀的App往往會(huì)具備良好的界面設(shè)計(jì)、流暢的交互體驗(yàn)、引發(fā)共鳴的情感內(nèi)涵等特點(diǎn)；但無(wú)論從哪方面講，這些特點(diǎn)都體現(xiàn)出情感化設(shè)計(jì)層層遞進(jìn)、相互作用的設(shè)計(jì)層次。本能層基于生理本能的作用，決定了用戶對(duì)App的最初印象，是一種基于視覺(jué)元素的一般情感的體現(xiàn)，此時(shí)用戶對(duì)App的心理是認(rèn)為可用的，便會(huì)進(jìn)入行為層；行為層基于本能層的作用，與產(chǎn)品的使用體驗(yàn)有關(guān)，用戶使用過(guò)程的情感取決于交互流程是否達(dá)到了預(yù)期，或是沮喪、迷惑，或是滿足、溫暖；而反思層來(lái)自于用戶與本能層、行為層的持續(xù)互動(dòng)，將一般的情感和體驗(yàn)上升到更高層次，例如自我滿足、認(rèn)同等情感，這時(shí)用戶與App便建立起了一種友好的關(guān)系。

在信息高度發(fā)達(dá)的當(dāng)代，情感化設(shè)計(jì)與App領(lǐng)域的結(jié)合將會(huì)越來(lái)越密切，從App本能層界面設(shè)計(jì)的可用性、行為層交互設(shè)計(jì)的易用性、反思層認(rèn)知設(shè)計(jì)的友好性入手，才能夠真正理解情感化設(shè)計(jì)對(duì)于提高App的用戶粘度、提升App品牌價(jià)值的重要性。在以用戶為中心的時(shí)代，基于情感化因素的需求也會(huì)越來(lái)越多，其存在于App設(shè)計(jì)的整個(gè)過(guò)程之中。設(shè)計(jì)者要做的就是不斷觀察，研究用戶心理，探究三種層次之間的相互作用，使之與用戶需求相匹配，向多元化、個(gè)性化方向發(fā)展，才能設(shè)計(jì)出滿足用戶需求的App產(chǎn)品。

注釋：

①極光大數(shù)據(jù).2017年度網(wǎng)絡(luò)購(gòu)物app研究報(bào)告[EB/OL].（2018-1-29）[2019-04-21].https://www.jiguang.cn/reports/218.

② 約翰·奈斯比特是世界著名的未來(lái)學(xué)家，主要代表著作《大趨勢(shì)》，與威廉·懷特的《組織的人》、阿爾文·托夫勒的《未來(lái)的沖擊》并稱“能夠準(zhǔn)確把握時(shí)代發(fā)展脈搏”的三大巨著。

③唐納德·諾曼（Donald Arthur Norman，1935.12.25—），美國(guó)認(rèn)知心理學(xué)家、計(jì)算機(jī)工程師、工業(yè)設(shè)計(jì)家。代表作有《設(shè)計(jì)心理學(xué)》《情感化設(shè)計(jì)》等。