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

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

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

(中國地質(zhì)大學(xué)藝術(shù)與傳媒學(xué)院，湖北 武漢 430000)

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

移動端；加載動效；時距知覺；設(shè)計(jì)策略

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

1 相關(guān)文獻(xiàn)與研究框架

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

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

2 研究方法

2.1 被試

2017年第三十九次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示，處于青年階段的網(wǎng)民占比最大。大學(xué)生和研究生屬于該年齡段，因此本次實(shí)驗(yàn)共招募68名在校大學(xué)生及研究生作為被試，其中男生21名，女生47名，年齡為19~23歲之間。為排除先前認(rèn)知經(jīng)驗(yàn)及人格特征對實(shí)驗(yàn)的影響，實(shí)驗(yàn)被試來自不同專業(yè)，均未參加過類似實(shí)驗(yàn)，視力或矯正視力正常。

2.2 自變量水平

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

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

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

2.3 實(shí)驗(yàn)設(shè)計(jì)

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

2.4 實(shí)驗(yàn)材料

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

圖2 實(shí)驗(yàn)中單色加載動效

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

2.5 實(shí)驗(yàn)程序

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

(1) 手機(jī)屏幕呈現(xiàn)一個時長為2 000 ms的注視點(diǎn)，告知用戶操作任務(wù)。

(2) 被試進(jìn)入緩沖界面執(zhí)行任務(wù)，作用是模擬移動端應(yīng)用真實(shí)場景。

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

(4) 加載動效呈現(xiàn)完畢后，被試進(jìn)入復(fù)制時距頁面點(diǎn)擊按鈕對加載動效時間進(jìn)行時距估計(jì)。

(5) 手機(jī)后臺記錄該數(shù)據(jù)，之后進(jìn)行下一個任務(wù)。

圖3 實(shí)驗(yàn)具體步驟(模擬應(yīng)用截圖)

3 實(shí)驗(yàn)結(jié)果

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

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

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

表2 不同加載動效樣式的動效速度間簡單效應(yīng)檢驗(yàn)

表3 不同加載動效速度的動效樣式間簡單效應(yīng)檢驗(yàn)

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

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

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

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

4 討 論

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

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

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

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

5 結(jié)束語

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

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

[1] 盛振. 手機(jī)移動應(yīng)用動效的情感化設(shè)計(jì)研究[J]. 現(xiàn)代裝飾：理論, 2014(2): 151.

[2] 馬諧, 陶云, 胡文欽. 時距知覺中的情緒效應(yīng)[J]. 心理科學(xué)進(jìn)展, 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ìn)度條時距知覺的影響[J]. 心理科學(xué), 2014,37(2): 289-293.

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

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

[7] 王恩列, 張侃. 時距知覺的心理學(xué)研究[J]. 心理科學(xué), 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ìn)度條呈現(xiàn)方式對系統(tǒng)響應(yīng)時間時距知覺的影響[J]. 心理技術(shù)與應(yīng)用, 2015, 3(6): 20-24.

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

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

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

[13] 段朝輝, 顏志強(qiáng), 王福興, 等. 動畫呈現(xiàn)速度對多媒體學(xué)習(xí)效果影響的眼動研究[J]. 心理發(fā)展與教育, 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

教育部哲學(xué)社會科學(xué)研究重大課題攻關(guān)項(xiàng)目(16JZD030)；中國地質(zhì)大學(xué)本科教學(xué)工程項(xiàng)目(ZL201802)；中國地質(zhì)大學(xué)研究生教育教學(xué)改革研究項(xiàng)目(YJG2018217)

方 浩 (1975-)，男，河南許昌人，副教授，博士，碩士生導(dǎo)師。主要研究方向?yàn)閿?shù)字媒體與交互設(shè)計(jì)。E-mail：cugfanghao@163.com