本文對于加載介紹了如下： What——什么是“加載”；Why——為什么要做“加載”；How——如何技術(shù)實(shí)現(xiàn)加載以及加載在產(chǎn)品實(shí)現(xiàn)過程中的難題。

一個小白PM，最經(jīng)常接到的需求可能就是頁面優(yōu)化了。而處理“加載”，應(yīng)該是每個小白PM的必修課。

領(lǐng)導(dǎo)說“這個頁面出來太慢了”，用戶說“我點(diǎn)擊這個按鈕怎么沒反應(yīng)啊”，他們究竟是什么意思呢？

需求評審時候，你說我要加個加載，卻被技術(shù)團(tuán)隊(duì)，交互團(tuán)隊(duì)猛噴，這是為什么呢？

今天我來教你如何在“加載”問題上戰(zhàn)無不勝。

什么是“加載”？

如果用技術(shù)語言描述“加載”，估計1萬字也覆蓋不了其多樣性。但從產(chǎn)品角度來看，卻可以簡單的闡述一下。

其實(shí)大家可以把用戶的人機(jī)交互流程，簡單的用下圖拆解。

• STEP 1：用戶處于“用戶狀態(tài)A”。剛進(jìn)入頁面的等待狀態(tài)，遇到錯誤的錯誤狀態(tài)等，這都是一個狀態(tài)。
• STEP 2：用戶執(zhí)行某一操作。比如打開APP，比如點(diǎn)擊按鈕，比如下拉刷新。
• STEP 3：對于某一操作的操作反饋。比如點(diǎn)擊按鈕時，按鈕的顏色會改變；比如下拉時，頁面會隨著手勢下滑
• STEP 4：“加載”。在加載過程中，完成“用戶狀態(tài)A”到“用戶狀態(tài)B”的跳轉(zhuǎn)。
• STEP 5：用戶到達(dá)“用戶狀態(tài)B”

由此可見，“加載”和“操作反饋”一樣都是“用戶的行為——點(diǎn)擊”和“用戶的預(yù)期——看到頁面”的中間態(tài)。

在哪里做一個“加載”？

其實(shí)小小的“加載”根據(jù)程序?qū)崿F(xiàn)方式不同，發(fā)生場景不同，有很多中不同的處理方式。那么一個PM首先需要定位，你要在哪里做一個“加載”需求。

1. 實(shí)現(xiàn)方式：app／H5／小程序

你的應(yīng)用是用哪種方式實(shí)現(xiàn)的呢？app，H5，小程序?qū)τ凇凹虞d”都有不同的處理特性。所以一定要在自己的實(shí)現(xiàn)方式想如何實(shí)現(xiàn)。

2. 啟動方式：冷啟動／熱啟動

（1）冷啟動

程序被完全殺死后，啟動是指“復(fù)活”。小程序的冷啟動發(fā)生場景為掃碼后，需要下載程序包的過程。app的冷啟動發(fā)生場景可能為：

1. 新下載某app，第一次啟動
2. 某app退出后（完全退出），重新啟動

（2）熱啟動

程序被部分殺死后，啟動是指“療傷”。此時app并沒有完全退出，而是退在后臺。此時的啟動相當(dāng)于從后臺吊起app。而對小程序來說，熱啟動意味著程序包仍在緩存中，進(jìn)入后無需重新下載。

3. 發(fā)生場景

（1）進(jìn)入app／頁面之前

點(diǎn)開app或者掃碼進(jìn)入某個頁面之前。也就是我們通?？吹桨灼粱蛘邚V告推廣頁的部分。

（2）進(jìn)入app／頁面，不可交互時間

也就是我們通?？吹侥硞€頁面，但是點(diǎn)擊任何位置都無反應(yīng)的時間。如果不可交互時間很長，用戶因?yàn)辄c(diǎn)擊沒有反饋可能會摔手機(jī)哦！

（3）進(jìn)入app／頁面，可交互時間

進(jìn)入頁面后，用戶的點(diǎn)擊或者刷新，需要重新拉取數(shù)據(jù)，此時需要“加載”處理

為什么要做一個“加載”？

優(yōu)化用戶體驗(yàn)

1. 緩解用戶等待時間內(nèi)的焦慮感：首先需要了解下你的用戶目前的等待時間是多長？用戶感到焦慮的時間1s，如果你的等待時間超過1s，就要好好構(gòu)思一下處理用戶澎湃的“焦慮”心情了
2. 即時反饋：“加載”是一個中態(tài)，相當(dāng)于在用戶操作后用戶接觸到的即時反饋。處理好各種中態(tài)，是提高用戶體驗(yàn)的重要一步

減少頁面跳失率

用戶在頁面A點(diǎn)擊按鈕，跳轉(zhuǎn)頁面B。我們默認(rèn)點(diǎn)擊的用戶100%跳轉(zhuǎn)到頁面B。但是實(shí)際上呢？我最近做的一個項(xiàng)目，因?yàn)轫撁骓憫?yīng)時間過長，有8%的用戶會跳失。所以做好一個“加載”，減少頁面跳失率，是產(chǎn)品通過“加載”功能要達(dá)到的目的之一。

“加載”的技術(shù)實(shí)現(xiàn)方式

從發(fā)起一個“展示頁面”數(shù)據(jù)請求，到“展示頁面”，這其中的加載方式有哪些呢？下面為大家介紹3種比較常見的加載方式。

整體加載

統(tǒng)一加載完成統(tǒng)一顯示。這是最基本的方式，不再累敘。

