淺談以用戶為中心的網(wǎng)頁緩沖界面設(shè)計

稅夢瑤（攀枝花學(xué)院藝術(shù)學(xué)院 617000）

大部分網(wǎng)頁都會有緩沖界面設(shè)計，但常聽到這樣的抱怨：“好慢！”“圖標(biāo)一直轉(zhuǎn)啊轉(zhuǎn)”，這種情況讓人心里莫名的焦躁。據(jù)統(tǒng)計，用戶等待網(wǎng)頁打開的時間大約在6～8秒之間。如果超過8秒，會有超過50%的用戶放棄訪問，選擇離開該頁面，除非該用戶必須打開此網(wǎng)頁。

一、用戶體驗與界面設(shè)計

用戶體驗的英文全稱是User Experience，它指用戶在使用一個產(chǎn)品、系統(tǒng)或者服務(wù)時建立起來的純主觀感受。界面設(shè)計是人與使用對象之間傳遞和交換信息的媒介。不同用戶對同一個界面的需求是不一樣的，通過研究用戶的使用方式、感受，能夠更好的設(shè)計界面，讓產(chǎn)品更加易用、樂用。

二、以用戶為中心的緩沖界面設(shè)計形式

網(wǎng)頁緩沖界面俗稱“l(fā)oading界面”，包括確定性界面、非確定性界面。常見的非確定性緩沖界面有以上三種表現(xiàn)形式：圖形重復(fù)閃爍型、文案等待型、進度條提示型。根據(jù)市場調(diào)研，大部分使用者更希望看到第三種進度條形式，因為第一種“圖形重復(fù)閃爍型”，人們不確定圖形圓圈要轉(zhuǎn)多久才算加載成功，也不知道第二個“文案等待型”后面的點要閃爍到猴年馬月。

但如果在等待緩沖的同時，界面能夠看到一些其他的東西，在一定程度上可以轉(zhuǎn)移用戶的注意力。就好比在網(wǎng)上看視頻前，總有幾十秒的廣告，如果廣告做得好，能夠讓用戶覺得不無聊，適當(dāng)減緩用戶焦躁的情緒。常見的網(wǎng)頁緩沖界面設(shè)計有以下五種表現(xiàn)形式。

（一）圖形化緩沖界面設(shè)計

頁面的局部加載時常能看到“圖形重復(fù)閃爍型”設(shè)計的身影，視覺表現(xiàn)形式上像一個不停旋轉(zhuǎn)的“風(fēng)火輪”，這樣的表現(xiàn)形式非常適合做不確定等待時間的緩沖界面設(shè)計。但每次看到的圖形都差不多，如果換一種表現(xiàn)的形式，也許會覺得“這個圖形跟別的好像不太一樣”，通過好奇減少用戶等待的焦躁。

以圓形為例，除了以簡單線段重復(fù)排列構(gòu)成圓形以外，還可以使用星形、多邊形、不規(guī)則圖形等視覺變化豐富的圖形排列組成圓形，并將這些單體圖形的顏色由淺到深漸變，由小到大排列等形式組成。同樣是構(gòu)成形式簡單的緩沖界面，卻能讓用戶感受到更多新意。

（二）數(shù)字與圖形相結(jié)合的緩沖界面設(shè)計

為了減少用戶等待界面顯示的焦慮，設(shè)計緩沖界面時可以給用戶一個時間提示，示意該界面的緩沖進度。如在“圖形化緩沖界面設(shè)計”形式上加入時間、百分比等數(shù)字顯示方式。在數(shù)字與“進度條提示型”緩沖設(shè)計相結(jié)合中，為了減弱用戶的焦躁，“增強用戶的其他方面期待值”是一種好的緩解方法，讓用戶在對網(wǎng)站懷有期待的同時，增加對緩沖進度條的設(shè)計期待。比如對不同的百分點設(shè)置不同顏色，用戶在等待過程中視覺上不易疲勞。

（三）品牌趣味性緩沖界面設(shè)計

以上兩種表現(xiàn)形式都起到提示進度的作用，但它們的差別是：“圖形化緩沖界面”表現(xiàn)形式簡單，“數(shù)字與圖形相結(jié)合緩沖界面”內(nèi)容有動畫效果。在此基礎(chǔ)上，很多品牌網(wǎng)站為了加強品牌宣傳力度，在緩沖界面設(shè)計上加入了品牌元素。如：墨西哥奶酪網(wǎng)站的loading界面由一瓶帶有投影的奶酪瓶構(gòu)成，瓶內(nèi)的奶酪會隨著進度條度數(shù)的上升而逐步充滿整個瓶身。瓶身上的標(biāo)簽是該奶酪公司的商標(biāo)和簡介。

類似的緩沖界面設(shè)計還有很多，如：環(huán)保類網(wǎng)站會使用綠色植物元素、貨運網(wǎng)站會使用輪船環(huán)繞地球元素，某外國品牌動畫網(wǎng)站則直接使用老舊電視屏幕倒計時的方式。這樣的緩沖界面設(shè)計，在顯示加載進程的同時，還加深了品牌印象，別有一種欣賞的意味。

（四）文案化緩沖界面設(shè)計

除了對圖形、進度條變形外，緩沖界面設(shè)計還可以與文案相結(jié)合。 好比看電影前，都有一些預(yù)告片，不僅能使人對電影產(chǎn)生興趣，還能知道大概內(nèi)容。緩沖界面設(shè)計，也可利用緩沖的時間，在界面上設(shè)置一些該網(wǎng)站的流動圖片和介紹文案。

如：熱門游戲水果忍者登陸界面，其緩沖界面設(shè)計是一個移動的西瓜，可以增加用戶的親切感，知道緩沖進度，同時在緩沖條上方還有游戲玩法介紹圖，小竅門，讓用戶在等待的同時更了解游戲，增加游戲期待值。這樣的展現(xiàn)方式如今被眾多在線銷售商家所親睞。

（五）分類式緩沖界面設(shè)計

如果一個網(wǎng)頁加載的內(nèi)容太多，其加載進度相對會比較緩慢，讓緩沖界面呈現(xiàn)龜速，甚至不動的局面，如果產(chǎn)生這種現(xiàn)象，設(shè)計師可以把進度條分成多個進度條多次加載，以安撫用戶焦躁的心。但在每個進度條相應(yīng)的位置最好設(shè)有匹配的解釋說明文字，以詮釋加載的內(nèi)容，以免用戶對大面積進度條產(chǎn)生恐慌、不耐煩心理。

三、緩沖界面、圖標(biāo)放置位置方法：

打開網(wǎng)頁，當(dāng)用戶需要等待時，采用確定性緩沖界面是首選。但對于一些網(wǎng)頁加載內(nèi)容較少，耗時短，網(wǎng)速快的情況下，多使用非確定性緩沖圖標(biāo)這類成本較低的設(shè)計表現(xiàn)形式。其在網(wǎng)頁中的放置位置都有一定的規(guī)則：確保用戶可以注意到。

（一）靠近點擊區(qū)域

用戶在網(wǎng)頁中進行某項指令后，需要等待加載這種情況，緩沖圖標(biāo)位置必須靠近最后一步命令的點擊區(qū)域附近，這樣能夠讓用戶在等待網(wǎng)頁緩沖反饋時看到最直接的呈現(xiàn)，緩沖進度也最容易被注意到。如果能配合按鈕進行切換下一步命令，會得到更好的視覺使用反饋。

（二）位于內(nèi)容刷新區(qū)域上層

當(dāng)頁面內(nèi)某區(qū)域內(nèi)容需要被刷新時，用戶的視線焦點會聚焦在此區(qū)域，如果緩沖圖標(biāo)此時不適合設(shè)置在此區(qū)域的刷新按鍵旁，那么可以將緩沖圖標(biāo)放在被刷新內(nèi)容的上層，如發(fā)表qq郵箱廣播的評論展開區(qū)域，這樣的設(shè)計讓人一目了然。

（三）固定區(qū)域

將緩沖圖標(biāo)安置在固定區(qū)域，此區(qū)域最好是頁面瀏覽器窗口附近，要讓用戶在即使不習(xí)慣瀏覽器窗口構(gòu)成情況下，也能憑借瀏覽習(xí)慣很容易找到緩沖圖標(biāo)。比如Gmail這款郵箱應(yīng)用一樣，緩沖圖標(biāo)設(shè)置在瀏覽器窗口頂部位置。

緩沖圖標(biāo)雖然是網(wǎng)頁界面設(shè)計中很小的一個組成部分，但如果不以用戶為中心考慮其設(shè)計，會給用戶帶來焦慮等負面情緒，造成網(wǎng)站用戶的流失。

四、總結(jié)

網(wǎng)頁緩沖界面設(shè)計是網(wǎng)站設(shè)計的重要組成部分，優(yōu)秀的緩沖界面設(shè)計會給網(wǎng)站加分增彩，吸引潛在用戶，但對于國內(nèi)來說很少設(shè)計師做到這些水平。國內(nèi)網(wǎng)頁設(shè)計相對于國外還有一定的差距，一是這方面投入的不夠，二是設(shè)計師設(shè)計意識有待提高，通過以上搜集的這些設(shè)計方式及分析，希望對今后網(wǎng)頁緩沖界面設(shè)計具有參考價值。

[1]張靜.論網(wǎng)頁界面的交互性設(shè)計[J].長春師范學(xué)院學(xué)報，2013.06.

[2]熊科軍.網(wǎng)頁設(shè)計中的提示信息設(shè)計研究[J].美與時代，2015.02.

[3]季芳磊.網(wǎng)頁設(shè)計中的細節(jié)交互[J].科技風(fēng)，2011.

[4]王育.網(wǎng)頁交互界面中反饋替代的研究[J].中國制造業(yè)信息化，2011.