欧美日韩在线无码一区二区,亚洲黄片无码,精品成人免费一区二区

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

聊聊Loading，如何讓它變得更好？

Chloe

2022-05-20

4 評論 4808 瀏覽 39 收藏

22 分鐘

編輯導語：Loading動畫，在現在的設計中已經是一個必須要考慮的系統元素，它能減緩用戶等待焦慮的心態，也能用來作為品牌透傳，增加曝光。本篇文章作者分享了加載，以及怎么讓加載的體驗變得更好，我們一起來看看吧。

一個好的加載應當具備什么特征？在人機互動過程中，用戶與界面的每一次互動都是一次加載過程。加載設計對于使用者來說是非常影響體驗的一個方面，后臺復雜的數據計算時間、網絡狀況不好都有可能造成等待時間長而帶來焦慮，今天就讓我們好好來聊下加載，以及怎么讓加載的體驗變得更好。

一、加載的出現

加載指的是用戶在客戶端發出一個指令后，直到出現反饋結果時，中間這段時間內計算機完成的一系列執行動作，所以只要你在App中操作請求更多數據那就不可避免有加載。

二、加載的重要性

根據一份調查得出，用戶能夠忍受加載的最長時間在：3到8秒。8秒是一個臨界值。但現在的高速互聯網真是把我們寵壞了，如果一個頁面的加載時間超過4秒，可能會被用戶直接退出，除非Ta一定要打開那個頁面。

這里有個很重要的數據叫跳出率，在谷歌的一項調查中就已經發現：

1-3 秒的加載時間跳出率提高了 32%。
1-5 秒的加載時間跳出率提高了 90%。
1-6 秒的加載時間跳出率提高了 106%。

為了降低用戶等待的焦慮，獲得更好的用戶體驗，我們必須讓用戶知道我們正在努力加載，同時要讓加載更有趣來分散用戶等待的注意力。

三、加載的場景

首先我們要先了解以下這些App中最常見的加載場景，也就是那些發出指令后應用需要長時間處理的加載過程。

1. 當頁刷新

下拉刷新（請求最新數據）+上滑加載（請求更多數據）

▲ins_下拉和上滑

2. 從后臺切回App

當你在多個App中切換使用時，超過一定時間間隔就需加載數據。

▲系統后臺切回

3. 啟動App

當應用出現異常關閉、應用閃退等情況重新啟動app，需要進行數據加載。

▲App啟動加載

4. 頁面間的跳轉

頁面加載新的數據，涉及原生跳原生或者H5頁面。

▲Moo音樂_頁面跳轉

5. 定時數據刷新

在特定的時間內頁面自動進行數據刷新，例如每天0點更新排行，大部分用在運營或跟時間相關的場景。

▲番茄小說_排行定時更新

6. 即時消息

通訊類社交的App都采用實時推送機制，不需要用戶手動操作也能接收到最新的數據。

▲Quack社交聊天

四、加載類型的進化

1. 加載器（Spinners）

加載器是最早被使用的方式，適用于快速加載，這也是使用率最高的一種。

▲旋轉菊花記載

然而這種加載器有個缺點就是無法告知用戶需要等多久，Nielsen Norman早在1993年就提到響應時間和loading動畫，“如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋?！薄綧yers 1985 論文，“計算機-人機界面百分比進度指標的重要性”】

所以加載器和進度條成了黃金組合，適用于長時間（10秒或更長）的加載過程，顯示一個操作將花費多長時間以及目前所處的狀態，通常有線性進度、百分比、直觀數字等。

▲Cream M.

▲Gleb Kuznetsov?

▲有道樂讀、嗶哩嗶哩漫畫

在此基礎上加載器也開始往趣味/品牌化發展，使用情感化加載動畫，可以讓等待過程變得輕松、愉悅。Tips：搭建符合目標用戶群體的生活場景，能拉近與用戶之間的距離。

▲摩拜單車

▲ARCADE STUDIO

吸引用戶的眼球，感覺時間會過得更快一點，短暫忘記等待的過程。

▲Markus Magnusson

▲DeeKay

▲RWDS

通過品牌logo或產品相關的圖形呈現在界面上，將品牌基因融入整個Loading動畫中。

▲ Google

▲Medium

▲有道樂讀

▲ 開言

加載器和進度條這一組合有很多變體，可以應用在不同的頁面位置：

1.1 白屏加載

