加載設(shè)計(jì)對于用戶來說也是非常影響體驗(yàn)的一個方面，產(chǎn)品需要應(yīng)用合適的加載設(shè)計(jì)。

為什么好多電梯都設(shè)計(jì)成鏡面？

這其實(shí)是為了緩解人們因等電梯時間長而帶來的焦慮，用戶的視線被鏡子轉(zhuǎn)移，同時還能避免了大家都在一起等電梯的尷尬，有效地緩解了等待電梯過程中焦慮。

用戶感知的實(shí)時反饋只需0.1秒，這是產(chǎn)品用戶體驗(yàn)很流暢的狀態(tài)，超過0.1秒的反饋速度，用戶就能感覺到不實(shí)時，可見用戶對實(shí)時反饋的感知有多快。

伴隨著反饋延遲速度的增加，用戶等待的時間成本會增加，接下來就會引發(fā)系列的負(fù)面效應(yīng)。當(dāng)然，造成延遲的原因有很多，不單單是產(chǎn)品體驗(yàn)的原因，還可能會是表單需要提交給服務(wù)器做驗(yàn)證才能反饋、后臺復(fù)雜的數(shù)據(jù)計(jì)算時間、網(wǎng)絡(luò)狀況不好等。

延遲對用戶的影響

延遲其實(shí)是再正常不過的體驗(yàn)了，關(guān)鍵是延遲對用戶造成的影響有多大。

流暢體驗(yàn)時間是0.1秒，那意味著超過這個時間都可以算是有延遲。

在人機(jī)交互中，用戶是在跟產(chǎn)品溝通，用戶與界面互動一次就會產(chǎn)生一次加載。如果用戶操作提交，頁面卻沒有立即反饋，隨著延遲時間的推移，用戶會怎么想？

• 2秒：產(chǎn)品可能需要做一些處理，可以理解。
• 5秒：反復(fù)操作未反饋的界面，造成加載的壓力更頻繁。
• 10秒：用戶已經(jīng)快要忍受到極限了，盡力說服自己下一秒就可以加載完成。
• 13秒：用戶基本會認(rèn)為是產(chǎn)品Crash了，忍無可忍，無需再忍，果斷做出離開的打算了。

2秒是產(chǎn)品比較好的一個體驗(yàn)原則，是用戶能接受延遲的最佳等待時間。

用戶從感知延時到最后離開，映射出用戶對產(chǎn)品的態(tài)度也從友好轉(zhuǎn)而崩潰。既然產(chǎn)品中延遲無法避免，但我們可以通過體驗(yàn)設(shè)計(jì)來緩解用戶的感知到的加載時間，能明確告知用戶加載進(jìn)度的體驗(yàn)肯定肯定更好。

用戶在與產(chǎn)品交互過程，好比打電話：你問了個問題，對方不回答，可能都睡著了，等到你都崩潰了。

但如果我們豐富加載設(shè)計(jì)的體驗(yàn)，感受就完全不一樣了。就好比跟真人在當(dāng)面交流，問個問題，對方結(jié)巴，抓耳撓腮，你能很清晰地判斷出狀況，不至于崩潰。

加載設(shè)計(jì)就等同于那個真人的表達(dá)，有進(jìn)度、有動畫、有狀態(tài)等，加載也是一種過程的反饋，友好地緩解了用戶等待中的焦慮情緒。

比如，游戲讓玩家進(jìn)入心流狀態(tài)，有一個很重要的原因就實(shí)時反饋。玩家的一個閃現(xiàn)技能放出去，有延時會有什么后果，肯定直接掛了，這對玩家和游戲都會造成負(fù)面影響。

部落沖突的游戲，在發(fā)生網(wǎng)絡(luò)延時的時候，玩家還可以清晰地看到戰(zhàn)爭的繼續(xù)。在這個過程中，玩家看不見的是服務(wù)器在火速拼命地?fù)屝蘧€路。等玩家反映過來，線路可能都已連接好了，這也是產(chǎn)品中的一種加載策略。

技術(shù)定義加載類型

