一让禀、緩存機(jī)制

1、為什么要加緩存陨界？

場景一：【等待】巡揍，在向服務(wù)器請求新的數(shù)據(jù)時。我們讓用戶看到什么菌瘪？第一種是漂亮的等待加載頁面腮敌；第二種是緩存的內(nèi)容阱当。對于第二種，用戶可以對頁面進(jìn)行操作糜工，等待新數(shù)據(jù)時可以查看舊數(shù)據(jù)弊添，更具有“可操作性”與“可用性”，從而減輕了從服務(wù)器獲取數(shù)據(jù)這一動作的大小和時間長短捌木，增強(qiáng)了用戶體驗(yàn)油坝。另一方面，如果內(nèi)容更新的間隔較長或者用戶刷新的間隔較短刨裆，在沒有緩存的情況下澈圈，很多數(shù)據(jù)我們會多次重復(fù)的向服務(wù)器獲取，增加了成本帆啃。

場景二：【結(jié)果】沒有聯(lián)網(wǎng)瞬女，或者在地鐵上網(wǎng)絡(luò)太差無法加載數(shù)據(jù)時，如果留給用戶一個空白頁面链瓦，實(shí)在是感覺有點(diǎn)不負(fù)責(zé)任啊拆魏。并且很多功能在沒有聯(lián)網(wǎng)的情況下也有使用的可能性，比如：APP中的通訊錄慈俯，查看一些聊天記錄渤刃，通知信息，文章列表等贴膘。因?yàn)橛脩舸蜷_APP不一定是要看新信息卖子，說不定是回顧老信息（或許老信息里也有用戶之前沒看的），所以恰當(dāng)?shù)木彺婵梢詽M足更多的用戶場景刑峡。

場景三：【金錢】有一天洋闽，一個用戶發(fā)現(xiàn)自己裝了某個APP后流量用的特別快，Ta可能永遠(yuǎn)將這個APP打入冷宮了突梦，而增加緩存正是節(jié)省流量的一個方法诫舅。雖然節(jié)省的不多或者用戶也察覺不到，但是作為一個有態(tài)度的產(chǎn)品經(jīng)理宫患，應(yīng)該多做一些思考刊懈。

2、什么是緩存娃闲？

緩存可分為如下幾類：

（1）app緩存虚汛。

（2）固定緩存。

（3）可手動清理的緩存皇帮。

（4）不可手動清理的緩存卷哩。

（5）臨時緩存。

其中属拾，臨時緩存常用于一個功能頁面內(nèi)将谊，保存各欄目的緩存冷溶。同一個功能里會把子功能分為多個欄目進(jìn)行劃分，每個標(biāo)簽欄目下的內(nèi)容在本次使用中都可保存為臨時緩存瓢娜，在該功能里切換欄目挂洛，不需要重新加載數(shù)據(jù)，使用緩存顯示眠砾。

對于用戶來說虏劲，使用時達(dá)到了無縫切換瀏覽，對于服務(wù)器來說褒颈，在短時間內(nèi)數(shù)據(jù)很少會有更新柒巫，所以在一般情況下能滿足用戶的正常需求，并達(dá)到體驗(yàn)優(yōu)秀谷丸。

臨時緩存的清理機(jī)制是：退出該功能模塊就清除之前的緩存堡掏。也就是說下次進(jìn)入該功能模塊，需要重新獲取一次數(shù)據(jù)刨疼。

很多時候我們都會用到臨時緩存泉唁，因?yàn)槟切┬畔⒄娴牟皇悄敲粗匾也恍枰?jīng)常反復(fù)查看揩慕，那對于那些我們經(jīng)常使用而且經(jīng)常需要反復(fù)查看的信息亭畜，馬海祥建議采取固定緩存，保存在本地迎卤，方便下次翻閱時不需要再一次向服務(wù)器請求數(shù)據(jù)了拴鸵。

對于固定緩存又會細(xì)分為可手動清理的緩存和不可手動清理的緩存。

