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

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

一、用戶體驗(yàn)與界面設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（三）固定區(qū)域

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

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

四、總結(jié)

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

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

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

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

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