loading加載設計

加載的做用在於緩解用戶的等待焦慮，同時及時的向用戶反饋當前的系統狀態，以提高產品的用戶體驗。

什麼是加載？爲何須要加載？

加載如同反饋，在人機交互中，用戶與界面的每一次互動都是一次加載過程。因操做致使的頁面跳轉、刷新或彈窗等從而使頁面元素或信息發生變化行爲，頁面都須要向服務器發送請求信息，服務器接收到後在發送反饋信息，而因爲網絡及頁面自身處理信息的緣由致使這個信息對換的過程可能發生延長從而須要一個「反饋」即加載來緩和用戶的等待。加載有快有慢，快得可讓你根本沒意識到這種「反饋」，同時慢得也會讓你感到崩潰。

所以咱們須要一種設計來緩解用戶等待時間內的焦慮感，同時即時反饋頁面狀態——那就是加載。

人們常說好的交互設計就是解決用戶時間問題的，其中最重要的就是 「別讓我等」「別讓我想」

常見的加載場景：

• 應用啓動
• 登陸註冊
• 上傳，下載
• 加載大量圖片文字的狀況，圖片列表等
• 下拉刷新
• 上拉加載數據
• 點贊
• 進入新頁面
• 手機付款

常見的加載策略及其設計意義

一、啓動頁加載

說到啓動頁，你們確定首先想到的是廣告位、節日營銷或增強品牌意識。能夠點擊，而且通常均可以選擇跳過。實現方式能夠爲靜態頁，也能夠是動態圖。 其實否則，啓動app須要一個短暫的過程，啓動頁的做用是天然地過渡這個過程。除了上述的3中作法，啓動頁還有一種作法就是，作出和首頁同樣，給人感受進入首頁特別快。

二、界面跳轉加載

可分爲兩種方式，當前頁加載和進入下頁加載。

• 當前頁加載：點擊按鈕後，在當前頁提示正在加載並處理，成功後進入下一頁。適用於須要判斷及驗證處理的頁面中。例如表單信息判斷和登陸驗證等。
• 進入下頁加載：點擊按鈕，跳轉至下一頁面並加載內容。絕大部分app採用這種加載方式，極大的加強了流暢的感受。

  

三、白屏加載

多出如今H5頁面中，特色是一次性加載完全部數據，界面單一。若加載失敗，頁面爲空。

四、分佈加載/懶加載/預加載

界面中各種元素多種多樣，根據不一樣需求有不一樣加載方式，主要分如下三種：

• 分步加載：優先加載佔網絡資源較小的元素。如先文字和默認圖標後圖片，圖片加載完成前使用佔位符顯示；當加載的頁面內容有固定的框架時，能夠先加載框架，再加載框架內的內容。此方式可以及時展現相應內容，減小用戶心理等待時間。
• 懶加載：圖片一直是網絡資源佔用大戶，對於一個前端有幾百張圖片的網站來講，若是首屏即加載全部圖片（不管這些圖片有沒有被用戶看到），那無疑是既浪費網絡資源，又傷害用戶體驗的事。目前，淘寶網、知乎等大流量網站都已經使用了圖片滾動懶加載的方案——僅當圖片滾入視窗，被用戶看到的時候，纔會去真正加載。
• 預加載：就是提早加載。如在啓動頁時預加載首頁；一般應用在信息流中。好比搜索結果頁，也就是咱們常常看到的列表視圖。當咱們「將要滑到」頁面底部時，頁面自動請求數據，爲你加載出下一頁。因此通常你在瀏覽下圖這種列表時，感受很是流暢。由於頁面進行了預加載。

  

五、智能加載

考慮網絡流量問題，智能加載不只須要考慮加載的速度，還須要考慮用戶流量成本。所以一般應用於WIFI和4G網絡切換條件下，另外還需產品斷定網絡是否通暢。 在WIFI條件下：優先加載高質量圖片、優質音樂和視頻； 在4G條件下：下載行爲自動終止，優先加載普通甚至中止加載圖片或音樂視頻； 在網絡不通暢下：默認加載低質量甚至中止加載圖片或音樂視頻；

六、緩存加載

針對無網絡的狀況下，讓用戶仍能查看以前已緩存在本地的信息，使頁面不至於空白，這不只可以有效減小用戶流量成本，同時增長了訪問速度。

加載樣式

• 狀態欄加載：通常系統默認配置加載樣式。
• 導航欄加載：將導航欄標題臨時變成加載信息文字提示。
• 界面中加載：下拉刷新、懶加載和吐司加載。

  

加載設計的原則

• 讓加載時間變得更有價值——減小等待時間。 （上述提到的加載策略都有案例分析，再也不作描述。）
• 讓加載變得更加有趣——忘記等待。
  讓加載有趣，情感化加載，即將情感化的設計元素融入到界面中，不只增長了產品生趣，還緩解用戶等待的焦慮感。情感化的加載不只可以適當下降用戶的焦慮感，同時可以突顯品牌或其餘信息。

  

• 保證用戶對加載的可控性——及時退出加載。
  因爲網絡或系統的緣由，加載有時會時間過長，用戶並無足夠的耐心停留在當前頁等待你慢慢加載。此時用戶有選擇退出加載的權利，同時也能夠設置默認時間內加載沒法進行提示用戶從新加載。

  

少等待感的具體手法

1. 用非模態的加載方式

儘可能使用非模態的加載方式，就是加載的過程是不打算用戶，不須要等待加載完就能夠作別的事情的，以下示意：

用非模態的加載方式，用戶能夠利用作別的事情，打發等待的時間，而不用傻傻等待數據加載完成，大大下降了等待的焦躁感。即使是模態的加載，也要給一個取消的選項，放在不耐煩的狀況下還無法取消。

2. 情趣化的加載動畫

加載的過程如此的枯燥乏味，爲何咱們不能作點什麼讓用戶以爲好受一點呢?有創意的設計師們設計了各類呆萌可愛的加載動畫。 這些加載動畫讓等待的過程變成了一種享受，用戶能感覺到設計師的情懷，體會新鮮有趣的等待過程。提高了產品情趣化的設計語言，讓等待的焦躁感一掃而空。

3. 漫長加載告知進度

若是是時間較長的加載過程，最好能清晰的告知過程進度，這時候就須要採用有進度的加載設計了。

瀏覽器的進度條是一種較爲常見的進度告知設計，經過這個進度告知，讓用戶有了更加明確的知情權，也能更好的預期到加載完成的時間
但即使是小小的進度條，也有不少的設計技巧在裏面。一個很是經典的體驗設問，一樣是3s的加載時間，勻速的進度條、先慢後快的進度條、先快後慢的進度條，哪一個讓用戶感受上最快?通過科學的實驗證明，先慢後快的進度條是讓用戶心理感覺上最快的設計。這是由於用戶最容易記住最後一瞬間的感受，若是最後一瞬間，感知到了快，就以爲順暢了。

4. 儘可能提早加載

儘量的利用預加載或有WiFi的狀況下離線緩存的方式，把內容提早加載下來，這樣能作到最大限度的下降加載給用戶帶來的卡頓感。若是能判斷出來用戶下一步要作的事情，提早幫用戶加載相應的內容，確定是最符合需求場景的事情。當我開始讀第一頁的時候，第二頁第三頁就開始陸續緩存下來了