中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：移動(dòng)APP在使用時(shí)，經(jīng)常會(huì)遇到需要加載和刷新的情況。當(dāng)用戶停留在加載界面的時(shí)候，注意力都集中在這里，我們應(yīng)該如何設(shè)計(jì)這個(gè)頁面呢？本文作者對(duì)此發(fā)表了自己的看法，與你分享。

你好，我是餿面包，本文 4489 字，分享一些移動(dòng)端APP的加載和刷新機(jī)制。

本篇文章我會(huì)從“加載目的”的維度來對(duì)加載進(jìn)行分類，主要分為：數(shù)據(jù)加載和操作過程加載。

1）數(shù)據(jù)加載

包含從單個(gè)元素到整個(gè)頁面在內(nèi)的所有對(duì)數(shù)據(jù)的加載。

2）操作過程加載

應(yīng)用中所有操作（提交信息、關(guān)注、訂閱等）的加載過程。

一、數(shù)據(jù)加載

數(shù)據(jù)加載分為兩種情況：頁面有緩存和頁面無緩存。

大家可以嘗試關(guān)掉WiFi和4G，然后打開淘寶和美團(tuán)，你會(huì)發(fā)現(xiàn)它們的首頁都是有內(nèi)容的，或者說只會(huì)存在少部分內(nèi)容缺失，這時(shí)候頁面的內(nèi)容就是上次打開APP緩存的內(nèi)容。

APP為了避免空白情況的出現(xiàn)，會(huì)對(duì)數(shù)據(jù)做緩存處理，這樣即使用戶網(wǎng)絡(luò)不好的時(shí)候打開APP也不會(huì)出現(xiàn)空白的現(xiàn)象，然后APP再進(jìn)行加載，就能把內(nèi)容銜接上。

這樣處理的目的有兩個(gè)：

1. 一是提升用戶體驗(yàn)，增加使用流暢感。
2. 二是減少用戶關(guān)閉APP的概率，增加粘性，人的注意力和忍耐有限，一旦出現(xiàn)空白而網(wǎng)絡(luò)又不流暢，用戶耐心耗盡的后果就是關(guān)閉APP，除非你是微信這樣的戶“不得不用”的產(chǎn)品。

那么網(wǎng)絡(luò)不好的時(shí)候有緩存和無緩存該如何處理，用戶體驗(yàn)會(huì)更好？

1.1 有緩存

現(xiàn)在大多數(shù)APP都做了緩存處理，打開APP的時(shí)候首先展示緩存內(nèi)容，然后才進(jìn)行數(shù)據(jù)的加載，這樣處理的目的前文也說過：用戶體驗(yàn)更好，使用更流暢。

先顯示緩存再加載新內(nèi)容的知乎

知乎會(huì)把用戶上次瀏覽的內(nèi)容緩存下來，用戶再次打開APP的時(shí)候顯示的是上次最后瀏覽的內(nèi)容。

但是值得探討的是，在網(wǎng)絡(luò)連接的時(shí)候知乎的‘推薦’和‘熱榜’板塊以及虎嗅網(wǎng)的首頁新聞并沒有自動(dòng)加載內(nèi)容，而是選擇讓用戶手動(dòng)加載，而知乎的‘關(guān)注’板塊卻在進(jìn)入頁面時(shí)自動(dòng)進(jìn)行刷新。

我想這里的策略應(yīng)該是基于用戶的習(xí)慣而來的，對(duì)于‘關(guān)注’的內(nèi)容，用戶既然單擊了它說明用戶是想看自己關(guān)注的內(nèi)容的最新動(dòng)態(tài)，就如我們每次進(jìn)入朋友圈時(shí)想看的一定是最新的朋友圈動(dòng)態(tài)，這是人的習(xí)慣或者說人性。

