相信不少用戶在網(wǎng)頁瀏覽、或者移動(dòng)應(yīng)用的使用中，都曾見過“加載”或“刷新”，這兩個(gè)過程都屬于“信息載入”。那么這兩個(gè)過程要如何設(shè)計(jì)，才可以減少用戶的等待焦慮、提升用戶的使用體驗(yàn)？本文作者就從加載和刷新出發(fā)，對(duì)信息載入的交互設(shè)計(jì)做了解讀，一起來看一下。

來自同學(xué)的提問：頁面下拉刷新、上拉刷新、加載刷新、進(jìn)度條等等，到底都什么情況下用啊？

加載和刷新，是互聯(lián)網(wǎng)產(chǎn)品的一個(gè)基礎(chǔ)通用能力，我們?cè)趘ivo的產(chǎn)品設(shè)計(jì)中也經(jīng)常會(huì)處理加載和刷新的交互邏輯及視覺呈現(xiàn)，所以就簡(jiǎn)單做個(gè)小結(jié)，和大家分享一下。

我們還是先從定義開始：

▲圖1 加載的定義

加載多用于表示打開應(yīng)用軟件或頁面時(shí)的信息載入過程。

▲圖2 刷新的定義

刷新比如突破舊的而創(chuàng)造出新的。刷新有手動(dòng)和自動(dòng)兩種，旨在消除因時(shí)間間隔造成的內(nèi)容或狀態(tài)不一致，一般用于內(nèi)容或狀態(tài)變化比較頻繁的地方。

從定義上看，刷新可以看作是加載的一個(gè)子場(chǎng)景。因?yàn)檎故拘滦畔⒌倪^程也是信息載入的過程。

接下來我將以vivo互聯(lián)網(wǎng)產(chǎn)品為例為大家進(jìn)行講解這幾種信息載入方式的使用場(chǎng)景和區(qū)別。

一、信息從無到有的呈現(xiàn)

當(dāng)用戶第一次打開一個(gè)界面，界面通常并沒有任何緩存內(nèi)容時(shí)，這時(shí)就需要加載內(nèi)容，常見的內(nèi)容加載方式有以下幾種：

▲圖3首次信息加載的幾種方式

1. 骨架圖加載

通常用于有著穩(wěn)定界面框架結(jié)構(gòu)的頁面：比如視頻列表頁、視頻詳情頁、Up主頁、商品詳情頁等。

▲圖4骨架圖的幾種樣式

當(dāng)界面沒有任何信息展示時(shí)，提前以占位圖和占位文本的方式將頁面框架勾畫出來，方便新用戶提前了解頁面結(jié)構(gòu)，也方便老用戶快速定位具體信息的位置。

骨架圖通常只用灰色表示，但也可以用加載后元素本來的顏色添加透明度來呈現(xiàn)，這樣的骨架圖更會(huì)接近頁面真實(shí)的色彩感受（如上圖右）。

為了讓用戶感受到界面正在努力加載（而沒有死機(jī)），頁面骨架圖通常會(huì)添加頁面光暈循環(huán)效果來體現(xiàn)頁面的加載動(dòng)態(tài)。

2. loading圖標(biāo)加載

這是最基礎(chǔ)也最通用的加載方式，如果頁面信息加載較快，且界面內(nèi)容結(jié)構(gòu)不固定，通常就采用這種加載方式，除了常規(guī)loading圖標(biāo)外，產(chǎn)品通常會(huì)設(shè)計(jì)特有的品牌loading圖標(biāo)，或者選擇使用用品牌圖標(biāo)+名稱的暗紋，或者品牌吉祥物展示loading。

▲圖5loading的幾種典型樣式

3. 進(jìn)度條loading

特殊設(shè)計(jì)的loading進(jìn)度條或者加載圖標(biāo)，通常用于加載H5活動(dòng)或小游戲等相對(duì)較大，加載時(shí)間較長(zhǎng)的頁面，采用趣味化且與活動(dòng)/游戲相匹配的設(shè)計(jì)元素呈現(xiàn)loading過程，一方面可以讓用戶提前感知活動(dòng)/游戲的風(fēng)格和內(nèi)容，另一方面動(dòng)態(tài)的loading圖標(biāo)也有助于吸引用戶注意，緩解用戶等待的焦慮。

▲圖5進(jìn)度條或動(dòng)態(tài)元素loading的案例

