移動端加載動效時距知覺影響機制研究

方 浩，李夢凡，王 中，崔水菁

移動端加載動效時距知覺影響機制研究

方 浩，李夢凡，王 中，崔水菁

(中國地質大學藝術與傳媒學院，湖北 武漢 430000)

移動端加載動效是降低用戶等待焦躁感的重要方式，探究其設計要素如何影響等待焦躁感對于設計創意具有重要意義。研究采用時距知覺來表征等待焦躁感，通過預期式實驗范式和時距復制法，以設計要素速度、樣式為自變量進行模擬情境下被試的時距知覺對比實驗。實驗結果表明：移動端加載動效均對降低等待焦躁感產生正向影響；動效速度主效應顯著，加速條件下用戶時距知覺最短；加載動效速度與類型交互作用顯著，加速與卡通類組合的加載動效時距知覺最短、勻速與文字類組合的加載動效時距知覺最短，減速與3種動效樣式組合對時距知覺的影響無顯著差異。個體的時距知覺與加載動效速度和樣式有關，通過對速度與樣式的合理組合能夠有效降低用戶時距知覺，減少焦躁感，由此提出了基于科學實證的移動端加載動效設計策略。

移動端；加載動效；時距知覺；設計策略

受多種因素影響，在移動端應用加載過程中用戶等待不可避免，過多等待容易使用戶產生焦躁感，影響其交互體驗。加載動效是移動端載入應用界面過程中表示等待狀態的動態效果，作為時間響應指示器，以良好的反饋性和隱喻性降低用戶的等待焦躁感，在移動端中有著廣泛的應用[1]。加載動效中包括多種設計要素，設計師一般依據主觀經驗對設計要素進行創作，往往缺乏客觀科學的設計準則，一定程度上削弱了加載動效降低等待焦躁感的效果。因此，研究加載動效中設計要素對用戶等待焦躁感的影響機制，從而制定嚴謹、有效的加載動效設計策略，對提升移動端用戶體驗具有重要意義。

1 相關文獻與研究框架

等待焦躁感一般通過時距知覺進行表征，時距知覺屬于時距認知的范疇，是個體在較短時間范圍內對時間距離的感知估計[2]，若時距知覺少于實際時距，則表明用戶產生的等待焦躁感降低。在加載動效設計要素中，速度是影響時距知覺的重要因素。HARRISON等[3]研究發現，相對于勻速進度條，加速進度條能夠減少用戶的時距知覺，而減速進度條卻增加了用戶的時距知覺；儲雅芳等[4]通過行為實驗研究了進度條時距長度和速度變化對時距估計的影響，結果發現在相同時距條件下，勻速、減速、加速和先加后減4類進度條中，加速進度條時距估計最短，勻速最長。同樣，在加載動效設計要素中，樣式也是影響時距知覺的重要因素。陳岱 等[5]將Loading分為加載模態框、圖片、視頻3個樣式，發現視頻類加載包含信息量大，能夠有效降低被試的時距知覺；何人可和符躍峰[6]通過概念分類探討不同頁面加載方式對用戶等待時距知覺的影響，發現頁面非模態和隱藏等待的加載方式能有效縮短用戶時距知覺。綜上所述，研究者大多基于桌面端研究加載動效設計要素對時距知覺的影響，較少考慮移動端；在樣式水平選擇上也多局限于進度條，其他樣式較為少見；速度與樣式作為影響用戶時距知覺的重要設計要素，尚未有研究同時探索二者對加載動效時距知覺的影響。

本研究以移動端加載動效為對象，基于時距知覺中常用的預期式實驗范式和時距復制法，模擬用戶使用移動端時的等待場景開展被試任務。以速度、樣式2種設計要素為自變量，進行不同水平下被試的時距知覺因變量對比實驗，探索在相同時距條件下，加載動效設計要素中不同水平速度與樣式對用戶時距知覺的作用及交互效應。通過對實驗結果的分析與討論，揭示加載動效設計要素對用戶時距知覺的影響機制，從客觀理性的視角詮釋加載動效設計要素的運用策略。

2 研究方法

2.1 被試

2017年第三十九次《中國互聯網絡發展狀況統計報告》顯示，處于青年階段的網民占比最大。大學生和研究生屬于該年齡段，因此本次實驗共招募68名在校大學生及研究生作為被試，其中男生21名，女生47名，年齡為19~23歲之間。為排除先前認知經驗及人格特征對實驗的影響，實驗被試來自不同專業，均未參加過類似實驗，視力或矯正視力正常。

2.2 自變量水平

基于對現有研究文獻的分析，本研究將加載動效設計要素中速度水平分為勻速、加速和減速3種(圖1)。勻速加載動效素材變化速度保持不變；加速加載動效素材變化速度由慢到快，初始速度呈緩慢狀態，隨著時間增加速度遞增；減速則由快到慢，初期速度呈快速狀態，隨著時間推移速度遞減。

