交互基礎(chǔ):關(guān)于APP加載狀態(tài)類型匯總

3 評論 17253 瀏覽 191 收藏 10 分鐘

文章針對APP加載狀態(tài)展開了較為系統(tǒng)的分析總結(jié),希望能夠?qū)δ阌兴苡谩?/p>

當我們進入一個應(yīng)用或在應(yīng)用中切換跳轉(zhuǎn)時,經(jīng)常會遇到網(wǎng)絡(luò)延遲或頁面內(nèi)存過大導(dǎo)致加載過慢需要用戶等待幾秒的場景,而這些場景是提升產(chǎn)品體驗的重要環(huán)節(jié),也是移動應(yīng)用設(shè)計過程中需要考慮的重要因素。

我們需要針對不同的加載內(nèi)容設(shè)計合適的加載策略,而加載策略會受到加載內(nèi)容的大小、內(nèi)容的數(shù)量、網(wǎng)速等因素的影響。針對這些影響因素,我們需要設(shè)計對應(yīng)的加載形式。常見的形式有全頁面加載、占位符加載、分步加載、懶加載、進度條加載,以及預(yù)加載等幾種形式。

全頁面加載

全頁面加載,顧名思義是將整個頁面一起加載,這是頁面加載最原始的狀態(tài),當頁面元素較多時,這種載入方式需要將所有內(nèi)容都下載后才顯示內(nèi)容,內(nèi)容呈現(xiàn)的等待時間會變得很長。在加載時頁面會處于全空白或展示一個gif,比較常見的就是頁面中央的菊花gif圖。

由于這種加載gif帶有時間不確定性,如果等待時間過長,用戶很容易失去耐心而離開。目前很多app將這種加載動畫設(shè)計成許多有創(chuàng)意的形式來留住用戶的注意力。例如猩便利使用自帶品牌形象設(shè)計的一個十分滑稽可愛的猩猩gif圖,遇到網(wǎng)絡(luò)加載過慢時可以很好的緩解用戶焦慮。58同城也使用了帶有自身品牌特色的加載gif,形式十分有趣。

占位色塊加載

占位色塊加載就是在頁面即將出現(xiàn)的位置加載占位色塊,等到數(shù)據(jù)加載完成后將數(shù)據(jù)陸續(xù)填進色塊,給用戶加載很快的感覺,體驗會比全頁面加載流暢。這種方式適合內(nèi)容排版布局固定的頁面,先加載大致輪廓,再加載細節(jié)。但是需要注意的是,如果使用占位色塊的頁面改版了,占位圖也需要進行對應(yīng)的更新,不然加載前后有閃屏的感覺。

分步加載

分步加載是占位色塊加載的優(yōu)化形式,為了讓用戶能盡快地看到部分內(nèi)容,了解頁面的基本信息。在多元素的頁面中,頁面先載入基本框架和內(nèi)存較小的文字內(nèi)容,再加載較大的圖片、視頻等內(nèi)容,讓用戶先看到部分內(nèi)容,其他內(nèi)容再逐步加載,用戶在網(wǎng)速不夠快時也能提前預(yù)覽即將出現(xiàn)的內(nèi)容,這就是分步加載。

在分步加載的頁面中,當只加載了部分內(nèi)容時,未加載的內(nèi)容會對頁面的美觀程度產(chǎn)生影響,同時也會影響用戶對頁面內(nèi)容的理解。目前有許多app會在默認圖上設(shè)計一些有品牌識別的圖片來代替未加載的圖片,使界面在未加載圖片內(nèi)容時,也能有較好的展示效果,讓用戶更好地理解界面含義,同時也能更好的傳達品牌。

懶加載

懶加載,顧名思義就是一種偷懶的加載方式,用戶打開app時僅加載用戶可以看到的區(qū)域,看不到區(qū)域則需要通過用戶的瀏覽行為來喚起內(nèi)容的加載。例如當頁面滾動到底部盡頭或下拉頁面時,才會自動加載內(nèi)容。

