大噶好形用，吾系IT修真院上海分院第4期的學(xué)員就轧，一枚純潔善良的PM

今天小課堂給大家介紹一個有意思的交互設(shè)計知識點——緩存、加載和刷新

目錄

一.交互設(shè)計的見與不見

二.緩存

三.加載

四.刷新

五.參考文獻(xiàn)

六.更多討論

一.交互設(shè)計的見與不見

1.看的見的交互設(shè)計：

交互設(shè)計有兩大要素：信息和互動

信息：人們每天面接觸大量多信息田度，從雜亂的信息中篩選出對用戶有價值的妒御，幫助用戶作出選擇，只有用戶完成任務(wù)镇饺。

互動：有了信息之后乎莉，需要設(shè)計用戶和信息的互動。信息的分類奸笤、布局都影響用戶與信息的交互惋啃。用戶對獲取的信息作出反應(yīng)，采取行動监右，應(yīng)用需要給以足夠的反饋來協(xié)助用戶完成任務(wù)边灭。

以上2要素，是表現(xiàn)在用戶界面上給用戶的直接感受秸侣，可以稱之為“看得見的交互設(shè)計”

2.交互設(shè)計的形式

a存筏、信息架構(gòu)

信息分類，通過頁面承載這些信息味榛，并規(guī)劃頁面層次

b椭坚、界面設(shè)計

信息在頁面的布局

c、流程設(shè)計

把一個任務(wù)設(shè)計的頁面信息串聯(lián)起來搏色，形成一個線性流的關(guān)系

3.隱形的交互設(shè)計

以上3點是交互設(shè)計的基本形式善茎，但還有一部分交互設(shè)計，并不是能直觀看到的频轿，但他總在不經(jīng)意間是用戶使用得更加流暢垂涯。我們可以稱之為“看不見的交互設(shè)計”，這也是初級交互設(shè)計師容易忽略的部分航邢。

二.緩存

APP中顯示的數(shù)據(jù)除了從服務(wù)器獲取耕赘，還有一個數(shù)據(jù)來源就是本地數(shù)據(jù)庫（緩存），它給我們的設(shè)計增加了很多豐富性膳殷。緩存就是把已經(jīng)加載過的數(shù)據(jù)保存起來操骡，并在下次需要重復(fù)使用的時候，不需要再向服務(wù)器加載，直接獲取本地數(shù)據(jù)册招。

為什么要加緩存岔激？

場景一：【等待】，在向服務(wù)器請求新的數(shù)據(jù)時是掰。我們讓用戶看到什么虑鼎？第一種是漂亮的等待加載頁面；第二種是緩存的內(nèi)容键痛。

對于第二種炫彩，用戶可以對頁面進(jìn)行操作，等待新數(shù)據(jù)時可以查看舊數(shù)據(jù)散休，更具有“可操作性”與“可用性”媒楼，從而減輕了從服務(wù)器獲取數(shù)據(jù)這一動作的大小和時間長短，增強了用戶體驗戚丸。另一方面划址，如果內(nèi)容更新的間隔較長或者用戶刷新的間隔較短，在沒有緩存的情況下限府，很多數(shù)據(jù)我們會多次重復(fù)的向服務(wù)器獲取夺颤，增加了成本。

場景二：【結(jié)果】胁勺，沒有聯(lián)網(wǎng)世澜，網(wǎng)絡(luò)環(huán)境太差無法加載數(shù)據(jù)時，如果留給用戶一個空白頁面署穗，感覺有點不負(fù)責(zé)任啊寥裂。

并且很多功能在沒有聯(lián)網(wǎng)的情況下也有使用的可能性，比如：APP中的通訊錄案疲，查看一些聊天記錄封恰，通知信息，文章列表等褐啡。因為用戶打開APP不一定是要看新信息诺舔，說不定是回顧老信息，所以恰當(dāng)?shù)木彺婵梢詽M足更多的用戶場景备畦。

場景三：【金錢】低飒，增加緩存是節(jié)省流量的一個方法。雖然節(jié)省的不多或者用戶也察覺不到懂盐，但是作為一個有態(tài)度的產(chǎn)品經(jīng)理褥赊，應(yīng)該多做一些思考。

加緩存應(yīng)該注意的問題：