加載的類型其實(shí)是屬于技術(shù)開發(fā)的范疇，產(chǎn)品和交互設(shè)計(jì)如果不了解這塊，就沒法結(jié)合不同的場景做出匹配的加載設(shè)計(jì)。產(chǎn)品中如果不完善加載設(shè)計(jì)，就會造成體驗(yàn)上的缺陷。

上面剛分析了對用戶的影響，加載設(shè)計(jì)根據(jù)開發(fā)場景的不同基本可以分為以下6種開發(fā)類型。

1. 分步加載

這就是我們打開頁面經(jīng)常會看到，文字全出來，中間的圖片還沒，通?？赡軙趫D片上有個菊花在轉(zhuǎn)，或者顯示帶品牌標(biāo)識的圖片占位符。

2. 漸進(jìn)式加載

不同于分步加載的是先下載再慢慢地變清晰，讓用戶有個直觀感受，比如好多界面加載過程中先看到有點(diǎn)模糊的圖，再加載高清圖片，這樣的體驗(yàn)方式很受用戶的歡迎。

3. 懶加載

懶加載又叫延遲加載，通常一個界面的內(nèi)容是同步加載的。這樣的話，很多商品的介紹頁面很長，加載就會占用太多的網(wǎng)絡(luò)資源，用戶可能都不看，就造成了占用網(wǎng)絡(luò)資源的浪費(fèi)，影響加載速度。

所以，懶加載就是頁面瀏覽到哪里加載哪里，將網(wǎng)絡(luò)資源集中在用戶瀏覽的當(dāng)前內(nèi)容，大大提高了加載速度。一般界面圖片較多的界面會比較適合懶加載。

4. 預(yù)加載

預(yù)加載，顧名思義就是判斷用戶的加載速度，為用戶提前加載好下一步要看的內(nèi)容。

這和上面的懶加載策略恰恰相反，在不考慮流量的情況下預(yù)加載會好點(diǎn)，反之就可以選擇懶加載。預(yù)加載比較適合圖片較少界面的加載策略。

5. 智能加載

智能加載在不同的網(wǎng)絡(luò)狀態(tài)加載不同的數(shù)據(jù)，在4G網(wǎng)絡(luò)狀態(tài)下瀏覽視頻的時候就會提醒你需要多少流量是不是繼續(xù)觀看的，WIFI下就可以任性地顯示大圖，高清的視頻。

6. 服務(wù)端加載

我們在每個產(chǎn)品中樹立自己的ID就需要注冊登錄，產(chǎn)品想獲取用戶信息往往也是通過表單的形式效率最高。

這些信息的提交都發(fā)到了服務(wù)端，服務(wù)端再錄入數(shù)據(jù)庫匹配計(jì)算，然后才會返回一些信息參數(shù)，比如密碼錯誤、登錄名不存在、郵箱格式不對等。這些用戶看不到，都是服務(wù)端再處理。

寫在最后

以上不同場景中的加載設(shè)計(jì)發(fā)揮不同的作用，結(jié)合到體驗(yàn)設(shè)計(jì)中，常見的加載場景有啟動頁設(shè)計(jì)、登錄注冊頁設(shè)計(jì)、加載新頁面設(shè)計(jì)、加載進(jìn)度設(shè)計(jì)、內(nèi)容圖文預(yù)加載設(shè)計(jì)、下拉刷新設(shè)計(jì)、上拉加載更多設(shè)計(jì)等。

一些產(chǎn)品中啟動頁的設(shè)計(jì)。

內(nèi)容加載中的狀態(tài)。

#專欄作家#

VV體驗(yàn)，微信公眾號：VV體驗(yàn)，人人都是產(chǎn)品經(jīng)理專欄作家?！逗迷O(shè)計(jì)，有方法》作者?；燠E于互聯(lián)網(wǎng)圈，致力于研究用戶體驗(yàn)設(shè)計(jì)，著力打造極致的體驗(yàn)設(shè)計(jì)，主導(dǎo)和參與設(shè)計(jì)過多款熱門的互聯(lián)網(wǎng)產(chǎn)品，遍及多個領(lǐng)域。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash， 基于CC0協(xié)議