圖1 不同的加載速度(從動效設計軟件Principle中截取)

對國內外下載量居于前列的126個移動端應用進行內容分析，結果發現在所有動效樣式中，圖形、文字、卡通類型占比最高，達到90%以上。加載動效樣式的圖形由造型相似的簡單幾何圖形組成；文字由可識讀、有意義的文字組成；卡通則由夸張擬人化的角色造型組成。因此本研究將加載動效設計要素中的樣式自變量水平確定為圖形、文字、卡通3種類型。

2.3 實驗設計

實驗采用3(加載動效速度：勻速、加速、減速)×3 (加載動效樣式：圖形、文字、卡通)的被試設計。自變量為加載動效設計要素中的樣式和速度，因變量為相同實際時距下被試體驗加載動效后估計的時距知覺。實驗范式選用預期式實驗范式，被試在實驗前就被明確告知：儀器上呈現一個視覺刺激，在呈現后需對刺激時距進行絕對或相對的時距估計，從而得到時距知覺。估計方法采用時距復制法，首先由主試呈現一個刺激時距，然后讓被試復制一個同樣長短的操作時距作為估計值[7]。對于實驗中設置的加載動效實際時距，文獻[8]研究表明用戶等待頁面加載時間超過10 000 ms就可能會放棄瀏覽，而在移動端情境下用戶多處于碎片化時間狀態。本研究參考劉偉超[9]的實驗設計，考察在7 500 ms短時距下不同加載動效呈現方式對時距知覺的影響。

2.4 實驗材料

為了避免被試對同一樣式材料的練習效應，實驗中每一類動效樣式參考現有產品表現方式，設計3種具有典型性的不同方案。為控制色彩對被試的影響，實驗素材采用單色進行設計，并通過自繪的方式排除材料熟悉度對實驗結果的影響(圖2)。

圖2 實驗中單色加載動效

實驗儀器為4.7英寸1334×750 iphone 6s手機,為了還原真實情境，采用嵌入Html編輯器的Objective-C編程，加載動效使用Css＋JavaScript渲染并展示，時距數據采用沙盒技術由手機后臺自動記錄。

2.5 實驗程序

為保證實驗順利進行，在正式實驗前被試需完成1個練習任務，熟悉實驗流程，隨后進行27 (3×3×3)個正式實驗任務，總計刺激材料為28個加載動效實例。整個實驗過程中，每個刺激材料隨機呈現，中途退出數據視為無效。具體實驗程序如圖3所示：

(1) 手機屏幕呈現一個時長為2 000 ms的注視點，告知用戶操作任務。

(2) 被試進入緩沖界面執行任務，作用是模擬移動端應用真實場景。

(3) 模擬操作完成后頁面自動跳轉至加載動效頁面，加載動效隨即呈現，時長均為7 500 ms。

(4) 加載動效呈現完畢后，被試進入復制時距頁面點擊按鈕對加載動效時間進行時距估計。

(5) 手機后臺記錄該數據，之后進行下一個任務。

圖3 實驗具體步驟(模擬應用截圖)

3 實驗結果

獲得實驗數據后進行篩查，當被試復制的時間小于3 500 ms或大于11 500 ms時，則認為該數據為異常值，并用全體被試的平均數做替換處理；當單個被試所有實驗數據中40%的數據出現異常時，刪除該被試的整條數據，共刪除28條無效數據，最終得到176份有效數據。以被試體驗加載動效時復制數據進行3 (速度：勻速、加速、減速)×3 (樣式：圖形、文字、卡通)的雙因素方差分析，具體結果見表1。

表1 不同加載動效樣式和速度的時距知覺結果(ms)

對加載動效速度和樣式的時距知覺進行雙因素方差計算，結果表明動效樣式主效應不顯著，(2, 350)= 1.314，＞0.05，圖形、文字和卡通3種樣式對用戶時距知覺不存在顯著差異；動效速度主效應顯著，(4,700)=33.92，＜0.001，被試復制的時距知覺減速＞勻速＞加速；動效樣式和速度的交互作用顯著，(4,700)=15.82，＜0.001。固定加載動效樣式水平與速度水平進一步進行簡單效應檢驗，結果見表2和表3。

表2 不同加載動效樣式的動效速度間簡單效應檢驗

表3 不同加載動效速度的動效樣式間簡單效應檢驗

固定加載動效樣式水平對動效速度進行簡單效應檢驗，結果表明：動效樣式為圖形時，勻速與加速動效、加速與減速動效均差異顯著，勻速與減速動效無顯著差異，加速水平用戶時距知覺最短；動效樣式為文字時，勻速與減速動效差異顯著，勻速與加速動效、加速與減速動效均無顯著差異，勻速水平用戶時距知覺最短；動效樣式為卡通時，勻速與加速動效、加速與減速動效均差異顯著，勻速與減速動效無顯著差異，加速水平用戶時距知覺最短。整體動效速度時距知覺交互變化趨勢如圖4所示。

