去年我寫過(guò)一篇文章返回功能應(yīng)該怎么設(shè)計(jì)，今年反其道而行，來(lái)聊聊產(chǎn)品中的“前進(jìn)”功能。

關(guān)于“前進(jìn)”，我們很難給出一個(gè)準(zhǔn)確的定義。狹義上的“前進(jìn)”指的是用戶觸發(fā)某個(gè)交互動(dòng)作進(jìn)入一個(gè)新頁(yè)面。如何在進(jìn)入一個(gè)新頁(yè)面的過(guò)程中給予用戶良好的體驗(yàn)?zāi)兀?/p>

我們可以從以下三個(gè)方面進(jìn)行分析：指示器、方向和順序。

指示器

用戶每次進(jìn)入一個(gè)新頁(yè)面都要從后臺(tái)請(qǐng)求數(shù)據(jù)，數(shù)據(jù)返回到頁(yè)面完成渲染，內(nèi)容才會(huì)展示出來(lái)。這個(gè)過(guò)程需要時(shí)間，需要用戶去等待。指示器的作用就是填補(bǔ)用戶等待的時(shí)間，減少用戶因等待而產(chǎn)生的焦慮情緒。

1. 告訴用戶系統(tǒng)當(dāng)前的狀態(tài)

防止用戶焦慮首先我們要告訴用戶頁(yè)面加載的過(guò)程正在進(jìn)行。如果我們不提示用戶，那么用戶看到的就是一塵不變的白屏。就像下圖的酷我音樂(lè)一樣，用戶點(diǎn)擊進(jìn)入“直播頁(yè)”，沒(méi)有任何元素提示用戶頁(yè)面內(nèi)容正在加載中。一旦你不知道自己所等待的流程是否正在進(jìn)行，那么等待就是漫無(wú)目的的，焦慮情緒也會(huì)產(chǎn)生。

作為對(duì)比我們可以看一下飛豬的處理方式，這里使用了一個(gè)loading動(dòng)效彈框告訴了用戶頁(yè)面正在加載中。及時(shí)告訴用戶系統(tǒng)當(dāng)前的狀態(tài)可以很好的起到安撫用戶的作用。

2. 品牌基因植入

指示器的樣式并沒(méi)有特殊的要求，雖然大部分的產(chǎn)品使用的都是上面所提到的loading彈框，但是指示器樣式和載體并不只限于此。我們可以選擇進(jìn)度條，也可以將loading的動(dòng)效放到標(biāo)題欄。

如果我們更進(jìn)一步，可以將品牌基因植入指示器的設(shè)計(jì)中。還是以飛豬的loading動(dòng)效為例，這里采用了飛豬logo的形狀。當(dāng)然選擇傳統(tǒng)的菊花動(dòng)效同樣可以，但是這個(gè)無(wú)法體現(xiàn)產(chǎn)品之間的差異性。

指示器在產(chǎn)品中出現(xiàn)的場(chǎng)景會(huì)很多，我們可以花點(diǎn)心思，做的盡量精致一點(diǎn)。很多產(chǎn)品都選擇通過(guò)一些有趣的動(dòng)效分散用戶在等待過(guò)程中的注意力。

方向

頁(yè)面在水平方向上跳轉(zhuǎn)目前來(lái)說(shuō)依然是主流，分為左右平移和覆蓋平移兩種。

當(dāng)然不管是哪種，“從右到左”的頁(yè)面跳轉(zhuǎn)方式大行其道的原因是它這符合用戶對(duì)于一個(gè)線性操作流程的的直觀感受。

目前也有很多產(chǎn)品選擇在豎直方向上加載頁(yè)面，以從下往上居多。那么豎直方向和水平方向的區(qū)別在哪呢？這個(gè)在上面也提到過(guò)，水平方向的頁(yè)面流符合用戶對(duì)于操作流程的直觀感受。例如，在購(gòu)買火車票流程，用戶的主流程是：選擇車次-選擇座位等級(jí)-填寫訂單-付款-訂票結(jié)果。對(duì)于這樣的主流程，我們選擇從左到右的頁(yè)面流，而新增乘車人信息我們可以看成是這個(gè)主流程中的一個(gè)支流，從底部彈出更加合適。

交互設(shè)計(jì)一定要符合用戶的心理認(rèn)知。如果這個(gè)頁(yè)面從底部彈出，會(huì)給用戶一個(gè)暗示：這個(gè)頁(yè)面是底部彈出的，那么我下拉是否就可以關(guān)閉這個(gè)頁(yè)面呢？還是以“新增乘車人”頁(yè)面為例，這里還是秉持著iOS右滑返回的機(jī)制。這個(gè)就造成了一個(gè)“手指向右，頁(yè)面向下”的奇葩交互樣式，明顯有悖于用戶的認(rèn)知。當(dāng)然也有處理很好的，可以看下網(wǎng)易云音樂(lè)歌曲評(píng)論頁(yè)，點(diǎn)擊返回按鈕頁(yè)面是向下關(guān)閉的，手指右滑頁(yè)面是右滑關(guān)閉的，做了區(qū)分

這種處理方式也給我們帶來(lái)了啟發(fā)。例如，微信中用戶點(diǎn)擊浮窗，文章頁(yè)面是擴(kuò)展開(kāi)來(lái)的。那么我們可以腦洞一下，用戶雙指捏合的手勢(shì)是否可以關(guān)閉文章頁(yè)？

順序