第一種是我們最常見的緩存蜗搔，幾乎所有產(chǎn)品都采用這種緩存方式劲藐。平時用戶瀏覽文章、圖集加載的數(shù)據(jù)就以這種形式緩存在本地樟凄，下次看回這篇文章聘芜、圖集時就不需要加載了。用戶也可以手動把這些緩存清理了缝龄，釋放空間厉膀。

而對于某些特殊場景，例如一些相對固定的數(shù)據(jù)二拐，我們不愿意一開始就打包進(jìn)App里，這樣會占太大容量凳兵，造成產(chǎn)品包很大百新，也不愿意每次進(jìn)入頁面都向服務(wù)器加載這些信息，那怎么辦庐扫？建議的解決方法就是我們可以只加載一次就永遠(yuǎn)存在本地了饭望，這樣安裝包也不會大仗哨，以后也不用加載了。

3铅辞、如何清理緩存厌漂？

一般App都會在“設(shè)置”里提供一個清理緩存的功能，一鍵把空間釋放斟珊。除此之外苇倡，App最好要設(shè)計(jì)自動清理機(jī)制，可以通過兩個維度來設(shè)計(jì)這個機(jī)制囤踩。

（1）旨椒、時間

通過設(shè)定一個固定的時間，或者根據(jù)用戶使用周期靈活設(shè)定時間來清理緩存堵漱。每個產(chǎn)品的場景不一综慎，用戶使用頻率不一，設(shè)定這個機(jī)制的時候就需要結(jié)合實(shí)際情況考慮了勤庐。

（2）示惊、容量

一般是設(shè)定一個容量上限，采用堆棧的設(shè)計(jì)原理進(jìn)行緩存清理愉镰，溢出堆棧的舊數(shù)據(jù)將自動清除米罚。

二、加載機(jī)制

1岛杀、頁面加載

方案1：單頁面整體加載

這種加載比較簡單阔拳，一般運(yùn)用在頁面內(nèi)容比較單一的情況下，所以直接一次性加載完所有數(shù)據(jù)后再顯示內(nèi)容类嗤。其單頁面加載失敗的狀態(tài)相對來說也比較好處理宠进。

方案2：單頁面分塊加載

這種方案的特點(diǎn)是，能讓用戶逐步看到內(nèi)容才避，在這個漸進(jìn)的過程中降低用戶的焦慮心理迎吵。

其中又可以分為，模塊間有關(guān)聯(lián)性的精偿，先加載父內(nèi)容弧圆，再加載子內(nèi)容。如優(yōu)酷笔咽，先把欄目加載出來搔预，再加載各欄目的內(nèi)容。

模塊間沒有絕對關(guān)聯(lián)性的叶组，可獨(dú)自加載各自模塊內(nèi)容拯田，根據(jù)請求的速度不同分別顯示。這樣處理有一定幾率讓用戶在沒完全刷出數(shù)據(jù)的情況下就能找到自己需要的功能甩十，如大眾點(diǎn)評船庇、淘寶客戶端等吭产。

框架固定，內(nèi)容更新的鸭轮，可先把框架顯示出來臣淤，再把各模塊的數(shù)據(jù)各自加載顯示，如各種iOS自帶應(yīng)用窃爷。

這種分模塊加載的需要特別注意加載失敗的狀態(tài)邑蒋，畢竟每個模塊都提示加載失敗，點(diǎn)擊重試是很挫的一件事吞鸭，可以根據(jù)信息的優(yōu)先級來決定哪些數(shù)據(jù)失敗了采用默認(rèn)狀態(tài)寺董，哪些數(shù)據(jù)采用失敗提示。

方案3：跨頁面加載

父頁面&子頁面 or 同一app內(nèi)刻剥，頁面間字段可以復(fù)用的遮咖，在加載子頁面時不需要重新加載新數(shù)據(jù)。

方案4：預(yù)加載

