加載的設計原理

4 評論 5525 瀏覽 65 收藏 11 分鐘

編輯導語:在日常生活中,使用APP或者網頁加載時,加載按鈕常常會出現,加載效率影響著用戶體驗。那么,加載設計的意義什么?作者從加載的設計原理出發,解析其設計的意義。

一、加載是什么?為什么要有加載?

日程生活的使用中我們都能解除到各式各樣的加載樣式,有些是一句文字,一個簡單的圖標,有些是一段動畫,甚至之前微信還推出過加載小游戲,那么為什么要設計這個過程,加載的本質到底是什么?其實加載就是一個傳輸交互過程的反饋過程,它存在于用戶與數據庫中的交互過程中。

當用戶輸入一條指令,發送一條訊息,點擊一個按鈕都屬于交互,將信息傳遞給數據庫,數據庫得到指令再反饋給用戶對應的結果,這就是完整的一個交互,那么加載就是貫穿在其中的數據傳輸過程的反饋。

這一過程因為各種各樣的原因影響,導致速率變慢,降低了用戶體驗,這時候就需要加載反饋,給與用戶反饋當前界面信息,降低用戶焦慮感,讓用戶能看到進度條,這就是加載的意義。

二、八種常見的加載策略及設計意義

1. 啟動頁加載

啟動頁是進入所有APP都會遇到的,也是最常用的加載策略。大家點擊進入APP時都會遇到可跳過的廣告,或APP本身的品牌頁面,這就是啟動頁加載。

有動圖也要靜圖,有商家品牌宣傳也有廣告投放;啟動頁加載最初發展的目的是因為技術的不成熟,為了降低用戶進入APP時的卡頓感和不流暢感,提高用戶的體驗感。但隨著時代的進入,啟動頁的核心反而變成了廣告展示,這點筆者認為是非??上У?,與一開始的目的完全背離。

啟動頁廣告加載:

啟動頁廣告加載

啟動頁加載:

啟動頁加載

2. 頁面跳轉加載

(1)本頁面加載:點擊操作按鈕后,在當前頁中提示正在加載過程,成功后進入下一頁。適用于需要判斷及驗證處理的頁面中。例如表單信息判斷和登錄驗證等。

(2)跳轉加載:點擊操作按鈕后,跳轉至下一頁面展示頁面原生并開始加載相應內容。市面上絕大部分app都采用這種加載方式,好處是增強了用戶使用中的流暢感。

本頁面加載:

本頁加載

跳轉加載:

跳轉加載

3. 白屏加載

顧名思義就是加載過程呈白屏顯示,常用于Wb端,特點是一次性展示全部內容,如加載不出則全部不展示。

白屏+進度條加載

4. 分步加載/懶加載/預加載

(1)分步加載:分步式按內存占比由高到低進行加載,先加載不占內存或流量消耗小或大量重復的內容;例如icon圖標,文字,文章框架體系等。

(2)懶加載:懶加載的核心類型是跟隨用戶當前手機展示界面進行加載,例如用戶當前正在使用微博界面,那么就會先加載當前界面圖片和下面幾頁的內容進行展示,剩余部分用戶再進行下一步操作時才進行加載

(3)預加載:預加載剩余懶加載進階版,在用戶使用當前頁面時,就會加載當前界面甚至接下來其他主導航界面內容,給遇到用戶最佳使用體驗,缺點是占用內存和流量。

分步加載:

分步加載

懶加載:

懶加載

預加載:

預加載

5. 智能加載

智能加載相對其他加載模式的清晰定位屬于相對綜合性的加載模式。一般來說分為主動型和被動型,用戶可以自足設置它的加載模式。

在WiFi情況下會加載大量內容,包括視頻圖片,在非WiFi情況則相對性的減少圖片的加載,取消視頻加載;其次還有清晰度方面也同樣可以設置,相對智能,用戶的可選擇空間大些。

智能加載

6. 緩存加載

緩存加載屬于隱形加載,特征是創作團隊提前設置到緩存內容板塊,用戶也可以進行清除操作。此板塊以微信為最佳用例,微信中會大量緩存聊天內容,朋友圈圖片內容,在沒有清除緩存的前提下你甚至可以滑到去年今日的朋友圈。

三、四種常見的加載樣式

1. 導航欄加載

特點是加載信息顯示在當前頁面的導航位置,常見于頂部導航,底部導航較少。特點是能不破壞當前頁面信息同時顯示加載狀態。常用語社交APP和短視頻APP。

導航欄加載

2. 下拉/上拉加載

下拉上拉加載模式基本應用于市面上所有APP,在用戶下拉或上拉刷新時展示,一般下拉刷新為更換刷新當前界面內容,上拉為展示更多當前界面內容。在展示形式上分為兩種,一種為傳統的加載符號,另一種為帶有自身企業特色的加載符號。

下拉加載:

下拉加載

上拉加載:

上拉加載

3. 進度條加載

進度條加載多用于網頁端加載或第三方跳轉界面或API接口加載過程,有頂端展示也有底端展示兩種;特點是用戶可以清晰看到加載進度。這也是最早一批的加載模式,相對于其他加載模式筆者相信對進度條加載大家應該都有記憶,小時候兩三好友一起守著大頭電腦盯著網頁界面一點點加載,進度條的終點就是自己喜歡的小游戲。

底端進度條加載:

底端進度條加載

頂端進度條加載:

頂端進度條加載

4. Toast(吐司)加載

Toast加載多用于關鍵性界面,一般加載圖標展示在界面核心鮮艷位置,以居中為主,同時加載過程中當前界面不可操作,不可退出;此加載模式目的在于核心界面防止用戶誤操作導致當前界面當前操作錯誤,因此模式也容易導致用戶體驗感變差,謹慎使用,必須核心場景!

Toast加載

四、加載總結

其實加載按鈕的核心還是為了提高用戶的體驗感,提升用戶在當前APP或網頁內的留存。無論是什么形式對應的都是用戶的核心需求點,有能讓用戶看到進度條降低焦慮感的進度條加載,有相對趣味性的頂部刷新加載圖標,也有防止用戶誤操作的Toast加載,更有筆者比較反感的啟動頁廣告加載,其核心都是對應了相應場景。

筆者相信未來一定會退出新的加載模式,例如音頻加載,在加載過程中播放相應音樂,小游戲加載,在需要長加載的頁面增加小游戲也不失為一種新穎的方式。

但無論那種方式,對產品經理而言,能剛好的為用戶服務,提高用戶的體驗感,我想這才是產品經理的初衷!最后,祝愿大家都能成為喬布斯這樣的跨時代產品經理,作出iPhone4這樣的跨時代產品!

 

本文由 @中世紀產品經理 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 整挺好,就是這錯別字實在是太多了……

    來自廣東 回復
  2. 一個加載都有這么多原理呢,真是細節滿滿,文章也是干貨滿滿呀

    來自浙江 回復
  3. 大神厲害呀

    來自湖北 回復
  4. 厲害厲害

    來自湖北 回復