對(duì)于熱榜的手動(dòng)刷新起初我是不理解的，但是當(dāng)我多次切換tab的時(shí)候就發(fā)現(xiàn)了，如果我每次切換熱榜都更新一次，那么就會(huì)導(dǎo)致這樣一種情況：我點(diǎn)擊熱榜，熱榜更新，此時(shí)我查看榜單的內(nèi)容，我看到了一半，這時(shí)候我突然又想搜索一下“怎么瘦小腿”，看完了之后我想去把剩下的熱榜內(nèi)容看了，這時(shí)候我點(diǎn)擊熱榜，熱榜刷新，我發(fā)現(xiàn)榜單完全變了，我看不到之前的內(nèi)容了?，F(xiàn)在知乎的熱榜有50條，如果頻繁刷新的話，那么可能導(dǎo)致熱榜后半部分內(nèi)容展現(xiàn)率很低。

除了內(nèi)容資訊類APP外，音樂視頻類也是緩存大戶。

畢竟這些產(chǎn)品是由內(nèi)容撐起來的，一旦沒有內(nèi)容，APP就空了。

網(wǎng)易云音樂目前采取的方式是WiFi環(huán)境自動(dòng)緩存歌曲，這樣就能在無網(wǎng)絡(luò)的環(huán)境也能聽歌。

利用這個(gè)方法可以讓我用過期的會(huì)員賬號(hào)聽會(huì)員才能聽的歌曲，不過一旦聯(lián)網(wǎng)……就game over了……

顯示緩存同時(shí)給與無網(wǎng)絡(luò)提示的網(wǎng)易云音樂

1.2 無緩存

無緩存的刷新場(chǎng)景較有緩存的情況會(huì)多很多，畢竟手機(jī)容量有限，總不能把所有內(nèi)容都給用戶緩存下來。

無緩存有以下幾種加載方式：

• 白屏加載
• 分步加載
• 智能加載
• 懶加載
• 預(yù)加載

1.2.1 白屏加載

白屏加載意思是進(jìn)入界面前無緩存，進(jìn)入界面后才加載內(nèi)容，由于事先沒有緩存，會(huì)出現(xiàn)白屏的現(xiàn)象。

白屏加載的加載方式有進(jìn)度條加載和loading動(dòng)畫。

H5頁面和瀏覽器網(wǎng)頁一般會(huì)使用進(jìn)度條加載，APP原生加載一般使用加載動(dòng)畫，也就是常見的‘菊花’加載，或者有的APP為了緩解用戶點(diǎn)焦慮感和提升品牌曝光度會(huì)自制有趣的加載動(dòng)畫。

瀏覽器使用進(jìn)度條，美團(tuán)使用菊花

白屏加載在APP中適合界面內(nèi)容不固定或者內(nèi)容不多的頁面。

1.3 分步加載

分布加載有三種：

• 先文字后圖片
• 兜底圖
• 骨架屏

1.3.1 先文字后圖片

顧名思義即是先加載數(shù)據(jù)少的文字，后加載數(shù)據(jù)大的圖片。

目前很多應(yīng)用包括美團(tuán)和得到都包含這種設(shè)計(jì)方式，這樣的加載策略可以很大程度上提升產(chǎn)品的流暢性。

如下圖，美團(tuán)商家詳情先加載文字信息，后加載商家圖；以及得到的課程詳情也是先加載文字信息后加載圖片信息。

先加載文字后加載圖片

1.3.2 兜底圖

上一點(diǎn)說的是分步加載，先圖片后文字，那么如果圖片加載比較慢怎么辦？

這時(shí)候就可以使用兜底圖的方式。

兜底圖是在加載圖片的時(shí)候?qū)D片或者類似圖片的位置做的一個(gè)占位圖。

加載順序是：兜底圖→線上圖

兜底圖是目前市面上產(chǎn)品應(yīng)用得比較多的加載策略，我想幾乎每個(gè)叫得上名字的APP都會(huì)使用這個(gè)加載方式，少數(shù)產(chǎn)品會(huì)直接使用色塊顯示，多數(shù)產(chǎn)品會(huì)展示品牌logo。

36氪和網(wǎng)易新聞的占位圖則直接使用的純色色塊，個(gè)人比較傾向于增加品牌曝光和趣味性的logo展示。但是純色色塊的好處是可以讓研發(fā)直接寫，不用切圖，一定程度可以減少頁面資源占用。

