中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

來自同學的提問：頁面下拉刷新、上拉刷新、加載刷新、進度條等等，到底都什么情況下用?。?/p>

加載和刷新，是互聯網產品的一個基礎通用能力，我們在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瀏覽器產品進度條

二、信息從有到新的呈現

當頁面已經有緩存內容后，通常還涉及到兩個需求：查看更多內容和查看最新內容。

為了節約用戶流量，減少對服務器數據請求的壓力，客戶端在呈現信息時，通常會采取分批加載的方式，一批加載的信息約在10條左右，當用戶瀏覽完這10條繼續往上滑動頁面時，就會觸發上滑加載（如下圖1）。

（部分產品會做預加載處理，當用戶正常速度瀏覽時，上一刷快要完全曝光前就會觸發新內容加載，所以用戶根本就感知不到上滑加載的過程，但如果用戶并不瀏覽只是快速往上滑動頁面，通常還是可以看到上滑加載的狀態）

▲圖7加載或刷新的方式

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

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

1）下拉刷新

當首條信息處于頁面頂端時，下拉頁面，即可觸發下拉刷新。用戶剛進入界面時可以多次觸發，以查找自己感興趣的最新內容。但當用戶上滑過頁面后就不太方便，因為需要重新下拉到第一條信息出現后才能觸發下拉刷新。

2）點擊刷新按鈕刷新

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

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

這是一個隱含的手勢操作，基本上產品都會支持，但因為界面上并沒有明確的刷新指示，很多用戶都很難發現。

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

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

▲圖8頁面中提示刷新

這類產品會在用戶上次開始瀏覽的那條信息之前添加一條這樣的提示，當用戶本次瀏覽完所有更新內容后，就會看到這個提示，以提示用戶刷新查看最新的內容。

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

（我猜測朋友圈也是因此而取消了這個提示，畢竟用戶刷朋友圈的概率挺高的，朋友圈的內容更新率取決于好友數量和發帖頻率，非常不可控，很容易就刷到這個提示，讓用戶終止了瀏覽。而如果沒有看到這個提示，用戶繼續回顧之前的朋友圈信息也是非常正常的行為，因為用戶不一定記得看過了，就算看過也很有可能愿意再看看）

最后，再給大家分享一張用戶情緒隨著等待時間變化的實驗數據圖（來自參考文獻1）

▲圖9用戶情緒隨等待時間的變化

從中看出2秒算是一個轉折點，超過2秒后用戶的情緒就開始從不耐煩到焦慮到放棄，那這個圖對我們交互設計有什么啟示呢？這里給到大家幾點建議：

1）在用戶操作的0.1s內，應該給出即使的反饋，比如點擊態、彈出層或者是頁面跳轉動效等，讓用戶清楚地感受到產品已經接收到了用戶的操作，并在積極的響應（0.14s是用戶建立因果聯系的時限，只有在0.14s內反饋，用戶才會感覺反饋是因為自己操作而發生的，再長就會感受到延遲）。

2）在新頁面出現的0~0.5秒內，如果要顯示信息載入狀態，建議顯示骨架圖或者非常弱的暗紋loading提示，甚至什么都不顯示。因為如果出現一個明顯的loading圖標在0.5秒內切換成內容，會造成頁面有閃爍感體驗反而比較差。（來不及看清那個一閃而過loading圖標就消失了，會讓用戶疑惑）

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

4）在2s以上，如果是用骨架圖的形式，建議要采用分步加載，讓一部分內容能先呈現出來，讓用戶有真實內容可看，如果不能分步呈現內容，則建議添加進度條，給用戶較為明確的等待時間預期，減少用戶因為沒有時間預期而放棄的場景。

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

參考文獻：

1. 方年麗：人機交互等待狀態的視覺反饋設計研究
2. 望盡盡是青山：你應該知道的5種刷新樣式