頁(yè)面刷新加載中的情感化設(shè)計(jì)

產(chǎn)品設(shè)計(jì)應(yīng)以以樂(lè)趣和愉悅為目的，而不僅僅是產(chǎn)品性能的提高。

這是諾曼在《設(shè)計(jì)心理學(xué)3：情感化設(shè)計(jì)》提出的，在《設(shè)計(jì)心理學(xué)1：日常的設(shè)計(jì)》當(dāng)中諾曼一直都是提到產(chǎn)品需要有用，而不需要花里胡哨;而這個(gè)言論也被人用“如果我們按照諾曼的說(shuō)法去設(shè)計(jì)，那么我們做出來(lái)的東西都是有用，可是并沒(méi)有用戶(hù)來(lái)購(gòu)買(mǎi)”給懟了回去，所以在《設(shè)計(jì)心理學(xué)3：情感化設(shè)計(jì)》中諾曼提出了經(jīng)過(guò)三個(gè)設(shè)計(jì)層次的情感化設(shè)計(jì)。

如今，產(chǎn)品實(shí)用只是基礎(chǔ)要求，用戶(hù)早已從追求性?xún)r(jià)比改為追求高品質(zhì)了，iphone的銷(xiāo)量便能說(shuō)明這個(gè)事實(shí)，用戶(hù)需要在使用產(chǎn)品時(shí)需要從中體驗(yàn)到樂(lè)趣和愉悅。

而當(dāng)用戶(hù)在使用app時(shí)，網(wǎng)絡(luò)不好時(shí)頁(yè)面的加載刷新或許是用戶(hù)最為煩躁的一個(gè)時(shí)間了，從前的八秒原則在我們這個(gè)用戶(hù)最難滿(mǎn)足的國(guó)家或許都已經(jīng)變成五秒原則了，所以頁(yè)面加載時(shí)頁(yè)面所呈現(xiàn)的內(nèi)容就變得重要起來(lái)。

先講個(gè)女朋友用去哪兒買(mǎi)票的故事

有那么一天，女朋友想要回家了，所以呢，就需要買(mǎi)火車(chē)票。按道理按以下流程就可以了

可問(wèn)題是那一天網(wǎng)絡(luò)偏偏抽風(fēng)了，在輸入地點(diǎn)查詢(xún)后一直停在加載頁(yè)面，就看到那只藍(lán)色駱駝一直在哪里走啊走啊，就當(dāng)我以為女朋友要煩躁的時(shí)候。

她來(lái)了句：你看，這只駱駝走路好萌啊，我都不好意思生氣了。

聽(tīng)完這句話(huà)的時(shí)候我才意識(shí)到這只駱駝的作用。也正是因?yàn)檫@個(gè)對(duì)頁(yè)面加載刷新感興趣起來(lái)。

當(dāng)時(shí)的加載頁(yè)面就是下面這個(gè)樣子

由于我不知道怎么用手機(jī)截GIF圖所以這只駱駝不會(huì)動(dòng)，但是情形便是這只駱駝一直在走，顯得很累的樣子，這只駱駝體現(xiàn)了用戶(hù)的心理：“我知道你很著急，但是我也很努力的在刷新”。

正是這件事情讓我明白加載刷新頁(yè)面的情感化設(shè)計(jì)有多重要。假設(shè)頁(yè)面是空白一片或者是轉(zhuǎn)菊花的情形或者這只駱駝是一臉高興愉悅的樣子，估計(jì)用戶(hù)心情早煩躁轉(zhuǎn)用其他app了。

所以頁(yè)面刷新加載不僅僅可以轉(zhuǎn)菊花loading。

那么來(lái)舉些頁(yè)面加載的栗子吧

1.bilibili

下拉：再拉，再拉就刷新給你看

松手：夠了啦，松開(kāi)人家嘛(下拉至一定位置后出現(xiàn))

bilibili作為視頻網(wǎng)站的新貴，在頁(yè)面刷新情感化設(shè)計(jì)上有著獨(dú)到之處，下拉過(guò)程會(huì)出現(xiàn)app自身的logo以及兩位萌萌噠的小姐姐，松開(kāi)后釋放過(guò)程中圖案會(huì)有互動(dòng)。

除此以外，在獲取視頻內(nèi)容失敗時(shí)

可以看到有個(gè)小姐姐很悲傷，而這和用戶(hù)的情感是相符合的。

2.騰訊體育

標(biāo)志性的運(yùn)動(dòng)項(xiàng)目，籃球運(yùn)動(dòng)中表示正在刷新，進(jìn)球表示刷新成功。

騰訊體育的刷新動(dòng)畫(huà)符合app的產(chǎn)品定位，并且增加了極大的趣味性，為此玩了三十多次來(lái)觀(guān)察細(xì)節(jié)。

3.美團(tuán)

地址定位失敗時(shí)

葉子落地，人物失落，以此來(lái)表達(dá)失落感。

頁(yè)面刷新時(shí)

下拉出現(xiàn)自身的吉祥物。

