通過3種狀態+5種模式，幫你掌握加載設計的知識點

大家好，我是 Clippp，今天為大家分享的是「加載狀態分析」。加載對用戶來說是一種反饋，是用戶觸發，系統反應的過程。在一個產品中可能會涉及到多種形式的加載場景，例如進場加載、頁面間的轉場加載以及局部功能的加載等。面對這么多的加載場景，如果都用同一種加載方式顯然不太合適，所以需要針對不同加載場景做到“對癥下藥”，最大程度提升體驗。

例如常見的加載組件有進度條和數字百分比，那到底什么場景下適合用進度條加載，什么場景下適合用數字百分比加載，你有沒有考慮過呢？

三種加載狀態

頁面加載進程會受多方面的影響，例如頁面里圖片、圖標的數量，頁面中是否有三維場景或模型，是列表式設計還是卡片式設計…

1. 逐一加載

對于可以同時進行多個加載任務的產品，更適合應用逐一加載的形式，這樣做能減少用戶對于等待的感知程度。任務列表逐一加載的過程會給用戶帶來一種秩序感。

2. 完全加載

進入一個網站或 App，很多頁面都會一下就顯示出來所有內容，這種頁面完全加載的形式對用戶來說更熟悉。

同樣，頁面完全加載的形式會讓用戶的操作和瀏覽過程更流暢。

3. 延遲加載

延遲加載是用戶主動觸發的操作，根據操作系統反饋對應的結果。延遲加載包括三種形式：

無限滾動：當檢測到用戶快要到達列表或頁面的末尾的時候，通過無限滾動來作為觸發器，引導用戶獲取更多內容。

加載更多：通過點擊“加載更多”按鈕來獲取更多內容，這個過程由用戶主導決定，是否選擇點擊。

分頁加載：分頁是在不同頁面上進行的延遲加載。這個過程也是由用戶主動選擇，但和“加載更多”按鈕不同的地方在于，分頁是頁面間的切換，并且用戶能清楚地看到具體的頁面數量。

五種加載模式

加載模式需要依托場景去考慮。比如一個 1 秒就能加載的頁面和一個需要 5 秒才能加載出來的頁面，我們就需要考慮使用不同的加載模式設計，這樣才能做到差異化設計。

這里我做了一個表格，將頁面加載需要的時間以及對應的加載模式進行了整合。

0.1 秒以內

如果加載時長低于 0.1 秒，用戶不需要等待加載過程，內容就能即時呈現出來，有一種“還沒開始就已經結束”的感覺。

0.1 秒以內的加載不需要在頁面中添加任何加載狀態，但要一個場景需要格外注意，如果用戶剛完成一系列復雜的操作，點擊提交之后，考慮為用戶提供撤銷機制。

用谷歌郵箱發送郵件時，發送成功之后會彈出一個撤銷提示，允許用戶在5s內撤銷剛才發送成功的郵件。

0.1-1 秒間

大多數產品的頁面加載速度都在這個區間，用戶幾乎不會注意到這種加載延遲。所以我們不需要增加額外的加載動效來填充這段加載時間，不然可能會起到畫蛇添足的反面效果。

試想一下，如果在每個頁面加載的過程中都加上加載動效，不僅會分散用戶的注意力，并且屏幕上總出現不斷跳動的內容，會讓人感到很焦躁。

1-2 秒間

如果加載時間超過 1 秒，用戶就會感知到這個加載過程，這個時候我們就可以考慮適當添加加載動畫，緩解用戶等待的焦急感。

微加載：1-2 秒的加載時間對用戶來說，說長不長說短也不短，優先推薦輕量級的動畫加載形式，為用戶提供一種進度感。

在下載內容的過程中，使用這種輕量級的環形動畫來顯示加載進度，簡潔清晰，而且還能作為組件來復用，能夠極大提升工作效率。

骨架屏：用于整頁加載，這種加載形式在產品中的應用也越來越頻繁。骨架屏可以讓用戶在等待加載的過程中，先了解頁面的架構。

在骨架屏基礎上，可以“選裝”一些好看的效果，增加頁面加載時的視覺體驗觀感：

微光效果：在骨架屏基礎上添加微光效果，光感的加入能將用戶的注意力從等待中轉移開，有效地減少等待感知。

脈沖效果：效果和微光效果很像，差異的地方在于脈沖效果用于單個的任務或卡片列表。

2-10 秒

這個加載時間對于用戶來說已經很長了，對于設計師來說，需要對這段加載時間進行合理有效地設計，來提升用戶體驗。

時間提示：在開發中很難以分和秒為單位來精確地估計加載時間。

如果在加載的過程中，想給用戶一個期望的時間值，告訴用戶整個加載過程需要多長時間，我們可以用“這可能需要幾秒鐘”這種提示方法，既能展示加載需要的時間，又能給用戶一個時間預期。

進度條：最常使用的加載形式，加載過程中使用緩入動畫會讓整個過程看起來更像在加速。

分步提示：如果加載過程過長，可以將整個過程分為幾個不同的步驟，幫助用戶預估操作完成需要的時間。如果系統正在處理多個項目，分步提示的設計能讓用戶明確了解已完成的操作。

10 秒以上

百分比加載：使用百分比加載雖然不能告訴用戶加載完成需要多長時間，但是能提供一種過程感，讓用戶自己來估計加載時間。圓形進度條+百分比是最常見的加載形式。

需要注意的是，不要在加載到 99%的時候讓進度條卡住不動，這樣會讓用戶感到焦急。

后臺加載：如果一項任務需要加載很長時間，我們不能讓用戶看著進度條干等，其他什么都做不了，這種情況我們可以考慮將任務放到后臺去加載。

在 Google Drive 中上傳較大的文件時，系統會立即給出反饋，將任務窗口縮放到屏幕的右下角，我們可以通過這個小窗口檢查上傳進度和上傳情況，而且還不耽誤使用頁面上的其他功能。

最后

把加載細分成這五種模式，可以覆蓋很多使用場景，這樣的對癥下藥既能保證用戶體驗，還能讓產品豐富化，起到錦上添花的作用。

在對的時間和對的場景下做對的事，這句話用在什么地方都不為過，設計也是一樣。

最后考慮到大家經常使用卡片式 UI 排版，為大家整理了 90+個 iOS 卡片模板，源文件已經打包好，附件下載！

慢慢來比較快，希望對你有幫助！

歡迎關注作者微信公眾號：「Clip設計夾」