這種加載方式的特點(diǎn)是造虏，在加載一個頁面內(nèi)容的同時御吞，預(yù)測用戶的下一步行為，并為他下一步需要使用的頁面加載內(nèi)容漓藕，使得他在下一步的操作中能立刻獲取信息而不需要加載等待陶珠。

預(yù)加載提供給用戶無縫的產(chǎn)品使用體驗(yàn)，使得用戶在使用產(chǎn)品的過程中更直接流暢享钞，沒有被打斷的感覺揍诽。

具體的例子有：

在瀏覽圖集的時候，當(dāng)看到第一張的圖片時栗竖，就自動后臺加載第二第三第四張圖片暑脆，用戶瀏覽完第一張圖片切換到第二張時就不會有加載等待的過程。

在瀏覽新聞列表時狐肢，就把每篇新聞的內(nèi)容在后臺進(jìn)行預(yù)加載添吗，用戶選擇看某篇新聞時，能立刻閱讀到內(nèi)容份名。

但是這種方案也需要面臨很多的問題碟联，馬海祥覺得最直接的就是流量問題，因?yàn)闀詣优艿艉芏嘤脩艨赡芨居貌簧系臄?shù)據(jù)流量僵腺，所以鲤孵，一般情況下馬海祥建議可以設(shè)定在wifi環(huán)境才采用這種加載模式。又或者設(shè)定加載規(guī)則辰如，只把主要內(nèi)容預(yù)加載普监，而部分次要內(nèi)容可以在用戶真的用到的時候才加載，例如預(yù)加載新聞?wù)牡那闆r，可以只加載文本信息鹰椒，圖片信息等到用戶進(jìn)入內(nèi)頁才加載。這種預(yù)加載與分塊加載結(jié)合的方式也普遍運(yùn)用在各個場景呕童。

另外漆际，預(yù)加載也需要時間的，他只是不在客戶端顯示給用戶夺饲，默默在后臺運(yùn)作而已奸汇，需要特殊考慮未加載完用戶就使用到那些信息的情況，所以在做預(yù)加載設(shè)計(jì)時需要同時考慮另一種適合該情況的普通加載方式往声。

預(yù)加載需要根據(jù)具體的場景來進(jìn)行設(shè)計(jì)擂找，設(shè)定好信息優(yōu)先級，綜合考慮各種類型信息的具體大小流量浩销，整體考慮預(yù)加載的方式贯涎，這些都是需要經(jīng)過精心分析思考的。

隨著網(wǎng)絡(luò)環(huán)境的發(fā)展慢洋，預(yù)加載將成為以后產(chǎn)品普遍的加載方式塘雳，他提供給用戶的無縫使用體驗(yàn)**地提升了產(chǎn)品的可用性。

2普筹、操作加載

除了頁面的信息需要加載败明，頁面內(nèi)的操作也是需要通過給服務(wù)器發(fā)送請求記錄的。

方案1：加載層

進(jìn)行一個操作后太防，彈出模態(tài)的提示層妻顶，告知用戶正在加載。采用模態(tài)的提示主要是防止用戶在該過程中進(jìn)行其他操作蜒车，導(dǎo)致當(dāng)前加載出錯讳嘱。由于采用模態(tài)的提示，并且有可能因?yàn)榫W(wǎng)絡(luò)原因?qū)е麻L時間處于加載狀態(tài)醇王，建議提供一個“關(guān)閉”的操作呢燥，中止本次加載，恢復(fù)App可用狀態(tài)寓娩。加載失敗時可在當(dāng)前浮層變換為失敗提示叛氨。模態(tài)提示層是最穩(wěn)妥的方式，但他會使用戶在使用過程中有打斷的感覺棘伴。

方案2：控件自身加載狀態(tài)

