淺析時距估計在加載頁面設計中的應用

王瑩瑩　侯琳琦

摘 要：引入時間心理學中時距估計的概念，探討時距估計在網頁加載設計中的應用價值，結合時距估計理論分析現有加載頁面設計中的不足和亮點，提出相應的設計方法，指導加載頁面的設計，提升用戶加載程中的時間體驗。

關鍵詞：網頁加載設計；時距估計；用戶體驗

0 引言

近些年來，互聯網產品領域對“用戶體驗”的關注日益加強，以傳統的三大可用性因素（效率、效益和主觀滿意度）為重要指標，逐漸將用戶體驗涵蓋到用戶與產品交互的方方面面，其中王堅在《結網》中將用戶體驗的三要素概括為：別讓我等，別讓我想，別讓我煩，“別讓我等”是影響用戶體驗的重要因素之一，可用性研究表明，用戶能夠忍受的最長等待時間大約在6～8秒之間，但是通過分析用戶在信息加工過程中時間感知的心智模型，對用戶等待過程中網頁的加載頁面進行優化設計，造成不同的時間錯覺感知，可以減少用戶的等待感以及因時間因素產生的負面情緒。本文就以時間錯覺的產生根源——時距估計的心智模型作為切入點進行分析和討論，研究時距估計在網絡加載頁面設計中的應用，提升交互設計中的心理體驗。

1 時距估計在加載頁面中的應用分析

1.1 時距估計

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

1.2 時距估計策略

時距估計策略是指根據進展速度和事件的容量來推算事件持續時間，用戶會根據事件發生過程中的當前速度和規律，來預估事件完成的時間，如果個體或環境變量改變，用戶的時距估計也會發生變化。

圖1 加載狀態圖

圖2 加載狀態圖

如上圖所示，圖2利用綠色加載條將時間可視化，根據時距估計策略可知，加載條的設計幫助用戶完成了對時距的估計，可控性增強，減少了等待的焦慮感，圖2的設計優于圖1。

1.3 加工時間模型

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

圖3 加載動畫案例圖

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

1.4 變化分割模型

變化分割模型認為用戶根據注意到的心理和環境變化的數量判斷時間量，注意的外部事件數量越多，時距越長，強調信息內容分段的多少給用戶時距估計帶來的影響，主要針對用戶的回溯式估計。

圖4 手機IE瀏覽器加載頁面圖

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

1.5 預期——解釋心理模型

預期——解釋心理模型包括四個環節：預期建構、預期確定、預期失敗以及對預期失敗的解釋。

圖5 手機UC瀏覽器加載頁面圖

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

圖6 手機QQ瀏覽器加載頁面圖

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

2 基于時距估計的加載頁面設計方法

2.1 加載進度可視化

加載頁面進度的設計不能單純地只反應現在系統的加載狀態，還要建立在產品的信息變化上，通過色彩或圖形隱喻，將加載的進度時間可視化、加載狀態可視化，符合用戶時距估計策略的心智模型。

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

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

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

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

2.4 超出預期，給予驚喜

可通過運用預期——解釋的心理模型，預期建構階段給用戶長的時間估計，在預期確定和預期解釋給用戶制造極速、流暢的用戶體驗。

2.5 圖標隱喻符合用戶的心理模型

視覺上的心理效應會給人不同的時間知覺感受，加載頁面的圖標設計可根據色彩和圖形的隱喻、聯想和象征。例如，采用代表速度的賽車、瀑布、光速元素映射時間快速。

3 結論

以時間心理學中時距估計理論為切入點，運用時距估計的心智模型——加工時間模型、變化分割模型、預期——解釋心理模型結合相關案例對網絡加載設計做出指導和理論層面的闡釋，提出了5條加載頁面設計方法，對加載頁面的設計有重大的指導意義，本文也具有一定的局限性，主要研究了基于時間感知層面對加載頁面的優化設計，但在實際的運用中還需要綜合考慮其他因素，最終才可達到加載頁面最好的用戶體驗。

參考文獻：

[1] 張慧忠.時間錯覺在交互設計中的應用研究[D].無錫：江南大學，2012.

[2] 王穎，張侃.時距估計在人機交互中的應用[J].人類工效學，2009，15（13）：58-60.

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

[4] 黃希庭，張志杰，風四海.時間心理學的新探索[J].心理科學，2005，28（6）：1284-1287.

[5] 徐青，魏琳.時間知覺與估計的認知理論綜述[J].應用心理學，2002，8（2）：58-64.

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