小紐扣

去年我寫過一篇文章返回功能應該怎么設計,今年反其道而行,來聊聊產品中的“前進”功能。關于“前進”,我們很難給出一個準確的定義。狹義上的“前進”指的是用戶觸發某個交互動作進入一個新頁面。如何在進入一個新頁面的過程中給予用戶良好的體驗呢?我們可以從以下三個方面進行分析:指示器、方向順序

指示器

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

Image title

 

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

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

Image title

 

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

Image title

 

2) 品牌基因植入

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

Image title

 

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

Image title

 

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

Image title

 

方向

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

Image title

 

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

Image title

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

 

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

Image title

 

有用戶覺得手指右滑返回上一界面非常的方便。

向右返回上一個頁面的確很方便,但是頁面向下不合理。

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

Image title

 

順序

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

Image title

 

1)執行操作

從用戶的角度來看,當他執行完操作1,后面的步驟就跟他沒有關系了。那么在頁面渲染完成前,我們應該給用戶展示一個什么樣的頁面呢?上面看到的幾款產品,他們的處理方式簡單粗暴——白屏。這對用戶來說,不是一個友好的體驗。如果你的頁面布局樣式相對固定,可以考慮先給用戶展示頁面框架,然后再展示具體的內容,這種加載機制就是占位符,又可以稱之為“骨架屏”。

Image title

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

 

2)先文字,后圖片

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

Image title

 

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

將信息展示給用戶只是界面設計的最基本要求,我們的最終目的是幫助用戶理解這些信息。一個頁面的信息量是很大的,網速的提升可以做到讓頁面立馬加載完成,但是一股腦的把所有信息展示給用戶是否合理?分步驟地給用戶展示信息,讓用戶更容易消化可能會更合適。例如,用戶要查看跑步路線圖,此時用戶的注意力必然都在不斷生成的跑步路線上,這個時候其余的內容可以延后展示,避免造成干擾。

Image title

 

3)預加載

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

Image title

 

不止是頁面

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

Image title

 

但彈框是最終答案嗎?我們的最終的目的是為了讓用戶感知系統狀態的變更,而用戶與系統交互的觸點又是一個個操作對象,為什么不直接通過改變操作對象的樣式來完成信息的傳達呢?還是添加商品到購物車的操作,這里通過動效演示了這個過程,不用任何文字,用戶就能明白“商品已經添加到購物車”這個事實,并且提示了用戶購物車的位置,信息的傳達更具有指向型。

Image title

 

總結

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

 

原文地址:UI中國

作者:王M爭

 

轉載請注明:學UI網 » 頁面加載功能設計總結

登錄收藏
 
你可能喜歡的:
百度AR小游戲設計過程全揭秘——《砸金豬積福氣》百度AR小游戲設計過程全揭秘——《砸金豬積福氣》
必看! 為什么“吉祥物”可以提高UI設計以及品牌影響力必看! 為什么“吉祥物”可以提高UI設計以及品牌影響力
內容植入式運營設計內容植入式運營設計
UI設計組件-文本框/輸入框(下)UI設計組件-文本框/輸入框(下)
為什么你的登錄頁看起來和別人一樣?為什么你的登錄頁看起來和別人一樣?
B端產品 — 秒級監控B端產品 — 秒級監控
如何簡化你的設計如何簡化你的設計
深度剖析吉祥物制作深度剖析吉祥物制作
項目管理實踐-設計師如何應對項目管理實踐-設計師如何應對
檢票APP設計心得總結檢票APP設計心得總結
?
陕西快乐10分