這種方式是把操作加載的狀態(tài)與控件的樣式結(jié)合起來了寞埠，對某個控件進(jìn)行操作后，控件變換為加載狀態(tài)焊夸，此時控件不能重復(fù)操作仁连。由于這種加載方式是控件的自身狀態(tài)，不影響其他操作，所以用戶也可以對頁面進(jìn)行其他操作饭冬，可能會導(dǎo)致同時有多個請求的情況使鹅，增加了加載失敗的風(fēng)險，這也算是這種方式的弊端昌抠，不過這種極端情況很少出現(xiàn)患朱。請求失敗后，可配合Toast提示告知用戶失敗的原因炊苫。

方案3：后臺加載

用戶在操作后裁厅，客戶端立刻反饋操作成功，然后把請求放到后臺與服務(wù)器交互侨艾，這一過程用戶不需要了解执虹，不需要等待，在正常情況**驗(yàn)是非常棒的唠梨。

但是在極端情況下會出現(xiàn)一些莫名其妙的狀況袋励，由于是后臺記錄請求并與服務(wù)器交互，所以實(shí)際請求是否成功客戶端是不說明的姻成，全部以操作成功來顯示插龄，這就會導(dǎo)致用戶誤以為操作成功了，但實(shí)際上下次來看發(fā)現(xiàn)沒有成功科展。

所以均牢，這種加載方式是需要根據(jù)具體使用場景來權(quán)衡使用的，對于一些重要的操作才睹，建議還是使用模態(tài)的方式加載徘跪，對于一些小操作，如點(diǎn)贊琅攘、訂閱垮庐、關(guān)注，可采用后臺加載的方式坞琴。

3哨查、下一頁加載還是當(dāng)前也加載

用戶進(jìn)入首頁，正式邁出體驗(yàn)的第一步剧辐，接下來迎接的就是基于用戶目標(biāo)的界面間跳轉(zhuǎn)寒亥。完成界面的跳轉(zhuǎn)，會有各種加載策略荧关，但無論形式如何溉奕，我們都可以將其歸為兩大類：“下一頁加載”、“當(dāng)前頁加載”忍啤。

（1）“下一頁加載”滿足了用戶提前窺視的需求

我們把頁面看成“點(diǎn)”加勤，頁面流是連接這些點(diǎn)的“線”，我們以“用戶想買一條牛仔褲”這一場景作為案例做了簡單的眼動研究，從應(yīng)用啟動到商品瀏覽再到商品確定最后進(jìn)入下單頁鳄梅，用戶所呈現(xiàn)的瞳孔梯次增大叠国，即E>D>C>B>A，為了解釋這一現(xiàn)象戴尸，通過與被試交流煎饼，我們發(fā)現(xiàn)相比于各種瀏覽，用戶更期待看到他們想看到的東西校赤。因此此時的”下一頁加載“正好，滿足了用戶提前窺視的需求筒溃。

（2） Wait马篮！I Need Think Think

我們以同樣的方式又對“使用支付寶對手機(jī)充值”這一場景做了研究，從開始支付到二次確認(rèn)支付怜奖，用戶所呈現(xiàn)的瞳孔都比較大浑测，即A與B近似相等，通過訪談歪玲，我們發(fā)現(xiàn)與“遞增體驗(yàn)流”不同的是迁央，當(dāng)用戶遇到判斷邏輯的界面時，用戶并非急于想看下一頁面到底包含怎樣的內(nèi)容滥崩，而是非0即1的驗(yàn)證心態(tài)岖圈，即我的操作效成功了嗎？因此在判斷邏輯界面中钙皮，用戶的內(nèi)容窺視需求并不強(qiáng)蜂科，當(dāng)然也沒什么內(nèi)容，要么僅是一個小小的Toast短条，再大一點(diǎn)就是一個簡單的信息反饋界面（意味著“下一頁加載”在這里就是個雞肋）导匣，用戶反而對非0即1的驗(yàn)證需求較為強(qiáng)烈，其中還伴隨著等待結(jié)果過程中的緊張感茸时、激動感贡定，因此界面通過當(dāng)前頁加載表明系統(tǒng)正在努力地處理用戶交代的指令**了用戶的緊張感、激動感可都，直到結(jié)果顯現(xiàn)——“處理成功”缓待，完成了非0即1驗(yàn)證的滿足感。