時間與容量限制莉恼，如果讓緩存無限制的增加拌喉，手機將不堪重負(fù)翼岁，所以應(yīng)該對緩存做些限制，比如多長時間后自動清除緩存司光，可緩存的最大容量是多少；

緩存的分類：

1. 臨時緩存悉患，常用于一個功能頁面內(nèi)残家，保存各欄目的緩存。同一個功能里會把子功能分為多個欄目進(jìn)行劃分售躁，每個標(biāo)簽欄目下的內(nèi)容在本次使用中都可保存為臨時緩存坞淮，在該功能里切換欄目，不需要重新加載數(shù)據(jù)陪捷，使用緩存顯示回窘。

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

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

很多時候我們都會用到臨時緩存，因為那些信息真的不是那么重要蜓肆，而且不需要經(jīng)常反復(fù)查看颜凯，那對于那些我們經(jīng)常使用而且經(jīng)常需要反復(fù)查看的信息，建議采取固定緩存仗扬，保存在本地症概，方便下次翻閱時不需要再一次向服務(wù)器請求數(shù)據(jù)了憔足。

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

第一種是我們最常見的緩存，幾乎所有產(chǎn)品都采用這種緩存方式纱兑。平時用戶瀏覽文章逼友、圖集加載的數(shù)據(jù)就以這種形式緩存在本地精肃，下次看回這篇文章、圖集時就不需要加載了帜乞。用戶也可以手動把這些緩存清理了司抱，釋放空間。

而對于某些特殊場景黎烈，例如一些相對固定的數(shù)據(jù)习柠，我們不愿意一開始就打包進(jìn)App里匀谣，這樣會占太大容量，造成產(chǎn)品包很大资溃，也不愿意每次進(jìn)入頁面都向服務(wù)器加載這些信息武翎，那怎么辦？建議的解決方法就是我們可以只加載一次就永遠(yuǎn)存在本地了溶锭，這樣安裝包也不會大宝恶，以后也不用加載了。

3趴捅、如何清理緩存垫毙？

一般App都會在“設(shè)置”里提供一個清理緩存的功能，一鍵把空間釋放拱绑。除此之外综芥，App最好要設(shè)計自動清理機制，可以通過兩個維度來設(shè)計這個機制猎拨。

（1）膀藐、時間

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

（2）臊泰、容量

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

三.加載

加載如同反饋，在人機交互中厂抽，用戶與界面的每一次互動都是一次加載過程需频。

我們需要一種設(shè)計來緩解用戶等待時間內(nèi)的焦慮感，同時即時反饋頁面狀態(tài)——那就是加載筷凤。

移動端的特點之一是網(wǎng)絡(luò)環(huán)境不穩(wěn)定昭殉，差的網(wǎng)絡(luò)環(huán)境意味著用戶要等待更久的加載時間。在這種情況下藐守，我們不得不考慮在這種間隙向用戶展示什么內(nèi)容才能讓他們感覺不枯燥挪丢，安撫他們。

（1）加載動畫：豐富等待間隙內(nèi)容卢厂，分散用戶等待焦慮注意力 加載動畫的常見使用場景一共分為以下5種：啟動頁加載乾蓬、頁面局部加載、下拉刷新加載慎恒、頁面上拉加載任内、切換新頁面數(shù)據(jù)加載撵渡。動效多用于設(shè)備啟動、連接到網(wǎng)絡(luò)或者加載數(shù)據(jù)死嗦，是為了告知用戶頁面正在加載或刷新中趋距，延長等待時間，避免讓用戶產(chǎn)生頁面打開失敗的錯覺越除。

加載動效但不是萬能的棚品，不要過度設(shè)計，也不要過度使用廊敌。保證動效大小，繁重復(fù)雜的動效可能對APP的頁面打開速度有影響门怪，增加設(shè)備承載負(fù)擔(dān)骡澈，對性能有很大考驗。

（2）進(jìn)度條：傳遞給用戶時間感知

不確定的等待時間比已知的掷空、有限的等待時間讓人覺得更長肋殴。在一些情況下，并不適用動畫加載坦弟，如加載H5护锤，上傳文件，人們會因無法預(yù)知加載時間長短而感到煩躁酿傍。你應(yīng)該給你的用戶一個清晰地等待時間,讓用戶盯著一個下載進(jìn)度條會讓跳出率降低烙懦。

