用戶體驗優化：帶你深度剖析App的加載機制！

用戶體驗優化：帶你深度剖析App的加載機制

        什么是加載

　　用戶在客戶端發出一個請求后，服務器進行響應并反饋數據，客戶端拿到數據進行計算和渲染，這個過程叫做加載。

　　如果沒有加載，計算機就無法實現用戶的請求。

　　加載的時間具有不確定性，可能是瞬間的，也可能超過3秒，甚至可能因為網絡不穩定、服務器異常等情況，無法獲得響應。

　　在互聯網產品中，為了更友好的用戶體驗，也為了緩解用戶等待的焦慮感，可以把這段時間內計算機完成的一系列執行動作的過程進行可視化和情感化設計。

　　當然，這并不是說要細致地描述客戶端是怎樣向服務器發出請求并得到響應，根據尼爾森十大可用性原則之可視性原則進行設計即可。

　　即系統狀態有反饋，等待時間要合適。讓用戶知道我們有在積極處理他們的請求，并告知他們大概需要等待多長的時間。

　　移動端的加載模式

　　雖然加載都是指用戶與客戶端發生人機交互以后，請求數據與返回數據的過程。但不同的場景下，需要考慮不同的加載處理方式。

　　總的來說，我們有兩種加載模式：

　　同步加載指客戶端請求執行某一任務，在該請求返回數據之前，客戶端無法進行其他操作，直至該請求返回數據。

　　這種加載過程是不可逆單向通行的線性流程，一旦用戶觸發了事件，這種加載就會獨占客戶端，用戶在其加載過程中只能選擇等待。

　　所以除非是不完整加載出來就會導致嚴重錯誤，否則盡量不使用這種加載模式。

　　說那么多，同步加載究竟長啥樣呢？

　　大概長這個樣子：

　　一般是用在客戶端的登錄、注冊、掃碼支付、提交訂單、上傳資料、修改資料等情況，這些操作都是順序繼承的，即下一步的操作必須是上一步操作成功的基礎上。

　　異步加載指客戶端請求執行某一任務，在該請求返回數據之前，可以執行其他操作。

　　一般用在不涉及重要資料和順序操作的數據加載，如大量圖片、視頻的頁面，長列表數據的列表頁，內容的詳情頁等。

　　讓我們聚焦到App內的加載場景

　　運用加載模式的兩種原理，可以延伸出多種加載策略，根據不同的場景需要選擇適合的加載策略。且加載模式和加載策略的選擇，不是簡單的一對一的關系，常常需要搭配使用。

　　App內加載場景有三種：啟動頁加載、當前頁加載、跳轉頁加載。

　　一、啟動頁加載

　　① 同步加載模式下：品牌頁

　　A. 打開App時，頁面展示品牌頁，加載完某些數據才能進入應用。如果未加載完，則一直顯示品牌頁。

　　B. 打開App時，頁面展示品牌頁，設定展示時間，過了展示時間后，進入應用頁面進行數據的加載。

　　這種做法便于企業進行品牌宣傳。品牌頁的設計應該符合品牌調性，識別度高且不輕易更換，起到宣傳企業文化的作用。

　　② 異步加載模式下：廣告頁/活動頁

　　打開App時，展示廣告頁/活動頁，當用戶點擊「跳過」時，進入應用頁面進行數據的加載。

　　這種做法可以幫助用戶更快的進入應用，雖然進入到應用也需要等待加載完成，但這種做法造成的錯覺可以有效緩解用戶的焦慮。

　　無網狀態下：

　　對于有緩存數據到本地的應用，無網的狀態下并不影響功能的使用。當用戶進入應用時，自動定位到無需加載數據的本地頁面。

　　如網易云音樂無網狀態下會定位的【我的】頁面，同時提示用戶當前網絡異常狀態 。

　　無論是有網還是無網狀態下，讓用戶能成功進入應用并看到應用界面的做法，都要比把用戶拒之門外的做法要更好。

　　給用戶一些提示，告訴用戶當前數據為什么加載不出來，告訴用戶要怎么做，都能讓這個產品更有溫度。

　　二、模態加載

　　屬于當前頁的同步加載模式：當用戶在當前頁觸發操作時，頁面進行數據加載并提示，數據加載成功后，呈現數據或出現下一步操作。

　　適用于需要判斷及驗證處理的情況，或是下一步的操作建立在當前操作結果上的情況。如登錄、注冊、支付、轉賬、表單提交等。

　　無網狀態下：停留在當前頁面,spinner 消失 。

　　三、整屏加載

　　一次性加載完所有的數據，再展示給用戶，它保證了內容的完整性。分為H5頁面加載、原生頁面加載。

　　① H5加載：

　　A. 跳轉頁的同步加載模式：觸發后就進行跳轉，這種做法會有特別強烈的等待感，未加載出來之前，頁面是空白的，超過3秒以上還未加載出來，用戶會產生焦躁情緒。

　　一般會把進度條設計成先快后慢的形式，減緩用戶焦躁的情緒，但只是相對有效。

