Loading頁面設(shè)計中反饋機制的研究

1、    loading頁面設(shè)計中反饋機制的研究    張校君+張宇紅摘要：交互設(shè)計中的信息交換就是反饋機制運作的過程，而loadlng頁面反饋是界面反饋的最佳體現(xiàn)。本文從反饋機制中的視覺反饋、聽覺反饋、觸覺反饋等反饋種類中探討loading頁面反饋的意義，通過對loading頁面設(shè)計中的反饋機制進行具體分析，提出從反饋機制的角度來看，loadlng頁面設(shè)計的規(guī)則，即loadlng頁面必須即時反饋并且提供信息，適度反饋，反饋時避免過度節(jié)省成本造成反作用，反饋需要精心策劃。關(guān)鍵詞：交互設(shè)計 loading頁面設(shè)計 反饋機制引言交互設(shè)計的概念自1984年由ld

2、eo的創(chuàng)始人比爾.莫格里奇提出以來被運用到各個領(lǐng)域，現(xiàn)在我們普遍認為的交互設(shè)計是：通過產(chǎn)品的媒介來設(shè)計人與人、人與物、人與環(huán)境的相互關(guān)系，以支持、滿足、創(chuàng)造人們之間的各種互動行為。交互設(shè)計最終的目標是在探索用戶需求的基礎(chǔ)上開發(fā)出具有可用性的產(chǎn)品，以實現(xiàn)用戶體驗的最終目標。產(chǎn)品交互也就是產(chǎn)品與用戶之間的交互，包含信息傳遞和信息反饋，信息反饋就是計算機對用戶作出的操作行為的回應(yīng)，進而指示用戶下一步的操作行為，這個過程是一個相互交互的過程，它體現(xiàn)了產(chǎn)品交互的本質(zhì)。也就是說：產(chǎn)品概念中信息交換是雙向的，而不僅僅是系統(tǒng)對人的反映，交互的過程因為有了動作和隨之而來的反饋才形成了一個交互的基本單元。設(shè)計師對

3、反饋的探索已經(jīng)歷時很久了，并且從用戶界面出現(xiàn)以來，反饋一直是研究者關(guān)注的重點。早在1900年，美國認知心理學(xué)家norman就意識到反饋的重要性，并將其列為用戶界面中六大設(shè)計準則之一，同時他還指出：“沒有反饋的界面將是用戶難以忍受的。”可以見得反饋在界面設(shè)計中的重要性。用戶在使用產(chǎn)品的過程中，如果只有信息傳遞，而沒有任何反饋，那么這個產(chǎn)品是失敗的，因為它給用戶帶來了極大的挫敗和焦慮。loading頁面反饋是用戶界面反饋中非常重要的反饋之-，在頁面與頁面之間進行切換時，系統(tǒng)需要時間加載新頁面或者新程序，這時就需要對用戶進行提示，也就是loading頁面反饋，這個階段也是非常容易打斷用戶注意力的時刻

4、，人們熟知的loading頁面反饋包括進度條、旋轉(zhuǎn)小菊花和小動畫等，使用這些反饋形式使用戶清楚地了解到產(chǎn)品的狀況和自己所處的位置，避免用戶等待太久后產(chǎn)生焦慮情緒或者誤以為頁面奔潰了而關(guān)閉頁面。一、loading設(shè)計中反饋機制的意義反饋是控制論、系統(tǒng)論的著名概念，指溝通行動的結(jié)果。反饋是對已經(jīng)發(fā)生的操作行為的指示或者回應(yīng)，而產(chǎn)品中的反饋則是所有反饋的集合體。反饋機制包含用戶對產(chǎn)品的反饋和產(chǎn)品對用戶的反饋。用戶對產(chǎn)品的反饋就是產(chǎn)品對人的神經(jīng)系統(tǒng)進行刺激，進而引發(fā)用戶心智模型后作出知覺化的反應(yīng)，人類神經(jīng)系統(tǒng)包含了大量的反饋機制，包括視覺、聽覺、觸覺、嗅覺、味覺傳感器，以及可以監(jiān)控身體姿勢和肌肉、肢體

5、運動的前庭和本體感覺系統(tǒng)。產(chǎn)品對用戶的反饋是在用戶進行操作后，產(chǎn)品給予用戶的信息反饋，目的在于讓用戶清楚自己在做什么，并且引導(dǎo)其下一步的操作，這個反饋過程必須滿足用戶的情感需求。用戶使用產(chǎn)品的直接目的和潛在目的是得到產(chǎn)品的反饋信息。在用戶使用產(chǎn)品過程中，產(chǎn)品需要時時刻刻與服務(wù)器進行數(shù)據(jù)的交換，首先服務(wù)器發(fā)出數(shù)據(jù)請求，接著服務(wù)器將接收到的相應(yīng)的數(shù)據(jù)請求傳輸給產(chǎn)品，最后產(chǎn)品將接收成功后的數(shù)據(jù)顯示出來，沒有接收成功則反饋數(shù)據(jù)接收失敗。產(chǎn)品與服務(wù)器進行數(shù)據(jù)交換時的空白階段會導(dǎo)致信息攝入的中斷，迫使用戶等待，而這個數(shù)據(jù)交換是非常頻繁的，通常都會使用loading頁面反饋來給予用戶反饋，避免用戶出現(xiàn)等待的

