[交互基礎]系列之移動端頁面載入詳解

註:鑒於目前交互設計的知識體系較為混亂,我寫了這個[交互基礎]系列專題,旨在整理移動端交互設計基礎知識。鞏固自己的知識體系,也與大家共勉,打好基礎,才能飛得更高!

[交互基礎]系列之移動端頁面載入詳解

一、人機交互

交互設計是定義、設計人造系統行為的設計領域。這是一個非常廣的領域,我們在這裡,只探討IT產品的人機界面交互。舉一個例子,用戶點擊一個確定按鈕,完成了表單的提交,此時APP提示用戶「提交成功」,這是用戶與APP之間的一個交互過程。從點擊按鈕到彈出提示,這個過程發生了?在交互層面又需要考慮哪些問題呢?

二、用戶——客戶端——伺服器

[交互基礎]系列之移動端頁面載入詳解

用戶與客戶端進行人機交互,如上述的例子,點擊確定按鈕,客戶端將用戶的操作轉化為相應的指令,向伺服器請求數據,若網路和伺服器正常,伺服器返還數據到客戶端,用戶看到自己操作所引發的結果。在這個過程中,涉及到用戶與客戶端之間的交互客戶端與服務端之間的數據傳輸這兩個部分。

從用戶點擊確定按鈕後到伺服器返回數據到客戶端,這個過程中需要耗費一定的時間,我們需要呈現一個載入的過程來告訴用戶APP正在做什麼,以緩解用戶的焦慮情緒。當伺服器返回數據以後,客戶端需要提示用戶」提交成功」,以告知用戶操作的結果。當然,還會有異常的情況,客戶端與伺服器之間傳輸數據的過程中,可能遭遇網路不穩定、伺服器異常等情況,這也需要及時告知用戶,以避免用戶不知所措、產生焦慮,影響體驗。

載入發生的原理都是一致的,即用戶與客戶端發生人機交互以後,請求數據與返回數據的過程。但是在不同的場景下,需要考慮不同的載入處理方式。

三、載入模式

[交互基礎]系列之移動端頁面載入詳解

頁面載入的兩種模式:同步載入非同步載入

1.同步載入

  • 定義:同步載入請求執行某一任務,在該請求返回數據之前,請求端什麼也不幹就在等待,直至該請求返回數據,再執行下一步操作。(例如產品設計完成之後才能交付給開發。)

  • 場景:登錄註冊、掃碼支付、提交訂單、上傳資料、修改資料等需要驗證、提交信息的情況或下一步的結果走向與當前操作相關的情況,也稱順序操作。(例如登錄需驗證賬號信息,成功了就進入應用主頁,失敗則仍停留在登錄界面)

  • 特點:及時性,載入完成/失敗會立即得到反饋結果,上下步操作的關聯性強,更易於實現。但是如果載入速度太慢,很可能長時間停留在載入頁面,使用戶產生煩躁的負面等待情緒。

2.非同步載入

  • 定義:非同步載入請求執行某一任務的同時,可以繼續執行下一操作,等到收到返回數據,再處理該任務。(例如你要燒水和掃地,為了提高效率,先燒水,再在燒水的過程中掃地,等水燒開了,再去處理開水。)

  • 場景:不涉及重要資料和順序操作的數據載入都適合非同步載入。如大量圖片、視頻的頁面,長列表數據的列表頁,內容的詳情頁面等。

  • 特點:有效得提升了用戶體驗,頁面的跳轉和載入動畫讓用戶覺得反饋很及時,增強了操作的流暢度。但是需要處理好操作之間的關聯性,否則用戶容易產生疑惑。

四、載入策略及表現形式

運用載入模式的兩種原理,可以延伸出多種載入策略以對應不同的場景需要。載入策略是方法,載入模式是原理。需要注意的是,不同的載入策略運用了不同的載入模式,並不是簡單的一對一的關係,要學會配合使用。

1.啟動頁載入

打開APP有一個載入的過程,在這個過程中,可能對同步載入和非同步載入均有涉及。

  • 同步載入時的常用策略:載入完某些數據才能進入應用,適合對某些關鍵數據進行檢查,例如檢查用戶的身份信息,此種策略是為了保證一些關鍵數據的可控性。

  • 非同步載入的常用策略:進入應用內再載入使用的數據,例如進入應用再載入首頁,可以提高進入應用的速度。