進(jìn)度條可以傳遞給用戶時間的感知，大概能判斷這個過程需要花費多長時間赤炒，一般不強調(diào)準(zhǔn)確性氯析。策劃時，你可以在開始的時候讓速度顯示地快一點莺褒，在結(jié)尾的時候掩缓，顯示速度慢一點，隱藏過程中的延遲遵岩。中途不間斷你辣，否則用戶就會認(rèn)為這個加載或上傳過程卡住了。這也是迅雷慣用伎倆尘执，下載失敗提示要么出現(xiàn)在開始舍哄，要么在最后1%，因為中間99%都是虛的誊锭。剩余最后1%需要加載時蠢熄，你愿意等么？當(dāng)然炉旷！

（3）仿真內(nèi)容和占位符:異步加載签孔，提前進(jìn)入視覺中心

如果你無法縮短加載時間叉讥，那么你應(yīng)該試圖讓用戶在等待中更高興一點〖⒆罚可以利用加載時間顯示一些臨時信息图仓，為了提高用戶的參與度，可以使用模擬內(nèi)容作為文本和圖片但绕。

如果要加載圖片救崔，你可以首先加載一個小型的模糊圖片，然后轉(zhuǎn)化成一個清晰的大圖片捏顺。使用占位圖和仿真內(nèi)容并沒有加快加載過程六孵，但是在用戶眼中加載速度好像變快了

總結(jié)加載設(shè)計的原則：

1. 讓加載變得更加有趣——忘記等待

2. 優(yōu)化加載速度——減少等待時間。

3. 給用戶及時退出加載通道——讓權(quán)

兩個點思考：

1. 不要全全指望加載特效 幅骄，如果加載時長太長劫窒，多么有意思的動畫都壓抑不住用戶煩躁的心。

2. 在網(wǎng)速較快時（人們大部分時間網(wǎng)絡(luò)環(huán)境都挺好的）拆座，那些動畫一閃而過會讓人覺得有點膈應(yīng)主巍，反而成了性能的累贅，因此很多APP又將加載動畫回歸到了簡單菊花樣式上去挪凑。

繁重復(fù)雜的動效會影響app效率孕索，增加設(shè)備承載負(fù)擔(dān)。最難的是把產(chǎn)品做簡單躏碳，而不是做復(fù)雜搞旭。

幾種加載機制

a.啟動頁加載

說到啟動頁，大家肯定首先想到的是廣告位菇绵、節(jié)日營銷或加強品牌意識选脊。可以點擊脸甘，并且一般都可以選擇跳過恳啥。實現(xiàn)方式可以為靜態(tài)頁，也可以是動態(tài)圖丹诀。

還一個更重要的目的钝的，啟動app時的加載量很大（特別是首頁內(nèi)容豐富的產(chǎn)品），需要一個短暫的過程铆遭，廣告幅的啟動頁過渡這個過程一舉兩得硝桩。

另外，啟動頁還有一種做法就是枚荣，做出和首頁一樣碗脊，給人感覺進(jìn)入首頁特別快的錯覺。這算是一種作弊的行為橄妆，好處明顯衙伶，但是一旦被用戶發(fā)現(xiàn)可能惹怒用戶（用戶真是玻璃心捌碜埂），所以使用時要根據(jù)實際情況權(quán)衡好利弊矢劲。

b.界面跳轉(zhuǎn)加載

可分為兩種方式赦拘，當(dāng)前頁加載和進(jìn)入下頁加載。

1.當(dāng)前頁加載：點擊按鈕后芬沉，在當(dāng)前頁提示正在加載并處理躺同，成功后進(jìn)入下一頁。適用于需要判斷及驗證處理的頁面中丸逸。例如表單信息判斷和登錄驗證等蹋艺。

2.進(jìn)入下頁加載：點擊按鈕，跳轉(zhuǎn)至下一頁面并加載內(nèi)容黄刚。絕大部分app采用這種加載方式捎谨，極大的增強了流暢的感覺。

c.白屏加載

多出現(xiàn)在H5頁面中隘击，特點是一次性加載完所有數(shù)據(jù)，界面單一研铆。若加載失敗埋同，頁面為空。

e.分布加載/懶加載/預(yù)加載

界面中各類元素多種多樣棵红，根據(jù)不同需求有不同加載方式凶赁，主要分以下三種：