使用純色色塊占位

1.3.3 骨架屏

骨架屏最先是應(yīng)用在網(wǎng)頁上的一種占位方式，一般使用和頁面布局相似的矩形色塊來展示，現(xiàn)在也廣泛用在移動(dòng)應(yīng)用上。

由于是固定的矩形塊布局，所以骨架屏更加適合頁面內(nèi)容布局相對(duì)固定的頁面，比如列表頁、詳情頁等。

目前有相當(dāng)多的產(chǎn)品都應(yīng)用了骨架屏，比如知乎、美團(tuán)、得到、企鵝體育等等。

加載骨架屏

1.4 智能加載

智能加載的意思是根據(jù)手機(jī)網(wǎng)絡(luò)狀況選擇加載方式。

這種判定方式在流量還沒這么便宜的時(shí)候尤為重要，不然不小心看個(gè)視頻就可能把話費(fèi)燒光，雖說現(xiàn)在流量便宜很多甚至很多人都花不光每個(gè)月的流量，但是這個(gè)提示還是非常有必要的。

因?yàn)樵谥辈ズ投桃曨l如此盛行的今天，即使用戶愿意為流量買單我們也需要給與提示，避免用戶看直播和視頻導(dǎo)致流量用光。

如果不做流量提示，一來體驗(yàn)不好甚至?xí)獾酵对V，二來用戶會(huì)沒有掌控感。

畢竟每個(gè)人內(nèi)心其實(shí)都有一個(gè)想要掌控全世界的小怪獸不是嗎，雖無法掌控世界，至少能讓我掌控自己的手機(jī)流量吧…

智能加載我調(diào)研了目前市面上主流APP（主要是視頻直播類）的處理方法，主要有以下幾種：

操作后加載：

• 適用于：非即時(shí)播放和耗流量高的應(yīng)用（長(zhǎng)視頻、音頻等）
• 形式：彈出框、播放區(qū)域提示
• 策略1：彈框給用戶選擇提示頻次
• 策略2：手動(dòng)點(diǎn)擊繼續(xù)播放后播放，下次進(jìn)入使用toast提示（愛奇藝）

輕提示：

• 適用于：即時(shí)播放和耗流量低的應(yīng)用（直播、微視頻等）
• 形式：toast提示
• 策略1：toast提示1次后不再提示（印客直播、大眾點(diǎn)評(píng)、今日頭條）
• 策略2：每次看視頻/直播均提示（淘寶）
• 策略3：自行設(shè)置提示次數(shù)
• 個(gè)人中心設(shè)置允許3G/4G自動(dòng)播放

1.4.1 操作后加載

操作后加載形式上有彈出彈框提示或者讓用戶選擇提示次數(shù)。

一種形式是彈出框提示

比如懶人聽書（聽書類APP）目前就是這樣設(shè)計(jì)的，用戶可以自行選擇播放設(shè)置，用戶選擇今日不再提醒之后，今天內(nèi)用戶聽語音都不再提示。

針對(duì)語音類產(chǎn)品這樣設(shè)計(jì)影響不大，聽語音產(chǎn)生的流量比視頻要少得多。

主動(dòng)給用戶選擇權(quán)

另一種形式是播放區(qū)域提示：

這種方式主要應(yīng)用在視頻類產(chǎn)品中，比如優(yōu)酷視頻、QQ、騰訊視頻、愛奇藝等視頻或者包含視頻板塊的APP。

由于視頻會(huì)消耗較多流量，大多數(shù)包含視頻的APP都會(huì)做比較強(qiáng)的流量提示。

個(gè)人比較欣賞的是騰訊視頻和QQ這樣的提示方式，針對(duì)單個(gè)視頻做流量統(tǒng)計(jì)，點(diǎn)擊可繼續(xù)播放，流量數(shù)據(jù)展示能給用戶最大的安全感。

統(tǒng)計(jì)視頻流量

當(dāng)然，這種方式的開發(fā)成本不低，如果資源有限的情況下選擇其它方式也無可厚非。

