用戶與產(chǎn)品的每一次互動(dòng)都是一次加載過程，加載的好壞直接影響用戶與產(chǎn)品的交流體驗(yàn)，即將加載策略運(yùn)用到適合的產(chǎn)品情境中可以將產(chǎn)品塑造成一個(gè)可以和用戶交流的“人”，這個(gè)“人”彬彬有禮、善于溝通、聰明伶俐，想用戶之所想，急用戶之所急。

啟動(dòng)頁加載

產(chǎn)品的第一印象很重要，如果用戶剛開始打開一張“空白頁面”，用戶還未與產(chǎn)品交互之前，就已經(jīng)留下一個(gè)差印象，就像談對象，你給對方的第一印象就是邋遢，后面盡管每天都打啫喱，對方也會(huì)覺得這是幾星期沒洗頭的節(jié)奏。因此啟動(dòng)頁的出現(xiàn)就是為了給她（用戶）營造一個(gè)好的第一印象，其次產(chǎn)品啟動(dòng)需要一個(gè)過程，而“啟動(dòng)頁加載”可以實(shí)現(xiàn)這一過程的一個(gè)過渡，在給予用戶一個(gè)響應(yīng)的同時(shí)預(yù)加載部分首頁內(nèi)容，使得用戶不至于看到空白的頁面，體驗(yàn)上更趨流暢。

1.1 保持過渡的流暢性：一致性與內(nèi)容感

通過啟動(dòng)頁的吸引，將用戶帶入產(chǎn)品的品牌與情感的世界。基于IOS平臺(tái)應(yīng)用的啟動(dòng)特質(zhì)（放大特效），Twitter的啟動(dòng)頁與Icon采用了一致的元素與構(gòu)圖（信鴿為物，湖藍(lán)背景為底），確保Icon至啟動(dòng)頁的平滑過渡、加深了用戶對Twitter的品牌印象，同時(shí)呈現(xiàn)“信鴿翱翔藍(lán)天”的意向使得產(chǎn)品的固有等待（產(chǎn)品啟動(dòng)需要一個(gè)過程）不易為用戶所察覺(啟動(dòng)頁呈現(xiàn)的意向還沒遐想完，產(chǎn)品已經(jīng)順利過渡到首頁了)。接著“信鴿”以同樣的效果完成主頁內(nèi)容的過渡。

這里我們再舉一反例：WPS的啟動(dòng)頁大面積留白使其在過渡過程中由于缺乏內(nèi)容感使得產(chǎn)品的固有等待很易呈現(xiàn)顯性狀態(tài)，造成體驗(yàn)上的卡頓，試想你在看電影，看一分鐘加載30秒，你還有心思再看下去？

1.2 除了流暢我們還能做點(diǎn)什么

前面提到的“一致性”和“內(nèi)容感”只保證了中間鏈的流暢，要完成Icon至首頁的流暢體驗(yàn)，還需充分利用啟動(dòng)頁為首頁加載贏得的時(shí)間，圖中美團(tuán)在應(yīng)用啟動(dòng)過程中預(yù)加載首頁的一些重要框架，從而為首頁加載減負(fù)。

下一頁還是當(dāng)前頁加載

用戶進(jìn)入首頁，正式邁出體驗(yàn)的第一步，接下來迎接的就是基于用戶目標(biāo)的界面間跳轉(zhuǎn)。完成界面的跳轉(zhuǎn)，會(huì)有各種加載策略，但無論形式如何，我們都可以將其歸為兩大類：“下一頁加載”、“當(dāng)前頁加載”。

2.1 “下一頁加載”滿足了用戶提前窺視的需求

我們把頁面看成“點(diǎn)”，頁面流是連接這些點(diǎn)的“線”，我們以“用戶想買一條牛仔褲”這一場景作為案例做了簡單的眼動(dòng)研究，從應(yīng)用啟動(dòng)到商品瀏覽再到商品確定最后進(jìn)入下單頁，用戶所呈現(xiàn)的瞳孔梯次增大，即E>D>C>B>A，為了解釋這一現(xiàn)象，通過與被試交流，我們發(fā)現(xiàn)相比于各種瀏覽，用戶更期待看到他們想看到的東西。因此此時(shí)的”下一頁加載“正好，滿足了用戶提前窺視的需求。

2.2 ?Wait！I Need Think Think

我們以同樣的方式又對“使用支付寶對手機(jī)充值”這一場景做了研究，從開始支付到二次確認(rèn)支付，用戶所呈現(xiàn)的瞳孔都比較大，即A與B近似相等，通過訪談，我們發(fā)現(xiàn)與“遞增體驗(yàn)流”不同的是，當(dāng)用戶遇到判斷邏輯的界面時(shí)，用戶并非急于想看下一頁面到底包含怎樣的內(nèi)容，而是非0即1的驗(yàn)證心態(tài)，即我的操作效成功了嗎？因此在判斷邏輯界面中，用戶的內(nèi)容窺視需求并不強(qiáng)，當(dāng)然也沒什么內(nèi)容，要么僅是一個(gè)小小的Toast，再大一點(diǎn)就是一個(gè)簡單的信息反饋界面（意味著“下一頁加載”在這里就是個(gè)雞肋），用戶反而對非0即1的驗(yàn)證需求較為強(qiáng)烈，其中還伴隨著等待結(jié)果過程中的緊張感、激動(dòng)感，因此界面通過當(dāng)前頁加載表明系統(tǒng)正在努力地處理用戶交代的指令迎合了用戶的緊張感、激動(dòng)感，直到結(jié)果顯現(xiàn)——“處理成功”，完成了非0即1驗(yàn)證的滿足感。