圖4 固定加載動效樣式水平不同動效速度的時距知覺估算邊際均值

固定加載動效速度水平對動效樣式進行簡單效應檢驗，結果表明：當動效勻速時，圖形與文字動效、文字與卡通動效均差異顯著，圖形與卡通動效無顯著差異，文字水平用戶時距知覺最短；當動效加速時，圖形與卡通動效、文字與卡通動效均差異顯著，圖形與文字動效無顯著差異，卡通水平用戶時距知覺最短；當動效減速時，圖形與文字動效、圖形與卡通動效、文字與卡通動效之間均不存在顯著差異。整體動效樣式時距知覺交互變化趨勢如圖5所示。

圖5 固定加載動效樣式水平不同動效樣式的時距知覺估算邊際均值

4 討 論

實驗結果表明，對于每種樣式和速度水平的加載動效，被試的時距知覺均小于實際時距7 500 ms。相關研究表明在時距估計中，存在高估短時距與低估長時距的現象[10]。本研究所采用的7 500 ms為短時距，顯示每種加載動效對于用戶短時距知覺的影響均趨于正向，能夠降低用戶的時距知覺，而不是由于被試自身的感知差異造成的，與文獻[6]的研究結論相一致。對此可由加工時間模型進行解釋，一個刺激可以由視覺信息加工器和計時器進行加工[11]。根據現有研究發現，視覺信息加工影響被試時距知覺工器加工刺激的視覺物理特征信息，計時器加工刺激的時間信息；根據任務內容的不同，注意資源按比例被分配到2個加工器上，分配給視覺信息加工器的注意資源越多，時距知覺越短，反之越長；每種加載動效本身包含大量的視覺刺激，顯然為視覺信息加工器分配了更多的視覺物理信息，因而用戶知覺到的時距均比實際時距要小。其中，加載動效的時距知覺速度主效應顯著，且在加速水平下，被試時距知覺最短，與前人研究結果相一致。在加速水平下，動效起始速度較慢，被試預期形成的時距期待較長，而實際速度持續變快，因而超出被試預期從而降低時距知覺。

實驗結果顯示加載動效速度與樣式交互作用顯著，通過簡單效應檢驗可知，該交互效應來源于：①固定速度水平下不同動效樣式被試時距知覺的差異變化；②固定樣式水平下不同動效速度被試時距知覺的差異變化。

對第一種來源進行分析：勻速運動水平下，文字類加載動效時距知覺較短，根據文獻[12]，文字與圖形、卡通同時出現時，個體首要關注并加工文字信息，為其分配更多的注意資源，從而造成時距知覺的差異。加速運動水平下，卡通類加載動效時距知覺較短，可能的解釋是卡通具有擬人化特點、流暢的線條以及夸張的動作，在加速情境下使畫面更具活潑性，增加沉浸感降低了時距知覺，與段朝輝等[13]通過眼動實驗研究被試對卡通的興趣區停留時間，加速長于正常速度結果相一致；而文字在加速情境下識讀受到干擾，造成更高的認知負荷；圖形則表現形式單一，無法給用戶帶來更多的沉浸感。

對第二種來源進行分析：圖形與卡通樣式水平下，加速動效時距知覺較短，原因可能是加速水平下，期待效應降低了時距知覺，而圖形、卡通和文字不同，不需要進行較多的信息加工，加速帶來的認知負荷較低；同時與上文解釋一致，卡通自身特點決定在加速情境下時距知覺較低。文字樣式水平下，勻速動效時距知覺較短，可能的解釋是識讀未受干擾，認知負荷不高；而減速動效雖然也不受識讀干擾，但是因為首因效應，主體對客體認知過程中的“首印象”影響其后續認知[14]，與其后變化形成較大的反差，文字本身視覺表現比較單調，無法減弱此影響；至于加速動效則與上文解釋一致，文字識讀干擾帶來不利影響。

5 結束語

本文基于時距知覺預期式研究范式和時距復制法，通過心理行為實驗，探究移動端加載動效設計中不同速度與樣式要素對用戶等待焦躁感的影響機制，得到以下結論：移動端加載動效均對降低等待焦躁感產生正向影響；動效速度主效應顯著，加速條件下用戶時距知覺最短；加載動效速度與類型交互作用顯著，加速與卡通類動效用戶時距知覺最短。據此提出移動端加載動效設計策略：在滿足良好視覺審美效果前提下，速度選擇方面，圖形類動效加速優先，文字類動效勻速優先，卡通類動效加速優先；樣式設計方面，勻速類動效文字優先，加速類動效卡通優先，減速動效可自由選擇樣式。