懶加載一般用在無盡的信息流頁面中。這種方式能有效的提升頁面的打開速度,讓用戶可以順暢地瀏覽而不用一直等待加載。在進行懶加載時,一次要加載的內(nèi)容數(shù)量和加載時間段一般會根據(jù)頁面展示內(nèi)容的大小、高度和用戶的瀏覽速度來決定。

預(yù)加載

預(yù)加載是和懶加載恰恰相反的加載方式,它不僅不會偷懶,而且會提前準備好你即將瀏覽的內(nèi)容。當a頁面加載完成時它并沒有停下來,而是悄悄的加載你即將打開的b頁面,在你打開b頁面時可能c頁面也一起準備好了。

預(yù)加載一直走在用戶前面,給用戶一種無縫連接的感覺,享受到極快的加載速度。

而使用這種方式服務(wù)器的壓力會增加,用戶也會耗費更多流量。目前測試了許多app只看到今日頭條使用了這種加載方式,在網(wǎng)絡(luò)正常下打開app,斷網(wǎng)后依然可以正常瀏覽內(nèi)頁文字內(nèi)容,文章底部會提示當前無網(wǎng)絡(luò)狀態(tài)。

進度條加載

進度條相信大家都不陌生,最常見的就是在下載頁面,我們可以清楚的看到當前進度,反饋十分明確。目前許多app將進度條運用在app的加載頁,讓用戶可以清楚的查看當前頁面的加載進度,來了解需要等待的時長。最常見的就是google瀏覽器,不管是web還是手機端許多場景都使用了這種加載方式,體驗十分友好。

混合加載模式

為了能讓產(chǎn)品有一個流暢的體驗,很多app會根據(jù)產(chǎn)品的各種不同場景來組合使用不同加載方式。上文中舉例的產(chǎn)品都使用了不止一種加載手段。例如,enjoy打開時首先進行全頁面加載,然后進行分步加載,打開內(nèi)容時則會出現(xiàn)進度條加載。所以我們在設(shè)計加載方案時需要結(jié)合產(chǎn)品的場景來決定對應(yīng)的加載方式。

總結(jié)

全頁面加載

  • 優(yōu)點:適用于各個場景
  • 缺點:由于時間的不確定性,加載過慢時容易流失用戶

占位色塊加載

  • 優(yōu)點:適合有固定布局的頁面,體驗比全頁面加載流暢
  • 缺點:不適合布局多變的頁面

分步加載

  • 優(yōu)點:先加載頁面框架和文字信息,在網(wǎng)速較慢時能提前預(yù)覽即將出現(xiàn)的內(nèi)容
  • 缺點:只加載了部分內(nèi)容的頁面會對整體美觀度產(chǎn)生影響,也會影響用戶對頁面內(nèi)容的理解

懶加載

  • 優(yōu)點:只加載用戶看得到的內(nèi)容,頁面加載速度快,服務(wù)器壓力較小,節(jié)省用戶流量,體驗較好
  • 缺點:當網(wǎng)絡(luò)狀況不佳時可能會出現(xiàn)體驗不流暢,加載延遲等狀況

預(yù)加載

  • 優(yōu)點:預(yù)先加載即將出現(xiàn)的內(nèi)容,用戶可以順暢的在應(yīng)用中交互,享受到極快的加載速度
  • 缺點:服務(wù)器壓力增加,用戶會耗費更多流量

進度條加載

  • 優(yōu)點:反饋明確,清晰易懂
  • 缺點:頁面無內(nèi)容,美觀度較低

混合加載

  • 優(yōu)點:根據(jù)不同場景來設(shè)計,體驗升級
  • 缺點:需要對各場景制定對應(yīng)的加載規(guī)范,保證交互一致性

 

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

題圖來自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 學(xué)習(xí)了,贊

    來自北京 回復(fù)
  2. ??

    回復(fù)
  3. 似乎是從運營轉(zhuǎn)的產(chǎn)品??

    來自廣東 回復(fù)