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

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

我們可以從以下三個方面進行分析：指示器、方向和順序。

指示器

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

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

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

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

2. 品牌基因植入

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

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

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

方向

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

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

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

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

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

順序

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

1）執(zhí)行操作

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

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

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

2）先文字，后圖片

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

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

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

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

3）預(yù)加載

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

不止是頁面

在文章最開頭我說的是：狹義上的“前進”指的是用戶觸發(fā)某個交互動作進入一個新頁面。為什么強調(diào)是“狹義”，因為用戶只要觸發(fā)某個交互動作完成狀態(tài)的遷躍，我們都可以認為是“前進”，只不過我們習(xí)慣于使用一個新頁面來表現(xiàn)新狀態(tài)。當然現(xiàn)在我們學(xué)會使用彈框了，這是一個進步。我們添加商品到了購物車，不需要進入一個“添加成功”結(jié)果頁，直接一個toast就可以了。

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

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

總結(jié)

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

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

#專欄作家#

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

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

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