APP啟動頁顯示的長短取決於需要載入的內容的多少。一些APP在啟動頁之後還設置了廣告頁面(一般可跳過),則考慮更多的是廣告營銷等商業目的。

[交互基礎]系列之移動端頁面載入詳解

2.當前頁載入

當前頁載入大多屬於同步載入。

  • 定義:點擊觸發操作后,在當前頁進行數據載入並提示,數據載入成功后,才能進入下一頁面。(網路異常的話,就只能待在當前頁面。)

  • 場景:適用於需要判斷及驗證處理的情況,或下一步走向與當前操作結果相關的情況。例如登錄註冊、表單提交等。

  • 作用:載入完成/失敗會立即得到反饋結果,上下步操作的關聯性強,更易於實現。

  • 缺點:載入時間超過3S,容易使用戶產生焦慮的情緒。

  • 表現形式:如下圖所示,登錄過程中使用多態按鈕表示驗證過程,保存收貨地址可使用模態載入的方式過渡表單的提交過程。

[交互基礎]系列之移動端頁面載入詳解

3.下一頁載入

下一頁載入大多屬於非同步載入。由於下一頁的內容類型、內容量等因素的影響,又有多種處理方式。

  • 定義:點擊觸發操作后,頁面跳轉至下一頁並載入內容。

  • 場景:大多數應用的內容頁面都採用這種方式。

  • 作用:極大的增強了流暢的感覺,畢竟在當前頁卡住與在下一頁卡住是兩種不同的感受。網路異常的情況下,用戶點擊觸發操作,若一直停留在當前頁面沒有變化,很容易產生煩躁的負面情緒;而跳轉到下一頁載入,一定程度上可以緩解負面情緒,因為在用戶發出指令的同時,應用的頁面就發生了跳轉,讓用戶看到了操作帶來的變化,只是因為網路差沒有儘快的載入成功而已。

3.1.整體載入

  • 定義:一次性載入完所有的內容后,再展示給用戶。

  • 場景:適用於頁面的內容較為單一的情況,同時在H5 頁面中大多採用這種載入方式。

  • 作用:保證了內容的整體性,能系統性的閱讀所有內容。

  • 缺點:等待感顯得比較強烈,超過3S容易使用戶產生焦慮的情緒。因此,在地鐵等信號不好的地方使用手機網頁獲取內容的體驗是比較差的。

  • 表現形式:如下圖所示,APP的載入過程通常使用能強化品牌效果的趣味動畫,或者簡單的循環載入、菊花載入樣式,但趣味性動畫的設計更能吸引用戶,減輕用戶等待時的焦慮感。H5 頁面通常使用進度條來表示載入的進度。

[交互基礎]系列之移動端頁面載入詳解

3.2.分步載入

分步載入即先載入文字,再載入圖片。頁面通過整體載入的方式將文字載入成功后,再使用分步載入的方式來呈現頁面的內容,即呈現文字內容和圖片佔位符,再載入圖片。這樣做是為了減短整體載入的時間,讓內容儘快呈現,減少用戶的等待時間。由此,我們可以看出,我們經常要對多種載入策略進行搭配使用,以達到更好的用戶體驗。

  • 定義:根據頁面上的資源類型進行先後載入,優先載入占網路資源較小的文字,圖片在載入過程中使用佔位符,直到圖片載入成功。文字→圖片→視頻→其他資源。

  • 場景:適用於圖文內容交織的頁面,如新聞列表頁面、詳情頁面等。許多應用的首頁都有大量的圖文內容,就適合用這種載入方式。

  • 作用:可以讓用戶快速地了解界面信息布局及閱讀內容。

  • 缺點:開始的瞬間可能會丟失掉重要的關鍵信息,用戶初次感知可能會認為產品出現問題了。

  • 表現形式:如下圖所示的圖文列表、內容詳情頁面,先載入文字,圖片載入過程中使用佔位符填充位置,佔位符一般使用灰框顯示,或在灰框內加入品牌標識,強化品牌效果。

[交互基礎]系列之移動端頁面載入詳解

