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

張校君+張宇紅

摘要：交互設(shè)計(jì)中的信息交換就是反饋機(jī)制運(yùn)作的過程，而loadlng頁面反饋是界面反饋的最佳體現(xiàn)。本文從反饋機(jī)制中的視覺反饋、聽覺反饋、觸覺反饋等反饋種類中探討loading頁面反饋的意義，通過對loading頁面設(shè)計(jì)中的反饋機(jī)制進(jìn)行具體分析，提出從反饋機(jī)制的角度來看，loadlng頁面設(shè)計(jì)的規(guī)則，即loadlng頁面必須即時(shí)反饋并且提供信息，適度反饋，反饋時(shí)避免過度節(jié)省成本造成反作用，反饋需要精心策劃。

關(guān)鍵詞：交互設(shè)計(jì) loading頁面設(shè)計(jì) 反饋機(jī)制

引言

交互設(shè)計(jì)的概念自1984年由lDEO的創(chuàng)始人比爾.莫格里奇提出以來被運(yùn)用到各個(gè)領(lǐng)域，現(xiàn)在我們普遍認(rèn)為的交互設(shè)計(jì)是：通過產(chǎn)品的媒介來設(shè)計(jì)人與人、人與物、人與環(huán)境的相互關(guān)系，以支持、滿足、創(chuàng)造人們之間的各種互動(dòng)行為。

交互設(shè)計(jì)最終的目標(biāo)是在探索用戶需求的基礎(chǔ)上開發(fā)出具有可用性的產(chǎn)品，以實(shí)現(xiàn)用戶體驗(yàn)的最終目標(biāo)。產(chǎn)品交互也就是產(chǎn)品與用戶之間的交互，包含信息傳遞和信息反饋，信息反饋就是計(jì)算機(jī)對用戶作出的操作行為的回應(yīng)，進(jìn)而指示用戶下一步的操作行為，這個(gè)過程是一個(gè)相互交互的過程，它體現(xiàn)了產(chǎn)品交互的本質(zhì)。也就是說：產(chǎn)品概念中信息交換是雙向的，而不僅僅是系統(tǒng)對人的反映，交互的過程因?yàn)橛辛藙?dòng)作和隨之而來的反饋才形成了一個(gè)交互的基本單元。

設(shè)計(jì)師對反饋的探索已經(jīng)歷時(shí)很久了，并且從用戶界面出現(xiàn)以來，反饋一直是研究者關(guān)注的重點(diǎn)。早在1900年，美國認(rèn)知心理學(xué)家Norman就意識(shí)到反饋的重要性，并將其列為用戶界面中六大設(shè)計(jì)準(zhǔn)則之一，同時(shí)他還指出：“沒有反饋的界面將是用戶難以忍受的。”可以見得反饋在界面設(shè)計(jì)中的重要性。用戶在使用產(chǎn)品的過程中，如果只有信息傳遞，而沒有任何反饋，那么這個(gè)產(chǎn)品是失敗的，因?yàn)樗o用戶帶來了極大的挫敗和焦慮。

Loading頁面反饋是用戶界面反饋中非常重要的反饋之-，在頁面與頁面之間進(jìn)行切換時(shí)，系統(tǒng)需要時(shí)間加載新頁面或者新程序，這時(shí)就需要對用戶進(jìn)行提示，也就是Loading頁面反饋，這個(gè)階段也是非常容易打斷用戶注意力的時(shí)刻，人們熟知的Loading頁面反饋包括進(jìn)度條、旋轉(zhuǎn)小菊花和小動(dòng)畫等，使用這些反饋形式使用戶清楚地了解到產(chǎn)品的狀況和自己所處的位置，避免用戶等待太久后產(chǎn)生焦慮情緒或者誤以為頁面奔潰了而關(guān)閉頁面。

一、loading設(shè)計(jì)中反饋機(jī)制的意義

反饋是控制論、系統(tǒng)論的著名概念，指溝通行動(dòng)的結(jié)果。反饋是對已經(jīng)發(fā)生的操作行為的指示或者回應(yīng)，而產(chǎn)品中的反饋則是所有反饋的集合體。