4汹粤、先加載還是先展示

當(dāng)需加載的是功能時命斧，可以先展示再加載，當(dāng)需加載的是內(nèi)容時嘱兼，則反過來国葬。

淘寶

打開APP的第一個頁面是功能，所以先展示再加載的：

隨便點(diǎn)擊一個模塊（不要點(diǎn)菜單），下面要展示的將要是內(nèi)容（商品）汇四，所以是先加載再展示的接奈，沒有加載完都不展示：

京東

同樣的，功能模塊先展示后加載：

內(nèi)容先加載通孽，沒加載完不展示：

兩種方式各有利弊：

先展示序宦，后加載：

優(yōu)點(diǎn)：給用戶0等待的錯覺

缺點(diǎn)：當(dāng)前數(shù)據(jù)有可能是錯的，而且得等用戶操作到最后一步才會發(fā)現(xiàn)

先加載背苦，后展示：

優(yōu)點(diǎn)：保證數(shù)據(jù)的質(zhì)量和準(zhǔn)確

缺點(diǎn)：網(wǎng)絡(luò)不好時互捌，造成等待

顯然，功能模塊對于一個產(chǎn)品來說是既有固定的行剂，在短時間內(nèi)幾乎不會更新秕噪，所以這種數(shù)據(jù)出現(xiàn)錯誤或與當(dāng)前狀態(tài)不同的幾率小得多，因此厚宰，可以使用先展示后加載的方式腌巾。

另一方面，內(nèi)容（特別是商品數(shù)據(jù)）是最容易產(chǎn)生變動的铲觉，為了保證每一個消費(fèi)者看到的數(shù)據(jù)都是最真實(shí)澈蝙，最準(zhǔn)確的，所以務(wù)必要先加載再展示撵幽。

三灯荧、刷新機(jī)制

1、空白頁面刷新失敗有提示

現(xiàn)在的應(yīng)用都標(biāo)榜以內(nèi)容為中心盐杂，所以都會極力避免空白頁面的出現(xiàn)漏麦。對于大部分的應(yīng)用，最好的方法就是使用緩存况褪，進(jìn)入頁面之后撕贞，先顯示之前的緩存，然后再進(jìn)行內(nèi)容的刷新测垛。其次捏膨，消滅空白頁面的第二種方法就是提供系統(tǒng)推薦項(xiàng)進(jìn)行替代。但是對于一些頁面食侮，頁面內(nèi)容跟用戶的使用狀態(tài)關(guān)系密切号涯，無法避免會出現(xiàn)空白頁面，這時候會使用一些引導(dǎo)類的提示锯七，使得頁面變得更加豐富链快，同時可以促進(jìn)用戶產(chǎn)生內(nèi)容。

但是一些資訊類應(yīng)用眉尸，比如讀讀日報域蜗，打開默認(rèn)是空白頁面巨双，然后再加載內(nèi)容（我不是很明白這種設(shè)定）。其他一些應(yīng)用霉祸，比如：豆瓣一刻和MONO筑累，每天第一次進(jìn)入應(yīng)用的時候也會出現(xiàn)空白頁面。我猜想第二類應(yīng)用的展示方式的原因是這樣的丝蹭。他們的內(nèi)容**都是嚴(yán)格以天為單位的慢宗，每天固定時段**精選內(nèi)容。他們會希望你每天只看并且看完當(dāng)天的東西奔穿，所以一旦到了第二天镜沽，昨天的內(nèi)容就是累贅了。所以每天第一次進(jìn)入應(yīng)用的時候會出現(xiàn)空白頁面贱田，象征著每天都是從新開始淘邻。此時就會對應(yīng)一個“空白刷新”邏輯。