我（設(shè)計(jì)師）比你（用戶）更了解你

在看視頻過程中我們經(jīng)常遇到這樣一種情景，“網(wǎng)速較慢，建議切換至流暢模式”。作為用戶，我們總希望享受的是最好的，視頻恨不得720P（PS：可能自己電腦顯卡就只有那么點(diǎn)），此時(shí)網(wǎng)速可能也只有幾十KB，但是Whatever，我就是要用最好的，然最后的結(jié)果是不能用，所以我們的用戶其實(shí)并不了解自己。

我們已經(jīng)習(xí)慣了4G下的移動(dòng)端體驗(yàn)，有一天我們身處外地，想在附近找一家好吃的餐廳，但是手機(jī)切換到了E，我相信無論是4G還是E，用戶的期望未曾改變——“bia 一下，附近所有好吃的餐廳全都出來！”但是現(xiàn)實(shí)是，E狀態(tài)下要想像實(shí)現(xiàn)4G狀態(tài)下的“bia一下”要耗費(fèi)大把的等待時(shí)長，然最后的無盡的等待換來的還是空白。所以我們要跳出用戶的視角，依據(jù)當(dāng)下場景給出最合理的加載策略，從4G到E，為了避免用戶過長的等待，我們可以采用分布加載策略，如圖中“E狀態(tài)”先加載占用網(wǎng)絡(luò)資源少的內(nèi)容，例如框架、文字、默認(rèn)圖案，再通過手動(dòng)觸發(fā)，加載占用網(wǎng)絡(luò)資源多的內(nèi)容，這樣可以讓用戶更快速地看到界面框架內(nèi)容。雖然體驗(yàn)上較4G模式會(huì)大打折扣，但我們至少維系了E狀態(tài)下的可用性。

看不到的情懷

有情懷產(chǎn)品的爆點(diǎn)往往介于顯性與隱形之間，平凡外表背后往往給人帶來驚喜和感動(dòng)！手機(jī)休眠鍵由Iphone5s的左側(cè)布局到Iphone6的右側(cè)布局就是為了方便用戶的單手操作。? 真正的情懷級產(chǎn)品，就是你第一眼看到它時(shí)，也許不會(huì)立刻發(fā)現(xiàn)有什么與眾不同，但當(dāng)你開始使用它時(shí)，才會(huì)慢慢感受到它對用戶的體貼細(xì)膩之處。

4.1 導(dǎo)航欄加載帶來的驚喜

通過加載策略將產(chǎn)品塑造成為一個(gè)可以與用戶交流的人，這個(gè)人聰明伶俐，而非反應(yīng)遲鈍，勞心勞力說了一堆，結(jié)果對方?jīng)]有一點(diǎn)反應(yīng)，此時(shí)你的心情也好不到哪里去。將導(dǎo)航欄標(biāo)題臨時(shí)變?yōu)榧虞d信息，在用戶與產(chǎn)品互動(dòng)過程中提供實(shí)時(shí)反饋，此時(shí)的產(chǎn)品不再是一堆冷冰冰的界面，而是一位善于溝通的人，這個(gè)人聰明機(jī)靈，想用戶之所想，急用戶之所急，和他互動(dòng)過的用戶都會(huì)產(chǎn)生良好的體驗(yàn)。

4.2 等待也是如此有趣

界面的每一個(gè)加載都會(huì)涉及到等待，有時(shí)受到網(wǎng)絡(luò)的限制，可能需要等待更久，但是用戶等不起，普通用戶能夠忍受的最長的加載頁面時(shí)間一般為8秒，如果加載時(shí)間超過8秒，除非用戶必須在這個(gè)頁面獲得一些信息，一般用戶會(huì)關(guān)閉頁面或轉(zhuǎn)到其他頁面。面對著千篇一律直接采用系統(tǒng)提供的旋轉(zhuǎn)式loading，等待會(huì)顯得更加焦躁。網(wǎng)絡(luò)狀態(tài)等外部環(huán)境我們無法保證，但是作為設(shè)計(jì)師我們可以通過自己的專業(yè)將“情感化”融入加載設(shè)計(jì)中，改變那些用戶習(xí)以為常的loading式樣，讓用戶在等待的等待過程中感受到樂趣，同時(shí)還能強(qiáng)化產(chǎn)品的品牌印象。

5. 寫在最后

加載無處不在，它貫穿用戶的行為路徑，所以對于加載策略的思量是設(shè)計(jì)師尤其要關(guān)注的，不同的場景會(huì)需要不同的加載策略，我們所要做的就是抓取用戶當(dāng)下的場景，給出最合理的加載策略，保持用戶感受的連續(xù)性，讓加載變得更有價(jià)值，讓枯燥的等待變得更加有趣！

本文由人人都是產(chǎn)品經(jīng)理專欄作家 @UE小牛犢（微信公眾號：UE小牛犢） 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?。未經(jīng)許可，禁止轉(zhuǎn)載。