本研究也存在一定局限：①為了實驗方便，被試均為大學以上文化程度的青年群體，未根據不同年齡、文化層次等因素進行隨機抽樣，而移動端用戶并非單一群體；②為降低研究復雜性自變量未考慮色彩，而色彩是動效設計的重要要素，單色與多色情況下可能會影響到用戶的時距知覺。這些問題有待在后續研究中進一步深入探討。

[1] 盛振. 手機移動應用動效的情感化設計研究[J]. 現代裝飾：理論, 2014(2): 151.

[2] 馬諧, 陶云, 胡文欽. 時距知覺中的情緒效應[J]. 心理科學進展, 2009, 17(1):29-36.

[3] HARRISON C, YEO Z Q, HUDSON S E. Faster progress bars, manipulating perceived duration with visual augmentations [C]//ACM In Proceedings of the 28th International Conference on Human Factors in Computing Systems. New York: ACM Press, 2010: 1545-1548.

[4] 儲雅芳, 馮成志, 季文君. 時距長度和速度變化對進度條時距知覺的影響[J]. 心理科學, 2014,37(2): 289-293.

[5] 陳岱, 姚康, 談笑. Loading設計的用戶體驗:呈現時長與樣式對等待時間知覺和情緒感受的影響[J]. 人類工效學, 2014, 20(4): 6-12.

[6] 何人可, 符躍峰. 基于時間知覺的移動APP頁面加載方式研究[J]. 包裝工程, 2017, 38(18): 56-61.

[7] 王恩列, 張侃. 時距知覺的心理學研究[J]. 心理科學, 1999, 22(2): 124-127,190.

[8] TORKZADEH G，DHILLON G. Measuring factors that influence the success of internet commerce [J]. Information Systems Research, 2002, 13(4): 187-204.

[9] 劉偉超. 進度條呈現方式對系統響應時間時距知覺的影響[J]. 心理技術與應用, 2015, 3(6): 20-24.

[10] 劉瑞光, 黃希庭. 短時距估計中的標量特性[J]. 心理學報, 2006, 38(5): 724-733.

[11] 陳有國, 黃希庭, 尹天子, 等. 時間知覺的理論模型與展望[J]. 西南大學學報:社會科學版, 2011, 37(5): 26-33,222.

[12] 王福興, 周宗奎, 趙顯, 等. 文字熟悉度對電影字幕偏好性影響的眼動研究[J]. 心理與行為研究, 2012, 10(1): 50-57.

[13] 段朝輝, 顏志強, 王福興, 等. 動畫呈現速度對多媒體學習效果影響的眼動研究[J]. 心理發展與教育, 2013, 29(1): 46-53.

[14] CARLSON K A, MELOY M G, RUSSO J E. Leader-driven primacy: Using information order to affect choice [J]. Journal of Consumer Research, 2006, 32(4): 513-551.

Study on Effect Mechanism of Time-Distance Perception on Motion Loading of Mobile Terminal

FANG Hao, LI Meng-fan, WANG Zhong, CUI Shui-jing

(School of Art and Media, China University of Geosciences, Wuhan Hubei 430000, China)

Motion loading of mobile terminal is an effective way to lessen users anxiety caused by when waiting for what is loaded. With regard to the design creativity, its important to explore how its design elements influence such anxiety caused by waiting. In the present study, time-distance perception is used to characterize the sense of anxiety while waiting. Through the prospective experimental paradigm and time-distance replication method, the time-distance perception experiment of the subjects in the simulated situation is carried out with speed and style as independent variables. The experimental results show that different types of motion loading all demonstrate a reduction on time perception, while the motion-loading speed exerts a more noticeable influence, notable, especially in the course of the acceleration. When the interaction of dynamic type and velocity has a significant influence on time perception, the time-distance perception of acceleration and cartoon combined loading is the shortest, and the time-distance perception of uniform speed and text class combined loading is the shortest, but deceleration and three dynamic styles combined loadings have no significant difference in the effect of time-distance perception. In conclusion, the users’ time-distance perception is related to the speed and type of motion loading via reasonable combination of speed and type which could effectively reduce users’ perception and then reduce their anxiety. The results of this study provide scientific evidences for mobile-loading motion design.

mobile terminal; motion loading; time-distance perception; design strategy

TP 391

10.11996/JG.j.2095-302X.2019040746

A

2095-302X(2019)04-0746-05

2018-12-18；

定稿日期：2019-03-06

教育部哲學社會科學研究重大課題攻關項目(16JZD030)；中國地質大學本科教學工程項目(ZL201802)；中國地質大學研究生教育教學改革研究項目(YJG2018217)

方 浩 (1975-)，男，河南許昌人，副教授，博士，碩士生導師。主要研究方向為數字媒體與交互設計。E-mail：cugfanghao@163.com