移動設計最佳化:讓APP變得更快的設計方法

來源:互聯網
上載者:User

文章描述:我們都知道不管網頁還是行動裝置 App,響應速度都是最重要的體驗指標之一,並且行動裝置 App的網路環境不穩定,速度的體驗顯得尤為重要。其實速度最佳化不僅是程式員的事,設計,也能夠讓App變得更快。

D.A:我們都知道不管網頁還是行動裝置 App,響應速度都是最重要的體驗指標之一,並且行動裝置 App的網路環境不穩定,速度的體驗顯得尤為重要。其實速度最佳化不僅是程式員的事,設計,也能夠讓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



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。