詳細解析通過(guò)設計讓APP變快的6個(gè)方法發(fā)布者：本站     時(shí)間：2021-12-23 11:12:21

我們都知道不管網(wǎng)頁(yè)還是移動(dòng)應用，響應速度都是最重要的體驗指標之一，并且移動(dòng)應用的網(wǎng)絡(luò )環(huán)境不穩定，速度的體驗顯得尤為重要。其實(shí)速度優(yōu)化不僅是程序員的事，設計，也能夠讓APP變得更快。

1.后臺執行

這是一條很通用，也容易理解的方法。用戶(hù)不會(huì )愿意盯著(zhù)進(jìn)度條傻傻地等待，除了“取消”沒(méi)有其他選擇。在系統處理一些網(wǎng)絡(luò )任務(wù)的時(shí)候，完全可以允許用戶(hù)做一些其他的事情。

各大平臺的發(fā)微博，都采用了后臺執行。云閱讀的離線(xiàn)下載也采用后臺執行。

詳細解析通過(guò)設計讓APP變快的6個(gè)方法,PS教程,

而微博的看長(cháng)圖(或視頻)，是個(gè)反例。網(wǎng)絡(luò )不給力時(shí)，要么等待1分鐘讓圖加載完，要不就只好放棄看圖。為什么不能讓圖加載的同時(shí)，用戶(hù)可以看其他微博呢?

詳細解析通過(guò)設計讓APP變快的6個(gè)方法,PS教程,

2.在載入前顯示內容

客戶(hù)端與web的一個(gè)不同點(diǎn)，客戶(hù)端的顯示內容包括本地數據和網(wǎng)絡(luò )數據兩部分。在設計界面時(shí)，將更多的信息放在本地，在網(wǎng)絡(luò )數據未載入時(shí)即顯示本地數據，讓用戶(hù)產(chǎn)生一種“已經(jīng)載入一半了”的錯覺(jué)，即使最終的耗時(shí)一樣，心理感受也會(huì )更快。當然把數據過(guò)多地寫(xiě)在本地，會(huì )犧牲一些靈活性，需要根據具體情況考慮。

具體請看twitter、Facebook、Vine等優(yōu)秀產(chǎn)品的啟動(dòng)畫(huà)面，雖然同是靜態(tài)圖片，但它們不使用LOGO而假裝已經(jīng)載入了“導航欄”和“標題欄”，讓人感覺(jué)“點(diǎn)擊后立即就啟動(dòng)了”。

詳細解析通過(guò)設計讓APP變快的6個(gè)方法,PS教程,

再如App Store的詳情頁(yè)，在詳細信息載入前，已有信息先顯示。

詳細解析通過(guò)設計讓APP變快的6個(gè)方法,PS教程,

3.充分利用好緩存

緩存可以把網(wǎng)絡(luò )數據保存在本地，下次打開(kāi)時(shí)無(wú)需要再次向網(wǎng)絡(luò )請求，減少流量并減少等待時(shí)間。在設計時(shí)，可以先顯示緩存內容，同時(shí)后臺到網(wǎng)絡(luò )上拉取新內容，若有新內容立即替換或下次訪(fǎng)問(wèn)時(shí)替換。但緩存使用也要注意“度”，過(guò)大的緩存文件占用太多的系統空間，會(huì )讓用戶(hù)一怒之下卸載APP。

云閱讀的“書(shū)城”和“通過(guò)微博找好友”等界面，都使用了緩存機制，提高打開(kāi)頁(yè)面的速度。

詳細解析通過(guò)設計讓APP變快的6個(gè)方法,PS教程,

4.界面先行，網(wǎng)絡(luò )交互隨后

對于一些數據量很小，且失敗可能性較小的網(wǎng)絡(luò )交互，用戶(hù)并不需要明確知道APP在干這些事情，也能夠順暢地使用APP，那么我們就應該“把一些事實(shí)掩蓋起來(lái)”，即界面上聽(tīng)話(huà)地、迅速地完成任務(wù)(心智模型)，程序后臺默默地繼續執行任務(wù)(實(shí)現模型)。

最常用的比如QQ、微信、易信等聊天界面。點(diǎn)擊發(fā)送后，消息立即”飛”到聊天上下文中，其實(shí)對方還沒(méi)收到。但這樣的設計讓溝通的過(guò)程更順暢，沒(méi)有“正在發(fā)送 – 發(fā)送成功”各種過(guò)程的干擾。

詳細解析通過(guò)設計讓APP變快的6個(gè)方法,PS教程,

