項(xiàng)目落地該如何設(shè)計(jì)加載模式?

1 評(píng)論 5329 瀏覽 42 收藏 11 分鐘

上一期我講到了平臺(tái)規(guī)范下進(jìn)度指示器的使用規(guī)范,并且結(jié)合用戶等待4秒原則與NN/g用戶等待心理模型,個(gè)人愚見搭建了一個(gè)常規(guī)的加載模型(可回顧:進(jìn)度指示器(原則篇))。

但通過長期以往對(duì)移動(dòng)軟件的使用,我發(fā)現(xiàn)平臺(tái)規(guī)范下的進(jìn)度指示器其實(shí)只是拋出了一個(gè)引子,優(yōu)秀的設(shè)計(jì)團(tuán)隊(duì)早已在規(guī)范的指引下,衍生出了諸多的更新穎的加載模式。

這一期我把我調(diào)研總結(jié)出的結(jié)果分享給大家,在各行各業(yè)都打著“以用戶體驗(yàn)為中心”的當(dāng)下,也許可以幫助你更合理地緩解用戶等待焦慮。

一、全局加載

想要給加載場景提升一個(gè)體驗(yàn)高度,我們首先要知道為什么應(yīng)用程序的許多場景需要加載。其實(shí)無非就是因?yàn)槊慨?dāng)用戶打開一個(gè)新的頁面或進(jìn)行了一項(xiàng)操作時(shí),大量的數(shù)據(jù)需要和數(shù)據(jù)庫傳輸,這一個(gè)過程造就了等待的無可避免。

我們先來說說,當(dāng)用戶打開一個(gè)新頁面時(shí)的全局加載。

首次加載:全局

如果按照規(guī)范的指導(dǎo),全局加載的交互形式在 Material Design 中,應(yīng)該是這樣的:

按照 MD 的方案,如果在用戶理想的網(wǎng)絡(luò)環(huán)境下,如此做其實(shí)并沒有太大的問題,加載只需在一個(gè)流暢 Loading 讀取完成后就可以結(jié)束。

頁面加載等待時(shí)間往往和用戶本身所處的網(wǎng)絡(luò)環(huán)境也有關(guān),如果用戶當(dāng)前所處環(huán)境網(wǎng)絡(luò)信號(hào)較差,我在上一篇文章中提到過,加載等待超過4秒之后用戶的焦慮情緒就會(huì)指數(shù)級(jí)上升。

所以越來越多的團(tuán)隊(duì)在涉及到頁面全局加載的場景中,開始使用骨架屏。

骨架屏的引用最開始在iOS的啟動(dòng)頁中被提出,我在《聊聊加載等待的那些事 之 啟動(dòng)頁》中也講到過,骨架屏給用戶的感知就像一進(jìn)入一個(gè)頁面就已經(jīng)加載出了頁面框架,剩下的時(shí)間只是在請(qǐng)求服務(wù)器數(shù)據(jù),給人一種頁面打開很快的感覺。

并且骨架屏可以讓用戶在等待的過程當(dāng)中,率先對(duì)當(dāng)前所在頁面的樣式有一個(gè)心理預(yù)設(shè)。較 MD 規(guī)范中的全局加載進(jìn)度條方案,用戶的可控感更強(qiáng)。

二次加載:刷新

大多數(shù)應(yīng)用程序首次加載采用骨架屏解決后,會(huì)面臨數(shù)據(jù)刷新的情況。普遍的二次加載都會(huì)采用下拉刷新。

但下拉刷新有個(gè)弊端,就是用戶一定要在頁面頂部下拉才有刷新效果,不然下拉手勢優(yōu)先響應(yīng)的是頁面上滑動(dòng)作。

iOS 考慮到了這一沖突,所以給設(shè)備預(yù)設(shè)了一個(gè)隱形的手勢動(dòng)作,用戶在非頁面頂部的位置點(diǎn)擊屬性欄,可以立即回到當(dāng)前頁面頂部。但安卓設(shè)備并沒有這一便捷操作。

所以許多應(yīng)用程序選擇在標(biāo)簽欄內(nèi)做動(dòng)作。

以大多數(shù)應(yīng)用程序首頁為例,因?yàn)槭醉撋婕暗皆S多大數(shù)據(jù)算法推送,給用戶的數(shù)據(jù)并不固定,一般會(huì)面臨手動(dòng)二次刷新的情況。所以許多標(biāo)簽欄“首頁”標(biāo)簽引入了在非頂部位置點(diǎn)擊標(biāo)簽回到頂部、在頂部位置點(diǎn)擊標(biāo)簽進(jìn)行下拉刷新動(dòng)作的優(yōu)化處理。

二、局部加載

我前面提到的“全局加載”更多是站在表現(xiàn)層來說的,指的是給用戶的感知是一整屏數(shù)據(jù)都在加載的情景。但對(duì)于服務(wù)器請(qǐng)求來說,如果在數(shù)據(jù)量繁多的頁面采用“真·全局加載”,可能用戶真的要等待很久……很久……

所以許多應(yīng)用程序在這種情況下都采用了“懶加載”模式。

