App窗口的加載（如：列表窗口進(jìn)入詳情頁(yè)的loading方式）是一個(gè)容易被忽略的問(wèn)題。為什么呢？原因很多：1.大家（包括設(shè)計(jì)師）都習(xí)慣了Web端先進(jìn)入新頁(yè)面，后等待加載的方式，app直接沿用了；2.網(wǎng)速好的情況下，兩種加載方式使用體驗(yàn)沒(méi)太大差別。3.設(shè)計(jì)師、產(chǎn)品經(jīng)理通常覺(jué)得加載是工程師該考慮的，可是除非項(xiàng)目時(shí)間充裕，且遇到非常有sense工程師才會(huì)有考慮提前加載。

然而，很多情況下提前加載的好處非常明顯，gmail，alipay、ios Native SMS也都在默默的使用。下面我們就來(lái)解析下兩種加載方式：

通常兩種方式

方式一：在新窗口載入。（A到B，在B窗口載入）

這種方式沿用了傳統(tǒng)互聯(lián)網(wǎng)的頁(yè)面載入方式，也很常用。

優(yōu)點(diǎn)：窗口即時(shí)切換。

適用：B窗口信息量大，如長(zhǎng)篇圖文混排信息頁(yè)。

建議：

1）。進(jìn)入B時(shí)不要使用空白窗口，采用預(yù)置的格式化信息（圖片的占位符，信息分隔樣式等）；

2）。帶入A窗口面已加載過(guò)的的部分信息，

3）。對(duì)B窗口的信息進(jìn)行分段載入。（這樣用戶邊閱讀提前載入的信息，邊等待，減少焦躁情緒）

范例：圖02&圖04載入中頁(yè)面采用了預(yù)置格式化，在信息載入前已經(jīng)把信息框架傳遞給了用戶。用戶對(duì)將要載入的信息有了預(yù)見(jiàn)。

圖01      圖02

圖03            圖04

方式二：在當(dāng)前窗口載入完成后，再切換下一窗口。（A到B，在A窗口載入完成，再進(jìn)入B）

這種方式相對(duì)使用的較少

優(yōu)點(diǎn)：不會(huì)出現(xiàn)空白頁(yè)面，切換頁(yè)面完整性好。

適用：B窗口信息少，載入時(shí)間快，以文字為主的頁(yè)面。或者A窗口已在執(zhí)行某個(gè)任務(wù)，且有延續(xù)性。比如A窗口為一個(gè)音頻播放頁(yè)，用戶在進(jìn)入B頁(yè)前可以繼續(xù)收聽(tīng)。

建議：需要考慮網(wǎng)絡(luò)極端不好的情況，載入信息極少時(shí)使用，如圖05，ios原生短信應(yīng)用采用的就是當(dāng)前頁(yè)載入，當(dāng)遇到手機(jī)報(bào)之類的大量信息，就感覺(jué)界面卡上一小會(huì)。不過(guò)介于大部分短信都是文字為主，這樣設(shè)計(jì)無(wú)可厚非，如果加載時(shí)間長(zhǎng)的情況下如圖06一樣提供狀態(tài)就更完美。

范例：

另外提交信息（如注冊(cè)、登錄等）一般都在當(dāng)前窗口返回狀態(tài)并處理加載。

提醒：加載方式是死的，上面提到的兩種方式其實(shí)也可以根據(jù)具體情況結(jié)合靈活使用。

比如：在A窗口載入的列表數(shù)據(jù)前幾條拉取完整的數(shù)據(jù)信息，用戶切換到詳情B的情況下就直接可以看了。然后后臺(tái)預(yù)讀取余下的信息。減少用戶切換延遲。（gmail就是這么干滴。前面5封郵件先預(yù)取。）這樣做對(duì)服務(wù)器來(lái)說(shuō)，要求高了些，但體驗(yàn)Smooth很多，大家具體用的時(shí)候自己權(quán)衡。

另外提一句，進(jìn)入前務(wù)必保存A當(dāng)前的狀態(tài)，B返回A時(shí)回到進(jìn)入前狀態(tài)（如在第15條進(jìn)入，返回時(shí)第15條信息在原來(lái)位置，并且配合原高亮消失效果）

作者：seanmao

文章來(lái)源：百度用戶體驗(yàn)中心

標(biāo)簽： 移動(dòng)交互 交互設(shè)計(jì) App設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。