使用loading的原則有哪些?!?
1、能不loading就不loading;2、儘可能簡單的loading內容;3、儘可能小的loading內容;4、視覺體驗儘可能好;5、儘可能有趣,抵消等待中的無聊;6、儘可能是正能量內容,帶來一定的社會價值。 歡迎補充
參見《elya:6種常見的數據載入模式設計》
設計師在進行APP設計的設計時,往往會更加專註於界面長什麼樣,界面和界面之間怎麼跳轉,給予用戶什麼樣的操作反饋,卻偏偏特別容易忽略掉一個比較重要的環節,就是APP數據載入中的設計,所以會導致我們看到的APP,往往有著華麗的啟動界面,然後就是漫長的數據載入等待,甚至在無網路的時候,整個處於不可用狀態。那麼我們怎麼處理好界面交互中的載入設計,保證體驗無縫銜接,保證用戶沒有漫長的等待感,而可以輕鬆自在的享受等待,對載入後的內容有明確的預期呢?
今天這篇文章,會介紹6種常見的載入模式設計,和3種減少等待感的具體手法,希望對追求極致體驗的產品人有幫助。一、6種常見的數據載入模式目前APP設計中,合理的數據載入方式,主要分如下六種:1.全屏載入 2.優先載入 3.整頁載入 4.自動載入 5.智能載入 6.離線載入,這六種方式,適用於不同的需求場景,也適用於不同類型的APP,讓我們來一一解讀。
全屏載入就是整個屏幕白屏進行數據載入,一般會有菊花轉配合,常用於手機網頁的載入中。
網易新聞 Feedly
優點是能保證內容的整體性,全部載入完才能夠系統化的閱讀。
缺點比較明顯,就是有非常強烈的等待感,3s以上會產生焦躁情緒,所以在地鐵等信號不好的地方,使用手機網頁獲取內容實在是比較災難的一件事情。一般這種情況會配合有明確進度標識的進度條。2.優先載入如果一個頁面有圖片有文字,載入圖片比較慢的情況下,可以先把文字都載入出來,保證用戶可以順暢閱讀,然後再載入比較費流量的圖片。如果是用這一種載入方式,活動頁什麼的,千萬不能重要信息全部放在頭圖上,導致載入不出來。重要操作也不能用圖片按鈕,否則也會有操作顯示不出來的風險。
淘寶 網易新聞
優點是可以幫助用戶快速閱讀內容,了解信息。缺點是也許會丟失掉重要的關鍵信息,無法建立信息獲取的閉環。
這種載入形式更加適用於內容閱讀型的APP。3.整頁載入噹噹前頁與下一頁是整頁切換的時候,可以考慮採用整頁載入的形式,但是要保證每個頁面的數據量不是特別的大。
優點是能保證每個頁面的完整性,體驗比較整體。缺點是不好保證整頁的載入效率,且有可能影響瀏覽的流暢度。一般適用於宮格圖片模式、全屏圖片模式、網狀詳情頁模式。4.自動載入自動載入適用於長列表的情況,可以設定規則,默認載入20條,滾動第20條的時候,自動再載入20條。用這種手法,可以營造一種無極限瀏覽的錯覺,很容易的把用戶吸引住,一直向下滾,一直向下滾。
新浪微博 今天頭條
優點是把用戶代入無盡瀏覽模式,讓用戶一直向下滾動,不需要手動點擊下一頁。缺點是沒有盡頭,容易迷失,不方便快速索引定位到某個內容。適用於瀑布流、長列表、商品列表等情況。
5.智能載入當用戶處於WiFi下時,不會受限於流量和訪問速度,大可以載入大圖片、大圖標,甚至直接播放視頻動畫,但是如果用戶處於非WiFi的模式下,則需要差異化的處理成小圖或者無圖模式,視頻和動畫直接用一個佔位符標識就好了,這種根據網路狀況,智能調整的載入方式,叫做智能載入。
淘寶
例如淘寶APP,當網路切換到GPRS或3G的時候,首先會提醒用戶網路變化,然後查看商品詳情的時候,圖片從自動下載,變換成點擊載入,並且載入的只是精簡版圖文詳情,防止多圖造成的流浪浪費。優點是根據具體場景來控制項流量和載入速度。
缺點是不一定真實有效的命中用戶需求,所以還是需要給予用戶一定的查看詳情的入口,或者是設置項。適用於有大量圖片或視頻的APP,如電商類或在線視頻類APP。6.離線載入當用戶沒網的時候,往往很多功能都不能用了,內容也無法載入出來,導致APP變得根本不可用,這時候就要考慮預載入+離線緩存的設計了。首先在有網的時候把數據提前載入下來,緩存到本地,當沒網的時候,直接載入已經緩存下來的內容。一般會提供給用戶選擇,是否開啟有WiFi的情況下預載入功能,或者是否開始WiFi下全部離線緩存的功能。這樣就能保證在地鐵上,過個隧道就看不了內容的尷尬了。
窄播 今日頭條
優點是解決了沒網獲取數據的問題,且節約了流量,保證了流暢。缺點是佔用本地存儲空間,而且有時候預載入的內容根本沒有用到。
適用於小說閱讀、新聞閱讀、視頻類APP。二、4種減少等待感的具體手法1. 用非模態的載入方式盡量使用非模態的載入方式,就是載入的過程是不打算用戶,不需要等待載入完就可以做別的事情的,如下示意:
用非模態的載入方式,用戶可以利用做別的事情,打發等待的時間,而不用傻傻等待數據載入完成,大大降低了等待的焦躁感。即便是模態的載入,也要給一個取消的選項,放在不耐煩的情況下還沒法取消。
2. 情趣化的載入動畫載入的過程如此的枯燥乏味,為什麼我們不能做點什麼讓用戶覺得好受一點呢?有創意的設計師們設計了各種呆萌可愛的載入動畫。
Google的載入動畫
Digg的載入動畫
這些載入動畫讓等待的過程變成了一種享受,用戶能感受到設計師的情懷,體會新鮮有趣的等待過程。提升了產品情趣化的設計語言,讓等待的焦躁感一掃而空。
3. 漫長載入告知進度如果是時間較長的載入過程,最好能清晰的告知過程進度,這時候就需要採用有進度的載入設計了。
百度APP Dropbox
瀏覽器的進度條是一種較為常見的進度告知設計,通過這個進度告知,讓用戶有了更加明確的知情權,也能更好的預期到載入完成的時間
但即便是小小的進度條,也有很多的設計技巧在裡面。一個非常經典的體驗設問,同樣是3s的載入時間,勻速的進度條、先慢後快的進度條、先快後慢的進度條,哪個讓用戶感覺上最快?經過科學的實驗證實,先慢後快的進度條是讓用戶心理感受上最快的設計。這是因為用戶最容易記住最後一瞬間的感覺,如果最後一瞬間,感知到了快,就覺得順暢了。4. 盡量提前載入儘可能的利用預載入或有WiFi的情況下離線緩存的方式,把內容提前載入下來,這樣能做到最大限度的降低載入給用戶帶來的卡頓感。如果能判斷出來用戶下一步要做的事情,提前幫用戶載入相應的內容,肯定是最符合需求場景的事情。當我開始讀第一頁的時候,第二頁第三頁就開始陸續緩存下來了
最後,不得不說,細微之處見真章,看似不起眼的數據載入,往往都是程序員哥哥一時興起隨便定義的,都含有這麼多設計門道,作為體驗設計師的你,如果不了解箇中奧妙,你是否有足夠的信心拍著胸脯說你能對體驗負責呢?總結一下,6種常見的數據載入模式:1.全屏載入 2.優先載入 3.整頁載入 4.自動載入 5.智能載入 6.離線載入,4種減少等待感的具體手法——1.用模態的載入方式 2.情趣化的載入動畫 3.漫長載入告知進度 4.盡量提前載入。
參見《elya:6種常見的數據載入模式設計》
推薦閱讀:
※網頁視覺設計作品可以從哪些方面給予評判?
※為什麼我們用星星(星形)來打分,而不是三角形、正方形、圓形?
※很多軟體的「保存」和「另存為」的圖標依然是3.5英寸軟盤的圖標。這會不會給新一代沒見過軟盤的人造成困惑?
※為什麼說天涯三觀正,豆瓣三觀扭曲?
※為什麼韓國網頁設計會這麼有借鑒性?
TAG:用戶體驗設計 |