vivo的活動(dòng)設(shè)計(jì)多會(huì)采用動(dòng)態(tài)loading圖標(biāo)：比如小v手持奧運(yùn)火炬跑步、柯基快速抖動(dòng)電臀、小V駕駛火箭飛行、星球轉(zhuǎn)動(dòng)等等，少部分添加了進(jìn)度條，如果加載平均時(shí)間在2秒以內(nèi)，直接采用loading圖標(biāo)是OK的，如果平均加載時(shí)間在2秒以上，建議同步添加進(jìn)度條給用戶明確的加載時(shí)間提示。

4. 網(wǎng)頁進(jìn)度條

這是網(wǎng)頁加載最為通用的樣式，網(wǎng)頁千千萬，不同的網(wǎng)頁開發(fā)者會(huì)在頁面上采用不同的加載形式，當(dāng)然，也可能什么都不提供。

所以在加載網(wǎng)頁時(shí)，瀏覽器平臺(tái)通常會(huì)給出線性的通用的進(jìn)度條加載形式，既不過分搶眼，又可以給到用戶網(wǎng)頁加載進(jìn)度的統(tǒng)一提示。

▲圖6瀏覽器產(chǎn)品進(jìn)度條

二、信息從有到新的呈現(xiàn)

當(dāng)頁面已經(jīng)有緩存內(nèi)容后，通常還涉及到兩個(gè)需求：查看更多內(nèi)容和查看最新內(nèi)容。

為了節(jié)約用戶流量，減少對(duì)服務(wù)器數(shù)據(jù)請(qǐng)求的壓力，客戶端在呈現(xiàn)信息時(shí)，通常會(huì)采取分批加載的方式，一批加載的信息約在10條左右，當(dāng)用戶瀏覽完這10條繼續(xù)往上滑動(dòng)頁面時(shí)，就會(huì)觸發(fā)上滑加載（如下圖1）。

（部分產(chǎn)品會(huì)做預(yù)加載處理，當(dāng)用戶正常速度瀏覽時(shí)，上一刷快要完全曝光前就會(huì)觸發(fā)新內(nèi)容加載，所以用戶根本就感知不到上滑加載的過程，但如果用戶并不瀏覽只是快速往上滑動(dòng)頁面，通常還是可以看到上滑加載的狀態(tài)）

▲圖7加載或刷新的方式

而當(dāng)用戶想查看最新信息時(shí)，如果頁面沒有主動(dòng)刷新，用戶通常會(huì)通過手動(dòng)刷新的方式來達(dá)成目標(biāo)。

常見的手動(dòng)刷新方式有3種（如上圖2/3/4）：

1）下拉刷新

當(dāng)首條信息處于頁面頂端時(shí)，下拉頁面，即可觸發(fā)下拉刷新。用戶剛進(jìn)入界面時(shí)可以多次觸發(fā)，以查找自己感興趣的最新內(nèi)容。但當(dāng)用戶上滑過頁面后就不太方便，因?yàn)樾枰匦孪吕降谝粭l信息出現(xiàn)后才能觸發(fā)下拉刷新。

2）點(diǎn)擊刷新按鈕刷新

通常會(huì)在頁面的右下角懸浮一個(gè)刷新按鈕，這樣不管頁面滑動(dòng)到第幾屏，用戶都可以非常方便地點(diǎn)擊刷新按鈕進(jìn)行刷新（相比下拉刷新，全屏下拉的手勢(shì)操作會(huì)比精確點(diǎn)擊一個(gè)按鈕更為便捷，而且懸浮按鈕會(huì)遮擋部分頁面內(nèi)容，顯得不夠簡(jiǎn)約，所以相比之下，下拉刷新通常會(huì)更為通用，而刷新按鈕通常會(huì)作為一個(gè)刷新的補(bǔ)充操作）。

3）點(diǎn)擊頂部Tab或底部Tab進(jìn)行刷新

這是一個(gè)隱含的手勢(shì)操作，基本上產(chǎn)品都會(huì)支持，但因?yàn)榻缑嫔喜]有明確的刷新指示，很多用戶都很難發(fā)現(xiàn)。

（部分產(chǎn)品會(huì)將選中的底部Tab圖標(biāo)直接更換為刷新圖標(biāo)，以明示用戶可以點(diǎn)擊底部Tab刷新，vivo曾經(jīng)也采用過這樣的方案，后來取消了，一是因?yàn)辄c(diǎn)擊底部Tab后，圖標(biāo)突然更換，會(huì)帶來一些信息干擾，二是點(diǎn)擊底部Tab刷新的用戶還是不多，綜合評(píng)估我們認(rèn)為此項(xiàng)設(shè)計(jì)帶來的干擾＞收益，所以就取消了，但還保留了這個(gè)隱含的手勢(shì)，點(diǎn)擊仍可觸發(fā)刷新，只是未在界面上呈現(xiàn)刷新按鈕）

