編輯導(dǎo)語：在日常生活中，使用APP或者網(wǎng)頁加載時，加載按鈕常常會出現(xiàn)，加載效率影響著用戶體驗。那么，加載設(shè)計的意義什么？作者從加載的設(shè)計原理出發(fā)，解析其設(shè)計的意義。

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

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

當(dāng)用戶輸入一條指令，發(fā)送一條訊息，點擊一個按鈕都屬于交互，將信息傳遞給數(shù)據(jù)庫，數(shù)據(jù)庫得到指令再反饋給用戶對應(yīng)的結(jié)果，這就是完整的一個交互，那么加載就是貫穿在其中的數(shù)據(jù)傳輸過程的反饋。

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

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

1. 啟動頁加載

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

有動圖也要靜圖，有商家品牌宣傳也有廣告投放；啟動頁加載最初發(fā)展的目的是因為技術(shù)的不成熟，為了降低用戶進(jìn)入APP時的卡頓感和不流暢感，提高用戶的體驗感。但隨著時代的進(jìn)入，啟動頁的核心反而變成了廣告展示，這點筆者認(rèn)為是非常可惜的，與一開始的目的完全背離。

啟動頁廣告加載：

啟動頁加載：

2. 頁面跳轉(zhuǎn)加載

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

（2）跳轉(zhuǎn)加載：點擊操作按鈕后，跳轉(zhuǎn)至下一頁面展示頁面原生并開始加載相應(yīng)內(nèi)容。市面上絕大部分app都采用這種加載方式，好處是增強(qiáng)了用戶使用中的流暢感。

本頁面加載：

跳轉(zhuǎn)加載：

3. 白屏加載

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

4. 分步加載/懶加載/預(yù)加載

（1）分步加載：分步式按內(nèi)存占比由高到低進(jìn)行加載，先加載不占內(nèi)存或流量消耗小或大量重復(fù)的內(nèi)容；例如icon圖標(biāo)，文字，文章框架體系等。

（2）懶加載：懶加載的核心類型是跟隨用戶當(dāng)前手機(jī)展示界面進(jìn)行加載，例如用戶當(dāng)前正在使用微博界面，那么就會先加載當(dāng)前界面圖片和下面幾頁的內(nèi)容進(jìn)行展示，剩余部分用戶再進(jìn)行下一步操作時才進(jìn)行加載

（3）預(yù)加載：預(yù)加載剩余懶加載進(jìn)階版，在用戶使用當(dāng)前頁面時，就會加載當(dāng)前界面甚至接下來其他主導(dǎo)航界面內(nèi)容，給遇到用戶最佳使用體驗，缺點是占用內(nèi)存和流量。

分步加載：

懶加載：

預(yù)加載：

5. 智能加載

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

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

6. 緩存加載

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

三、四種常見的加載樣式

1. 導(dǎo)航欄加載

特點是加載信息顯示在當(dāng)前頁面的導(dǎo)航位置，常見于頂部導(dǎo)航，底部導(dǎo)航較少。特點是能不破壞當(dāng)前頁面信息同時顯示加載狀態(tài)。常用語社交APP和短視頻APP。

2. 下拉/上拉加載

下拉上拉加載模式基本應(yīng)用于市面上所有APP，在用戶下拉或上拉刷新時展示，一般下拉刷新為更換刷新當(dāng)前界面內(nèi)容，上拉為展示更多當(dāng)前界面內(nèi)容。在展示形式上分為兩種，一種為傳統(tǒng)的加載符號，另一種為帶有自身企業(yè)特色的加載符號。

下拉加載：

上拉加載：

3. 進(jìn)度條加載

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

底端進(jìn)度條加載：

頂端進(jìn)度條加載：

4. Toast（吐司）加載

Toast加載多用于關(guān)鍵性界面，一般加載圖標(biāo)展示在界面核心鮮艷位置，以居中為主，同時加載過程中當(dāng)前界面不可操作，不可退出；此加載模式目的在于核心界面防止用戶誤操作導(dǎo)致當(dāng)前界面當(dāng)前操作錯誤，因此模式也容易導(dǎo)致用戶體驗感變差，謹(jǐn)慎使用，必須核心場景！

四、加載總結(jié)

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

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

但無論那種方式，對產(chǎn)品經(jīng)理而言，能剛好的為用戶服務(wù)，提高用戶的體驗感，我想這才是產(chǎn)品經(jīng)理的初衷！最后，祝愿大家都能成為喬布斯這樣的跨時代產(chǎn)品經(jīng)理，作出iPhone4這樣的跨時代產(chǎn)品！

本文由 @中世紀(jì)產(chǎn)品經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議