加載的設(shè)計原理
編輯導(dǎo)語:在日常生活中,使用APP或者網(wǎng)頁加載時,加載按鈕常常會出現(xiàn),加載效率影響著用戶體驗。那么,加載設(shè)計的意義什么?作者從加載的設(shè)計原理出發(fā),解析其設(shè)計的意義。
一、加載是什么?為什么要有加載?
日程生活的使用中我們都能解除到各式各樣的加載樣式,有些是一句文字,一個簡單的圖標(biāo),有些是一段動畫,甚至之前微信還推出過加載小游戲,那么為什么要設(shè)計這個過程,加載的本質(zhì)到底是什么?其實加載就是一個傳輸交互過程的反饋過程,它存在于用戶與數(shù)據(jù)庫中的交互過程中。
當(dāng)用戶輸入一條指令,發(fā)送一條訊息,點擊一個按鈕都屬于交互,將信息傳遞給數(shù)據(jù)庫,數(shù)據(jù)庫得到指令再反饋給用戶對應(yīng)的結(jié)果,這就是完整的一個交互,那么加載就是貫穿在其中的數(shù)據(jù)傳輸過程的反饋。
這一過程因為各種各樣的原因影響,導(dǎo)致速率變慢,降低了用戶體驗,這時候就需要加載反饋,給與用戶反饋當(dāng)前界面信息,降低用戶焦慮感,讓用戶能看到進(jìn)度條,這就是加載的意義。
二、八種常見的加載策略及設(shè)計意義
1. 啟動頁加載
啟動頁是進(jìn)入所有APP都會遇到的,也是最常用的加載策略。大家點擊進(jìn)入APP時都會遇到可跳過的廣告,或APP本身的品牌頁面,這就是啟動頁加載。
有動圖也要靜圖,有商家品牌宣傳也有廣告投放;啟動頁加載最初發(fā)展的目的是因為技術(shù)的不成熟,為了降低用戶進(jìn)入APP時的卡頓感和不流暢感,提高用戶的體驗感。但隨著時代的進(jìn)入,啟動頁的核心反而變成了廣告展示,這點筆者認(rèn)為是非常可惜的,與一開始的目的完全背離。
啟動頁廣告加載:
啟動頁加載:
2. 頁面跳轉(zhuǎn)加載
(1)本頁面加載:點擊操作按鈕后,在當(dāng)前頁中提示正在加載過程,成功后進(jìn)入下一頁。適用于需要判斷及驗證處理的頁面中。例如表單信息判斷和登錄驗證等。
(2)跳轉(zhuǎn)加載:點擊操作按鈕后,跳轉(zhuǎn)至下一頁面展示頁面原生并開始加載相應(yīng)內(nèi)容。市面上絕大部分app都采用這種加載方式,好處是增強(qiáng)了用戶使用中的流暢感。
本頁面加載:
跳轉(zhuǎn)加載:
3. 白屏加載
顧名思義就是加載過程呈白屏顯示,常用于Wb端,特點是一次性展示全部內(nèi)容,如加載不出則全部不展示。
4. 分步加載/懶加載/預(yù)加載
(1)分步加載:分步式按內(nèi)存占比由高到低進(jìn)行加載,先加載不占內(nèi)存或流量消耗小或大量重復(fù)的內(nèi)容;例如icon圖標(biāo),文字,文章框架體系等。
(2)懶加載:懶加載的核心類型是跟隨用戶當(dāng)前手機(jī)展示界面進(jìn)行加載,例如用戶當(dāng)前正在使用微博界面,那么就會先加載當(dāng)前界面圖片和下面幾頁的內(nèi)容進(jìn)行展示,剩余部分用戶再進(jìn)行下一步操作時才進(jìn)行加載
(3)預(yù)加載:預(yù)加載剩余懶加載進(jìn)階版,在用戶使用當(dāng)前頁面時,就會加載當(dāng)前界面甚至接下來其他主導(dǎo)航界面內(nèi)容,給遇到用戶最佳使用體驗,缺點是占用內(nèi)存和流量。
分步加載:
懶加載:
預(yù)加載:
5. 智能加載
智能加載相對其他加載模式的清晰定位屬于相對綜合性的加載模式。一般來說分為主動型和被動型,用戶可以自足設(shè)置它的加載模式。
在WiFi情況下會加載大量內(nèi)容,包括視頻圖片,在非WiFi情況則相對性的減少圖片的加載,取消視頻加載;其次還有清晰度方面也同樣可以設(shè)置,相對智能,用戶的可選擇空間大些。
6. 緩存加載
緩存加載屬于隱形加載,特征是創(chuàng)作團(tuán)隊提前設(shè)置到緩存內(nèi)容板塊,用戶也可以進(jìn)行清除操作。此板塊以微信為最佳用例,微信中會大量緩存聊天內(nèi)容,朋友圈圖片內(nèi)容,在沒有清除緩存的前提下你甚至可以滑到去年今日的朋友圈。
三、四種常見的加載樣式
1. 導(dǎo)航欄加載
特點是加載信息顯示在當(dāng)前頁面的導(dǎo)航位置,常見于頂部導(dǎo)航,底部導(dǎo)航較少。特點是能不破壞當(dāng)前頁面信息同時顯示加載狀態(tài)。常用語社交APP和短視頻APP。
2. 下拉/上拉加載
下拉上拉加載模式基本應(yīng)用于市面上所有APP,在用戶下拉或上拉刷新時展示,一般下拉刷新為更換刷新當(dāng)前界面內(nèi)容,上拉為展示更多當(dāng)前界面內(nèi)容。在展示形式上分為兩種,一種為傳統(tǒng)的加載符號,另一種為帶有自身企業(yè)特色的加載符號。
下拉加載:
上拉加載:
3. 進(jìn)度條加載
進(jìn)度條加載多用于網(wǎng)頁端加載或第三方跳轉(zhuǎn)界面或API接口加載過程,有頂端展示也有底端展示兩種;特點是用戶可以清晰看到加載進(jìn)度。這也是最早一批的加載模式,相對于其他加載模式筆者相信對進(jìn)度條加載大家應(yīng)該都有記憶,小時候兩三好友一起守著大頭電腦盯著網(wǎng)頁界面一點點加載,進(jìn)度條的終點就是自己喜歡的小游戲。
底端進(jìn)度條加載:
頂端進(jìn)度條加載:
4. Toast(吐司)加載
Toast加載多用于關(guān)鍵性界面,一般加載圖標(biāo)展示在界面核心鮮艷位置,以居中為主,同時加載過程中當(dāng)前界面不可操作,不可退出;此加載模式目的在于核心界面防止用戶誤操作導(dǎo)致當(dāng)前界面當(dāng)前操作錯誤,因此模式也容易導(dǎo)致用戶體驗感變差,謹(jǐn)慎使用,必須核心場景!
四、加載總結(jié)
其實加載按鈕的核心還是為了提高用戶的體驗感,提升用戶在當(dāng)前APP或網(wǎng)頁內(nèi)的留存。無論是什么形式對應(yīng)的都是用戶的核心需求點,有能讓用戶看到進(jìn)度條降低焦慮感的進(jìn)度條加載,有相對趣味性的頂部刷新加載圖標(biāo),也有防止用戶誤操作的Toast加載,更有筆者比較反感的啟動頁廣告加載,其核心都是對應(yīng)了相應(yīng)場景。
筆者相信未來一定會退出新的加載模式,例如音頻加載,在加載過程中播放相應(yīng)音樂,小游戲加載,在需要長加載的頁面增加小游戲也不失為一種新穎的方式。
但無論那種方式,對產(chǎn)品經(jīng)理而言,能剛好的為用戶服務(wù),提高用戶的體驗感,我想這才是產(chǎn)品經(jīng)理的初衷!最后,祝愿大家都能成為喬布斯這樣的跨時代產(chǎn)品經(jīng)理,作出iPhone4這樣的跨時代產(chǎn)品!
本文由 @中世紀(jì)產(chǎn)品經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
整挺好,就是這錯別字實在是太多了……
一個加載都有這么多原理呢,真是細(xì)節(jié)滿滿,文章也是干貨滿滿呀
大神厲害呀
厲害厲害