6、焦慮感，產(chǎn)品交互和反饋是密不可分的，而loading頁面更是反饋的最佳體現(xiàn)，因此，對于產(chǎn)品的交互反饋而言，loading的設(shè)計是非常重要和必要的。二、loading頁面中的反饋機制及其分類一個具有優(yōu)秀反饋系統(tǒng)的產(chǎn)品將給用戶帶來極大的控制感和適從感，當用戶在使用產(chǎn)品的每時每刻都知道自己在做什么，并且清晰地知道自己接下來該做什么，掌握著產(chǎn)品的工作進度，而不是與產(chǎn)品分離開來，各自工作，這就會讓用戶擁有優(yōu)越的用戶體驗。產(chǎn)品對人的反饋無非是通過對人的五感進行刺激，以達到喚起用戶注意力，同時將信息傳遞給用戶的目的。就loading頁面反饋來講，大致分為視覺反饋、聽覺反饋、觸覺反饋、嗅覺反饋等。視覺反饋運用

7、十分普遍，聽覺反饋次之，而觸覺反饋則比較少。（一）視覺反饋用戶界面中最多使用的是視覺界面與用戶進行信息的交流，因此在loading頁面中，使用最多并且最重要的反饋形式也是視覺反饋。在loading頁面中如果給用戶僅僅呈現(xiàn)了一個空白的頁面讓用戶等待，那么會造成用戶不能對頁面有定位和期待，從而造成心理上的焦慮。loading如果僅僅顯示了一個空白的頁面讓用戶等待，用戶不能在心理上對頁面有定位和預(yù)期，就會造成用戶心理上的焦慮，進度條是最常被使用的反饋元素（圖1）。loading頁面中最基本的視覺反饋就是視覺進度條，也是最簡單有效的反饋形式，從時間心理學(xué)角度來講，它能夠有效地延長用戶的心理等待時間。和

8、進度條類似的展現(xiàn)方式還是百分比的方式，而旋轉(zhuǎn)小菊花也是經(jīng)常使用的加載形式，相比而言，進度條和百分比的設(shè)計更加能夠提示用戶時間的量度，幫助用戶進行時間的估量，具有更高的可控性，能夠減少用戶焦慮感（圖2）。加載小動畫也是使用較多的loading頁面反饋，也是用戶更加喜愛的反饋形式。其原理是運用動畫來刺激用戶，以獲得更多的注意資源，利用趣味圖形減弱用戶對時間的感知。（二）聽覺反饋在系統(tǒng)進行加載過程中亦可使用聲音進行信息反饋，雖然使用聽覺反饋沒有非常頻繁，但也是非常重要的反饋類型，特別是在視覺反饋不方便使用的情境下，比如強烈的太陽光下，或嘈雜的環(huán)境中，聽覺反饋更能發(fā)揮其作用。endprint進度條不但

9、有視覺進度條，還有聽覺進度條。聽覺進度條能夠通過聲音刺激人的聽覺系統(tǒng)進而傳遞時間信息，通過使用各種形式的聲音來影響用戶對時間的感知。一般情況下，聽覺進度條是作為視覺進度條的補充使用，這樣的話用戶可以在等待過程中將視覺注意力短暫轉(zhuǎn)移，緩解用戶在操作過程中的疲勞，并且不至于讓用戶注意力離開產(chǎn)品。而聽覺loading頁面反饋更加能夠幫助視障人士走向信息化。因此對于聽覺反饋的探索還需要更加提高關(guān)注，聽覺反饋是非常有價值的。（三）觸覺反饋說起觸覺反饋，可能會比較陌生，但是從移動手機開始使用時就開始使用觸覺反饋了，譬如來電震動等形式。觸覺反饋能夠使用戶獲得更好的服務(wù)，使用戶更加沉浸于產(chǎn)品的使用中，使產(chǎn)品和

10、用戶更加親密。同樣，在loading頁面中使用觸覺反饋能夠抓住用戶的注意力，不讓用戶轉(zhuǎn)移注意力，進而減少用戶在等待時產(chǎn)生焦慮而關(guān)閉頁面的情況。觸覺反饋的優(yōu)點是只有當前使用產(chǎn)品的用戶才能感受到提示，因此觸覺反饋更加具有私密性。雖然觸覺反饋的形式還比較單一，基本都是以震動的形式反饋給用戶，但是觸感反饋、壓力觸控等觸感領(lǐng)域的技術(shù)越來越發(fā)達，相信很快就會為“人機觸覺互動”打開大門，加速“觸覺互動”的時代進程。而該技術(shù)在loading頁面中的應(yīng)用還比較少，需要設(shè)計師更加注意。（四）嗅覺反饋或許人們覺得嗅覺的反饋還很遙遠，目前嗅覺反饋在loading頁面中乃至互聯(lián)網(wǎng)產(chǎn)品中的應(yīng)用還很少。但是很多年前，mit

