2022-5-16 純純
在人機(jī)互動過程中，用戶與界面的每一次互動都是一次加載過程。加載設(shè)計對于使用者來說是非常影響體驗的一個方面，后臺復(fù)雜的數(shù)據(jù)計算時間、網(wǎng)絡(luò)狀況不好都有可能造成等待時間長而帶來焦慮，今天就讓我們好好來聊下加載，以及怎么讓加載的體驗變得更好。
加載指的是用戶在客戶端發(fā)出一個指令后，直到出現(xiàn)反饋結(jié)果時，中間這段時間內(nèi)計算機(jī)完成的一系列執(zhí)行動作，所以只要你在App中操作請求更多數(shù)據(jù)那就不可避免有加載。
根據(jù)一份調(diào)查得出，用戶能夠忍受加載的最長時間在：3到8秒。8秒是一個臨界值。但現(xiàn)在的高速互聯(lián)網(wǎng)真是把我們寵壞了，如果一個頁面的加載時間超過4秒，可能會被用戶直接退出，除非Ta一定要打開那個頁面。
這里有個很重要的數(shù)據(jù)叫跳出率，在谷歌的一項調(diào)查中就已經(jīng)發(fā)現(xiàn)：
1-3 秒的加載時間跳出率提高了 32%。
1-5 秒的加載時間跳出率提高了 90%。
1-6 秒的加載時間跳出率提高了 106%。
為了降低用戶等待的焦慮，獲得更好的用戶體驗，我們必須讓用戶知道我們正在努力加載，同時要讓加載更有趣來分散用戶等待的注意力。
首先我們要先了解以下這些App中最常見的加載場景，也就是那些發(fā)出指令后應(yīng)用需要長時間處理的加載過程。
下拉刷新（請求最新數(shù)據(jù)）+上滑加載（請求更多數(shù)據(jù)）
▲ins_下拉和上滑
當(dāng)你在多個App中切換使用時，超過一定時間間隔就需加載數(shù)據(jù)。
▲系統(tǒng)后臺切回
當(dāng)應(yīng)用出現(xiàn)異常關(guān)閉、應(yīng)用閃退等情況重新啟動app，需要進(jìn)行數(shù)據(jù)加載。
▲App啟動加載
頁面加載新的數(shù)據(jù)，涉及原生跳原生或者H5頁面。
▲Moo音樂_頁面跳轉(zhuǎn)
在特定的時間內(nèi)頁面自動進(jìn)行數(shù)據(jù)刷新，例如每天0點更新排行，大部分用在運營或跟時間相關(guān)的場景。
▲番茄小說_排行定時更新
通訊類社交的App都采用實時推送機(jī)制，不需要用戶手動操作也能接收到最新的數(shù)據(jù)。
▲Quack社交聊天
加載器是最早被使用的方式，適用于快速加載，這也是使用率最高的一種。
▲旋轉(zhuǎn)菊花記載
然而這種加載器有個缺點就是無法告知用戶需要等多久，Nielsen Norman早在1993年就提到響應(yīng)時間和loading動畫，“如果計算機(jī)無法提供快速響應(yīng)，則應(yīng)該以百分比的形式向用戶提供持續(xù)反饋?！薄綧yers 1985 論文，“計算機(jī)-人機(jī)界面百分比進(jìn)度指標(biāo)的重要性”】
所以加載器和進(jìn)度條成了黃金組合，適用于長時間（10秒或更長）的加載過程，顯示一個操作將花費多長時間以及目前所處的狀態(tài)，通常有線性進(jìn)度、百分比、直觀數(shù)字等。
▲Cream M.
▲Gleb Kuznetsov?
▲有道樂讀、嗶哩嗶哩漫畫
在此基礎(chǔ)上加載器也開始往趣味/品牌化發(fā)展，使用情感化加載動畫，可以讓等待過程變得輕松、愉悅。Tips：搭建符合目標(biāo)用戶群體的生活場景，能拉近與用戶之間的距離。
▲摩拜單車
▲ARCADE STUDIO
吸引用戶的眼球，感覺時間會過得更快一點，短暫忘記等待的過程。
▲Markus Magnusson
▲DeeKay
▲RWDS
通過品牌logo或產(chǎn)品相關(guān)的圖形呈現(xiàn)在界面上，將品牌基因融入整個Loading動畫中。
▲Medium
▲有道樂讀
▲ 開言
加載器和進(jìn)度條這一組合有很多變體，可以應(yīng)用在不同的頁面位置：
當(dāng)前頁面內(nèi)容需一次性加載完成后才能顯示內(nèi)容，這是頁面加載最原始的狀態(tài)。當(dāng)頁面元素較多時，內(nèi)容呈現(xiàn)的等待時間會變得很長，一旦時間太久要給予提示。
當(dāng)用戶執(zhí)行某個操作時，為了防止用戶繼續(xù)操作導(dǎo)致數(shù)據(jù)加載失敗，則用Toast的樣式來提示正在加載。在畫面中間出現(xiàn)提示框，有時會加上黑色透明底蓋在畫面中間，這種情況一般除了返回上一級的操作可點，其他操作將受到限制。
可以是在頂部或底部欄上，告知用戶等待的時間長度，讓用戶有一定的心理預(yù)期。
通過手勢操作，快速加載和更新當(dāng)前頁面的內(nèi)容。
在特定位置進(jìn)行加載，功能指示更明確，避免用戶反復(fù)操作。
加載器這種方式相對比較簡單，但也會阻斷用戶的其他操作，用戶只能等待加載完成才能繼續(xù)操作。會給人的感覺時間較長，且對于加載出來的頁面沒有任何預(yù)期。
那什么時候是需要中斷用戶操作呢？主要有以下兩種情況可以作為判斷：
1-當(dāng)前的操作未成功，則接下來的操作或結(jié)果也無法顯示，例如：啟動App、手機(jī)支付、渲染濾鏡等；
2-當(dāng)前的操作本身不能與其他操作同步進(jìn)行，需停留在當(dāng)前界面保證操作完成，例如：掃描、遷移資料、實時翻譯等。
如果中斷時間較短可以使用toast加載提示，時間較長則建議用專門的單頁且有可取消的按鈕來提示加載過程，以引起用戶的重視。
· 適用性廣
· 拓展性強(qiáng)（趣味性及品牌宣傳）
占位符分布加載就是當(dāng)界面中圖文同時存在時，如果獲取完所有信息才顯示所耗費的時間是很長的，因此為了縮短用戶等待的時間，會選擇優(yōu)先加載快的元素（文字），慢的元素（圖片視頻等）則用其他的方式占位，最終等待加載全部完成。較為適合feed或瀑布流模式。
分步加載的好處是在等待加載的時間里用戶可以看到相關(guān)的文字內(nèi)容，不會像空白頁加載或Toast加載，只能默默地等待加載的過程。
將圖片用灰色或灰色圖（對開發(fā)更易用）來代替，中性灰在界面中不會搶風(fēng)頭，在暗黑模式中也適用。
▲灰色色值（例如#EFEFEF）或灰色圖片
▲Youtube
在灰色圖上加入品牌元素也是不錯的方式，例如logo或吉祥物IP，將品牌人格化、情感化，輔助企業(yè)向用戶傳達(dá)產(chǎn)品的氣質(zhì)特征，在各類產(chǎn)品中廣泛運用。
▲Moo音樂、有道樂讀
通過程序提取面積較大的主色調(diào)，并設(shè)置幾種符合產(chǎn)品調(diào)性的默認(rèn)色，以防取色失敗。需保證色彩庫的顏色高級耐看，飽和度不要太高，不然很刺眼反倒引起到不好的體驗。
▲Behance、Apple Music
▲Google Search
模糊圖像也稱為模糊技術(shù)，渲染圖像的一個低質(zhì)量版本，然后過渡到高質(zhì)量版本，初始圖像的像素和 kB 都很小。為了去除偽影，圖像會被放大和模糊。
▲Behance、Unsplash
? 良好的閱讀性；
? 準(zhǔn)確區(qū)分已加載和尚未加載的內(nèi)容
骨架加載就是先加載UI布局框架，再加載框架中的內(nèi)容，細(xì)節(jié)通常按照骨架輪廓（也稱為占位UI）、文本、圖像的順序出現(xiàn)。通過這種方式直觀地提前讓用戶知道整個界面的架構(gòu)，并營造出一種漸進(jìn)的感覺，使用戶感知加載穩(wěn)定且速度快，提高了產(chǎn)品的體驗感。
“Skeleton Screens”這個詞最早出現(xiàn)在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設(shè)計師的支持，LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕，通過將被動等待變?yōu)橹鲃拥却?
被動等待是指你只是坐在那里無所事事，看著加載器轉(zhuǎn)了一圈又一圈。積極等待是當(dāng)你在等待時做一些感覺像是進(jìn)步的事情。骨架加載通過在每次屏幕更新時為用戶提供新信息來鼓勵主動等待。
通過這種方式，骨架屏幕將焦點從您等待的時間量上移開，并將其放在您面前發(fā)生的實際進(jìn)度證明上，從而使加載過程感覺更快。當(dāng)它顯示已加載的內(nèi)容和剩余的內(nèi)容時，它允許用戶構(gòu)建準(zhǔn)確的UI界面期望。
▲Medium手機(jī)版
▲Medium網(wǎng)頁版
實現(xiàn)骨架屏幕時，請確保占位符 UI 大部分準(zhǔn)確表示最終 UI 的外觀。否則，就會在期望與現(xiàn)實之間產(chǎn)生差距。
▲夸克
LinkedIn 最近開始使用 Skeleton Screens 進(jìn)行加載，骨架屏幕轉(zhuǎn)移了用戶的注意力。它使人們專注于進(jìn)度，而不是等待時間。
▲Linkin
骨架加載提升了加載界面的速度進(jìn)度，這種速度反饋表現(xiàn)的更加友好并減少了不確定性，如果加載時間比預(yù)期的要長，也可以在骨架之前短暫地顯示一個加載器，這應(yīng)該會為你爭取更多時間來完成加載。
? 顯示UI骨架布局
? 優(yōu)先加載文字；
? 加載圖像（或主顏色）質(zhì)量較低的版本；
? 再在后臺加載高質(zhì)量圖像；
? 淡入高質(zhì)量圖像，取代之前的低質(zhì)量圖像。
? 感知更快的加載速度
? 清晰的可視化進(jìn)度指示
預(yù)加載就是用戶瀏覽當(dāng)前頁面時就預(yù)加載下一級所有列表的文字內(nèi)容，當(dāng)用戶點擊進(jìn)入已加載的頁面就感受不到等待，在無網(wǎng)絡(luò)情況下也能進(jìn)行正常的閱讀，在閱讀文字的時候再進(jìn)行圖片或視頻的加載（相反地則叫懶加載，進(jìn)入頁面時再加載數(shù)據(jù)）。但是這種方式會增加客戶端和服務(wù)器的負(fù)載，也會占用一定的網(wǎng)絡(luò)帶寬。
根據(jù)不同的網(wǎng)絡(luò)狀況選擇不同的數(shù)據(jù)加載方案，最常見就是用在音樂/視頻/下載更新等占用比較大流量的產(chǎn)品，當(dāng)判斷用戶處于3G/4G或網(wǎng)絡(luò)卡斷的情況下，為了既讓用戶使用流暢也不浪費流量，會自動切換至低速低畫質(zhì)；而處于Wi-Fi條件下，會優(yōu)先選擇高清或高質(zhì)量進(jìn)行播放。
▲嗶哩嗶哩
也就是離線加載，通過現(xiàn)有Wifi資源將服務(wù)器內(nèi)容緩存到本地，無網(wǎng)絡(luò)或是弱網(wǎng)環(huán)境下讀取緩存加載。可以解決無網(wǎng)或弱網(wǎng)情況下數(shù)據(jù)獲取的問題，會占用本地的存儲空間，以及后續(xù)的緩存處理需要考慮。
加載時間過長可能會損害你的網(wǎng)站的整體用戶體驗。如果加載的速度很慢會導(dǎo)致用戶點擊多次，這時我們需給用戶一個明確的提示“網(wǎng)站正在發(fā)生的事情是什么，提供適當(dāng)?shù)囊曈X反饋”，加載失敗后最重要的是給出解決方案，讓用戶可再嘗試或?qū)で髱椭?。請記住，提供反饋是良好的交互設(shè)計和積極的用戶體驗。
▲嗶哩嗶哩漫畫、閑魚
▲Dribbble
在過去，設(shè)計良好有趣的加載器是我們所能做的最好的事情，而現(xiàn)在，漸進(jìn)式加載成為值得考慮的替代方案，它加快了等待時間感知，還清晰地呈現(xiàn)了UI布局并建立用戶預(yù)期。但這并不意味著不繼續(xù)思考更好的加載方案，期待未來出現(xiàn)更好的交互體驗。
一個好的加載應(yīng)當(dāng)具備以下特征：
1 讓用戶知道應(yīng)用程序正在運行，給出大致的等待時間，簡單的進(jìn)度條或更數(shù)字視覺化的方式；
2 告訴用戶等待的原因，在處理什么動作表明軟件并沒有崩潰而是處理請求；
3 有趣的動畫內(nèi)容來吸引注意力，讓等待變得可以忍受；
4 加入品牌，讓用戶在等待的過程中加深品牌印象，形成品牌感知；
5 盡量使用非中斷式加載，降低等待的心理感知時長。
原文地址：站酷
作者：_阿丹a_
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://bouu.cn