比如愛奇藝和優(yōu)酷在播放窗口的提示，用戶選擇繼續(xù)播放后下次進(jìn)入界面時(shí)可以使用輕提示即可，即可以提示用戶當(dāng)前網(wǎng)絡(luò)環(huán)境又可以避免每進(jìn)入視頻頁都需要手動(dòng)選擇播放。

提示用戶當(dāng)前使用流量

1.4.2 輕提示

針對(duì)一些直播類產(chǎn)品更傾向于使用toast提示，因?yàn)檫@類產(chǎn)品的視頻是即時(shí)播放的，如果直接打斷用戶的觀看過程在使用不夠好。

目前淘寶、映客等直播均使用的是toast這樣輕量級(jí)的提示方式，盡量做到不中斷用戶的觀看過程。

僅做toast輕量提示

1.5 懶加載

懶加載也叫延遲加載，意思是首次加載用戶看得見的部分，當(dāng)用戶滑動(dòng)屏幕時(shí)再進(jìn)行加載，也可以說是按需加載。

懶加載的目的其實(shí)很好理解，一次性加載完數(shù)據(jù)對(duì)服務(wù)器壓力會(huì)比較大而且也沒太大必要，按需加載是比較好的節(jié)省資源的方式。

懶加載是目前應(yīng)用中用得非常多的一種加載方式，尤其是列表的加載場(chǎng)景，比如電商APP淘寶京東的商品列表、美團(tuán)的訂單列表、新聞列表等等都會(huì)用到懶加載。

上拉加載更多數(shù)據(jù)

需要我們注意的是，做交互的時(shí)候需要定義加載數(shù)量規(guī)則，實(shí)際工作中會(huì)根據(jù)場(chǎng)景來定義加載數(shù)量。

既能讓用戶無感加載又能減輕服務(wù)器的壓力。

一般文字類的數(shù)據(jù)少的列表一次可以多加載幾條，20到50不等，圖文和視頻類加載可以少加載幾條，一般10到20不等，不過具體還是需要根據(jù)場(chǎng)景定義。

1.6 預(yù)加載

預(yù)加載顧名思義就是提前幫用戶加載的意思，有預(yù)測(cè)用戶行為的意思，預(yù)測(cè)用戶可能會(huì)打開某幾個(gè)頁面，然后提前將這些頁面的內(nèi)容加載出來，這樣用戶在點(diǎn)擊的時(shí)候幾乎能夠無縫銜接，體驗(yàn)會(huì)非常好。

劣勢(shì)也很明顯，由于是預(yù)測(cè)，就避免不了用戶可能不會(huì)點(diǎn)擊到下一個(gè)頁面，這就導(dǎo)致我們事先加載的資源白加載了，所以預(yù)加載的應(yīng)用目前還是不夠廣泛的，下面會(huì)舉幾個(gè)例子具體說明。

預(yù)加載下一級(jí)界面內(nèi)容在新聞資訊類的產(chǎn)品中應(yīng)用得較多，比如今日頭條、虎嗅，當(dāng)我進(jìn)入首頁后把網(wǎng)關(guān)掉后仍然點(diǎn)擊進(jìn)入前2條新聞仍然可以看到新聞的文字內(nèi)容。

這里涉及到一個(gè)預(yù)加載的加載策略：

• 預(yù)加載新聞前2條（或3條）數(shù)據(jù)的下一級(jí)頁面
• 下一級(jí)頁面僅加載文字部分（圖片部分可以進(jìn)入頁面后再行加載）

目前今日頭條和虎嗅就是這樣處理的。

二、操作過程加載

操作過程加載在優(yōu)先級(jí)上我認(rèn)為比數(shù)據(jù)加載更重要，數(shù)據(jù)加載影響體驗(yàn)，但是操作過程加載不完善可能涉及到業(yè)務(wù)流程出現(xiàn)問題。

舉一個(gè)常見的提交信息場(chǎng)景：