11、就開發(fā)了嗅覺裝置，也意味著將來用戶必然能享受到全感官的產(chǎn)品反饋和用戶體驗。loading頁面在產(chǎn)品中出現(xiàn)頻繁，好的loading設(shè)計能夠大大改善產(chǎn)品的用戶體驗，而不好的loading則會降低用戶體驗。從反饋的角度來說，其實就是產(chǎn)品后臺在進行數(shù)據(jù)交換工作時讓用戶如何等得開心，等得心甘情愿。在用戶使用產(chǎn)品過程中，開發(fā)者最希望用戶不被打斷，沉浸于產(chǎn)品的使用，而在這個過程中，loading頁面是最容易打斷用戶的一個節(jié)點，如果用戶過多地被打斷勢必造成產(chǎn)品用戶體驗的劣質(zhì)，更有可能造成產(chǎn)品的劣勢。三、loading頁面反饋設(shè)計的原則loding頁面反饋在產(chǎn)品中無處不在，在設(shè)計時設(shè)計師要考慮用戶需求和自身條件

12、，以達到對用戶反饋的目的，即保證用戶愉悅心情的情況下傳達信息并且指引操作。loading頁面反饋設(shè)計可以遵循以下原則：（一）即時反饋并且提供信息loading頁面反饋必須是即時的，即使延遲1/10秒就會令人不安。如果拖延太久就會導(dǎo)致用戶放棄等待而選擇其他的活動。當用戶花費了大量的時間和精力等待系統(tǒng)響應(yīng)后頁面顯示40項面，就會引起用戶極大的不滿，用戶可能就會棄用產(chǎn)品，也會造成系統(tǒng)資源的浪費。同時loading頁面反饋必須提供信息。在系統(tǒng)加載過程中，會有很多干擾因素，如網(wǎng)絡(luò)狀況、網(wǎng)站服務(wù)器情況、后臺情況，系統(tǒng)必須即時提供當下的情況給用戶才不至于讓用戶等得焦慮（圖3）。很多產(chǎn)品會使用后臺加載的形式，

13、譬如微信或微博里面的點贊。但因為后臺操作，可能有時候明明顯示成功，但其實卻是失敗，所以一些比較重要的操作不太適合用這種方式來呈現(xiàn)。這就是為了給用戶更加即時的信息反饋，使用戶更加流暢地使用產(chǎn)品，而不至于一個簡單的操作讓用戶等待很久。（二）適度反饋（圖4）過多的反饋可能比過少的反饋更加惱人。在safari瀏覽器打開鳳凰新聞的頁面的loading頁面中，首先頁面上方用藍色進度條進行顯示，加載了一部分頁面后，頁面中心出現(xiàn)了一個小動畫廣告，最后加載完成，頁面中心的廣告消失。在這個加載過程中，用戶急于瀏覽頁面加載出來的內(nèi)容，而頁面中心的小動畫廣告嚴重地干擾了用戶的注意力，造成用戶煩躁的情緒，太多的反饋會干

14、擾必要信息。反饋必不可少，但是并不包含有礙于其他事物的時候，包括一個平靜和放松的環(huán)境。（三）避免過度節(jié)省成本的反饋設(shè)計拙劣的loading反饋可能是旨在降低成本的結(jié)果，即沒有給用戶帶來正面情緒反而帶來了負面情緒（圖5）。一些產(chǎn)品為了節(jié)約成本，簡單地下載一個gif圖片就作為產(chǎn)品的loading頁面，使用最多的當屬旋轉(zhuǎn)小菊花的使用，而旋轉(zhuǎn)小菊花的使用情景是加載內(nèi)容比較少，能夠快速加載出接下來的內(nèi)容，過分的降低成本導(dǎo)致使用單一的loading頁面?zhèn)鬟_加載過程中多種類型的信息，而不是使用多種loadinq加載信息來進行顯示，loading頁面包括頁面內(nèi)加載、控件自身加載、層級內(nèi)切換、層級間跳轉(zhuǎn)等類型。（四）反饋需要精心策劃loading頁面反饋需要精心策劃，需要以一種不顯著的方式確認所有的操作。loading頁面反饋也必須考慮優(yōu)先權(quán)，以不經(jīng)意的方式表現(xiàn)不重要的信息，使用引人注目的方式呈現(xiàn)重要的信號。新安裝的app或者剛更新的app需要重新加載軟件，所以加載內(nèi)容多，加載非常緩慢，這就出現(xiàn)了引導(dǎo)頁，開屏loading頁面的設(shè)計中包含更多的信息，一般包括產(chǎn)品宣傳廣告，產(chǎn)品最新活動，或者有些軟件會把登錄頁和引導(dǎo)頁結(jié)合起來，減少用戶操作步驟，這些信息的添加都需要精心策劃，避免用戶在剛開始使用該產(chǎn)品時就產(chǎn)生負面情緒導(dǎo)致用戶的流失。load