2023年從加載到刷新信息載入的交互設計

從加載到刷新，信息載入的交互設計來自同學的提問：頁面下拉刷新、上拉刷新、加載刷新、進度條等等，究竟都什么狀況下用啊？

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

我們還是先從定義開頭：

▲圖1加載的定義

加載多用于表示打開應用軟件或頁面時的信息載入過程。

▲圖2刷新的定義

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

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

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

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

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

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

1.骨架圖加載

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

▲圖4骨架圖的幾種樣式

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

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

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

2.loading圖標加載

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

▲圖5loading的幾種典型樣式

3.進度條loading

特別設計的loading進度條或者加載圖標，通常用于加載H5活動或小嬉戲等相對較大，加載時間較長的頁面，采納趣味化且與活動/嬉戲相匹配的設計元素呈現(xiàn)loading過程，一方面可以讓用戶提前感知活動/嬉戲的風格和內(nèi)容，另一方面動態(tài)的loading圖標也有助于吸引用戶留意，緩解用戶等待的焦慮。

▲圖5進度條或動態(tài)元素loading的案例

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

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

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

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

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

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

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

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

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

▲圖7加載或刷新的方式

而當用戶想查看最新信息時，假如頁面沒有主動刷新，用戶通常會通過手動刷新的方式來達成目標。

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

1）下拉刷新

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

2）點擊刷新按鈕刷新

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

3）點擊頂部Tab或底部Tab進行刷新

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

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

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

▲圖8頁面中提示刷新

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

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

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