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奔跑的小人，這是提高產品情感的重要手段。

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