1.分步加載：優(yōu)先加載占網(wǎng)絡(luò)資源較小的元素。如先文字和默認(rèn)圖標(biāo)后圖片逆甜，圖片加載完成前使用占位符顯示虱肄；當(dāng)加載的頁面內(nèi)容有固定的框架時，可以先加載框架交煞，再加載框架內(nèi)的內(nèi)容咏窿。此方式能夠及時展示相應(yīng)內(nèi)容，減少用戶心理等待時間素征。

2.懶加載：圖片一直是網(wǎng)絡(luò)資源占用大戶集嵌，對于一個前端有幾百張圖片的網(wǎng)站來說，如果首屏即加載所有圖片（無論這些圖片有沒有被用戶看到）御毅，那無疑是既浪費網(wǎng)絡(luò)資源根欧，又傷害用戶體驗的事。目前端蛆，淘寶網(wǎng)凤粗、知乎等大流量網(wǎng)站都已經(jīng)使用了圖片滾動懶加載的方案——僅當(dāng)圖片滾入視窗，被用戶看到的時候今豆，才會去真正加載嫌拣。

3.預(yù)加載：就是提前加載柔袁。如在啟動頁時預(yù)加載首頁；通常應(yīng)用在信息流中亭罪。比如搜索結(jié)果頁瘦馍，也就是我們經(jīng)常看到的列表視圖应役。當(dāng)我們“將要滑到”頁面底部時情组，頁面自動請求數(shù)據(jù)，為你加載出下一頁箩祥。所以一般你在瀏覽下圖這種列表時院崇，感覺非常流暢。因為頁面進(jìn)行了預(yù)加載袍祖。

f.智能加載

考慮網(wǎng)絡(luò)流量問題底瓣，智能加載不僅需要考慮加載的速度，還需要考慮用戶流量成本蕉陋。因此通常應(yīng)用于WIFI和4G網(wǎng)絡(luò)切換條件下捐凭，另外還需產(chǎn)品判定網(wǎng)絡(luò)是否通暢。

在WIFI條件下：優(yōu)先加載高質(zhì)量圖片凳鬓、優(yōu)質(zhì)音樂和視頻茁肠；

在4G條件下：下載行為自動終止，優(yōu)先加載普通甚至停止加載圖片或音樂視頻缩举；

在網(wǎng)絡(luò)不通暢下：默認(rèn)加載低質(zhì)量甚至停止加載圖片或音樂視頻垦梆；

g.緩存加載

針對無網(wǎng)絡(luò)的情況下，讓用戶仍能查看之前已緩存在本地的信息仅孩，使頁面不至于空白托猩，這不僅能夠有效減少用戶流量成本，同時增加了訪問速度辽慕。

思考：先加載還是先展示京腥？

當(dāng)用戶打開你的app，你希望先把數(shù)據(jù)（緩存數(shù)據(jù)的時效性）展示給他溅蛉，還任由他在上面操作绞旅，還是等數(shù)據(jù)加載好了，再給他呢温艇？

淘寶

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

隨便點擊一個模塊（不要點菜單）勺爱，下面要展示的將要是內(nèi)容（商品）晃琳，所以是先加載再展示的，沒有加載完都不展示。

京東也是一樣卫旱。

兩種方式各有利弊：

a人灼、先展示，后加載：

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

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

b投放、先加載，后展示：

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

缺點：網(wǎng)絡(luò)不好時适贸，造成等待

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

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

總結(jié)：加載設(shè)計的核心原則

1展东、讓加載變得更加有趣——忘記等待赔硫。

2、優(yōu)化加載速度——減少等待時間琅锻。

3卦停、保證用戶對加載的可控性——讓權(quán)向胡。

四.刷新

2012年恼蓬，Twitter發(fā)明了這種 Pull to refresh 刷新方式，引發(fā)產(chǎn)品交互的一個小浪潮僵芹，大大小小的App爭先效仿处硬，甚至有開發(fā)者把它帶到Chrome和Safari上面去了！