除了這幾種典型的刷新方式之外，還有一種大家可能見過的提示刷新方式，前一段時(shí)間微信朋友圈也使用過，但今天我去復(fù)現(xiàn)的時(shí)候卻找不到了，我在網(wǎng)上找到一張其他產(chǎn)品的截圖示意一下：

▲圖8頁面中提示刷新

這類產(chǎn)品會(huì)在用戶上次開始瀏覽的那條信息之前添加一條這樣的提示，當(dāng)用戶本次瀏覽完所有更新內(nèi)容后，就會(huì)看到這個(gè)提示，以提示用戶刷新查看最新的內(nèi)容。

這類提示往往要求產(chǎn)品內(nèi)容的更新速度要快，量級(jí)要大，否則用戶點(diǎn)擊刷新后沒有太多新內(nèi)容可看，體驗(yàn)反而降低了。

（我猜測(cè)朋友圈也是因此而取消了這個(gè)提示，畢竟用戶刷朋友圈的概率挺高的，朋友圈的內(nèi)容更新率取決于好友數(shù)量和發(fā)帖頻率，非常不可控，很容易就刷到這個(gè)提示，讓用戶終止了瀏覽。而如果沒有看到這個(gè)提示，用戶繼續(xù)回顧之前的朋友圈信息也是非常正常的行為，因?yàn)橛脩舨灰欢ㄓ浀每催^了，就算看過也很有可能愿意再看看）

最后，再給大家分享一張用戶情緒隨著等待時(shí)間變化的實(shí)驗(yàn)數(shù)據(jù)圖（來自參考文獻(xiàn)1）

▲圖9用戶情緒隨等待時(shí)間的變化

從中看出2秒算是一個(gè)轉(zhuǎn)折點(diǎn)，超過2秒后用戶的情緒就開始從不耐煩到焦慮到放棄，那這個(gè)圖對(duì)我們交互設(shè)計(jì)有什么啟示呢？這里給到大家?guī)c(diǎn)建議：

1）在用戶操作的0.1s內(nèi)，應(yīng)該給出即使的反饋，比如點(diǎn)擊態(tài)、彈出層或者是頁面跳轉(zhuǎn)動(dòng)效等，讓用戶清楚地感受到產(chǎn)品已經(jīng)接收到了用戶的操作，并在積極的響應(yīng)（0.14s是用戶建立因果聯(lián)系的時(shí)限，只有在0.14s內(nèi)反饋，用戶才會(huì)感覺反饋是因?yàn)樽约翰僮鞫l(fā)生的，再長(zhǎng)就會(huì)感受到延遲）。

2）在新頁面出現(xiàn)的0~0.5秒內(nèi)，如果要顯示信息載入狀態(tài)，建議顯示骨架圖或者非常弱的暗紋loading提示，甚至什么都不顯示。因?yàn)槿绻霈F(xiàn)一個(gè)明顯的loading圖標(biāo)在0.5秒內(nèi)切換成內(nèi)容，會(huì)造成頁面有閃爍感體驗(yàn)反而比較差。（來不及看清那個(gè)一閃而過loading圖標(biāo)就消失了，會(huì)讓用戶疑惑）

3）在0.5s~2s可以顯示骨架圖或者醒目有趣的loading圖標(biāo)，讓用戶有信息可看，加速等待的心理時(shí)間。對(duì)于用戶會(huì)頻繁打開的頁面，如列表首頁或者是詳情頁，必須要配合研發(fā)從性能角度提升客觀加載速度，否則總是看到同一個(gè)loading圖標(biāo)，再有趣用戶也會(huì)厭煩。

4）在2s以上，如果是用骨架圖的形式，建議要采用分步加載，讓一部分內(nèi)容能先呈現(xiàn)出來，讓用戶有真實(shí)內(nèi)容可看，如果不能分步呈現(xiàn)內(nèi)容，則建議添加進(jìn)度條，給用戶較為明確的等待時(shí)間預(yù)期，減少用戶因?yàn)闆]有時(shí)間預(yù)期而放棄的場(chǎng)景。

好了，今天從加載到刷新的信息載入交互邏輯到這里就結(jié)束了。

參考文獻(xiàn)：

1. 方年麗：人機(jī)交互等待狀態(tài)的視覺反饋設(shè)計(jì)研究
2. 望盡盡是青山：你應(yīng)該知道的5種刷新樣式