空白刷新對應(yīng)的場景是這樣子的：用戶想要刷新出內(nèi)容湘换，并且用戶知道這里可以刷出新內(nèi)容，但是沒有刷新成功统阿，這時候需要給用戶一個交待彩倚。所以需要提示用戶。同時扶平，提示完用戶之后需要給用戶一個解決方法帆离，這就是“點(diǎn)擊后重試”。

2结澄、緩存頁面刷新失敗無提示

常見的應(yīng)用比如知乎哥谷、網(wǎng)易新聞、好奇心日報麻献、微信朋友圈等们妥，這些應(yīng)用都會采用緩存的形式，打開之后顯示的是緩存內(nèi)容勉吻，然后系統(tǒng)會給服務(wù)器發(fā)送請求监婶，如果有內(nèi)容更新的話就會自動更新一次內(nèi)容，更新之后的內(nèi)容直接覆蓋當(dāng)前的內(nèi)容齿桃。更新失敗之后是沒有提示的惑惶。但是有一些應(yīng)用，比如有道詞典短纵、企鵝FM带污、網(wǎng)易云音樂等，他們更新失敗之后是有提示的香到。

我覺得這兩種應(yīng)用的區(qū)分點(diǎn)在于

應(yīng)用的使用頻率鱼冀；

內(nèi)容的時間連續(xù)性报破；

界面之間的關(guān)系緊密度。

比如說網(wǎng)易新聞雷绢，作為一個打發(fā)時間的工具泛烙，每天使用頻率就會比較高，所以用戶進(jìn)來之后是想看看有沒有更新翘紊。其次蔽氨，網(wǎng)易新聞的內(nèi)容是連續(xù)不斷更新的，所以用戶會知道當(dāng)前顯示的內(nèi)容是我看看過并且處理過的帆疟。最后鹉究，新聞列表頁面顯示的是摘要，用戶可以通過摘要快速進(jìn)行判斷是否要進(jìn)入詳情頁踪宠，摘要有助于幫助用戶回憶上一次的使用場景自赔。

所以這就對應(yīng)著一個這樣的場景：用戶只是想看看有沒有更新，所以他們已經(jīng)做好了“沒有新內(nèi)容”的心理預(yù)期柳琢，所以即使是更新不了內(nèi)容绍妨，用戶也不會想太多。反倒是柬脸，如果進(jìn)行了錯誤提示他去，用戶可能會有一種挫敗感。因?yàn)樗垃F(xiàn)在有內(nèi)容倒堕，只是因?yàn)榫W(wǎng)絡(luò)的原因而沒有更新灾测，他要進(jìn)行的任務(wù)受到了外界因素的阻礙，由此產(chǎn)生一種細(xì)微的挫敗感垦巴。

3媳搪、緩存頁面刷新失敗有提示

另一類應(yīng)用，使用頻率沒那么高骤宣，或者內(nèi)容不具備時間連續(xù)性的秦爆，又或者說當(dāng)前界面無法喚起用戶上一次的使用場景。那么就有必要進(jìn)行率先你失敗提示了憔披。

比如說企鵝FM鲜结，音頻類的應(yīng)用注定使用不會那么頻繁，因?yàn)橥ㄟ^視覺接收的信息會比通過聽覺接收的信息更快更多活逆，同時音頻類對環(huán)境的要求較高（比如用耳機(jī)時要求環(huán)境不那么嘈雜精刷，外放時要求在私人場所）。其次蔗候，此類應(yīng)用都是實(shí)時推薦的怒允，不存在時間連續(xù)性的問題，用戶無法通過時間來判斷內(nèi)容是否被閱讀過锈遥。再者纫事，標(biāo)題也無法幫你快速做出判斷勘畔，你還是要進(jìn)去聽過才知道內(nèi)容是什么。最后如果不提醒丽惶，用戶進(jìn)入到詳情頁再收到提醒炫七，就會覺得應(yīng)用浪費(fèi)了用戶的時間。所以钾唬，對于此類內(nèi)容万哪，刷新失敗是有必要進(jìn)行提醒的。