懶加載

首先加載框架，然后填充內(nèi)容。模式為“白屏–頁面框架展現(xiàn)—頁面展現(xiàn)”。很多app首頁都是使用的這種實(shí)現(xiàn)方式。比如，一個電商app的首頁，有“廣告圖樓層”“秒殺樓層”“女裝樓層”“男裝樓層”“猜你喜歡樓層”，每一個樓層都有好多的圖片。所以整體加載完的時間會很長，十分影響體驗(yàn)。懶加載會先將框架畫出，然后再加載圖片。這就好像進(jìn)入一個餐館，會先給你你一個菜單，幾個小菜。然后一段時間之后，再上全部的菜品一樣

自動加載

自動加載，一般采用分頁加載的方式。一般應(yīng)用在我們信息流中。比如搜索結(jié)果頁，也就是我們經(jīng)常看到的列表視圖。當(dāng)我們“將要滑到”頁面底部時，頁面自動請求數(shù)據(jù)，為你加載出下一頁。所以一般你在瀏覽下圖這種列表時，感覺非常流暢。因?yàn)轫撁孢M(jìn)行了自動加載。

那么這個“將要滑到”是如何實(shí)現(xiàn)呢？一般都是通過對當(dāng)前頁面的瀏覽狀態(tài)的監(jiān)聽實(shí)現(xiàn)的。比如監(jiān)聽到當(dāng)前頁面還有已經(jīng)滑到70%，就定義為需要再去請求接口。

“加載”的產(chǎn)品處理邏輯難題1——啟動時

談到啟動時“加載”大家一般想到的是app，或者最近流行的小程序啟動。

但是對于H5頁呢？什么叫做啟動呢？比如，一個用戶掃描二維碼之后，進(jìn)入一個H5頁，在等待H5頁的過程中，我覺得其實(shí)也相當(dāng)于啟動。

啟動時“加載”的處理，是用戶進(jìn)入app使用的第一步。面對這個處理難題，小白PM應(yīng)該如何處理呢？

閃屏（splash）

下圖是截取了幾個app的splash。一般在這個頁面后會出現(xiàn)一個可點(diǎn)擊的營銷頁面，也就是我們下文說的launch。那么splash是用來干什么的呢？是在程序還在進(jìn)行各種啟動邏輯判斷，并且launch還沒有下載完成時候，展現(xiàn)給用戶的。

因?yàn)閟plash無法實(shí)時更新，所以一般都會采用品牌標(biāo)識，或者強(qiáng)調(diào)產(chǎn)品特性的圖片。

小程序官方給的splash如下圖。采用默認(rèn)模式，名稱+logo，無需設(shè)計。

啟動頁（launch）

launch是一個splash后的營銷頁。一般會出售廣告位，或者在節(jié)慶期間進(jìn)行節(jié)日營銷，引起消費(fèi)者共鳴?？梢渣c(diǎn)擊，并且一般都可以選擇跳過。實(shí)現(xiàn)方式可以為靜態(tài)頁，也可以是動態(tài)圖。

小程序沒有啟動頁。其實(shí)跟張小龍說的小程序是一個幫助用戶提高效率的工具理念是吻合的。其實(shí)，我們看到很多國外的app都沒有l(wèi)anch，也是減少對用戶的干擾。

引導(dǎo)頁（guide）

這里順便說下引導(dǎo)頁。啟動時的引導(dǎo)頁一般是app特有的。引導(dǎo)頁一般4頁以上。引導(dǎo)頁的使命一般有兩種：

1. 提供給新用戶使用說明。一般只有新用戶第一次啟動時候會看到
2. 當(dāng)版本有重大變更時候，所有用戶更新到最新版本的第一次啟動時會看到

白屏+載入指示器

這個一般是H5頁面中最常看到的：

“加載”的產(chǎn)品處理邏輯難題2——用戶操作反饋

模態(tài)加載反饋

模態(tài)加載反饋是一種全局性的加載反饋。一般為toast形式。toast出現(xiàn)時，頁面不可點(diǎn)擊。所以，使用模態(tài)加載反饋時候需要注意：

1. 用戶無法知道準(zhǔn)確的加載位置
2. 用戶無法對頁面進(jìn)行操作 這兩種問題都會極大怎家用戶的焦慮感

局部加載反饋

局部加載反饋，是只在頁面的某一部分展示加載反饋。

特別注意事項(xiàng)：刷新操作

刷新的實(shí)現(xiàn)方式可能為“點(diǎn)擊按鈕刷新”，“下拉刷新”等。在做刷新后的加載時要格外注意，盡量保證刷新動作（下拉）和加載動作的連接性。因?yàn)樵谶@種情況下“加載”不僅僅是一個中間態(tài)，而更加傾向于終態(tài)。用戶執(zhí)行刷新操作的時候，對于反饋的期待就是能夠“加載”。

總結(jié)

本文對于加載介紹了如下： What——什么是“加載”；Why——為什么要做“加載”；How——如何技術(shù)實(shí)現(xiàn)加載以及加載在產(chǎn)品實(shí)現(xiàn)過程中的難題。

小白PM們可以以此為綱，不斷進(jìn)行競品分析，你會發(fā)現(xiàn)結(jié)合了精細(xì)的業(yè)務(wù)場景，“加載”的處理方式也是閃著智慧的光芒呢！

正如文章開篇所說，“加載”處理是人機(jī)交互過程中的一部分。那么人機(jī)交互過程中的其他部分呢？我將在下節(jié)中詳述～

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