反饋機(jī)制包含用戶對產(chǎn)品的反饋和產(chǎn)品對用戶的反饋。用戶對產(chǎn)品的反饋就是產(chǎn)品對人的神經(jīng)系統(tǒng)進(jìn)行刺激，進(jìn)而引發(fā)用戶心智模型后作出知覺化的反應(yīng)，人類神經(jīng)系統(tǒng)包含了大量的反饋機(jī)制，包括視覺、聽覺、觸覺、嗅覺、味覺傳感器，以及可以監(jiān)控身體姿勢和肌肉、肢體運(yùn)動(dòng)的前庭和本體感覺系統(tǒng)。產(chǎn)品對用戶的反饋是在用戶進(jìn)行操作后，產(chǎn)品給予用戶的信息反饋，目的在于讓用戶清楚自己在做什么，并且引導(dǎo)其下一步的操作，這個(gè)反饋過程必須滿足用戶的情感需求。用戶使用產(chǎn)品的直接目的和潛在目的是得到產(chǎn)品的反饋信息。

在用戶使用產(chǎn)品過程中，產(chǎn)品需要時(shí)時(shí)刻刻與服務(wù)器進(jìn)行數(shù)據(jù)的交換，首先服務(wù)器發(fā)出數(shù)據(jù)請求，接著服務(wù)器將接收到的相應(yīng)的數(shù)據(jù)請求傳輸給產(chǎn)品，最后產(chǎn)品將接收成功后的數(shù)據(jù)顯示出來，沒有接收成功則反饋數(shù)據(jù)接收失敗。產(chǎn)品與服務(wù)器進(jìn)行數(shù)據(jù)交換時(shí)的空白階段會(huì)導(dǎo)致信息攝入的中斷，迫使用戶等待，而這個(gè)數(shù)據(jù)交換是非常頻繁的，通常都會(huì)使用loading頁面反饋來給予用戶反饋，避免用戶出現(xiàn)等待的焦慮感，產(chǎn)品交互和反饋是密不可分的，而loading頁面更是反饋的最佳體現(xiàn)，因此，對于產(chǎn)品的交互反饋而言，loading的設(shè)計(jì)是非常重要和必要的。

二、loading頁面中的反饋機(jī)制及其分類

一個(gè)具有優(yōu)秀反饋系統(tǒng)的產(chǎn)品將給用戶帶來極大的控制感和適從感，當(dāng)用戶在使用產(chǎn)品的每時(shí)每刻都知道自己在做什么，并且清晰地知道自己接下來該做什么，掌握著產(chǎn)品的工作進(jìn)度，而不是與產(chǎn)品分離開來，各自工作，這就會(huì)讓用戶擁有優(yōu)越的用戶體驗(yàn)。產(chǎn)品對人的反饋無非是通過對人的五感進(jìn)行刺激，以達(dá)到喚起用戶注意力，同時(shí)將信息傳遞給用戶的目的。

就Loading頁面反饋來講，大致分為視覺反饋、聽覺反饋、觸覺反饋、嗅覺反饋等。視覺反饋運(yùn)用十分普遍，聽覺反饋次之，而觸覺反饋則比較少。

（一）視覺反饋

用戶界面中最多使用的是視覺界面與用戶進(jìn)行信息的交流，因此在loading頁面中，使用最多并且最重要的反饋形式也是視覺反饋。在loading頁面中如果給用戶僅僅呈現(xiàn)了一個(gè)空白的頁面讓用戶等待，那么會(huì)造成用戶不能對頁面有定位和期待，從而造成心理上的焦慮。

Loading如果僅僅顯示了一個(gè)空白的頁面讓用戶等待，用戶不能在心理上對頁面有定位和預(yù)期，就會(huì)造成用戶心理上的焦慮，進(jìn)度條是最常被使用的反饋元素（圖1）。

Loading頁面中最基本的視覺反饋就是視覺進(jìn)度條，也是最簡單有效的反饋形式，從時(shí)間心理學(xué)角度來講，它能夠有效地延長用戶的心理等待時(shí)間。和進(jìn)度條類似的展現(xiàn)方式還是百分比的方式，而旋轉(zhuǎn)小菊花也是經(jīng)常使用的加載形式，相比而言，進(jìn)度條和百分比的設(shè)計(jì)更加能夠提示用戶時(shí)間的量度，幫助用戶進(jìn)行時(shí)間的估量，具有更高的可控性，能夠減少用戶焦慮感（圖2）。

加載小動(dòng)畫也是使用較多的loading頁面反饋，也是用戶更加喜愛的反饋形式。其原理是運(yùn)用動(dòng)畫來刺激用戶，以獲得更多的注意資源，利用趣味圖形減弱用戶對時(shí)間的感知。

（二）聽覺反饋

在系統(tǒng)進(jìn)行加載過程中亦可使用聲音進(jìn)行信息反饋，雖然使用聽覺反饋沒有非常頻繁，但也是非常重要的反饋類型，特別是在視覺反饋不方便使用的情境下，比如強(qiáng)烈的太陽光下，或嘈雜的環(huán)境中，聽覺反饋更能發(fā)揮其作用。endprint

