人機(jī)交互與數(shù)據(jù)傳輸:關(guān)于數(shù)據(jù)加載的6種形式

3 評(píng)論 10918 瀏覽 120 收藏 10 分鐘

這是2017年的第9篇文章。

用戶、客戶端和服務(wù)器

作為用戶體驗(yàn)設(shè)計(jì)師,不管是產(chǎn)品、交互還是UI,都習(xí)慣于站在人機(jī)交互的角度去思考產(chǎn)品設(shè)計(jì)問題,在這個(gè)過程中我們往往會(huì)忽略了一個(gè)重要的過程:數(shù)據(jù)傳輸。先看下面這張圖。

用戶、客戶端、服務(wù)器

用戶與客戶端進(jìn)行人機(jī)交互,觸發(fā)某個(gè)操作,客戶端會(huì)將用戶觸發(fā)的操作轉(zhuǎn)化為相應(yīng)指令,向服務(wù)器請(qǐng)求數(shù)據(jù);若網(wǎng)絡(luò)和服務(wù)器正常,服務(wù)器會(huì)返回?cái)?shù)據(jù)到客戶端,用戶便能看到自己操作所引發(fā)的結(jié)果。整個(gè)過程是用戶、客戶端、服務(wù)器一起完成的,人與客戶端直接是人機(jī)交互研究的領(lǐng)域,而客戶端和服務(wù)器直接的數(shù)據(jù)傳輸更多的是開發(fā)人員所考慮的。

舉例來說,你去京東購物,點(diǎn)擊搜索欄,輸入完關(guān)鍵詞“風(fēng)衣”,點(diǎn)擊搜索(觸發(fā)了操作),京東APP會(huì)將該操作發(fā)送給服務(wù)器,服務(wù)器將所有有關(guān)風(fēng)衣的信息傳給京東APP,并通過列表的形式呈現(xiàn)。

既然數(shù)據(jù)傳輸是開發(fā)人員考慮的問題,為什么身為設(shè)計(jì)師還要去思考這個(gè)問題?這是因?yàn)閿?shù)據(jù)傳輸?shù)那闆r會(huì)影響到人機(jī)交互。例如,如果數(shù)據(jù)傳輸遇到網(wǎng)絡(luò)不穩(wěn)定或者服務(wù)器異常,就要在人機(jī)界面體現(xiàn)出來,不然用戶會(huì)不知所措,產(chǎn)生焦慮,影響用戶體驗(yàn),這就是UED要考慮網(wǎng)絡(luò)和服務(wù)器異常時(shí)的交互設(shè)計(jì)的原因。再比如,一個(gè)頁面包含很多信息,即使網(wǎng)絡(luò)穩(wěn)定,也要加載不少時(shí)間,那怎樣通過交互設(shè)計(jì)來緩解用戶的焦慮。

數(shù)據(jù)加載的幾種形式及對(duì)應(yīng)的交互設(shè)計(jì)

1.全屏加載

多出現(xiàn)在H5頁面,例如微信的文章詳情頁。全屏加載的特點(diǎn)是數(shù)據(jù)一次性加載完成,內(nèi)容加載完成之前界面都會(huì)停留在loading界面。進(jìn)度條和有趣的動(dòng)畫設(shè)計(jì),都會(huì)減輕用戶等待時(shí)的焦慮感。

美團(tuán)&微信

加載失敗后,數(shù)據(jù)為空,即缺省頁面。這里要注意兩點(diǎn),1.在符合產(chǎn)品調(diào)性的前提下,可以做的有趣,如下圖左側(cè)的美團(tuán),右側(cè)微信設(shè)計(jì)的很簡約,但是不是可以更精致些?2.方便用戶進(jìn)行重新加載。

美團(tuán)&微信

2.分步加載

當(dāng)有文字和圖片時(shí),圖片會(huì)比文字加載的慢,這個(gè)時(shí)候往往文字先加載出來,圖片在加載過程中使用占位符,直到圖片加載成功。當(dāng)加載的頁面內(nèi)容有固定的框架時(shí),可以先加載框架,再加載框架內(nèi)的內(nèi)容。

通過先加載頁面框架,設(shè)計(jì)占位符等形式可以減少用戶的心理等待時(shí)長,提高產(chǎn)品體驗(yàn)。

簡書&微信讀書

3.下拉刷新加載

Twitter當(dāng)年提出下拉刷新,并被廣泛使用,讓用戶能夠手動(dòng)對(duì)當(dāng)前頁面進(jìn)行更新,加載的loading樣式可以做進(jìn)一步設(shè)計(jì),例如QQ將loading動(dòng)畫和下拉手勢結(jié)合起來,增加了趣味性;豆瓣把loading做成了笑臉,給予了產(chǎn)品人性化的設(shè)計(jì)。

豆瓣&QQ

4.自動(dòng)加載

當(dāng)你瀏覽信息時(shí),不停的向上滑動(dòng),新的內(nèi)容會(huì)不停的從底部出現(xiàn),這種方式稱為自動(dòng)加載。關(guān)于自動(dòng)加載,要注意每次加載多少條內(nèi)容,或者多少屏的內(nèi)容,我無聊的數(shù)了數(shù)今日頭條每次會(huì)自動(dòng)加載60條新聞。

