相信不少用戶在網頁浏覽、或者移動應用的使用中，都曾見過“加載”或“刷新”，這兩個過程都屬于“信息載入”。那麼這兩個過程要如何設計，才可以減少用戶的等待焦慮、提升用戶的使用體驗？本文作者就從加載和刷新出發，對信息載入的交互設計做了解讀，一起來看一下。

來自同學的提問：頁面下拉刷新、上拉刷新、加載刷新、進度條等等，到底都什麼情況下用啊？

加載和刷新，是互聯網産品的一個基礎通用能力，我們在vivo的産品設計中也經常會處理加載和刷新的交互邏輯及視覺呈現，所以就簡單做個小結，和大家分享一下。

我們還是先從定義開始：

圖1 加載的定義

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

圖2 刷新的定義

刷新比如突破舊的而創造出新的。刷新有手動和自動兩種，旨在消除因時間間隔造成的内容或狀态不一緻，一般用于内容或狀态變化比較頻繁的地方。

從定義上看，刷新可以看作是加載的一個子場景。因為展示新信息的過程也是信息載入的過程。

接下來我将以vivo互聯網産品為例為大家進行講解這幾種信息載入方式的使用場景和區别。

一、信息從無到有的呈現

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

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

1. 骨架圖加載

通常用于有着穩定界面框架結構的頁面：比如視頻列表頁、視頻詳情頁、Up主頁、商品詳情頁等。

圖4骨架圖的幾種樣式

當界面沒有任何信息展示時，提前以占位圖和占位文本的方式将頁面框架勾畫出來，方便新用戶提前了解頁面結構，也方便老用戶快速定位具體信息的位置。

骨架圖通常隻用灰色表示，但也可以用加載後元素本來的顔色添加透明度來呈現，這樣的骨架圖更會接近頁面真實的色彩感受（如上圖右）。

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

2. loading圖标加載

這是最基礎也最通用的加載方式，如果頁面信息加載較快，且界面内容結構不固定，通常就采用這種加載方式，除了常規loading圖标外，産品通常會設計特有的品牌loading圖标，或者選擇使用用品牌圖标 名稱的暗紋，或者品牌吉祥物展示loading。

圖5loading的幾種典型樣式

3. 進度條loading

特殊設計的loading進度條或者加載圖标，通常用于加載H5活動或小遊戲等相對較大，加載時間較長的頁面，采用趣味化且與活動/遊戲相匹配的設計元素呈現loading過程，一方面可以讓用戶提前感知活動/遊戲的風格和内容，另一方面動态的loading圖标也有助于吸引用戶注意，緩解用戶等待的焦慮。

圖5進度條或動态元素loading的案例

vivo的活動設計多會采用動态loading圖标：比如小v手持奧運火炬跑步、柯基快速抖動電臀、小V駕駛火箭飛行、星球轉動等等，少部分添加了進度條，如果加載平均時間在2秒以内，直接采用loading圖标是OK的，如果平均加載時間在2秒以上，建議同步添加進度條給用戶明确的加載時間提示。

4. 網頁進度條

這是網頁加載最為通用的樣式，網頁千千萬，不同的網頁開發者會在頁面上采用不同的加載形式，當然，也可能什麼都不提供。

所以在加載網頁時，浏覽器平台通常會給出線性的通用的進度條加載形式，既不過分搶眼，又可以給到用戶網頁加載進度的統一提示。

圖6浏覽器産品進度條

二、信息從有到新的呈現,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部