進(jìn)度條不但有視覺進(jìn)度條，還有聽覺進(jìn)度條。聽覺進(jìn)度條能夠通過聲音刺激人的聽覺系統(tǒng)進(jìn)而傳遞時(shí)間信息，通過使用各種形式的聲音來影響用戶對時(shí)間的感知。一般情況下，聽覺進(jìn)度條是作為視覺進(jìn)度條的補(bǔ)充使用，這樣的話用戶可以在等待過程中將視覺注意力短暫轉(zhuǎn)移，緩解用戶在操作過程中的疲勞，并且不至于讓用戶注意力離開產(chǎn)品。而聽覺loading頁面反饋更加能夠幫助視障人士走向信息化。因此對于聽覺反饋的探索還需要更加提高關(guān)注，聽覺反饋是非常有價(jià)值的。

（三）觸覺反饋

說起觸覺反饋，可能會(huì)比較陌生，但是從移動(dòng)手機(jī)開始使用時(shí)就開始使用觸覺反饋了，譬如來電震動(dòng)等形式。觸覺反饋能夠使用戶獲得更好的服務(wù)，使用戶更加沉浸于產(chǎn)品的使用中，使產(chǎn)品和用戶更加親密。同樣，在loading頁面中使用觸覺反饋能夠抓住用戶的注意力，不讓用戶轉(zhuǎn)移注意力，進(jìn)而減少用戶在等待時(shí)產(chǎn)生焦慮而關(guān)閉頁面的情況。觸覺反饋的優(yōu)點(diǎn)是只有當(dāng)前使用產(chǎn)品的用戶才能感受到提示，因此觸覺反饋更加具有私密性。

雖然觸覺反饋的形式還比較單一，基本都是以震動(dòng)的形式反饋給用戶，但是觸感反饋、壓力觸控等觸感領(lǐng)域的技術(shù)越來越發(fā)達(dá)，相信很快就會(huì)為“人機(jī)觸覺互動(dòng)”打開大門，加速“觸覺互動(dòng)”的時(shí)代進(jìn)程。而該技術(shù)在loading頁面中的應(yīng)用還比較少，需要設(shè)計(jì)師更加注意。

（四）嗅覺反饋

或許人們覺得嗅覺的反饋還很遙遠(yuǎn)，目前嗅覺反饋在loading頁面中乃至互聯(lián)網(wǎng)產(chǎn)品中的應(yīng)用還很少。但是很多年前，MIT就開發(fā)了嗅覺裝置，也意味著將來用戶必然能享受到全感官的產(chǎn)品反饋和用戶體驗(yàn)。

loading頁面在產(chǎn)品中出現(xiàn)頻繁，好的loading設(shè)計(jì)能夠大大改善產(chǎn)品的用戶體驗(yàn)，而不好的loading則會(huì)降低用戶體驗(yàn)。從反饋的角度來說，其實(shí)就是產(chǎn)品后臺(tái)在進(jìn)行數(shù)據(jù)交換工作時(shí)讓用戶如何等得開心，等得心甘情愿。在用戶使用產(chǎn)品過程中，開發(fā)者最希望用戶不被打斷，沉浸于產(chǎn)品的使用，而在這個(gè)過程中，loading頁面是最容易打斷用戶的一個(gè)節(jié)點(diǎn)，如果用戶過多地被打斷勢必造成產(chǎn)品用戶體驗(yàn)的劣質(zhì)，更有可能造成產(chǎn)品的劣勢。

三、loading頁面反饋設(shè)計(jì)的原則

loding頁面反饋在產(chǎn)品中無處不在，在設(shè)計(jì)時(shí)設(shè)計(jì)師要考慮用戶需求和自身?xiàng)l件，以達(dá)到對用戶反饋的目的，即保證用戶愉悅心情的情況下傳達(dá)信息并且指引操作。Loading頁面反饋設(shè)計(jì)可以遵循以下原則：

（一）即時(shí)反饋并且提供信息

loading頁面反饋必須是即時(shí)的，即使延遲1/10秒就會(huì)令人不安。如果拖延太久就會(huì)導(dǎo)致用戶放棄等待而選擇其他的活動(dòng)。當(dāng)用戶花費(fèi)了大量的時(shí)間和精力等待系統(tǒng)響應(yīng)后頁面顯示40項(xiàng)面，就會(huì)引起用戶極大的不滿，用戶可能就會(huì)棄用產(chǎn)品，也會(huì)造成系統(tǒng)資源的浪費(fèi)。同時(shí)loading頁面反饋必須提供信息。在系統(tǒng)加載過程中，會(huì)有很多干擾因素，如網(wǎng)絡(luò)狀況、網(wǎng)站服務(wù)器情況、后臺(tái)情況，系統(tǒng)必須即時(shí)提供當(dāng)下的情況給用戶才不至于讓用戶等得焦慮（圖3）。