知乎&same

5.預(yù)加載

在線瀏覽照片時(shí),客戶端會(huì)自動(dòng)幫你加載后幾張的照片,這樣當(dāng)你滑到下一張就不用再等待,直接能看到下一張照片。如果你發(fā)現(xiàn)自己公司的產(chǎn)品每次瀏覽信息都要加載一次,不妨跟開發(fā)人員溝通,是不是可以考慮使用預(yù)加載的方式。畢竟這對(duì)于提升產(chǎn)品的用戶體驗(yàn)?zāi)芷鸬搅⒏鸵娪暗男Ч?/p>

6.智能加載

當(dāng)網(wǎng)絡(luò)狀態(tài)不好時(shí),可以考慮加載低質(zhì)量的圖片,當(dāng)網(wǎng)絡(luò)良好時(shí),則加載高質(zhì)量的圖片。同理,當(dāng)檢測到用戶正在使用蜂窩數(shù)據(jù)時(shí),則顯示占位符而不顯示圖片,當(dāng)使用WiFi時(shí)則直接加載出圖片。這些設(shè)計(jì)方案都是站在用戶的角度,真正的替用戶著想,為用戶帶來價(jià)值,用戶才會(huì)真正喜歡上你的產(chǎn)品。

知乎:蜂窩&WiFi狀態(tài)

如何降低用戶的焦慮感?

由于存在網(wǎng)速不快,網(wǎng)絡(luò)異常,服務(wù)器異常等情況,讓用戶等待的情況是必不可少的。但是我們都知道,等待會(huì)產(chǎn)生焦慮感,分分鐘讓用戶卸載你的產(chǎn)品,那么我們可以通過哪些手段來降低或緩解用戶的焦慮感?

第一:優(yōu)化App的加載算法,使得App與服務(wù)器數(shù)據(jù)傳輸?shù)臅r(shí)間減短。這個(gè)需要開發(fā)人員的精益求精了。這個(gè)是從根本上解決了問題,因?yàn)橹苯訙p少了加載數(shù)據(jù)的時(shí)間,也就減少了用戶需要等待的時(shí)間。

第二:采用預(yù)加載和智能加載的方式。拿閱讀App打比方,當(dāng)用戶在看第一頁的時(shí)候,App在后臺(tái)加載完后面的幾頁,等用戶翻到第二頁的時(shí)候就不需要等待加載了,因?yàn)锳pp已經(jīng)幫用戶提前加載好了。這種加載機(jī)制對(duì)用戶體驗(yàn)特別好,但是存在一個(gè)問題,就是要預(yù)測用戶行為,加載其他數(shù)據(jù),這樣會(huì)消耗不少流量,所以建議在WiFi網(wǎng)絡(luò)環(huán)境下采取這種預(yù)加載機(jī)制,而在蜂窩網(wǎng)絡(luò)狀態(tài)下則不采用預(yù)加載機(jī)制。這個(gè)要和開發(fā)人員討論溝通,確保預(yù)加載機(jī)制完美運(yùn)行。

第三:異步處理。這一點(diǎn)做得好的App莫過于Instagram,不知道你有沒有發(fā)現(xiàn),用Instagram的時(shí)候會(huì)覺得特別流暢,即使在網(wǎng)絡(luò)不好的情況下。這是為什么?因?yàn)樵诰W(wǎng)絡(luò)不好的情況下,你給好友點(diǎn)了贊,Instagram并不會(huì)提示你網(wǎng)絡(luò)不好,操作失敗,而是提示你點(diǎn)贊成功了,其實(shí)它只是將你點(diǎn)贊的操作記錄了下來,等網(wǎng)絡(luò)一好就將點(diǎn)贊的行為上傳到服務(wù)器,從而完成點(diǎn)贊行為。這就是讓產(chǎn)品自己去解決問題,而不是把問題拋給用戶。

第四:設(shè)計(jì)有趣的loading動(dòng)畫,如上文介紹的美團(tuán)APP奔跑的小人,這是提升產(chǎn)品情感的重要手段。

回到文章的開頭,作為產(chǎn)品設(shè)計(jì)人員,不應(yīng)該把視野局限在人與客戶端交互,也要把客戶端和服務(wù)端之間的數(shù)據(jù)傳輸考慮進(jìn)來,站在用戶、客戶端和服務(wù)器閉環(huán)的角度去思考產(chǎn)品,只有這樣,才能設(shè)計(jì)出體驗(yàn)更好的數(shù)據(jù)加載方案,而不會(huì)有失偏頗。

#專欄作家#

鄒志楠,微信公眾號(hào):UE修養(yǎng),人人都是產(chǎn)品經(jīng)理專欄作家。交互設(shè)計(jì)師,專注于互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 您好,很喜歡您的文章,這篇文章我們公眾號(hào)能轉(zhuǎn)載嗎?如果可以請(qǐng)幫忙授權(quán):cdoalliance 非常感謝

    回復(fù)
  2. 來自北京 回復(fù)
  3. 整理的還可以

    來自廣東 回復(fù)