慢慢地下拉刷新已經(jīng)成為操作習(xí)慣拇派，經(jīng)典的下拉刷新會帶著整個頁面向下移動荷辕。用戶體驗做得越來越細(xì)后，在做下拉動作時件豌，只是從屏幕上方拉下一個簡單的刷新動畫疮方，更加輕便，降低頁面變化的動作茧彤，增強用戶體驗骡显。 京東下拉頁面已不局限于“更新”了，而是賦予其新功能：主題活動。進(jìn)入App后惫谤，京東的下拉頁面出現(xiàn)的大促活動的游戲壁顶，這是下拉更新的基礎(chǔ)上大膽創(chuàng)新，另外包括一些卡通形象賣萌增加品牌認(rèn)知（好像扯遠(yuǎn)了）溜歪。

刷新機制

刷新機制也是設(shè)計師很容易忽略的問題若专，合理的刷新機制能讓產(chǎn)品使用起來更流暢

普遍情況下，刷新機制有以下三種：

方案一：手勢刷新

通過手指在屏幕上的左劃右劃上劃下劃達(dá)到刷新的目的蝴猪，也包括一些瀏覽器產(chǎn)品的自定義手勢调衰，如橫折折勾，進(jìn)行刷新拯腮。最常見的是下拉刷新

方案二：點擊刷新

通過點擊一個按鈕達(dá)到刷新數(shù)據(jù)的目的窖式，但是如今刷新按鈕的存在已經(jīng)成為一種過時的表現(xiàn)，況且在手機那么小的界面上還需要為刷新按鈕騰出空間动壤，會挺費勁的萝喘。不過避免形式主義，用得恰到好處才是設(shè)計的精髓琼懊，這種刷新方案還是按需使用吧阁簸。

need-to-insert-img

方案三：自動刷新

根據(jù)設(shè)定好的規(guī)則，如時間哼丈、事件規(guī)則自動向服務(wù)器獲取新數(shù)據(jù)并替換舊數(shù)據(jù)启妹。使用自動刷新需要根據(jù)場景來考慮是否合適

場景一——對于頻繁更新的內(nèi)容、有時效性的內(nèi)容醉旦，用戶在一個設(shè)定的時間沒有使用饶米，則可考慮在下次使用時，自動刷新车胡，把新的內(nèi)容推送給用戶

類似微博檬输、新聞這種具有時效性的產(chǎn)品，用戶在24小時內(nèi)未打開產(chǎn)品匈棘，則在下次打開時幫用戶自動更新Timeline

場景二——對于一個相對穩(wěn)定丧慈，數(shù)據(jù)不會經(jīng)常變化的頁面，可以考慮設(shè)定時間規(guī)則主卫，在后臺為用戶默默更新數(shù)據(jù)并替換舊數(shù)據(jù)

關(guān)于刷新的拓展思考：

刷新看似是一個比較簡單逃默，深入研究起來，還是蠻復(fù)雜的簇搅。需要考慮的點很多（產(chǎn)品中很多細(xì)節(jié)也是這樣）：

1.刷新的觸發(fā)條件（現(xiàn)在移動端產(chǎn)品絕大部分的刷新方式都是下拉刷新與點擊刷新按鈕刷新完域。）

2.刷新成功，刷新出新內(nèi)容瘩将，提示文案是什么吟税？

3.刷新成功关噪，沒有新內(nèi)容，提示文案是什么乌妙？

4.刷新失敗使兔，有緩存的時候，提示文案

5.刷新失敗藤韵，無緩存的時候虐沥，提示文案是什么

6.連續(xù)刷新時的保護(hù)：比如10秒內(nèi)連續(xù)刷新10次，這個時候需要有一定的機制進(jìn)行帥新保護(hù)泽艘，防止前端請求接口太過頻繁欲险，在給頁面沒有進(jìn)行壓測的情況下有可能會導(dǎo)致服務(wù)器宕機。

7.刷新規(guī)則：比如新聞咨詢類APP匹涮，是顯示最新的10條新聞還是其他的邏輯天试。

五.參考文獻(xiàn)

產(chǎn)品必看：三大要點助你緩解APP用戶等待焦慮——三哥

關(guān)于加載設(shè)計，你要知道的8種策略和4種樣式—— 劉東晨

交互設(shè)計的三大隱形機制:加載然低、刷新和緩存-馬海祥博客

淺談APP設(shè)計中的緩存喜每、加載與刷新—— 耿瑞超

徹底弄懂HTTP緩存機制及原理——土木有水微博

六.更多討論

小組討論問題：

視頻通道：