載入佔位符(Skeleton Screen ):載入佔位符是分步載入的另一種形式,即先載入頁面的框架,然後再載入框架里的內容。這種形式所展示的是內容的大概輪廓,用於內容框架固定的頁面,若頁面可能出現空數據也不宜使用,需保證最後呈現的內容與展示的框架大致相符。如下圖所示,Facebook、簡書等採用了這種載入方式。載入佔位符的方式可根據實際情況配合分步載入、分屏、分頁等載入方式,可達到更佳的效果。

[交互基礎]系列之移動端頁面載入詳解

3.3.分屏載入

分屏載入又稱延遲載入或懶載入。

  • 定義:先載入框架和文字,再載入第一屏的數據,向下滾動到哪裡載入到哪裡。

  • 場景:適用於多屏且圖片資源較多的頁面,如電商應用商品展示頁面。

  • 作用:僅載入當前視窗內的圖片,頁面載入速度快,可以減輕伺服器的壓力,節約流量,用戶體驗好。

  • 缺點:也許會丟失重要的關鍵信息,無法建立信息獲取的閉環。

  • 表現形式:如下圖所示,淘寶的商品展示頁面,只載入首屏的圖片,頁面上滑時,下方圖片進入視窗,顯示佔位符,載入完成後顯示商品圖片。

[交互基礎]系列之移動端頁面載入詳解

3.4.分頁載入

  • 定義:展示列表數據時,例如默認展示 20 條,滾動到最後的時候,自動再載入 20 條或者手動點擊載入。

  • 場景:適用於長列表、商品列表、諮詢列表或瀑布流。

  • 作用:避免一次性載入大量數據造成的體驗不佳,用戶可以有選擇的一直向下滾動,不需要手動點擊下一頁。

  • 缺點:把用戶帶入無盡瀏覽的模式,沒有盡頭,用戶容易迷失,不方便快速索引定位到某一內容。

  • 表現形式:如下圖所示,分頁載入分為手動點擊載入和自動載入兩種形式。

[交互基礎]系列之移動端頁面載入詳解

3.5.預載入

預載入與分屏載入相反,就是提前載入的意思。

  • 定義:提前載入數據,當用戶需要查看時可以直接從本地緩存中渲染。

  • 場景:信息需要即時刷新,適用於預載入后消耗的流量較少的場景,如信息、消息等。(預載入占網路資源較小的元素如文字,是一種平衡網路流量和流暢體驗的方法。)

  • 作用:用戶進入下一級界面無需載入過程,給用戶流暢的體驗。

  • 缺點:為了換取更好的用戶體驗,增加伺服器前端壓力,犧牲了伺服器前端性能。假設在非wifi環境下,用戶不確定查看的情況下,浪費了流量。

  • 表現形式:如下圖所示,iOS的信息,當用戶未查看時,信息詳情實際上已經預載入出來了;微信的公眾號消息,預載入消息的文字部分及框架,圖片部分需聯網獲取載入。這是考慮到圖片本身較大,如果預載入下來,損耗較多流量的同時占本地緩存太大,預載入文字及框架等占網路資源較小的元素,節約流量,也保證了用戶在無網/弱網情況下查看消息的體驗。

[交互基礎]系列之移動端頁面載入詳解

4.下拉載入

下拉載入的運用十分廣泛,一個優秀的刷新動畫可以使載入過程傳遞出情感化、人性化和品牌化。

  • 定義:頁面下拉,出現載入動畫,釋放后對頁面進行重新載入。

  • 場景:適用於界面信息會經常更新或變更的情況。(這個場景應該任何應用都有吧。)

  • 作用:已成為用戶習慣的載入方式,方便用戶刷新當前頁面,獲取新數據。

  • 缺點:非首屏,無法進行該手勢操作。

  • 表現形式:如下圖所示,是下拉載入的各種表現形式。當然,一個符合品牌調性的趣味性載入動畫更能吸引用戶,但一個普通的載入過程可能是產品希望用戶更加專註於內容本身。

[交互基礎]系列之移動端頁面載入詳解

5.智能載入

  • 定義:考慮網路環境、用戶流量成本,選擇合適的方式去呈現圖片、視頻、音樂等高流量消耗的資源。例如以下的處理方式:

在WIFI環境下:優先載入高質量的圖片、視頻、音樂等。

在4G環境下:提示是否終止下載行為或自動停止下載行為,優先載入普通甚至停止載入圖片、視頻、音樂等,並提示用戶當前網路環境可能消耗大量流量。

在弱網環境下:默認載入低質量甚至停止載入圖片、視頻、音樂等,並提示用戶當前網路環境異常。

  • 場景:適用於有大量圖片或視頻的應用,如新聞資訊類應用、視頻類、直播類的應用。

  • 作用:根據場景來控制流量消耗,幫助用戶避免出現流量非自願損耗的情況。

  • 缺點:不一定能準確地滿足用戶的需求。(土豪不會考慮流量因素。)

  • 表現形式:如下圖所示,需檢測用戶當前設備的網路環境。非WIFI環境下進入直播間,提示用戶當前網路環境觀看直播會消耗大量流量;查看今日頭條新聞,非WIFI環境下,文章內的圖片默認顯示縮略圖,用戶可選擇性地顯示大圖,避免流量消耗過多,WIFI環境下直接顯示大圖,以保證體驗更佳。

[交互基礎]系列之移動端頁面載入詳解

6.緩存載入

  • 定義:應用從本地資料庫獲取已緩存的數據,以至在無網/弱網的情況下,用戶仍可查看一些內容或使用一些功能。

  • 場景:適用於新聞資訊、小說、視頻等內容列表及已查看的內容詳情的緩存及相關的功能離線操作,即時通訊消息的緩存及相關功能的離線操作。(同時也要考慮流量因素,WIFI環境下和4G環境下緩存處理應差異處理。)

  • 作用:提高應用的載入效率,在無網/弱網環境下,仍可查看一些內容或使用某些功能,應用內容列表不至於空白;針對用戶可能二次查看的即時內容,緩存處理可以減少流量損耗。

  • 缺點:應用的緩存需考慮容量限制和清理時間,否則緩存量越來越大,會導致手機不堪重負,運行緩慢。

  • 表現形式:如下圖所示,今日頭條緩存了資訊列表及諮詢內容的文本及框架,便於用戶無網路時查看(如在地鐵上),體驗遠遠好於內容空白;優酷視頻在離線狀態下緩存了內容展示頁的文字及框架(封面圖較多,佔得緩存比較大);微信朋友圈支持離線點贊,先將用戶的操作保存到本地,待有網時,再上傳操作,對用戶來講,操作得到了滿足。

[交互基礎]系列之移動端頁面載入詳解

五、關於載入的處理注意點

請求數據的過程必然要耗費一定的時間,而且可能會存在網路異常、伺服器異常等情況,導致這個請求的時間更長。而等待容易讓用戶產生煩躁、焦慮的情緒,一旦處理不好,用戶對於產品的好感度就會大大降低,以致卸載產品。我覺得設計師可以從以下幾個方面考慮優化載入的過程:

1.合理採用預載入和緩存載入的方式

以閱讀類的應用為例,用戶讀了第一頁,應用提前載入了後面幾頁,這樣用戶翻頁就不需要再次載入了。這種體驗就比較好,但是需要預測用戶可能的使用行為,也要考慮設備的網路環境和流量成本,如果內容數據量比較大,又是在非WIFI環境下,就不建議使用預載入機制了。

使用緩存載入,就必然要考慮緩存的容量限制和使用時間,關於緩存,會在以後的文章做詳細說明。

2.設計有趣的載入動畫

一個好的載入動畫需要結合品牌,同時也要體現出一定的趣味性,用趣味性的載入動畫吸引用戶,可以在一定程度上緩解用戶等待時焦慮的情緒。

3.及時退出

如果載入時間太長,動畫再有趣,用戶也不會買賬的。因此我們可以考慮,為用戶提供退出載入的選項;也可以考慮設置一定時間內載入還沒有成功的話,退出載入過程,讓用戶選擇是否重新載入。

了解載入的原理,合理地使用(或搭配使用)載入的策略,才能設計出體驗更佳的載入方案。

作者:雨無聲,微信公眾號:int-PD,快服科技交互設計師, 2 年互聯網交互設計經驗,已主導設計多款移動端產品。

發表迴響