用戶(hù)在收藏文章，關(guān)注好友等操作時(shí)，數據量很小，可以界面先行。用戶(hù)在繼續瀏覽文章的同時(shí)，系統會(huì )把文章收藏好。

詳細解析通過(guò)設計讓APP變快的6個(gè)方法,PS教程,

與此思路相仿的另一種方法也常被用到：在無(wú)網(wǎng)絡(luò )條件下，用戶(hù)進(jìn)行操作(比如寫(xiě)評論，寫(xiě)備注等)，把用戶(hù)的輸入內容保存在本地，等到有網(wǎng)絡(luò )時(shí)再上傳。讓用戶(hù)有連貫的體驗。

5.預測用戶(hù)行為，提前開(kāi)始任務(wù)

不知道大家使用淘寶有沒(méi)有這樣的習慣，在搜索結果列表，將所有感興趣的結果都打開(kāi)為新標簽頁(yè)，然后一個(gè)個(gè)地看，沒(méi)興趣的就關(guān)閉。這樣做的好處是，在我瀏覽商品詳情頁(yè)的時(shí)候，每個(gè)頁(yè)面都是載入完全了，否則我點(diǎn)開(kāi)一個(gè)看一個(gè)，每個(gè)都要等待加載完，就會(huì )大大降低效率。

那么能否通過(guò)設計，來(lái)滿(mǎn)足類(lèi)似使用場(chǎng)景呢?應該是可以的，那就是預測用戶(hù)的行為，提前開(kāi)始任務(wù)。

策略類(lèi)似這樣：

用戶(hù)在某個(gè)界面停留的時(shí)候，預測下一步可能做ABC三個(gè)任務(wù)，系統于是把這些任務(wù)都提前做完。當用戶(hù)做出選擇比如A時(shí)，界面可以迅速響應，并且同時(shí)把BC兩個(gè)任務(wù)從內存中清空掉以節省資源。(當然這招也有限制：1，只適用于免費的網(wǎng)絡(luò )。2，預加載不能影響系統的性能)

我們就回來(lái)看淘寶的iPad客戶(hù)端。它有這樣的設計，在某詳情頁(yè)查看時(shí)，向右一劃可以查看下一個(gè)商品，也許這是一個(gè)好設計，但是卻沒(méi)有幫我預加載下一個(gè)界面，我還是不得不傻傻地等頁(yè)面加載完。

詳細解析通過(guò)設計讓APP變快的6個(gè)方法,PS教程,

那我們看一些其他的設計

在網(wǎng)易云閱讀，我們認為用戶(hù)進(jìn)入一個(gè)資訊源的一個(gè)最大可能就是刷新查看新內容。所以即使沒(méi)有打開(kāi)自動(dòng)刷新選項時(shí)，進(jìn)行源列表，后臺自動(dòng)加載新內容，并在刷新按鈕上顯示“NEW”，此時(shí)當用戶(hù)再刷新，內容立即呈現。

詳細解析通過(guò)設計讓APP變快的6個(gè)方法,PS教程,

Android更新提醒在安裝包自動(dòng)下載完成之后提示，讓用戶(hù)不再需要等待下載過(guò)程。

詳細解析通過(guò)設計讓APP變快的6個(gè)方法,PS教程,

再比如云閱讀的查看大圖，自動(dòng)載入下一張;TableView在將要達到底部時(shí)自動(dòng)載入等。

Chrome在下載前詢(xún)問(wèn)是否保存，在用戶(hù)決定之就已經(jīng)開(kāi)始下載，節省了不少時(shí)間。如果用戶(hù)放棄，已下載內容會(huì )自動(dòng)刪除。

那么，用這個(gè)思路

寫(xiě)微博插入照片后，能否自動(dòng)上傳，而不必等用戶(hù)點(diǎn)擊了“發(fā)送”才上傳?

看微博時(shí)定位到某條微博，是否應該自動(dòng)加載大圖或視頻?

音樂(lè )應用在當前歌曲快播放完時(shí)，是否應該下載下一首歌，以免切歌的時(shí)候會(huì )卡一會(huì )兒?

6.使用動(dòng)效來(lái)掩護載入過(guò)程

優(yōu)秀的動(dòng)效設計，讓產(chǎn)品更好用且讓人眼前一亮。其實(shí)，動(dòng)效還有另一大用處，吸引用戶(hù)的注意，讓本來(lái)枯燥的等待載入的過(guò)程，變成愉悅欣賞的過(guò)程。