咨詢,就免費贈送小米移動電源,咨詢熱線:18030402705當前位置: 主頁 > 建站知識 > 建站指南 > 策劃方案 >
推薦內容
聯系我們
電話咨詢:18030402705
E-mail:[email protected]
地址:成都校園路99號(西南交大旁)

交互基礎:加載的10種類型和應用場景分析

作者/整理:07fly 來源:Mockplus 2019-02-16 Tag:


QQ截圖20181010140918.jpg

圖片來源圖蟲:已授站長之家使用

作者:白鷺漫談

本篇文章共分為 4 大部分,預計閱讀時間10- 15 分鐘


目錄:

一、為什么需要加載

二、常見的加載場景

三、加載的 10 種類型和分析

四、總結

一、為什么需要加載?

1 給用戶反饋

在上篇《尼爾森10大可用性原則》中我們說過,系統應該通過在合理時間內適當反饋,向用戶通知當前的狀態。

加載其實就是一種反饋

——讓用戶知道產品正在響應操作,同時通過一些加載的設計形式,吸引用戶注意力,減緩用戶等待的焦慮。

2 防止用戶跳失

0-0.3秒內的響應基本上是及時的;

0.3-1秒時用戶已經能夠察覺到延遲了。

當遇到頁面內信息內存過大或者網絡狀況不好時,加載時間通常會比較長,我們就需要針對不同的情況設計不同的加載方式。

否則,當加載時長超過3秒時(參考谷歌2017年《消費者行為文檔》),53%的用戶會選擇離開;加載超過5秒就會有74%的用戶離開(騰訊娛樂的《移動端行為報告·第一期》H5)。

二、加載常見的應用場景

移動端的加載常見場景有:

APP啟動、界面跳轉、上拉加載后續內容、下拉刷新、

瀏覽信息(文字、圖片、視頻)、下載內容、操作反饋(提交、付款)

……

當然這些只是通用的場景,不同類型的產品加載場景肯定會有差別的,在實際工作中,我們需要和開發、數據人員一起去梳理這些加載時間過長的頁面,排查原因(操作系統層面的問題?服務器的問題?),如果暫時無法解決的,或者不可控的網絡問題,就需要通過加載的設計來緩解用戶等待時的焦慮,降低用戶的跳失率。

三、加載的 10 種類型和分析

我們常見到的大部分的加載都是非模態加載

1 啟動加載

因為APP的啟動需要一個過程,所以會通過啟動頁來吸引用戶的注意力。

啟動加載的常見表現形式有品牌啟動頁、廣告頁(外部廣告or內部運營活動)。啟動頁大部分是靜態的,也可以是動態的,比如騰訊視頻就是動態的品牌啟動。

品牌頁和廣告頁啟動可以單獨存在,也可以同時存在,比如考拉,此時通常品牌頁在前,廣告頁在后,廣告頁需要有跳過按鈕。

2 占位圖加載

先加載頁面布局和占位圖,等到后臺數據加載完成后,再加載頁面的細節內容(文字、圖片)。占位圖通常以色塊形式呈現,圖片類占位通常為圖片icon或者產品logo。

這種方式適合頁面布局比較固定的頁面,此時需要注意的是,如果頁面布局進行了改版,就需要對占位圖進行對應的更新。

有次我們全線品牌升級之后,把APP圖標進行了更新,但是后來測試時發現,商品的占位圖仍然為舊版的logo……

優點:減少用戶心理等待時間,體驗比較流暢

應用:適合頁面布局比較固定的頁面,比如簡書、facebook

3 分步加載

此時會優先加載內存較小的元素,通常是先加載出文字、圖標等最后加載圖片、視頻。圖片視頻類資源也是逐步加載出來的。

優點:即時響應,用戶能夠先看到部分內容

應用:一般用于圖片/視頻類資源比較多的頁面

4 預加載

提前加載后續內容,當用戶需要查看時可直接從本地緩存中渲染。

瀏覽A頁面時,系統自動加載出B頁面,用戶無需等待,體驗比較好,但是服務器的負很大大。

比如頭條,在首頁瀏覽時,我們嘗試斷掉網,打開瀏覽過的任意一個新聞的詳情頁,可以看到它已經把這些新聞的文字內容都加載好了

優點:使用流暢、無需等待頁面跳轉

缺點:服務器負擔重

應用:適用于服務器配置高的產品;且下個頁面內容是確定的


本文零起飛網絡為您整理編輯,版權歸原作者所有,轉載請注明原文來源出處。
本文章鏈接:http://www.rsbtur.live/Guide/plan/9307.html
07FLY專業做網站,網站建設,網站優化,主機托管,網站推廣一條龍服務,讓您省心到底

彩票骗局大揭密