4.京東閱讀

京東閱讀在發(fā)現(xiàn)table頁(yè)與今日頭條一樣都使用了書(shū)寫(xiě)方式表示刷新過(guò)程，但是在原創(chuàng)這個(gè)table頁(yè)確是一片空白，個(gè)人認(rèn)為應(yīng)將書(shū)寫(xiě)方式的icon也加載原創(chuàng)table頁(yè)，位于頁(yè)面正中間來(lái)表示刷新過(guò)程。

5.開(kāi)PA

我很喜歡的一個(gè)app，我應(yīng)該還會(huì)再寫(xiě)一篇關(guān)于這個(gè)app的產(chǎn)品分析。

在你即將要與加入視頻時(shí)會(huì)提醒你要微笑。

當(dāng)你與陌生人即將視頻時(shí)，請(qǐng)保持微笑，用圖片和文字去營(yíng)造一個(gè)氛圍，一個(gè)使用戶(hù)微笑的氛圍。

6.加載占位圖控件

上圖所示的便是加載占位圖控件，這個(gè)概念在《web表單設(shè)計(jì)》中首次提出，這個(gè)控件是為了使得加載更加流暢，同時(shí)還可以降低用戶(hù)的煩躁感。

情感化設(shè)計(jì)是用色彩圖案文字來(lái)為用戶(hù)營(yíng)造一個(gè)氛圍，使用戶(hù)可以從中體驗(yàn)到愉快，而頁(yè)面加載設(shè)計(jì)中的情感化設(shè)計(jì)屬于小細(xì)節(jié)，高中時(shí)期，我的班主任一直對(duì)我們說(shuō)這態(tài)度決定一切，細(xì)節(jié)決定成敗。或許頁(yè)面加載這個(gè)小細(xì)節(jié)不足以決定成敗，但是也足以達(dá)到取悅用戶(hù)的功能。從而降低用戶(hù)煩躁感，留下用戶(hù)。

說(shuō)起細(xì)節(jié)，當(dāng)今最火的美劇權(quán)利的游戲的片頭曲中也有大量細(xì)節(jié)其中。最為明顯的就是絕境長(zhǎng)城的海水開(kāi)始凍結(jié)用來(lái)表示凜冬將至。

S101

S704

即使不將劇集寫(xiě)出來(lái)，通過(guò)圖片也能很快猜出來(lái)哪一集是更新的，因?yàn)榻^境長(zhǎng)城的海水表示的很明顯，所以不得不承認(rèn)權(quán)游片頭曲的優(yōu)秀，細(xì)節(jié)方面做的實(shí)在是好。至于我為什么要提這個(gè)栗子，是因?yàn)殚_(kāi)頭曲就像加載頁(yè)面，所以權(quán)游在加載頁(yè)真的不愧是第一美劇。

交互設(shè)計(jì)師應(yīng)該如何提醒視覺(jué)設(shè)計(jì)師頁(yè)面加載的設(shè)計(jì)?

在頁(yè)面加載頁(yè)的時(shí)候交互設(shè)計(jì)師需要標(biāo)記出來(lái)，使用文字說(shuō)明，這樣可以給視覺(jué)設(shè)計(jì)師一個(gè)提醒，視覺(jué)設(shè)計(jì)師便會(huì)按照提示來(lái)設(shè)計(jì)加載頁(yè)面，如下圖

這就是當(dāng)用戶(hù)還未關(guān)注過(guò)別人的時(shí)候，需要一張插畫(huà)來(lái)表達(dá)用戶(hù)的寂寞，然后促使用戶(hù)前去關(guān)注別人，而文字方面(你還沒(méi)關(guān)注別人，快去關(guān)注別人吧)也可以與文案編輯相結(jié)合，bilibili的下拉刷新就很好的契合自身定位，又萌又有二次元。

看完這篇文章后你以后應(yīng)該不會(huì)只想到轉(zhuǎn)菊花這個(gè)加載方式了吧~

Tips

諾曼的設(shè)計(jì)心理學(xué)很值得一看，我的學(xué)長(zhǎng)就曾告訴我他精讀過(guò)三遍，是必讀的一套書(shū)。

文章講的那些動(dòng)畫(huà)可以自己嘗試看看，很好玩的，如果有讀者會(huì)手機(jī)截這種gif或者錄頻也可以告知以下，感激不盡

做一個(gè)難滿(mǎn)足的用戶(hù)，這樣你可以發(fā)現(xiàn)很多可以改造設(shè)計(jì)的地方;做一個(gè)難滿(mǎn)足的設(shè)計(jì)師，這樣你才可以滿(mǎn)足那些難滿(mǎn)足的用戶(hù);做一個(gè)注重細(xì)節(jié)的設(shè)計(jì)師，這樣你才可以留住那些難滿(mǎn)足的用戶(hù)。

本文標(biāo)題：頁(yè)面刷新加載中的情感化設(shè)計(jì)
網(wǎng)址分享：http://www.muchs.cn/news8/168758.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、云服務(wù)器、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)