　　B. 跳轉頁的異步加載模式：用戶觸發后不影響當前頁面的瀏覽操作，加載完成后進行頁面的跳轉。

　　② 原生頁面加載：

　　屬于當前頁的同步加載模式，通常利用趣味性動畫減輕用戶等待焦慮感。

　　無網狀態下：停留在當前頁面，給用戶一個明確的超時判斷，告知用戶可能存在的原因和下一步行動點。

　　四、漸進加載

　　漸進加載分為四種：結構占位符加載、文字+圖片占位符加載、優先加載低清圖片、優先業務加載。

　　① 結構占位符加載，屬于同步加載模式：

　　類似于線框圖形式的色塊圖，將各個模塊的典型結構元素展示出來，通常不代表真實情況。這種方式能幫助用戶快速了解整個界面的信息布局 。

　　② 文字+圖片占位符加載，屬于異步加載模式：

　　先加載文字，再加載圖片，最后加載視頻的順序進行數據加載。

　　這種加載策略適用于圖文交織的頁面，能減短整體加載的時間，盡可能快地把內容呈現給用戶，以達到更好的用戶體驗。

　　如果圖片承載的內容信息比文字重要，在弱網狀態下，用戶對內容的了解就會受到阻礙。

　　③ 優先加載低清圖片，屬于異步加載模式：

　　先加載低清版圖片，再加載高清版圖片，圖片資源的分步加載可以讓頁面內容更快呈現給用戶。

　　④ 優先業務加載：

　　先加載對業務目標最有利的模塊，再加載其他模塊。

　　五、延遲加載,也叫懶加載

　　對視頻圖片進行「按需加載」，即用戶瀏覽到該區域，再加載內容，網速非常快時，用戶甚至不能感知懶加載的動作。

　　它屬于當前頁的異步加載模式，適用于以圖片為主，文字為輔的場景，視頻或圖片未加載出來時，不影響點贊等功能的操作。

　　如抖音(視頻流)，僅加載當前視窗內的圖片，這種加載方式速度快，省流量又不影響用戶瀏覽。

　　六、上拉加載，也叫分頁加載

　　一般適用于長列表、商品列表、咨詢列表或瀑布流。它展示數據列表的時候，默認展示20條，滾動到最后，自動再加載20條或者手動點擊/上拉觸發加載。

　　它屬于當前頁的異步加載模式，這種加載策略避免一次性加載大量數據，省流量，把用戶帶入無盡瀏覽模式。

　　七、預加載

　　就是提前加載。用戶在看A頁面時，客戶端就在準備用戶可能會看到的B頁面，用戶要看B頁面時，直接把B頁面給他，然后去加載C頁面。

　　它屬于異步加載模式，這種加載策略給用戶無縫銜接的感覺，但耗費的流量比較多。

　　一般用在不太消耗大量流量的場景，如信息，消息等。

　　八、標題欄加載

　　IM、郵箱類應用會使用緩存加載，把大量數據存在本地。

　　在無網或弱網的情況下，支持用戶瀏覽本地數據。

　　在正常網絡下，會在頂欄或底欄顯示加載提示符，以文字+Spinner形式進行加載，正常網絡下的這種加載策略叫做標題欄加載。它屬于當前頁的異步加載模式：

　　九、下拉加載

　　它屬于當前頁的異步加載模式，這種加載策略可以說是非常常見，它要求用戶必須在首屏進行操作，適用于界面信息會經常更新的場景，用戶刷新當前頁面，獲取新數據。

　　我們通常會對下拉樣式進行調整，讓它更具有趣味性，也能利用這個場景進行品牌文化的宣傳：

　　a.普通加載圖標+隨機文案（網易云課堂：百尺竿頭，更進一步）

　　b.品牌logo動效

　　c.IP形象動畫

　　d.品牌場景動畫

　　e.普通原生菊花轉（或者樣式較單一）

　　下拉加載有四個反饋緯度：

　　下拉、松開、刷新中、刷新后。設計的動效會在刷新中的狀態下進行播放，播放結束后，會給用戶反饋“XX條更新”/“XX條新動態” 。

　　十、緩存加載

　　這種加載策略是應用從本地數據庫獲取已緩存的數據，在無網或弱網的情況下，用戶還是可以查看一些內容。

　　一般用在新聞資訊、小說App內，對資訊列表和內容文本及框架進行緩存。

　　使用這種加載策略需要考慮容量限制和清理時間的問題，每個手機的儲存空間是有限的，如果不進行限制和清理，手機將不堪重負。

　　十一、智能加載

　　這個加載策略是基于用戶流量成本、網絡環境的考慮，選擇更優的方式去加載圖片、視頻等需要消耗大量流量的資源：

　　a.Wi-Fi環境下，優先加載高質量圖片、優質音樂和視頻

　　b.4g環境下，下載行為自動終止，優先加載普通圖片，甚至停止加載圖片或音樂

　　c.網絡不通暢時，默認加載低質量，甚至停止加載圖片或音樂

　　用戶體驗優化：帶你深度剖析App的加載機制這篇文章就介紹到這里了。