發布日期：2017/8/4

文章描述：我們都知道不管網頁照舊移動應用，響應速度都是主要的體驗指標之一，并且移動應用的網絡環境不穩定，速度的體驗顯得尤為主要。其實速度優化不僅是程序員的事，設計，也能夠讓App變得更快。

D.A：我們都知道不管網頁照舊移動應用，響應速度都是主要的體驗指標之一，并且移動應用的網絡環境不穩定，速度的體驗顯得尤為主要。其實速度優化不僅是程序員的事，設計，也能夠讓App變得更快。

1.后臺執行

這是一條很通用，也容易理解的方法。用戶不會愿意盯著進度條傻傻地等待，除了”取消”沒有其他選擇。在系統處理一些網絡義務的時候，完全可以許可用戶做一些其他的事情。

各大平臺的發微博，都采用了后臺執行。云閱讀的離線下載也采用后臺執行。

而微博的看長圖(或視頻)，是個反例。網絡不給力時，要么等待1分鐘讓圖加載完，要不就只好摒棄看圖。為什么不能讓圖加載的同時，用戶可以看其他微博呢？

 

2.在載入前顯示內容

客戶端與web的一個不同點，客戶端的顯示內容包括本地數據和網絡數據兩部分。在設計界面時，將更多的信息放在本地，在網絡數據未載入時即顯示本地數據，讓用戶產生一種”已經載入一半了”的錯覺，即使耗時一樣，心理感受也會更快。當然把數據過多地寫在本地，會犧牲一些天真性，需要根據具體情況考慮。

具體請看twitter、Facebook、Vine等優異產品的啟動畫面，雖然同是靜態圖片，但它們不使用LOGO而假裝已經載入了”導航欄”和”題目欄”，讓人感覺”點擊后立即就啟動了”。

再如App Store的詳情頁，在具體信息載入前，已有信息先顯示。

 

3.充分行使好緩存

緩存可以把網絡數據保存在本地，下次打開時無需要再次向網絡請求，削減流量并削減等待時間。在設計時，可以先顯示緩存內容，同時后臺到網絡上拉取新內容，若有新內容立即替代或下次訪問時替代。但緩存使用也要注重”度”，過大的緩存文件占用太多的系統空間，會讓用戶一怒之下卸載App。

云閱讀的”書城”和”通過微博找好友”等界面，都使用了緩存機制，提高打開頁面的速度。

 

4.界面先行，網絡交互隨后

對于一些數據量很小，且失敗可能性較小的網絡交互，用戶并不需要明確知道App在干這些事情，也能夠順暢地使用App，那么我們就應該”把一些事實袒護起來”，即界面上聽話地、迅速地完成義務(心智模型)，程序后臺默默地繼續執行義務(實現模型)。

常用的比如QQ、微信、易信等聊天界面。點擊發送后，新聞立即”飛”到聊天上下文中，其實對方還沒收到。但這樣的設計讓溝通的過程更順暢，沒有”正在發送 – 發送成功”各種過程的干擾。

用戶在珍藏文章，關注好友等操作時，數據量很小，可以界面先行。用戶在繼續瀏覽文章的同時，系統會把文章珍藏好。

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

5.展望用戶行為，提前開始義務

不知道大家使用淘寶有沒有這樣的習慣，在搜索效果列表，將所有感愛好的效果都打開為新標簽頁，然后一個個地看，沒愛好的就關閉。這樣做的益處是，在我瀏覽商品詳情頁的時候，每個頁面都是載入完全了，否則我點開一個看一個，每個都要等待加載完，就會大大降低效率。

那么能否通過設計，來知足類似使用場景呢？應該是可以的，那就是展望用戶的行為，提前開始義務。

策略類似這樣：

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

我們就回來看淘寶的iPad客戶端。它有這樣的設計，在某詳情頁查看時，向右一劃可以查看下一個商品，也許這是一個好設計，但是卻沒有幫我預加載下一個界面，我照舊不得不傻傻地等頁面加載完。

那我們看一些其他的設計。
在網易云閱讀，我們認為用戶進入一個資訊源的一個可能就是刷新查看新內容。所以即使沒有打開主動刷新選項時，進行源列表，后臺主動加載新內容，并在刷新按鈕上顯示”NEW”，此時當用戶再刷新，內容立即呈現。

Android更新提醒在安裝包主動下載完成之后提醒，讓用戶不再需要等待下載過程。

再比如云閱讀的查看大圖，主動載入下一張;TableView在將要達到底部時主動載入等。

Chrome在下載前詢問是否保存，在用戶決定之就已經開始下載，節省了不少時間。假如用戶摒棄，已下載內容會主動刪除。

那么，用這個思路。
寫微博插入照片后，能否主動上傳，而不必等用戶點擊了”發送”才上傳？

看微博時定位到某條微博，是否應該主動加載大圖或視頻？
音樂應用在當前歌曲快播放完時，是否應該下載下一首歌，以免切歌的時候會卡一會兒？

 

6.使用動效來掩護載入過程

優異的動效設計，讓產品更好用且讓人眼前一亮。其實，動效還有另一大用處，吸引用戶的注重，讓原本枯燥的等待載入的過程，變成愉悅瀏覽的過程。

以下的例子來源于網絡。

原文地址：uedc.163