頁面加載功能設計總結

去年我寫過一篇文章返回功能應該怎麼設計，今年反其道而行，來聊聊產品中的「前進」功能。

關於「前進」，我們很難給出一個準確的定義。狹義上的「前進」指的是用戶觸發某個交互動作進入一個新頁面。如何在進入一個新頁面的過程中給予用戶良好的體驗呢？

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

指示器

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

1. 告訴用戶系統當前的狀態

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

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

2. 品牌基因植入

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

如果我們更進一步，可以將品牌基因植入指示器的設計中。還是以飛豬的loading動效為例，這裡採用了飛豬logo的形狀。當然選擇傳統的菊花動效同樣可以，但是這個無法體現產品之間的差異性。

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

方向

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

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

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

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

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

順序

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

1）執行操作

從用戶的角度來看，當他執行完操作1，後面的步驟就跟他沒有關係了。那麼在頁面渲染完成前，我們應該給用戶展示一個什麼樣的頁面呢？

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

與徹底的白屏相比，先給用戶展示頁面框架，用戶在頁面數據沒有加載完成的情況下也可以了解頁面的大致結構。此外用戶一進入這個頁面，發現這個頁面不是空蕩蕩的，它已經有東西了，會覺得頁面已經加載出來，從而產生一種「零等待」的錯覺，體驗更加流暢。

2）先文字，後圖片

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

我們都知道5G時代即將到來，信息傳輸的速度大大加快。是不是意味著我們不需要考慮加載順序了呢？當然不是！

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

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

3）預加載

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

不止是頁面

在文章最開頭我說的是：狹義上的「前進」指的是用戶觸發某個交互動作進入一個新頁面。為什麼強調是「狹義」，因為用戶只要觸發某個交互動作完成狀態的遷躍，我們都可以認為是「前進」，只不過我們習慣於使用一個新頁面來表現新狀態。當然現在我們學會使用彈框了，這是一個進步。我們添加商品到了購物車，不需要進入一個「添加成功」結果頁，直接一個toast就可以了。

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

這裡通過動效演示了這個過程，不用任何文字，用戶就能明白「商品已經添加到購物車」這個事實，並且提示了用戶購物車的位置，信息的傳達更具有指向型。

總結

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

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

#專欄作家#

王M爭（微信公眾號：王M爭），人人都是經理專欄作家，資深網際網路人。

本文原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基於 CC0 協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}