用戶觸發(fā)了某個(gè)交互動(dòng)作進(jìn)入一個(gè)新頁(yè)面，然后頁(yè)面和后臺(tái)開(kāi)始進(jìn)行數(shù)據(jù)傳輸，數(shù)據(jù)傳輸完成后在頁(yè)面渲染。這是用戶進(jìn)入一個(gè)新頁(yè)面所經(jīng)歷的幾個(gè)重要階段，如下圖所示，這里我將其分成了4個(gè)階段。接下來(lái)我們從階段1開(kāi)始梳理頁(yè)面加載過(guò)程的每一個(gè)步驟，力圖發(fā)掘可以優(yōu)化的點(diǎn)。

1）執(zhí)行操作

從用戶的角度來(lái)看，當(dāng)他執(zhí)行完操作1，后面的步驟就跟他沒(méi)有關(guān)系了。那么在頁(yè)面渲染完成前，我們應(yīng)該給用戶展示一個(gè)什么樣的頁(yè)面呢？

上面看到的幾款產(chǎn)品，他們的處理方式簡(jiǎn)單粗暴——白屏。這對(duì)用戶來(lái)說(shuō)，不是一個(gè)友好的體驗(yàn)。如果你的頁(yè)面布局樣式相對(duì)固定，可以考慮先給用戶展示頁(yè)面框架，然后再展示具體的內(nèi)容，這種加載機(jī)制就是占位符，又可以稱之為“骨架屏”。

與徹底的白屏相比，先給用戶展示頁(yè)面框架，用戶在頁(yè)面數(shù)據(jù)沒(méi)有加載完成的情況下也可以了解頁(yè)面的大致結(jié)構(gòu)。此外用戶一進(jìn)入這個(gè)頁(yè)面，發(fā)現(xiàn)這個(gè)頁(yè)面不是空蕩蕩的，它已經(jīng)有東西了，會(huì)覺(jué)得頁(yè)面已經(jīng)加載出來(lái)，從而產(chǎn)生一種“零等待”的錯(cuò)覺(jué)，體驗(yàn)更加流暢。

2）先文字，后圖片

一個(gè)頁(yè)面的內(nèi)容量是很大的，如果我們獲取完所有的信息才在客戶端渲染，所耗費(fèi)的時(shí)間是很長(zhǎng)的。因此為了縮短用戶的等待時(shí)間，我們可以考慮先展示一些網(wǎng)絡(luò)資源較小的內(nèi)容。例如，先加載文字，再加載圖片。

我們都知道5G時(shí)代即將到來(lái)，信息傳輸?shù)乃俣却蟠蠹涌?。是不是意味著我們不需要考慮加載順序了呢？當(dāng)然不是！

將信息展示給用戶只是界面設(shè)計(jì)的最基本要求，我們的最終目的是幫助用戶理解這些信息。一個(gè)頁(yè)面的信息量是很大的，網(wǎng)速的提升可以做到讓頁(yè)面立馬加載完成，但是一股腦的把所有信息展示給用戶是否合理？

分步驟地給用戶展示信息，讓用戶更容易消化可能會(huì)更合適。例如，用戶要查看跑步路線圖，此時(shí)用戶的注意力必然都在不斷生成的跑步路線上，這個(gè)時(shí)候其余的內(nèi)容可以延后展示，避免造成干擾。

3）預(yù)加載

用戶必須要進(jìn)入這個(gè)頁(yè)面才可以請(qǐng)求數(shù)據(jù)嗎？可不可以事先加載好頁(yè)面信息，這樣用戶進(jìn)來(lái)就不需要加載了。這種提前加載好頁(yè)面內(nèi)容的機(jī)制就是預(yù)加載。網(wǎng)易新聞中，斷網(wǎng)依然可以查看新聞，即使這條新聞你從來(lái)沒(méi)有打開(kāi)過(guò)。

不止是頁(yè)面

在文章最開(kāi)頭我說(shuō)的是：狹義上的“前進(jìn)”指的是用戶觸發(fā)某個(gè)交互動(dòng)作進(jìn)入一個(gè)新頁(yè)面。為什么強(qiáng)調(diào)是“狹義”，因?yàn)橛脩糁灰|發(fā)某個(gè)交互動(dòng)作完成狀態(tài)的遷躍，我們都可以認(rèn)為是“前進(jìn)”，只不過(guò)我們習(xí)慣于使用一個(gè)新頁(yè)面來(lái)表現(xiàn)新?tīng)顟B(tài)。當(dāng)然現(xiàn)在我們學(xué)會(huì)使用彈框了，這是一個(gè)進(jìn)步。我們添加商品到了購(gòu)物車，不需要進(jìn)入一個(gè)“添加成功”結(jié)果頁(yè)，直接一個(gè)toast就可以了。

但彈框是最終答案嗎？我們的最終的目的是為了讓用戶感知系統(tǒng)狀態(tài)的變更，而用戶與系統(tǒng)交互的觸點(diǎn)又是一個(gè)個(gè)操作對(duì)象，為什么不直接通過(guò)改變操作對(duì)象的樣式來(lái)完成信息的傳達(dá)呢？還是添加商品到購(gòu)物車的操作？

這里通過(guò)動(dòng)效演示了這個(gè)過(guò)程，不用任何文字，用戶就能明白“商品已經(jīng)添加到購(gòu)物車”這個(gè)事實(shí)，并且提示了用戶購(gòu)物車的位置，信息的傳達(dá)更具有指向型。

總結(jié)

以上就是我對(duì)頁(yè)面加載方式的簡(jiǎn)單分析和總結(jié)，如果你有其他的意見(jiàn)或看法歡迎留言討論。

最近我的新書《爭(zhēng)論點(diǎn)：用戶體驗(yàn)設(shè)計(jì)師的交互指南》正在熱銷中，期待各位的支持。

#專欄作家#

王M爭(zhēng)（微信公眾號(hào)：王M爭(zhēng)），人人都是經(jīng)理專欄作家，資深互聯(lián)網(wǎng)人。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議