2023年從加載到刷新信息載入的交互設(shè)計(jì)

從加載到刷新，信息載入的交互設(shè)計(jì)來(lái)自同學(xué)的提問(wèn)：頁(yè)面下拉刷新、上拉刷新、加載刷新、進(jìn)度條等等，究竟都什么狀況下用??？

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

我們還是先從定義開(kāi)頭：

▲圖1加載的定義

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

▲圖2刷新的定義

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

從定義上看，刷新可以看作是加載的一個(gè)子場(chǎng)景。由于展現(xiàn)新信息的過(guò)程也是信息載入的過(guò)程。

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

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

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

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

1.骨架圖加載

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

▲圖4骨架圖的幾種樣式

當(dāng)界面沒(méi)有任何信息展現(xiàn)時(shí)，提前以占位圖和占位文本的方式將頁(yè)面框架勾畫(huà)出來(lái)，便利新用戶提前了解頁(yè)面結(jié)構(gòu)，也便利老用戶快速定位詳細(xì)信息的位置。

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

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

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

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

▲圖5loading的幾種典型樣式

3.進(jìn)度條loading

特別設(shè)計(jì)的loading進(jìn)度條或者加載圖標(biāo)，通常用于加載H5活動(dòng)或小嬉戲等相對(duì)較大，加載時(shí)間較長(zhǎng)的頁(yè)面，采納趣味化且與活動(dòng)/嬉戲相匹配的設(shè)計(jì)元素呈現(xiàn)loading過(guò)程，一方面可以讓用戶提前感知活動(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)頁(yè)進(jìn)度條

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

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

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

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

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

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

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

▲圖7加載或刷新的方式

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

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

1）下拉刷新

當(dāng)首條信息處于頁(yè)面頂端時(shí)，下拉頁(yè)面，即可觸發(fā)下拉刷新。用戶剛進(jìn)入界面時(shí)可以多次觸發(fā)，以查找自己感愛(ài)好的最新內(nèi)容。但當(dāng)用戶上滑過(guò)頁(yè)面后就不太便利，由于需要重新下拉到第一條信息消失后才能觸發(fā)下拉刷新。

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

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

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

這是一個(gè)隱含的手勢(shì)操作，基本上產(chǎn)品都會(huì)支持，但由于界面上并沒(méi)有明確的刷新指示，許多用戶都很難發(fā)覺(jué)。

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

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

▲圖8頁(yè)面中提示刷新

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

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

（我猜想伴侶圈也是因此而取消了這個(gè)提示，究竟用戶刷伴侶圈的概率挺高的，伴侶圈的內(nèi)容更新率取決于好