這是2017年的第9篇文章。

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

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

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

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

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

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

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

1.全屏加載

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

美團&微信

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

美團&微信

2.分步加載

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

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

簡書&微信讀書

3.下拉刷新加載

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

豆瓣&QQ

4.自動加載

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

知乎&same

5.預(yù)加載

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

6.智能加載

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

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

如何降低用戶的焦慮感？

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

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

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

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

第四：設(shè)計有趣的loading動畫，如上文介紹的美團APP奔跑的小人，這是提升產(chǎn)品情感的重要手段。

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

#專欄作家#

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

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