用戶提交訂單時(shí)會(huì)點(diǎn)擊【提交】按鈕，點(diǎn)擊后將數(shù)據(jù)傳給服務(wù)器生成訂單。

此時(shí)如果網(wǎng)絡(luò)不好，數(shù)據(jù)還沒到達(dá)服務(wù)器端，用戶再次點(diǎn)擊【提交】按鈕，那么就會(huì)提交兩次數(shù)據(jù)，也會(huì)生成兩條訂單，嚴(yán)重的話會(huì)造成用戶損失。

但是如果這里的【提交】按鈕增加了一個(gè)提交中的加載狀態(tài)，或者加一個(gè)全屏加載中的loading效果，使得用戶無法點(diǎn)擊，那么用戶就不能重復(fù)提交數(shù)據(jù)，也不會(huì)造成重復(fù)訂單的出現(xiàn)。

所以可見，操作過程的加載是多么重要。而這部分又是新手設(shè)計(jì)師最容易忽略的地方，往往等到產(chǎn)品測(cè)試甚至上線后出現(xiàn)問題才來修改，給別人留下不專業(yè)的印象事小，造成用戶的損失事大。

下面我總結(jié)了3種常見的操作過程加載形式：

• 模態(tài)加載
• 控件自身加載
• 后臺(tái)加載

2.1 模態(tài)加載

在數(shù)據(jù)加載的章節(jié)提到過白屏加載中包含了模態(tài)加載，模態(tài)加載一般會(huì)使用一個(gè)loading動(dòng)畫來展示。

加載過程中用戶無法進(jìn)行其它的操作，最大程度保證了流程的單向性。

這里提到的模態(tài)加載是針對(duì)數(shù)據(jù)提交的‘加載中’的一種狀態(tài)表示，用戶提交數(shù)據(jù)后無法進(jìn)行其他操作。

這里需要注意的是需要保留【返回】按鈕。

萬一用戶因?yàn)榫W(wǎng)絡(luò)不好或者其它問題出現(xiàn)了無限加載中的狀態(tài)，還能依靠返回來結(jié)束當(dāng)前加載。不然用戶只能依靠“殺”后臺(tái)來關(guān)掉APP，這是極其不好的體驗(yàn)。

提交過程中的模態(tài)加載

2.2 控件自身加載

控件自身加載最常見的是按鈕的‘加載中’狀態(tài)，大多數(shù)網(wǎng)絡(luò)良好的時(shí)候我們甚至看不見這個(gè)狀態(tài)，但是它確實(shí)實(shí)實(shí)在在非常重要的。

相比全屏的模態(tài)加載，按鈕的加載有一個(gè)弊端就是用戶可能更改其它部分的數(shù)據(jù)，雖然概率極其微小，但是保險(xiǎn)起見，涉及金錢類的歷程最好只用模態(tài)加載。

提交過程中的按鈕加載

2.3 后臺(tái)加載

后臺(tái)加載的意思是用戶在操作后，客戶端立刻反饋操作成功，然后把請(qǐng)求放到后臺(tái)與服務(wù)器交互。

比如常見的點(diǎn)贊、收藏等操作，當(dāng)我們點(diǎn)擊后會(huì)發(fā)現(xiàn)狀態(tài)立即改變，然后在后臺(tái)和服務(wù)器進(jìn)行交互操作，雖然可能操作失敗導(dǎo)致收藏點(diǎn)贊失敗，但是相比成功的概率，失敗微不足道，何況及時(shí)反饋能夠大大提升用戶體驗(yàn)?zāi)亍?/p>

比如美團(tuán)商家詳情，當(dāng)把網(wǎng)絡(luò)狀態(tài)調(diào)至3G時(shí)，我點(diǎn)擊【關(guān)注】按鈕能夠立即變?yōu)椤疽殃P(guān)注】。

還有一個(gè)非常典型的例子是朋友圈的點(diǎn)贊，即使把網(wǎng)絡(luò)關(guān)閉后仍然可以點(diǎn)贊。

先改變狀態(tài)，后處理交互

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

題圖來自Unsplash，基于CC0協(xié)議