小白PM跟我來:一篇文章教你玩透“加載”

9 評論 11722 瀏覽 119 收藏 14 分鐘

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

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

領導說“這個頁面出來太慢了”,用戶說“我點擊這個按鈕怎么沒反應啊”,他們究竟是什么意思呢?

需求評審時候,你說我要加個加載,卻被技術團隊,交互團隊猛噴,這是為什么呢?

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

什么是“加載”?

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

其實大家可以把用戶的人機交互流程,簡單的用下圖拆解。

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

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

在哪里做一個“加載”?

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

1. 實現(xiàn)方式:app/H5/小程序

你的應用是用哪種方式實現(xiàn)的呢?app,H5,小程序對于“加載”都有不同的處理特性。所以一定要在自己的實現(xiàn)方式想如何實現(xiàn)。

2. 啟動方式:冷啟動/熱啟動

(1)冷啟動

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

  1. 新下載某app,第一次啟動
  2. 某app退出后(完全退出),重新啟動

(2)熱啟動

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

3. 發(fā)生場景

(1)進入app/頁面之前

點開app或者掃碼進入某個頁面之前。也就是我們通常看到白屏或者廣告推廣頁的部分。

(2)進入app/頁面,不可交互時間

也就是我們通??吹侥硞€頁面,但是點擊任何位置都無反應的時間。如果不可交互時間很長,用戶因為點擊沒有反饋可能會摔手機哦!

(3)進入app/頁面,可交互時間

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

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

優(yōu)化用戶體驗

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

減少頁面跳失率

用戶在頁面A點擊按鈕,跳轉頁面B。我們默認點擊的用戶100%跳轉到頁面B。但是實際上呢?我最近做的一個項目,因為頁面響應時間過長,有8%的用戶會跳失。所以做好一個“加載”,減少頁面跳失率,是產品通過“加載”功能要達到的目的之一。

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

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

整體加載

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

懶加載

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

自動加載

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

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

“加載”的產品處理邏輯難題1——啟動時

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

但是對于H5頁呢?什么叫做啟動呢?比如,一個用戶掃描二維碼之后,進入一個H5頁,在等待H5頁的過程中,我覺得其實也相當于啟動。

啟動時“加載”的處理,是用戶進入app使用的第一步。面對這個處理難題,小白PM應該如何處理呢?

閃屏(splash)

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

因為splash無法實時更新,所以一般都會采用品牌標識,或者強調產品特性的圖片。

小程序官方給的splash如下圖。采用默認模式,名稱+logo,無需設計。

啟動頁(launch)

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

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

引導頁(guide)

這里順便說下引導頁。啟動時的引導頁一般是app特有的。引導頁一般4頁以上。引導頁的使命一般有兩種:

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

白屏+載入指示器

這個一般是H5頁面中最??吹降模?/p>

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

用戶進入頁面之后,大部分“加載”都來源于用戶的操作。這時候的“加載”不僅僅是一個過渡期,同時也是用戶操作的即時反饋。

模態(tài)加載反饋

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

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

局部加載反饋

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

特別注意事項:刷新操作

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

總結

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

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

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

 

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

更多精彩內容,請關注人人都是產品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 不過此文中的加載技術實現(xiàn)方式似乎描述的不太準確:
    – 分布加載:優(yōu)先載入占內存較小的占位圖&框架,再填充內容
    – 懶加載:也叫延遲加載,指的是在長網(wǎng)頁中延遲加載圖像,是一種很好優(yōu)化網(wǎng)頁性能的方式。用戶滾動到它們之前,可視區(qū)域外的圖像不會加載

    文中說的“懶加載”應是“分布加載”

    來自北京 回復
  2. 太贊了,看了多篇相關文章,感覺這篇是最棒的。結構嚴謹,而且考慮的載體很全啊~小程序、H5、App都有

    來自北京 回復
  3. 感謝分享,這些加載的具體使用場景和方法能細化下就更好了??赐旰笥袔c疑問
    toast加載什么時候用,長時間不響應時,怎么退出。
    進度條加載和異步懶加載使用方法有什么異同,僅是使用環(huán)境的區(qū)分嗎。進度條在H5,懶加載在app?兩者能同時使用嗎。
    懶加載時的頁面允許交互嗎

    來自江蘇 回復
  4. 廣告這么多!可以直接寫廣告,別些分享了!

    回復
    1. 哈哈,真不是廣告啊,改天我單獨寫個廣告文

      回復
  5. ??

    來自廣東 回復
  6. 既然是針對小白PM的,那怎么就不能寫的小白一點呢

    來自四川 回復
    1. 系統(tǒng)化的知識能更快速成長

      回復