“懶加載”指的是首先給用戶展示一定量的數(shù)據(jù)(可以是x個(gè)數(shù)據(jù)量,也可以是x屏數(shù)據(jù)量,真實(shí)項(xiàng)目可根據(jù)具體的產(chǎn)品規(guī)劃決定),待用戶瀏覽完已加載數(shù)據(jù)后,再請(qǐng)求第二批次的數(shù)據(jù)量。

“懶加載”一般用于數(shù)據(jù)量特別多的情況下,例如淘寶這樣的大數(shù)據(jù)推送平臺(tái),根據(jù)用戶喜愛的內(nèi)容,可以推送數(shù)不勝數(shù)的商品給用戶。如果真的一次性全局請(qǐng)求所有的數(shù)據(jù),可能用戶真的要等到天荒地老了……

三、操作等待

等待的場景可不僅僅局限于從服務(wù)器下載數(shù)據(jù)的時(shí)候,上傳等交互操作也是用戶經(jīng)常面臨的等待場景之一。

就像前面所說的一樣,數(shù)據(jù)傳輸導(dǎo)致的用戶等待是不可避免的,如果在不能解決網(wǎng)絡(luò)根本的問題,對(duì)于操作等待的優(yōu)化方案,我發(fā)現(xiàn)基本所有的產(chǎn)品無一例外都是運(yùn)用了“打發(fā)用戶等待時(shí)間”的替代方案——無法解決等待的發(fā)生,但可以讓用戶感覺等待時(shí)間好像并不漫長,甚至完全遷移用戶對(duì)于等待的感知。

例如 PC 端慣用的手法,摹客在上傳畫板和 Bodymovin 在導(dǎo)入json文件時(shí),都選擇給用戶隨機(jī)發(fā)放名人名言或短新聞。

但顯然這樣的形式在空間局促的移動(dòng)設(shè)備上不是非常實(shí)用,可是大部分移動(dòng)端的解決方案出發(fā)點(diǎn)也是“打發(fā)用戶等待時(shí)間”。

支付寶:多態(tài)按鈕

在很早以前,用戶上傳的等待解決方案大都是采用吐司彈框來告訴用戶“數(shù)據(jù)正在上傳,你就等著吧”。并且大部分用于等待的吐司是沒有穿透效果的,也就是說,用戶無法穿透這個(gè)吐司彈框,對(duì)頁面進(jìn)行瀏覽與其他操作,只能干等著…

后來多態(tài)按鈕的出現(xiàn)完美地解決了這個(gè)尷尬的等待情景。

可能是我孤陋寡聞…第一個(gè)培養(yǎng)我多態(tài)按鈕交互的應(yīng)用是支付寶,但是多態(tài)按鈕的誕生具體是哪里,這個(gè)不太重要,我就不在此做過多考究了。

支付寶在用戶進(jìn)行點(diǎn)擊操作時(shí),按鈕會(huì)由默認(rèn)狀態(tài)切換到加載狀態(tài)。這個(gè)解決方案完全不打擾用戶,在等待時(shí)間較長時(shí),用戶還可以繼續(xù)翻看當(dāng)前頁面內(nèi)容,打發(fā)等待的時(shí)間。

抖音:遷移注意

抖音有一個(gè)細(xì)節(jié),在用戶上傳視頻時(shí),并不會(huì)讓用戶在當(dāng)前頁面瞎等,而是會(huì)讓用戶回到feed流頁面,將上傳浮窗放置在頁面角落。

這樣一來不會(huì)讓用戶上傳等待時(shí)無事可做;二來可以變相增加feed流視頻播放量;三來,萬一用戶在等待的過程中,刷到了好玩的作品,一個(gè)不小心又沉浸在了刷視頻的場景中,APP 使用時(shí)長又增加了。這個(gè)小交互真的要點(diǎn)個(gè)贊。

這一點(diǎn)是值得市場上許多產(chǎn)品學(xué)習(xí)的。例如唱吧,雖然現(xiàn)在將業(yè)務(wù)場景開始向短視頻轉(zhuǎn)移,但很難少在一些不經(jīng)意的場合機(jī)敏的將用戶往短視頻場景引導(dǎo)。在唱吧上傳音頻時(shí),還是在使用常規(guī)的吐司彈框等待模式,讓用戶干等很久…

四、結(jié)語

這一期總結(jié)的指示器交互似乎都沒有被收錄在平臺(tái)規(guī)范中,它們都是各個(gè)設(shè)計(jì)師在設(shè)計(jì)開發(fā)的流程中獨(dú)立總結(jié)出來的。所以大家在日常的設(shè)計(jì)工作中,還是要多思考創(chuàng)新,站在規(guī)范的肩膀上,開創(chuàng)更多新穎的交互。

我憑借著拙見總結(jié)了一些關(guān)于加載指示器交互細(xì)節(jié),可能還有更多關(guān)于解決用戶等待焦慮的驚喜小交互還沒有總結(jié)到,在今后使用和學(xué)習(xí)中如果被我逮到了,我會(huì)再進(jìn)行相關(guān)課題的討論。

#專欄作家#

UCD耍家,公眾號(hào):UCD耍家(ID:ucdplayer),人人都是產(chǎn)品經(jīng)理專欄作家。

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 寫的很棒吶

    來自北京 回復(fù)