很多產(chǎn)品會(huì)使用后臺(tái)加載的形式，譬如微信或微博里面的點(diǎn)贊。但因?yàn)楹笈_(tái)操作，可能有時(shí)候明明顯示成功，但其實(shí)卻是失敗，所以一些比較重要的操作不太適合用這種方式來呈現(xiàn)。這就是為了給用戶更加即時(shí)的信息反饋，使用戶更加流暢地使用產(chǎn)品，而不至于一個(gè)簡單的操作讓用戶等待很久。

（二）適度反饋（圖4）

過多的反饋可能比過少的反饋更加惱人。在Safari瀏覽器打開鳳凰新聞的頁面的loading頁面中，首先頁面上方用藍(lán)色進(jìn)度條進(jìn)行顯示，加載了一部分頁面后，頁面中心出現(xiàn)了一個(gè)小動(dòng)畫廣告，最后加載完成，頁面中心的廣告消失。在這個(gè)加載過程中，用戶急于瀏覽頁面加載出來的內(nèi)容，而頁面中心的小動(dòng)畫廣告嚴(yán)重地干擾了用戶的注意力，造成用戶煩躁的情緒，太多的反饋會(huì)干擾必要信息。反饋必不可少，但是并不包含有礙于其他事物的時(shí)候，包括一個(gè)平靜和放松的環(huán)境。

（三）避免過度節(jié)省成本的反饋

設(shè)計(jì)拙劣的loading反饋可能是旨在降低成本的結(jié)果，即沒有給用戶帶來正面情緒反而帶來了負(fù)面情緒（圖5）。

一些產(chǎn)品為了節(jié)約成本，簡單地下載一個(gè)gif圖片就作為產(chǎn)品的loading頁面，使用最多的當(dāng)屬旋轉(zhuǎn)小菊花的使用，而旋轉(zhuǎn)小菊花的使用情景是加載內(nèi)容比較少，能夠快速加載出接下來的內(nèi)容，過分的降低成本導(dǎo)致使用單一的loading頁面?zhèn)鬟_(dá)加載過程中多種類型的信息，而不是使用多種loadinq加載信息來進(jìn)行顯示，loading頁面包括頁面內(nèi)加載、控件自身加載、層級(jí)內(nèi)切換、層級(jí)間跳轉(zhuǎn)等類型。

（四）反饋需要精心策劃

loading頁面反饋需要精心策劃，需要以一種不顯著的方式確認(rèn)所有的操作。Loading頁面反饋也必須考慮優(yōu)先權(quán)，以不經(jīng)意的方式表現(xiàn)不重要的信息，使用引人注目的方式呈現(xiàn)重要的信號(hào)。

新安裝的APP或者剛更新的APP需要重新加載軟件，所以加載內(nèi)容多，加載非常緩慢，這就出現(xiàn)了引導(dǎo)頁，開屏loading頁面的設(shè)計(jì)中包含更多的信息，一般包括產(chǎn)品宣傳廣告，產(chǎn)品最新活動(dòng)，或者有些軟件會(huì)把登錄頁和引導(dǎo)頁結(jié)合起來，減少用戶操作步驟，這些信息的添加都需要精心策劃，避免用戶在剛開始使用該產(chǎn)品時(shí)就產(chǎn)生負(fù)面情緒導(dǎo)致用戶的流失。

Loading頁面反饋十分必要，但必須正確地、合理地使用。

結(jié)語

對于產(chǎn)品反饋而言，loading頁面的設(shè)計(jì)不可忽視，而且在交互設(shè)計(jì)越來越注重用戶體驗(yàn)的今天，設(shè)計(jì)師需要進(jìn)一步切身考慮用戶情緒和情感，在適當(dāng)?shù)臅r(shí)候合理地使用loading頁面反饋中視覺、聽覺、觸覺乃至嗅覺反饋，提升產(chǎn)品和用戶的融入感，用戶對產(chǎn)品的控制性，良好的loading頁面反饋在互聯(lián)網(wǎng)產(chǎn)品中是非常重要的，是不可忽略的，因此，需要設(shè)計(jì)師更加注重loading頁面反饋的設(shè)計(jì)。endprint