讓你的APP變快的6個(gè)設(shè)計(jì)方案
![](http://image.woshipm.com/wp-files/img/99.jpg)
大家都知道不管網(wǎng)頁(yè)還是移動(dòng)APP,響應(yīng)速度都是最重要的體驗(yàn)指標(biāo)之一,并且移動(dòng)應(yīng)用的網(wǎng)絡(luò)環(huán)境不穩(wěn)定,速度的體驗(yàn)顯得尤為重要。其實(shí)速度優(yōu)化不僅是程序員的事,設(shè)計(jì),也能夠讓APP變得更快。
1.后臺(tái)執(zhí)行
這是一條很通用,也容易理解的方法。用戶不會(huì)愿意盯著進(jìn)度條傻傻地等待,除了“取消”沒(méi)有其他選擇。在系統(tǒng)處理一些網(wǎng)絡(luò)任務(wù)的時(shí)候,完全可以允許用戶做一些其他的事情。各大平臺(tái)的發(fā)微博,都采用了后臺(tái)執(zhí)行。云閱讀的離線下載也采用后臺(tái)執(zhí)行。
而微博的看長(zhǎng)圖(或視頻),是個(gè)反例。網(wǎng)絡(luò)不給力時(shí),要么等待1分鐘讓圖加載完,要不就只好放棄看圖。為什么不能讓圖加載的同時(shí),用戶可以看其他微博呢?
2.在載入前顯示內(nèi)容
客戶端與web的一個(gè)不同點(diǎn),客戶端的顯示內(nèi)容包括本地?cái)?shù)據(jù)和網(wǎng)絡(luò)數(shù)據(jù)兩部分。在設(shè)計(jì)界面時(shí),將更多的信息放在本地,在網(wǎng)絡(luò)數(shù)據(jù)未載入時(shí)即顯示本地 數(shù)據(jù),讓用戶產(chǎn)生一種“已經(jīng)載入一半了”的錯(cuò)覺(jué),即使最終的耗時(shí)一樣,心理感受也會(huì)更快。當(dāng)然把數(shù)據(jù)過(guò)多地寫(xiě)在本地,會(huì)犧牲一些靈活性,需要根據(jù)具體情況 考慮。
如App Store的詳情頁(yè),在詳細(xì)信息載入前,已有信息先顯示。
3.充分利用好緩存
緩存可以把網(wǎng)絡(luò)數(shù)據(jù)保存在本地,下次打開(kāi)時(shí)無(wú)需要再次向網(wǎng)絡(luò)請(qǐng)求,減少流量并減少等待時(shí)間。在設(shè)計(jì)時(shí),可以先顯示緩存內(nèi)容,同時(shí)后臺(tái)到網(wǎng)絡(luò)上拉取新 內(nèi)容,若有新內(nèi)容立即替換或下次訪問(wèn)時(shí)替換。但緩存使用也要注意“度”,過(guò)大的緩存文件占用太多的系統(tǒng)空間,會(huì)讓用戶一怒之下卸載APP。
4.界面先行,網(wǎng)絡(luò)交互隨后
對(duì)于一些數(shù)據(jù)量很小,且失敗可能性較小的網(wǎng)絡(luò)交互,用戶并不需要明確知道APP在干這些事情,也能夠順暢地使用APP,那么就可以“把一些事實(shí)掩蓋起來(lái)”,即界面上聽(tīng)話地、迅速地完成任務(wù)(心智模型),程序后臺(tái)默默地繼續(xù)執(zhí)行任務(wù)(實(shí)現(xiàn)模型)。
最常用的比如QQ、微信、易信等聊天界面。點(diǎn)擊發(fā)送后,消息立即”飛”到聊天上下文中,其實(shí)對(duì)方還沒(méi)收到。但這樣的設(shè)計(jì)讓溝通的過(guò)程更順暢,沒(méi)有“正在發(fā)送 – 發(fā)送成功”各種過(guò)程的干擾。
5.預(yù)測(cè)用戶行為,提前開(kāi)始任務(wù)
不知道大家使用淘寶有沒(méi)有這樣的習(xí)慣,在搜索結(jié)果列表,將所有感興趣的結(jié)果都打開(kāi)為新標(biāo)簽頁(yè),然后一個(gè)個(gè)地看,沒(méi)興趣的就關(guān)閉。這樣做的好處是,在我瀏覽商品詳情頁(yè)的時(shí)候,每個(gè)頁(yè)面都是載入完全了,否則我點(diǎn)開(kāi)一個(gè)看一個(gè),每個(gè)都要等待加載完,就會(huì)大大降低效率。
那么能否通過(guò)設(shè)計(jì),來(lái)滿足類似使用場(chǎng)景呢?應(yīng)該是可以的,那就是預(yù)測(cè)用戶的行為,提前開(kāi)始任務(wù)。
策略類似這樣:用戶在某個(gè)界面停留的時(shí)候,預(yù)測(cè)下一步可能做ABC三個(gè)任務(wù),系統(tǒng)于是把這些任務(wù)都提前做完。當(dāng)用戶做出選擇比如A時(shí),界面可以迅速響應(yīng),并且同時(shí)把BC兩個(gè)任務(wù)從內(nèi)存中清空掉以節(jié)省資源。(當(dāng)然這招也有限制:1,只適用于免費(fèi)的網(wǎng)絡(luò)。2,預(yù)加載不能影響系統(tǒng)的性能)
后臺(tái)自動(dòng)加載新內(nèi)容:并在刷新按鈕上顯示“NEW”,此時(shí)當(dāng)用戶再刷新,內(nèi)容立即呈現(xiàn)。
再比如Chrome在下載前詢問(wèn)是否保存,在用戶決定之就已經(jīng)開(kāi)始下載,節(jié)省了不少時(shí)間。如果用戶放棄,已下載內(nèi)容會(huì)自動(dòng)刪除。
那么,用這個(gè)思路:
●?寫(xiě)微博插入照片后,能否自動(dòng)上傳,而不必等用戶點(diǎn)擊了“發(fā)送”才上傳?
●?看微博時(shí)定位到某條微博,是否應(yīng)該自動(dòng)加載大圖或視頻?
●?音樂(lè)應(yīng)用在當(dāng)前歌曲快播放完時(shí),是否應(yīng)該下載下一首歌,以免切歌的時(shí)候會(huì)卡一會(huì)兒?
6.使用動(dòng)效來(lái)掩護(hù)載入過(guò)程
優(yōu)秀的動(dòng)效設(shè)計(jì),讓產(chǎn)品更好用且讓人眼前一亮。其實(shí),動(dòng)效還有另一大用處,吸引用戶的注意,讓本來(lái)枯燥的等待載入的過(guò)程,變成愉悅欣賞的過(guò)程。
實(shí)例:
轉(zhuǎn)自:http://mobile.51cto.com/design-418798.htm
- 目前還沒(méi)評(píng)論,等你發(fā)揮!