當前頁面內容需一次性加載完成后才能顯示內容，這是頁面加載最原始的狀態。當頁面元素較多時，內容呈現的等待時間會變得很長，一旦時間太久要給予提示。

1.2 Toast加載

當用戶執行某個操作時，為了防止用戶繼續操作導致數據加載失敗，則用Toast的樣式來提示正在加載。在畫面中間出現提示框，有時會加上黑色透明底蓋在畫面中間，這種情況一般除了返回上一級的操作可點，其他操作將受到限制。

1.3 進度條加載

可以是在頂部或底部欄上，告知用戶等待的時間長度，讓用戶有一定的心理預期。

1.4 手動刷新加載

通過手勢操作，快速加載和更新當前頁面的內容。

1.5 局部模態加載

在特定位置進行加載，功能指示更明確，避免用戶反復操作。

加載器這種方式相對比較簡單，但也會阻斷用戶的其他操作，用戶只能等待加載完成才能繼續操作。會給人的感覺時間較長，且對于加載出來的頁面沒有任何預期。

那什么時候是需要中斷用戶操作呢？主要有以下兩種情況可以作為判斷：

當前的操作未成功，則接下來的操作或結果也無法顯示，例如：啟動App、手機支付、渲染濾鏡等；
當前的操作本身不能與其他操作同步進行，需停留在當前界面保證操作完成，例如：掃描、遷移資料、實時翻譯等。

如果中斷時間較短可以使用toast加載提示，時間較長則建議用專門的單頁且有可取消的按鈕來提示加載過程，以引起用戶的重視。

加載器的特點

?適用性廣
拓展性強（趣味性及品牌宣傳）

2. 分布加載（占位符Placeholder）

占位符分布加載就是當界面中圖文同時存在時，如果獲取完所有信息才顯示所耗費的時間是很長的，因此為了縮短用戶等待的時間，會選擇優先加載快的元素（文字），慢的元素（圖片視頻等）則用其他的方式占位，最終等待加載全部完成。較為適合feed或瀑布流模式。

分步加載的好處是在等待加載的時間里用戶可以看到相關的文字內容，不會像空白頁加載或Toast加載，只能默默地等待加載的過程。

2.1 灰色占位符

將圖片用灰色或灰色圖（對開發更易用）來代替，中性灰在界面中不會搶風頭，在暗黑模式中也適用。

▲灰色色值（例如#EFEFEF）或灰色圖片

▲Youtube

2.2 品牌相關圖

在灰色圖上加入品牌元素也是不錯的方式，例如logo或吉祥物IP，將品牌人格化、情感化，輔助企業向用戶傳達產品的氣質特征，在各類產品中廣泛運用。

▲Moo音樂、有道樂讀

2.3 彩色色塊

通過程序提取面積較大的主色調，并設置幾種符合產品調性的默認色，以防取色失敗。需保證色彩庫的顏色高級耐看，飽和度不要太高，不然很刺眼反倒引起到不好的體驗。

▲Behance、Apple Music

▲Pinterest

▲Google Search

2.4 模糊加載

模糊圖像也稱為模糊技術，渲染圖像的一個低質量版本，然后過渡到高質量版本，初始圖像的像素和 kB 都很小。為了去除偽影，圖像會被放大和模糊。

▲Behance、Unsplash

分布加載的特點

良好的閱讀性；
準確區分已加載和尚未加載的內容

3. 骨架加載（Skeleton Screens）

骨架加載就是先加載UI布局框架，再加載框架中的內容，細節通常按照骨架輪廓（也稱為占位UI）、文本、圖像的順序出現。通過這種方式直觀地提前讓用戶知道整個界面的架構，并營造出一種漸進的感覺，使用戶感知加載穩定且速度快，提高了產品的體驗感。

“Skeleton Screens”這個詞最早出現在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持，LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕，通過將被動等待變為主動等待。

被動等待是指你只是坐在那里無所事事，看著加載器轉了一圈又一圈。積極等待是當你在等待時做一些感覺像是進步的事情。骨架加載通過在每次屏幕更新時為用戶提供新信息來鼓勵主動等待。

通過這種方式，骨架屏幕將焦點從您等待的時間量上移開，并將其放在您面前發生的實際進度證明上，從而使加載過程感覺更快。當它顯示已加載的內容和剩余的內容時，它允許用戶構建準確的UI界面期望。