loading數據加載的6種形式


數據加載的幾種形式及對應的交互設計

1.全屏加載

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

美團&微信

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

美團&微信

2.分步加載

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

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

簡書&微信讀書

3.下拉刷新加載

Twitter當年提出下拉刷新,並被廣泛使用,讓用戶能夠手動對當前頁面進行更新,加載的loading樣式可以做進一步設計,例如QQ將loading動畫和下拉手勢結合起來,增加了趣味性;豆瓣把loading做成了笑臉,給予了產品人性化的設計。

豆瓣&QQ

4.自動加載

當你瀏覽信息時,不停的向上滑動,新的內容會不停的從底部出現,這種方式稱為自動加載。關於自動加載,要注意每次加載多少條內容,或者多少屏的內容,我無聊的數了數今日頭條每次會自動加載60條新聞。

知乎&same

5.預加載

在線瀏覽照片時,客戶端會自動幫你加載后幾張的照片,這樣當你滑到下一張就不用再等待,直接能看到下一張照片。如果你發現自己公司的產品每次瀏覽信息都要加載一次,不妨跟開發人員溝通,是不是可以考慮使用預加載的方式。畢竟這對於提升產品的用戶體驗能起到立竿見影的效果。

6.智能加載

當網絡狀態不好時,可以考慮加載低質量的圖片,當網絡良好時,則加載高質量的圖片。同理,當檢測到用戶正在使用蜂窩數據時,則顯示占位符而不顯示圖片,當使用WiFi時則直接加載出圖片。這些設計方案都是站在用戶的角度,真正的替用戶着想,為用戶帶來價值,用戶才會真正喜歡上你的產品。

知乎:蜂窩&WiFi狀態

如何降低用戶的焦慮感?

由於存在網速不快,網絡異常,服務器異常等情況,讓用戶等待的情況是必不可少的。但是我們都知道,等待會產生焦慮感,分分鍾讓用戶卸載你的產品,那么我們可以通過哪些手段來降低或緩解用戶的焦慮感?

第一:優化App的加載算法,使得App與服務器數據傳輸的時間減短。這個需要開發人員的精益求精了。這個是從根本上解決了問題,因為直接減少了加載數據的時間,也就減少了用戶需要等待的時間。

第二:采用預加載和智能加載的方式。拿閱讀App打比方,當用戶在看第一頁的時候,App在后台加載完后面的幾頁,等用戶翻到第二頁的時候就不需要等待加載了,因為App已經幫用戶提前加載好了。這種加載機制對用戶體驗特別好,但是存在一個問題,就是要預測用戶行為,加載其他數據,這樣會消耗不少流量,所以建議在WiFi網絡環境下采取這種預加載機制,而在蜂窩網絡狀態下則不采用預加載機制。這個要和開發人員討論溝通,確保預加載機制完美運行。

第三:異步處理。這一點做得好的App莫過於Instagram,不知道你有沒有發現,用Instagram的時候會覺得特別流暢,即使在網絡不好的情況下。這是為什么?因為在網絡不好的情況下,你給好友點了贊,Instagram並不會提示你網絡不好,操作失敗,而是提示你點贊成功了,其實它只是將你點贊的操作記錄了下來,等網絡一好就將點贊的行為上傳到服務器,從而完成點贊行為。這就是讓產品自己去解決問題,而不是把問題拋給用戶。

第四:設計有趣的loading動畫,如上文介紹的美團APP奔跑的小人,這是提升產品情感的重要手段。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM