王瑩瑩　侯琳琦

摘 要：引入時(shí)間心理學(xué)中時(shí)距估計(jì)的概念，探討時(shí)距估計(jì)在網(wǎng)頁加載設(shè)計(jì)中的應(yīng)用價(jià)值，結(jié)合時(shí)距估計(jì)理論分析現(xiàn)有加載頁面設(shè)計(jì)中的不足和亮點(diǎn)，提出相應(yīng)的設(shè)計(jì)方法，指導(dǎo)加載頁面的設(shè)計(jì)，提升用戶加載程中的時(shí)間體驗(yàn)。

關(guān)鍵詞：網(wǎng)頁加載設(shè)計(jì)；時(shí)距估計(jì)；用戶體驗(yàn)

0 引言

近些年來，互聯(lián)網(wǎng)產(chǎn)品領(lǐng)域?qū)Α坝脩趔w驗(yàn)”的關(guān)注日益加強(qiáng)，以傳統(tǒng)的三大可用性因素（效率、效益和主觀滿意度）為重要指標(biāo)，逐漸將用戶體驗(yàn)涵蓋到用戶與產(chǎn)品交互的方方面面，其中王堅(jiān)在《結(jié)網(wǎng)》中將用戶體驗(yàn)的三要素概括為：別讓我等，別讓我想，別讓我煩，“別讓我等”是影響用戶體驗(yàn)的重要因素之一，可用性研究表明，用戶能夠忍受的最長等待時(shí)間大約在6～8秒之間，但是通過分析用戶在信息加工過程中時(shí)間感知的心智模型，對用戶等待過程中網(wǎng)頁的加載頁面進(jìn)行優(yōu)化設(shè)計(jì)，造成不同的時(shí)間錯覺感知，可以減少用戶的等待感以及因時(shí)間因素產(chǎn)生的負(fù)面情緒。本文就以時(shí)間錯覺的產(chǎn)生根源——時(shí)距估計(jì)的心智模型作為切入點(diǎn)進(jìn)行分析和討論，研究時(shí)距估計(jì)在網(wǎng)絡(luò)加載頁面設(shè)計(jì)中的應(yīng)用，提升交互設(shè)計(jì)中的心理體驗(yàn)。

1 時(shí)距估計(jì)在加載頁面中的應(yīng)用分析

1.1 時(shí)距估計(jì)

時(shí)間心理學(xué)包括三種時(shí)間現(xiàn)象：時(shí)序、時(shí)距和時(shí)點(diǎn)，時(shí)距指客觀現(xiàn)象的持續(xù)性，也就是事件持續(xù)的時(shí)間長短；時(shí)間錯覺是人的主觀時(shí)間感知與客觀時(shí)間感知發(fā)生偏離的一種時(shí)間知覺，其中時(shí)距是最容易激發(fā)時(shí)間錯覺的要素，在接收時(shí)間信息刺激的過程中，時(shí)距估計(jì)的心智模型有4個(gè)：容量模型，加工時(shí)間模型，變化/分割模型和時(shí)間認(rèn)知的分段模型。

1.2 時(shí)距估計(jì)策略

時(shí)距估計(jì)策略是指根據(jù)進(jìn)展速度和事件的容量來推算事件持續(xù)時(shí)間，用戶會根據(jù)事件發(fā)生過程中的當(dāng)前速度和規(guī)律，來預(yù)估事件完成的時(shí)間，如果個(gè)體或環(huán)境變量改變，用戶的時(shí)距估計(jì)也會發(fā)生變化。

圖1 加載狀態(tài)圖

圖2 加載狀態(tài)圖

如上圖所示，圖2利用綠色加載條將時(shí)間可視化，根據(jù)時(shí)距估計(jì)策略可知，加載條的設(shè)計(jì)幫助用戶完成了對時(shí)距的估計(jì)，可控性增強(qiáng)，減少了等待的焦慮感，圖2的設(shè)計(jì)優(yōu)于圖1。

1.3 加工時(shí)間模型

加工時(shí)間模型指：人類的信息加工系統(tǒng)存在兩個(gè)加工器：一個(gè)是認(rèn)知計(jì)時(shí)器，專門負(fù)責(zé)對時(shí)間信息加工和編碼，另一個(gè)是刺激加工器，專門對刺激信息進(jìn)行加工和編碼，時(shí)距的判斷取決于兩者的輸出，在信息加工的過程中，如果分配在刺激加工器中的注意資源比較多，那么投入認(rèn)知計(jì)時(shí)器的注意資源就減少，時(shí)間的估計(jì)就會變短，反之時(shí)距估計(jì)就變長。

圖3 加載動畫案例圖

可通過一些外部的影響因素如聲音、顏色、圖形等作為刺激信息獲得更多的注意資源。如圖3所示，加入有趣的圖形元素，分配更多的資源給刺激加工器，減少對響應(yīng)時(shí)間的感知，提升用戶的時(shí)間體驗(yàn)。

1.4 變化分割模型

變化分割模型認(rèn)為用戶根據(jù)注意到的心理和環(huán)境變化的數(shù)量判斷時(shí)間量，注意的外部事件數(shù)量越多，時(shí)距越長，強(qiáng)調(diào)信息內(nèi)容分段的多少給用戶時(shí)距估計(jì)帶來的影響，主要針對用戶的回溯式估計(jì)。

圖4 手機(jī)IE瀏覽器加載頁面圖

如圖4所示，IE瀏覽器將加載的變化分成4個(gè)不同的階段，階段一的加載采用藍(lán)色方形回旋加載，如左一，跳轉(zhuǎn)到藍(lán)色圓形形式加載（左二），接著是空白頁面（左三），綠色進(jìn)度條一直在上方顯示，雖然各階段的變化能夠增加對刺激加工器的分配，但是可分割的片段太多，給用戶造成了時(shí)間比較長的回溯式估計(jì)，影響了一個(gè)頁面加載的整體體驗(yàn)。

1.5 預(yù)期——解釋心理模型

預(yù)期——解釋心理模型包括四個(gè)環(huán)節(jié)：預(yù)期建構(gòu)、預(yù)期確定、預(yù)期失敗以及對預(yù)期失敗的解釋。

圖5 手機(jī)UC瀏覽器加載頁面圖

如圖5所示，UC瀏覽器的加載設(shè)計(jì)是通過一個(gè)藍(lán)色漸變的加載條，主要來表達(dá)時(shí)間的極速感和流暢感，色彩采用藍(lán)色，通過色彩的漸變隱喻光速，視覺的聯(lián)想帶來的心理效應(yīng)給人造成時(shí)間錯覺，UC進(jìn)度條的加載策略是很快——慢——快，超出用戶在預(yù)期建構(gòu)階段的時(shí)間估計(jì)，在預(yù)期確定階段，制造出驚喜的效果，預(yù)期解釋即反思階段給人極速、流暢的用戶體驗(yàn)。

圖6 手機(jī)QQ瀏覽器加載頁面圖

如圖6所示，QQ瀏覽器加載條的設(shè)計(jì)采用的是在輸入欄里緩沖大面積的綠色，加載條的速度完全按照系統(tǒng)加載的算法，給用戶一直在打開的感覺，沒有變化，網(wǎng)絡(luò)稍微不穩(wěn)定，用戶就會失去信息，關(guān)掉瀏覽器。UC瀏覽器的加載設(shè)計(jì)的更好一些。

2 基于時(shí)距估計(jì)的加載頁面設(shè)計(jì)方法

2.1 加載進(jìn)度可視化

加載頁面進(jìn)度的設(shè)計(jì)不能單純地只反應(yīng)現(xiàn)在系統(tǒng)的加載狀態(tài)，還要建立在產(chǎn)品的信息變化上，通過色彩或圖形隱喻，將加載的進(jìn)度時(shí)間可視化、加載狀態(tài)可視化，符合用戶時(shí)距估計(jì)策略的心智模型。

2.2 增加刺激元素，分配注意資源

加載頁面的設(shè)計(jì)可以增加一些外部的刺（下轉(zhuǎn)第頁）（上接第頁）激元素，如有趣的圖形設(shè)計(jì)、聲音等，在信息加工的過程中，使更多地注意資源分配到刺激加工器中，減少等待的焦慮。

2.3 減少加載過程的碎片化分割，保持連貫性

加載頁面的過程不要出現(xiàn)過多的時(shí)間分割，給用戶碎片化的信息記憶片段，用戶進(jìn)行回溯式估計(jì)時(shí)，會覺得加載過程很繁復(fù)，沒有順暢的體驗(yàn)。

2.4 超出預(yù)期，給予驚喜

可通過運(yùn)用預(yù)期——解釋的心理模型，預(yù)期建構(gòu)階段給用戶長的時(shí)間估計(jì)，在預(yù)期確定和預(yù)期解釋給用戶制造極速、流暢的用戶體驗(yàn)。

2.5 圖標(biāo)隱喻符合用戶的心理模型

視覺上的心理效應(yīng)會給人不同的時(shí)間知覺感受，加載頁面的圖標(biāo)設(shè)計(jì)可根據(jù)色彩和圖形的隱喻、聯(lián)想和象征。例如，采用代表速度的賽車、瀑布、光速元素映射時(shí)間快速。

3 結(jié)論

以時(shí)間心理學(xué)中時(shí)距估計(jì)理論為切入點(diǎn)，運(yùn)用時(shí)距估計(jì)的心智模型——加工時(shí)間模型、變化分割模型、預(yù)期——解釋心理模型結(jié)合相關(guān)案例對網(wǎng)絡(luò)加載設(shè)計(jì)做出指導(dǎo)和理論層面的闡釋，提出了5條加載頁面設(shè)計(jì)方法，對加載頁面的設(shè)計(jì)有重大的指導(dǎo)意義，本文也具有一定的局限性，主要研究了基于時(shí)間感知層面對加載頁面的優(yōu)化設(shè)計(jì)，但在實(shí)際的運(yùn)用中還需要綜合考慮其他因素，最終才可達(dá)到加載頁面最好的用戶體驗(yàn)。

參考文獻(xiàn)：

[1] 張慧忠.時(shí)間錯覺在交互設(shè)計(jì)中的應(yīng)用研究[D].無錫：江南大學(xué)，2012.

[2] 王穎，張侃.時(shí)距估計(jì)在人機(jī)交互中的應(yīng)用[J].人類工效學(xué)，2009，15（13）：58-60.

[3] 錢家渝.視覺心理學(xué)[M].上海：學(xué)林出版社，2006.

[4] 黃希庭，張志杰，風(fēng)四海.時(shí)間心理學(xué)的新探索[J].心理科學(xué)，2005，28（6）：1284-1287.

[5] 徐青，魏琳.時(shí)間知覺與估計(jì)的認(rèn)知理論綜述[J].應(yīng)用心理學(xué)，2002，8（2）：58-64.

[6] c.s.Loading，讓煩躁少一些[OL]. 2012-1-4 . http：//uedc.163.com/8809.Html.