關于加載設計,你要知道的8種策略和4種樣式
加載的作用在于緩解用戶的等待焦慮,同時及時的向用戶反饋當前的系統狀態,以提升產品的用戶體驗。
什么是加載?為什么需要加載?
加載如同反饋,在人機交互中,用戶與界面的每一次互動都是一次加載過程。因操作導致的頁面跳轉、刷新或彈窗等從而使頁面元素或信息發生變化行為,頁面都需要向服務器發送請求信息,服務器接收到后在發送反饋信息,而由于網絡及頁面自身處理信息的原因導致這個信息對換的過程可能發生延長從而需要一個“反饋”即加載來緩和用戶的等待。加載有快有慢,快得可以讓你根本沒意識到這種“反饋”,同時慢得也會讓你感到崩潰。
因此我們需要一種設計來緩解用戶等待時間內的焦慮感,同時即時反饋頁面狀態——那就是加載。
8種常見的加載策略,及其設計意義
啟動頁加載
說到啟動頁,大家肯定首先想到的是廣告位、節日營銷或加強品牌意識。可以點擊,并且一般都可以選擇跳過。實現方式可以為靜態頁,也可以是動態圖。
其實不然,啟動app需要一個短暫的過程,啟動頁的作用是自然地過渡這個過程。除了上述的3中做法,啟動頁還有一種做法就是,做出和首頁一樣,給人感覺進入首頁特別快。
界面跳轉加載
可分為兩種方式,當前頁加載和進入下頁加載。
1.當前頁加載:點擊按鈕后,在當前頁提示正在加載并處理,成功后進入下一頁。適用于需要判斷及驗證處理的頁面中。例如表單信息判斷和登錄驗證等。
2.進入下頁加載:點擊按鈕,跳轉至下一頁面并加載內容。絕大部分app采用這種加載方式,極大的增強了流暢的感覺。
白屏加載
多出現在H5頁面中,特點是一次性加載完所有數據,界面單一。若加載失敗,頁面為空。
分布加載/懶加載/預加載
界面中各類元素多種多樣,根據不同需求有不同加載方式,主要分以下三種:
1.分步加載:優先加載占網絡資源較小的元素。如先文字和默認圖標后圖片,圖片加載完成前使用占位符顯示;當加載的頁面內容有固定的框架時,可以先加載框架,再加載框架內的內容。此方式能夠及時展示相應內容,減少用戶心理等待時間。
2.懶加載:圖片一直是網絡資源占用大戶,對于一個前端有幾百張圖片的網站來說,如果首屏即加載所有圖片(無論這些圖片有沒有被用戶看到),那無疑是既浪費網絡資源,又傷害用戶體驗的事。目前,淘寶網、知乎等大流量網站都已經使用了圖片滾動懶加載的方案——僅當圖片滾入視窗,被用戶看到的時候,才會去真正加載。
3.預加載:就是提前加載。如在啟動頁時預加載首頁;通常應用在信息流中。比如搜索結果頁,也就是我們經??吹降牧斜硪晥D。當我們“將要滑到”頁面底部時,頁面自動請求數據,為你加載出下一頁。所以一般你在瀏覽下圖這種列表時,感覺非常流暢。因為頁面進行了預加載。
智能加載
考慮網絡流量問題,智能加載不僅需要考慮加載的速度,還需要考慮用戶流量成本。因此通常應用于WIFI和4G網絡切換條件下,另外還需產品判定網絡是否通暢。
- 在WIFI條件下:優先加載高質量圖片、優質音樂和視頻;
- 在4G條件下:下載行為自動終止,優先加載普通甚至停止加載圖片或音樂視頻;
- 在網絡不通暢下:默認加載低質量甚至停止加載圖片或音樂視頻;
緩存加載
針對無網絡的情況下,讓用戶仍能查看之前已緩存在本地的信息,使頁面不至于空白,這不僅能夠有效減少用戶流量成本,同時增加了訪問速度。
4種加載樣式
- 狀態欄加載:一般系統默認配置加載樣式。
- 導航欄加載:將導航欄標題臨時變成加載信息文字提示。
- 界面中加載:下拉刷新、懶加載和吐司加載。
總結:加載設計的核心原則
加載貫穿用戶的行為路徑,通過以上的案例背后設計的目的我們可以總結出加載設計的原則:
- 讓加載時間變得更有價值——減少等待時間。
- 讓加載變得更加有趣——忘記等待。
- 保證用戶對加載的可控性——及時退出加載。
減少等待時間
上述提到的加載策略都有案例分析,不再做描述。
忘記等待
讓加載有趣,情感化加載,即將情感化的設計元素融入到界面中,不僅增加了產品生趣,還緩解用戶等待的焦慮感。情感化的加載不僅能夠適當降低用戶的焦慮感,同時能夠突顯品牌或其他信息。
及時退出
由于網絡或系統的原因,加載有時會時間過長,用戶并沒有足夠的耐心停留在當前頁等待你慢慢加載。此時用戶有選擇退出加載的權利,同時也可以設置默認時間內加載無法進行提示用戶重新加載。
THANK YOU FOR WATCHING…
本文由 @劉東晨?原創發布于人人都是產品經理。未經許可,禁止轉載。
收藏點贊一波
寫的非常不錯
棒
??