APP中的6種常見數據加載

1.

全屏加載

全屏加載也叫白屏加載,就是整個屏幕白屏進行數據加載,一般會有菊花轉或進度條配合,常用於手機網頁的加載中,例如列表頁進入詳情頁,圖片詳情等。(可考慮融入趣味性較強的小動畫,增強愉悅感,從用戶心理上去縮短等待時間。

優點:能保證內容的整體性,全部加載完才能夠系統化的閱讀。

缺點:有非常強烈的等待感,3s以上會產生焦躁情緒,所以在地鐵等信號   不好的地方,使用手機網    頁獲取內容實在是比較災難的一件事情。

2.分佈加載

分佈加載就是分步驟的加載網頁,優先加載佔網絡資源較小的元素,包括優先加載,懶加載,預加載,漸進加載。

a.優先加載

如果一個頁面有圖片有文字,可以先把文字都加載出來,保證用戶可以有內容可讀,然後再加載比較費流量的圖片。但是活動頁什麼的,千萬不能把重要信息全部放在圖片上,導致加載不出來。這種加載形式更加適用於內容閱讀型的APP。

懶加載主要是針對前端頁面比較大而設計出來的一種方式,假如一個網頁很大,又含有很多圖片、視頻內容,那麼想一次性加載就會等待很久,懶加載就是隻有在屏幕顯示範圍內的資源,被用戶看到的內容纔會真正去加載。

   預加載就是提前加載,比如啓動APP時,當顯示啓動畫面時,就可以預先把首頁內容加載出來,這樣可以減少用戶加載內容時的等待時間,還有一個很典型的使用場景就是瀏覽視頻網站或者購物網站,當我們快要滑到頁面底部時,下面圖片已經幾乎加載完成了,這就是預加載的好處,在使用上感覺更加流暢。

漸進加載

在 PC 端用瀏覽器看圖片的時候,經常是先看到一張模糊圖,然後再漸漸的變得清晰,這種效果就叫做漸進式加載。

優點:可以幫助用戶快速閱讀內容,瞭解信息。

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

3.整頁加載

噹噹前頁與下一頁是整頁切換的時候,可以考慮採用整頁加載的形式,但是要保證每個頁面的數據量不是特別的大。一般適用於宮格圖片模式、全屏圖片模式、網狀詳情頁模式。

優點:能保證每個頁面的完整性,體驗比較整體。

缺點:不好保證整頁的加載效率,且有可能影響瀏覽的流暢度。

4.自動加載

當你瀏覽信息時,不停的向上滑動,新的內容會不停的從底部出現,這種方式稱爲自動加載。關於自動加載,要注意每次加載多少條內容,或者多少屏的內容,我無聊的數了數今日頭條每次會自動加載60條新聞。


優點:把用戶代入無盡瀏覽模式,讓用戶一直向下滾動,不需要手動點擊下一頁。

缺點:沒有盡頭,容易迷失,不方便快速索引定位到某個內容。

5.智能加載

這個加載模式我經常使用到,假如是在WIFI情況下,使用QQ瀏覽器去看視頻,那麼它會自動加載視頻播放,而使用4G的流量去訪問視頻頁面的話,會有一個彈窗來確認是否要播放,以免耗費大量流量造成用戶扣費。智能加載模式就是根據用戶使用場景來改變加載形式的。

例如今日頭條在WiFi模式下,圖片大圖展示,當處於非WiFi模式下時,展示小縮略圖,當用戶覺得某張圖有足夠的吸引力時,點擊小縮略圖加載大圖,幫助用 戶節省流量。再比如愛奇藝在非WiFi的模式下播放視頻時,會提示用戶繼續播放會產生流量費用,這類設計就比較人性化,也容易讓用戶產生好感,建戶忠誠 度。(用戶知道你是在爲他着想,畢竟流量還是挺貴的!)

優點:根據具體場景來控制流量和加載速度。

缺點:不一定真實有效的命中用戶需求,所以還是需要給予用戶一定的查看詳情的入口,或者是設置項。

6.離線加載

當用戶沒網的時候,往往很多功能都不能用了,內容也無法加載出來,導致APP變得根本不可用,這時候就要考慮預加載 離線緩存的設計了。首先在有網 的時候把數據提前加載下來,緩存到本地,當沒網的時候,直接加載已經緩存下來的內容。一般會提供給用戶選擇,是否開啓有WiFi的情況下預加載功能,或者 是否開始WiFi下全部離線緩存的功能。這樣便可在一定程度上減少地鐵上信號時好時差而無法正常使用產品所帶來的困擾了。但考慮到手機空間,要設計合適的離線機制。並配合一定的清理緩存的機制。適用於小說閱讀、新聞閱讀、視頻類APP。

優點:解決了沒網獲取數據的問題,且節約了流量,保證了流暢。

 缺點:佔用本地存儲空間,而且有時候預加載的內容根本沒有用到。

三、4種減少等待感的設計

1.使用模態加載

儘量使用非模態的加載方式,在加載的過程不打斷用戶,不需要等待加載完就可以做別的事情的,而不用傻傻等待數據加載完成,大大降低了等待的焦躁感,提升用戶體驗流暢度。


模態加載:app在觸發加載後,出現模態提示層,防止用戶在加載過程中進行其他操作,導致當前加載出錯。如果採用模態加載,會因爲網絡原因或內容過多導致長時間處於加載狀態,建議提供一個“取消”的操作。同時在安卓中的後退按鈕能關閉模態提示。

2. 情感化的加載動畫

用戶等待加載的過程是相當痛苦的,因爲他迫切的想看到頁面內容,通過設計一些呆萌可愛的加載動畫,讓用戶在等待的過程中享受動畫的愉悅感,讓產品情感化,在心理層面上去減少用戶的急躁感。

3.

進度條加載

如果是時間較長的加載過程,最好能清晰的告知過程進度,讓用戶有更加明確的知情權,和加載的時間預期。一個非常經典的體驗設問,同樣是3s的加載時 間,勻速的進度條、先慢後快的進度條、先快後慢的進度條,哪個讓用戶感覺上最快?經過科學的實驗證實,先慢後快的進度條是讓用戶心理感受上最快的設計。這是因爲用戶最容易記住最後一瞬間的感覺,如果最後一瞬間,感知到了快,就覺得順暢了。

4.

儘量提前加載

儘可能的利用預加載或有WiFi的情況下離線緩存的方式,把內容提前加載下來,這樣能做到最大限度的降低加載給用戶帶來的卡頓感。如果能判斷出來用戶下一步要做的事情,提前幫用戶加載相應的內容,肯定是最符合需求場景的事情。當我開始讀第一頁的時候,第二頁第三頁就開始陸續緩存下來了

5.啓動頁加載

這個主要是APP啓動時的一個頁面,由於APP啓動需要時間,因此可以加入一個啓動頁來自然過渡,而且很多啓動頁是廣告,這樣也可以帶來一些收益,這個頁面一般可以點擊跳過。

移動互聯網的場景多種多樣,我們在設計的時候需要考慮各種各樣的場景,例如WiFi下、非WiFi下、無網絡、又或者說電梯裏、地鐵上等等。但是咋們的目的也只有一個:優化用戶體驗,提高商業價值。所以無論設計什麼功能模塊都應該多考慮一下用戶的使用場景。

如何降低用戶的焦慮感?

由於存在網速不快,網絡異常,服務器異常等情況,讓用戶等待的情況是必不可少的。但是我們都知道,等待會產生焦慮感,分分鐘讓用戶卸載你的產品,那麼我們可以通過哪些手段來降低或緩解用戶的焦慮感?

第一:優化App的加載算法,使得App與服務器數據傳輸的時間減短。這個需要開發人員的精益求精了。這個是從根本上解決了問題,因爲直接減少了加載數據的時間,也就減少了用戶需要等待的時間。

第二:採用預加載和智能加載的方式。拿閱讀App打比方,當用戶在看第一頁的時候,App在後臺加載完後面的幾頁,等用戶翻到第二頁的時候就不需要等待加載了,因爲App已經幫用戶提前加載好了。這種加載機制對用戶體驗特別好,但是存在一個問題,就是要預測用戶行爲,加載其他數據,這樣會消耗不少流量,所以建議在WiFi網絡環境下采取這種預加載機制,而在蜂窩網絡狀態下則不採用預加載機制。這個要和開發人員討論溝通,確保預加載機制完美運行。

第三:異步處理。這一點做得好的App莫過於Instagram,不知道你有沒有發現,用Instagram的時候會覺得特別流暢,即使在網絡不好的情況下。這是爲什麼?因爲在網絡不好的情況下,你給好友點了贊,Instagram並不會提示你網絡不好,操作失敗,而是提示你點贊成功了,其實它只是將你點讚的操作記錄了下來,等網絡一好就將點讚的行爲上傳到服務器,從而完成點贊行爲。這就是讓產品自己去解決問題,而不是把問題拋給用戶。

第四:設計有趣的loading動畫,如上文介紹的美團APP奔跑的小人,這是提升產品情感的重要手段。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章