方年麗,呂 健,金昱潼,朱姝蔓,尤 乾

(貴州大學(xué) 現(xiàn)代制造技術(shù)教育部重點(diǎn)實(shí)驗(yàn)室,貴陽(yáng) 550025)

圖形圖標(biāo)是人機(jī)界面關(guān)鍵組成部分,在信息識(shí)別和分辨方面具有不可取代的優(yōu)勢(shì),使用戶更高效的與應(yīng)用程序、系統(tǒng)和設(shè)備進(jìn)行交互[1].動(dòng)態(tài)圖標(biāo)是一種其屬性會(huì)隨著時(shí)間改變的交互式元素,以此將特定情況下的程序運(yùn)行所處狀態(tài)和功能傳達(dá)給用戶[2].在認(rèn)知心理學(xué)領(lǐng)域,動(dòng)態(tài)圖標(biāo)對(duì)于認(rèn)知績(jī)效影響的研究表明,動(dòng)態(tài)圖標(biāo)不僅能夠幫助用戶更好的理解人機(jī)界面[3]與任務(wù)需求[4],還可以增加用戶使用界面時(shí)的愉悅感,增強(qiáng)界面的交互活力[5],用于吸引用戶或觀察者的注意力[6].用戶對(duì)于動(dòng)態(tài)圖標(biāo)的認(rèn)知會(huì)隨著動(dòng)態(tài)形式的改變而改變.因此分析圖標(biāo)動(dòng)態(tài)形式特征,研究在不同的動(dòng)態(tài)形式下用戶滿意度,并針對(duì)動(dòng)態(tài)圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì),以此增強(qiáng)動(dòng)態(tài)圖標(biāo)傳達(dá)狀態(tài)的效率.

在認(rèn)知心理學(xué)領(lǐng)域,相關(guān)學(xué)者主要關(guān)注圖標(biāo)對(duì)人類感知能力與認(rèn)知績(jī)效的影響.早期學(xué)者發(fā)現(xiàn)動(dòng)態(tài)圖標(biāo)對(duì)增強(qiáng)用戶對(duì)于當(dāng)下系統(tǒng)的任務(wù)理解有積極作用[4]；不同復(fù)雜度的圖標(biāo)動(dòng)畫對(duì)用戶的理解以及偏好會(huì)導(dǎo)致不同的認(rèn)知績(jī)效,因此應(yīng)該在圖標(biāo)設(shè)計(jì)中應(yīng)該就采用復(fù)雜還是簡(jiǎn)單動(dòng)畫的問(wèn)題建立準(zhǔn)則[7]；在視覺搜索實(shí)驗(yàn)中,也有文獻(xiàn)指出不同形狀復(fù)雜度的形狀[8]、圖標(biāo)顏色數(shù)量和一致性均對(duì)人類的認(rèn)效率存在影響[9],結(jié)果表明,認(rèn)知績(jī)效的增長(zhǎng)幅度隨形狀特征而變化,且利用顏色增大圖標(biāo)之間的差異,能夠更有效地提升圖標(biāo)的視覺搜索效率.對(duì)于圖標(biāo)形式對(duì)于用戶體驗(yàn)的研究發(fā)現(xiàn),圖標(biāo)能否準(zhǔn)確傳達(dá)目的與意圖直接影響用戶對(duì)產(chǎn)品的使用效率和滿意度,因此圖標(biāo)的設(shè)計(jì)應(yīng)該達(dá)到用戶的期望,并遵循于用戶的認(rèn)知、習(xí)慣及需求[10].

綜上所述,人與動(dòng)態(tài)圖標(biāo)的交互過(guò)程中,圖標(biāo)的動(dòng)態(tài)形式與形狀特征均會(huì)影響用戶認(rèn)知績(jī)效、用戶偏好與用戶滿意度.以上研究從圖標(biāo)的幾何形狀、抽象性、復(fù)雜度、顏色等方面對(duì)人體的生理及心理的影響,發(fā)現(xiàn)了動(dòng)態(tài)圖標(biāo)可以增強(qiáng)用戶對(duì)于人機(jī)界面的理解性與認(rèn)知績(jī)效,而圖標(biāo)形式則會(huì)影響用戶的滿意度.研究圖標(biāo)動(dòng)態(tài)形式的設(shè)計(jì)準(zhǔn)則對(duì)提高用戶滿意度及體驗(yàn)具有實(shí)踐價(jià)值和理論意義,但是以上研究大多只是基于人類視覺系統(tǒng)對(duì)于圖標(biāo)設(shè)計(jì)的感性判斷,并沒(méi)有形成量化分析模型,尚缺乏對(duì)圖標(biāo)動(dòng)態(tài)形式的量化研究,未深入探討圖標(biāo)動(dòng)態(tài)形式與用戶的使用感受之間的關(guān)聯(lián)性.

本文在已有研究的基礎(chǔ)上首先考量Kineticons[11]類動(dòng)態(tài)圖標(biāo)4 種物理屬性——路徑、范圍、方向與速度并加以描述,并通過(guò)閾限測(cè)量方法調(diào)查動(dòng)作時(shí)間閾值,利用回歸分析建立動(dòng)作幅度與動(dòng)作時(shí)間的預(yù)測(cè)模式,獲得圖標(biāo)最佳動(dòng)作時(shí)間的量化模式,最后通過(guò)動(dòng)態(tài)范圍適合度調(diào)查提供最佳動(dòng)作幅度的設(shè)定依據(jù),提供人機(jī)界面動(dòng)態(tài)圖標(biāo)形式設(shè)計(jì)的參考依據(jù).

1 動(dòng)態(tài)圖標(biāo)形式研究方法

1.1 動(dòng)態(tài)圖標(biāo)分類與形式研究

動(dòng)態(tài)圖標(biāo)的應(yīng)用廣泛多元,眾多學(xué)者提出了不同的動(dòng)態(tài)效果,而這些動(dòng)態(tài)效果所參照的動(dòng)作來(lái)源也不盡相同,有的是簡(jiǎn)單的移動(dòng)、旋轉(zhuǎn),有些則是依照物理和自然運(yùn)動(dòng)進(jìn)行設(shè)計(jì)[12].因此按照動(dòng)態(tài)圖標(biāo)的設(shè)計(jì)來(lái)源,可以將動(dòng)態(tài)圖標(biāo)分為常規(guī)圖標(biāo)、動(dòng)畫式圖標(biāo)、動(dòng)作式圖標(biāo)、情緒圖標(biāo)四類.

常規(guī)圖標(biāo)(Conventional Icon)的內(nèi)容通常是象形文字或表意文字,它們的視覺屬性也可以沿著其他維度進(jìn)行修改以傳遞額外的信息；Chen 等[13]提出了情緒式圖示(Empatheticons),此類動(dòng)態(tài)圖示模擬用戶情緒,在一款音樂(lè)推薦系統(tǒng)Group Fun 中加上不同情緒的動(dòng)態(tài)圖標(biāo)來(lái)推薦音樂(lè)；Baecker 等[1]和Bodner 等[14]率先使用了動(dòng)畫圖標(biāo)(Icon with Animated Graphics),動(dòng)畫圖標(biāo)是一種其圖形內(nèi)容隨著時(shí)間的改變而改變的一類圖標(biāo),并且用動(dòng)畫序列來(lái)描述變化；Harrison 等[11]依照自然界中的動(dòng)作給予圖像動(dòng)態(tài)效果,并且定義了一種基于運(yùn)動(dòng)的圖像方案——Kineticons,它是一系列幾何操作(例如：縮放、旋轉(zhuǎn)、變形、平移)的結(jié)果,與靜態(tài)圖標(biāo)和帶有動(dòng)畫圖形的圖標(biāo)相比,動(dòng)態(tài)行為不會(huì)改變視覺內(nèi)容、像素、RGB 值.

1.2 圖標(biāo)動(dòng)態(tài)形式

根據(jù)Harrison 等[11]提出的Kineticons 圖標(biāo)的定義,Kineticons 圖標(biāo)為一系列動(dòng)力學(xué)行為的結(jié)果；同時(shí),有研究指出影響動(dòng)態(tài)圖標(biāo)形式的4 種物理屬性,分別是路徑(path)、范圍(area)、方向(direction)以及速率(speed)[15].也有實(shí)驗(yàn)表明,用戶會(huì)因?yàn)橐魄樽饔脤?duì)動(dòng)態(tài)效果存有特定的情緒,動(dòng)態(tài)形式(速率、范圍、方向、路徑)的細(xì)微變化也會(huì)引起用戶的感受變化[16].速率是指圖標(biāo)運(yùn)動(dòng)發(fā)生的速度,如果圖標(biāo)動(dòng)作速度太慢,可能會(huì)使用戶感到厭煩或沮喪；而速度太快會(huì)導(dǎo)致用戶來(lái)不及反應(yīng)而丟失交互目標(biāo)或正在進(jìn)行的交互任務(wù),適當(dāng)?shù)倪^(guò)渡速度可促進(jìn)用戶跟隨人機(jī)界面交互,而不會(huì)使任務(wù)復(fù)雜化[17].Google Material Design 建議在滿足持續(xù)時(shí)間盡可能短的條件下,同時(shí)避免太過(guò)突然或震顫；有研究指出動(dòng)態(tài)圖標(biāo)的方向能夠向用戶傳達(dá)正確的信息,方向是制作動(dòng)態(tài)圖標(biāo)中最重要以及最有用的設(shè)計(jì)原則,當(dāng)動(dòng)態(tài)圖標(biāo)從一種狀態(tài)切換到另一種狀態(tài)應(yīng)該總是在一個(gè)方向上的.但是,當(dāng)一個(gè)人想要取消或者撤銷一個(gè)操作,移動(dòng)的方向應(yīng)該是相反的[18]；路徑指圖標(biāo)的運(yùn)動(dòng)軌跡,范圍指元素在動(dòng)畫的兩個(gè)幀之間移動(dòng)的距離,圖標(biāo)運(yùn)動(dòng)一般依照自然界中的物體運(yùn)動(dòng),例如對(duì)角線運(yùn)動(dòng)看起來(lái)就是自然的弧線運(yùn)動(dòng),動(dòng)態(tài)圖標(biāo)的設(shè)計(jì)應(yīng)根據(jù)重要級(jí)別使用簡(jiǎn)單或復(fù)雜的運(yùn)動(dòng)[19].

上述圍繞圖標(biāo)動(dòng)態(tài)形式的設(shè)計(jì)與研究大多是基于相關(guān)設(shè)計(jì)人員根據(jù)經(jīng)驗(yàn)和感覺的設(shè)計(jì),缺少一定的理論模型.在已有的研究基礎(chǔ)上,本文依照Kineticons 類圖標(biāo)左右移動(dòng)、上下移動(dòng)、縮放、旋轉(zhuǎn)4 種動(dòng)力學(xué)行為,通過(guò)對(duì)動(dòng)態(tài)圖標(biāo)的4 種物理屬性(路徑、范圍、方向與速度)的適合范圍調(diào)查,從而確定動(dòng)態(tài)圖標(biāo)設(shè)計(jì)的基本準(zhǔn)則.

1.3 心物關(guān)系測(cè)量方法

本文采用閾限測(cè)量法測(cè)量圖標(biāo)動(dòng)作時(shí)間的上閾、下閾、舒適閾值,從中調(diào)查動(dòng)態(tài)圖標(biāo)動(dòng)作幅度與動(dòng)作時(shí)間的相互關(guān)系.Darley 等[20]認(rèn)為物理刺激和人的感覺之間存有一致性關(guān)系,這種關(guān)系常被稱為心物關(guān)系(psychophysical relation),感覺器官接受的刺激在引起任何感覺之前必須達(dá)到最低強(qiáng)度,這種刺激感覺系統(tǒng)所需的最低物理能量即刺激強(qiáng)度稱為絕對(duì)閾.閾限測(cè)量法主要有上下法(up-and-down method)、閾限追蹤法、定值刺激法等.上下法主要由實(shí)驗(yàn)人員操作,調(diào)整刺激量至受測(cè)者第一次發(fā)現(xiàn)刺激時(shí)則終止測(cè)試,其中不斷增加刺激量,該方法稱為提升試驗(yàn)(ascending trial),也可以搭配刺激量降低的方式進(jìn)行,稱為下行試驗(yàn)(descending trial)；定值刺激法的操作方式主要由實(shí)驗(yàn)者給定刺激強(qiáng)度的最大值及最小值,并且定義每次刺激變化量的值,此變化量的值在兩極端刺激量之間.進(jìn)行閾值測(cè)驗(yàn)時(shí),以隨機(jī)的方式呈現(xiàn)各個(gè)刺激量并紀(jì)錄感覺閾值.

本文參考相關(guān)研究與感覺測(cè)量方式,探討動(dòng)態(tài)圖標(biāo)的動(dòng)作幅度與動(dòng)作時(shí)間舒適閾值之間的相互關(guān)系,并考慮受測(cè)者自行調(diào)整可能造成的數(shù)值記憶問(wèn)題,將采用上下法與定值刺激法的拓展使用,從而測(cè)量出用戶所能接受的圖標(biāo)動(dòng)作時(shí)間的上閾值、下閾值,最佳閾值,為進(jìn)一步測(cè)量圖標(biāo)動(dòng)作幅度提供數(shù)據(jù)支撐.

2 圖標(biāo)動(dòng)態(tài)形式調(diào)查實(shí)驗(yàn)

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

實(shí)驗(yàn)依據(jù)Kineticons 圖標(biāo)所定義的動(dòng)力學(xué)行為,定義了圖標(biāo)左右移動(dòng)、上下移動(dòng)、縮放與旋轉(zhuǎn)4 種基本動(dòng)態(tài)形式,并以路徑、范圍、方向與速度[15]描述動(dòng)態(tài)圖標(biāo).本研究中的實(shí)驗(yàn)設(shè)計(jì)采用Illustrator 軟件進(jìn)行圖形設(shè)計(jì),使用After Effects 軟件生成gif 動(dòng)畫,最后使用Proto.io 開發(fā)應(yīng)用程序原型.該原型是為模擬在線社交而開發(fā)的移動(dòng)應(yīng)用程序.

如圖1所示,考慮到動(dòng)態(tài)圖標(biāo)的特性與時(shí)下動(dòng)態(tài)圖標(biāo)設(shè)計(jì)軟件的偏好設(shè)置,范圍即為動(dòng)作幅度,速率修改為動(dòng)作時(shí)間.4 種圖標(biāo)動(dòng)態(tài)形式的定義如下：如圖1(a)、圖1(b)所示,左右/上下移動(dòng)的圖標(biāo)沿著X/Y 軸來(lái)回勻速移動(dòng),圖標(biāo)以坐標(biāo)軸原點(diǎn)為基點(diǎn),圖標(biāo)的移動(dòng)幅度不斷增加,在一定的移動(dòng)幅度下動(dòng)作時(shí)間不斷增加,動(dòng)作幅度與動(dòng)作時(shí)間決定了圖標(biāo)運(yùn)動(dòng)速率.

圖1 圖標(biāo)動(dòng)態(tài)形式

圖標(biāo)以圓心為原點(diǎn)進(jìn)行前后縮放,并以對(duì)角線放大后與放大前的半徑增幅△R：△R=R2-R1為圖標(biāo)縮放前后的半徑增量,R1為原始圖標(biāo)半徑,R2為放大之后的圖標(biāo)半徑.即圖標(biāo)按照設(shè)定好的倍率增大隨即縮小至原有大小,在一定的縮放倍率中動(dòng)作時(shí)間不斷增加,縮放倍率與動(dòng)作時(shí)間決定了圖標(biāo)縮放速率,如圖2(c)所示.圖標(biāo)旋轉(zhuǎn)以坐標(biāo)軸原點(diǎn)為旋轉(zhuǎn)中心,圖標(biāo)的旋轉(zhuǎn)角度按照一定的增量變化,在一定的旋轉(zhuǎn)角度中動(dòng)作時(shí)間不斷增加,旋轉(zhuǎn)角度與動(dòng)作時(shí)間決定了圖標(biāo)旋轉(zhuǎn)速率,如圖2(d)所示.

在動(dòng)作幅度的設(shè)定上：上下/左右移動(dòng)的圖標(biāo)自原點(diǎn)上下移動(dòng)15 px 開始,動(dòng)作幅度以15 px 的變化量增加至135 px (自0 px 開始),每段動(dòng)作幅度的運(yùn)動(dòng)時(shí)長(zhǎng)以50 ms 的變化量增加至2000 ms,一共得到360(40×9)個(gè)上下/左右移動(dòng)樣本,如圖1、圖2；圖標(biāo)旋轉(zhuǎn)閾值測(cè)量以15°的變化量旋轉(zhuǎn)至360°位置(自0°開始),每段動(dòng)作幅度的動(dòng)作時(shí)間以50 ms 的變化量增加至2500 ms,一共獲得1200 (50×24)個(gè)樣本；前后縮放的半徑增幅量為2 px,半徑增量自2-40 px,每段動(dòng)作幅度的動(dòng)作時(shí)間以50 ms 的變化量增加至2000 ms,總共800 (40×20)個(gè)樣本.

2.2 實(shí)驗(yàn)被試

據(jù)中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心《2018年中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》報(bào)告稱,出生于1981～1991年之間,年齡在19～29 歲之間的青年人群是網(wǎng)民占比最多的且中國(guó)網(wǎng)民中學(xué)生群體最多,占比達(dá)24.8%.在這種情況下,在貴州大學(xué)現(xiàn)代制造技術(shù)教育部重點(diǎn)實(shí)驗(yàn)室學(xué)習(xí)的19～29 歲的互聯(lián)網(wǎng)用戶被選為該研究的樣本.16 男,14 女,年齡19～29 歲(描述性統(tǒng)計(jì)如表1),視力或矯正視力正常,無(wú)色盲色弱,實(shí)驗(yàn)開始之前熟悉實(shí)驗(yàn)程序,被試距離屏幕中心300～350 cm.

表1 實(shí)驗(yàn)參與者特征

圖2 動(dòng)作時(shí)間閾值調(diào)查

2.3 實(shí)驗(yàn)1.動(dòng)態(tài)圖標(biāo)動(dòng)作時(shí)間閾值調(diào)查

實(shí)驗(yàn)調(diào)查動(dòng)態(tài)圖標(biāo)的最佳、上閾、下閾動(dòng)作時(shí)間,以被試的舒適感為判斷標(biāo)準(zhǔn),分別測(cè)量被試在不同幅度下四種動(dòng)態(tài)圖標(biāo)形式的最佳動(dòng)作時(shí)間(被試感覺上最舒適的圖標(biāo)運(yùn)動(dòng)時(shí)長(zhǎng))、動(dòng)作時(shí)間上閾和動(dòng)作時(shí)間下閾,上閾/下閾的測(cè)量均在不引起被試不舒適感的前提下,被試能夠忍受的動(dòng)作最長(zhǎng)/最短時(shí)長(zhǎng).

本文不考慮手機(jī)外觀對(duì)于被試的影響,僅限于具有屏幕尺寸和圖形設(shè)計(jì)限制的手機(jī)屏幕,且關(guān)注動(dòng)態(tài)圖標(biāo)本身的運(yùn)動(dòng)形式對(duì)于用戶滿意度的影響,因此不考慮界面中的其他因素[21].實(shí)驗(yàn)1 的樣本呈現(xiàn)在15 英寸(38.1 cm)的顯示器中央,設(shè)定樣本背景顏色為白色(RGB：255 255 255),顯示屏分辨率為2560×1600 px,亮度為180 cd/cm2,移動(dòng)端的尺寸采用目前市場(chǎng)占比較多的750×1334 px,界面顯示為灰色(RGB：62 62 62)位于屏幕中央.為了避免情感效應(yīng)[15]以及熟悉度對(duì)圖標(biāo)動(dòng)作時(shí)間閾值選擇的影響,動(dòng)態(tài)圖標(biāo)4 種樣式均選用生活中常用樣式：其中圖標(biāo)的上下、左右移動(dòng)與前后縮放形式設(shè)定參考iOS 設(shè)計(jì)規(guī)范與Material Design[16]建議的44×44 px 的圓形；為了方便測(cè)量觀察旋轉(zhuǎn)角度的動(dòng)作時(shí)間閾值,旋轉(zhuǎn)圖標(biāo)選用2×35 px 的圓角矩形.所有圖標(biāo)刺激采用藍(lán)色(RGB：62 159 255),以降低刺激背景與前景一致性所產(chǎn)生的視覺疲勞,如圖2所示.

實(shí)驗(yàn)1 開始前由實(shí)驗(yàn)人員向被試闡述實(shí)驗(yàn)注意事項(xiàng),實(shí)驗(yàn)第一階段由實(shí)驗(yàn)人員控制圖標(biāo)動(dòng)作幅度與動(dòng)作時(shí)間的升降,并記錄受測(cè)過(guò)程中每段動(dòng)作幅度下被試感覺最舒適的動(dòng)作時(shí)間.為防止被試受記憶值影響,每次受測(cè)前將數(shù)據(jù)歸零.受測(cè)過(guò)程中被試需要每10 min休息一次,以避免被試產(chǎn)生生理性疲勞.每段動(dòng)作幅度均由最短動(dòng)作時(shí)間提升至被試感覺最佳動(dòng)作時(shí)間,在被試感覺達(dá)到最佳動(dòng)作時(shí)間時(shí),在此基礎(chǔ)上再次增加50～100 ms 動(dòng)作時(shí)間供被試選擇最佳動(dòng)作時(shí)間；接著在最長(zhǎng)動(dòng)作時(shí)間的測(cè)量中,實(shí)驗(yàn)由最佳動(dòng)作時(shí)間逐步增加動(dòng)作時(shí)間,直至被試感覺無(wú)法忍受時(shí)記錄該數(shù)值便終止實(shí)驗(yàn)；而在測(cè)量動(dòng)作時(shí)間下閾時(shí),實(shí)驗(yàn)由最佳動(dòng)作時(shí)間以50 ms 的變化量逐漸下降至被試無(wú)法忍受的最短動(dòng)作時(shí)間并記錄該數(shù)據(jù).

2.4 實(shí)驗(yàn)2 設(shè)計(jì).動(dòng)態(tài)圖標(biāo)動(dòng)作幅度適合度調(diào)查

實(shí)驗(yàn)2 在實(shí)驗(yàn)1 的基礎(chǔ)上進(jìn)行,調(diào)查動(dòng)態(tài)圖標(biāo)的最佳動(dòng)作幅度.首先利用實(shí)驗(yàn)1 中所得的線性回歸方程求出每個(gè)動(dòng)作幅度下最合適的動(dòng)作時(shí)間的預(yù)測(cè)值,動(dòng)作幅度搭配對(duì)應(yīng)的最佳動(dòng)作時(shí)間獲得調(diào)查圖標(biāo)動(dòng)作幅度適合度的樣本.實(shí)驗(yàn)樣本根據(jù)動(dòng)作形式被分為上下/左右移動(dòng)、縮放與旋轉(zhuǎn)四種,每種形式下的樣本依據(jù)動(dòng)作幅度從小到大、從上到下排列,被試依次對(duì)實(shí)驗(yàn)樣本的動(dòng)作幅度進(jìn)行Likert 量表評(píng)分,以1-5 分為舒適度評(píng)判等級(jí),分值越高舒適度越大,實(shí)驗(yàn)1-2 整體流程如圖3所示.

圖3 實(shí)驗(yàn)程序設(shè)計(jì)

3 實(shí)驗(yàn)數(shù)據(jù)分析與討論

3.1 實(shí)驗(yàn)1 結(jié)果分析

3.1.1 動(dòng)態(tài)圖標(biāo)沿X/Y 軸移動(dòng)的回歸結(jié)果

根據(jù)實(shí)驗(yàn)1 所獲得的圖標(biāo)沿X/Y 軸方向的動(dòng)作幅度與動(dòng)作時(shí)間的數(shù)據(jù),實(shí)驗(yàn)結(jié)果動(dòng)作時(shí)長(zhǎng)反映了3 種階段下用戶能接受的上閾、下閾、最佳動(dòng)作時(shí)間.圖4、圖5顯示了沿X 軸/Y 軸移動(dòng)的動(dòng)作幅度與動(dòng)作時(shí)間的上閾、舒適值、下閾的線性回歸,圖標(biāo)的動(dòng)作時(shí)間為因變量y,動(dòng)作幅度為自變量x.T 檢驗(yàn)的結(jié)果顯示不同性別的被試在感知X/Y 軸上的動(dòng)作時(shí)間和動(dòng)作幅度方面無(wú)顯著性差異(P=0.0921＜0.05).

如圖4、圖5所示,對(duì)于X/Y 軸上的動(dòng)作時(shí)間與動(dòng)作幅度的擬合圖,動(dòng)作時(shí)長(zhǎng)與動(dòng)作幅度成正線性關(guān)系.隨著左右移動(dòng)幅度的增大,動(dòng)作時(shí)長(zhǎng)的上閾、最佳、下閾也逐漸增加,但是當(dāng)動(dòng)作幅度趨近與140 px時(shí),動(dòng)作時(shí)間的值幾乎不受動(dòng)作幅度的影響.

圖4 圖標(biāo)左右移動(dòng)與動(dòng)作時(shí)間模型擬合的散點(diǎn)圖

圖標(biāo)在X/Y 軸上的動(dòng)作時(shí)間上閾值與下閾值無(wú)明顯差別,但在舒適動(dòng)作時(shí)間方面,數(shù)據(jù)表明圖標(biāo)在X 軸上動(dòng)作時(shí)間值均小于Y 軸上的動(dòng)作時(shí)間值,說(shuō)明用戶傾向于垂直方向上的動(dòng)作幅度大于水平方向上的動(dòng)作幅度.圖4和圖5中調(diào)整后的R2剔除了回歸分析中自變量的個(gè)數(shù)得到,圖標(biāo)在X 軸上移動(dòng)的動(dòng)作時(shí)間舒適值擬合為R2=0.998(調(diào)整R2=0.982).在Y 軸上移動(dòng)的動(dòng)作時(shí)間舒適值擬合R2=0.970(調(diào)整R2=0.966),擬合度較高.

圖5 圖標(biāo)上下移動(dòng)與動(dòng)作時(shí)間模型擬合的散點(diǎn)圖

基于所有受試者的動(dòng)作時(shí)間的最佳、上閾、下閾平均值,在Spss 中執(zhí)行變量相關(guān)性分析(F表示顯著性水平,P表示檢驗(yàn)水平),從表2可以看出動(dòng)態(tài)圖標(biāo)沿X 軸移動(dòng)的動(dòng)作幅度與最佳動(dòng)作時(shí)間顯著正相關(guān)F(1,7)=40.661,P=0.000＜0.05.動(dòng)態(tài)圖標(biāo)左右移動(dòng)的動(dòng)作時(shí)間上閾線性回歸方程為：y=4.935x+398.89 (R2=0.991,P=0.000＜0.05)；下閾線性回歸方程為：y=1.699x+27.685(R2=0.991,P=0.000＜0.05)；動(dòng)作時(shí)間舒適值線性回歸方程為：y=3.196x+191.06 (R2=0.982,P=0.000＜0.05).動(dòng)態(tài)圖標(biāo)沿X 軸移動(dòng)的動(dòng)作幅度與最佳動(dòng)作時(shí)間顯著相關(guān),F=24.996,P=0.000＜0.05,動(dòng)態(tài)圖標(biāo)Y 軸方向移動(dòng)的動(dòng)作時(shí)間上閾線性回歸方程為：y=4.197x+418.7(R2=0.990,P=0.000＜0.05),上下移動(dòng)距離與動(dòng)作時(shí)間下閾線性回歸方程為：y=1.002x+48.009(R2=0.975,P=0.000＜0.05),上下移動(dòng)距離動(dòng)作時(shí)間舒適值線性回歸方程：y=2.101x+223(R2=0.970,P＜0.0001).

表2 動(dòng)態(tài)圖標(biāo)移動(dòng)映射模型系數(shù)

3.1.2 動(dòng)態(tài)圖標(biāo)前后縮放回歸分析

基于動(dòng)態(tài)圖標(biāo)前后縮放量與動(dòng)作時(shí)間實(shí)驗(yàn)數(shù)據(jù)合理的擬合模型,圖6回歸線顯示圖標(biāo)縮放與最佳動(dòng)作時(shí)間擬合為99.8%(調(diào)整擬合99.8%),不考慮受試者之間的差異,擬合度較高.半徑增幅△R與動(dòng)作時(shí)長(zhǎng)上閾值、下閾值、舒適值呈現(xiàn)正線性關(guān)系圖,并且隨著半徑增幅越大,動(dòng)作時(shí)長(zhǎng)則越大.動(dòng)態(tài)圖標(biāo)縮放量與動(dòng)作時(shí)間上閾線性回歸方程為：y=16.098x+463.3 (R2=0.994,P=0.000＜0.05),縮放量與動(dòng)作時(shí)間下閾值線性回歸方程為：y=6.317x+62.397 (R2=0.985,P=0.000＜0.05),圖標(biāo)縮放量與動(dòng)作時(shí)間舒適閾值線性回歸方程為：y=13.529x+221.5 (R2=0.998,P=0.000＜0.05).表3提供了最佳動(dòng)作時(shí)間、上閾、下閾的映射模型系數(shù),顯示半徑增量與最佳動(dòng)作時(shí)間顯著正相關(guān)(F=47.65,P=0.001＜0.05).

圖6 圖標(biāo)前后縮放與動(dòng)作時(shí)間模型擬合的散點(diǎn)圖

表3 動(dòng)態(tài)圖標(biāo)縮放映射模型系數(shù)

3.1.3 動(dòng)態(tài)圖標(biāo)旋轉(zhuǎn)形式回歸分析

在圖標(biāo)的旋轉(zhuǎn)度實(shí)驗(yàn)中,被試會(huì)因?yàn)楦鞣N情況而導(dǎo)致個(gè)別實(shí)驗(yàn)數(shù)據(jù)出現(xiàn)突變,針對(duì)此類數(shù)據(jù)再次試驗(yàn)之后數(shù)據(jù)恢復(fù)正常.除此之外實(shí)驗(yàn)過(guò)程中,相比速度較慢的旋轉(zhuǎn)圖標(biāo),被試對(duì)旋轉(zhuǎn)速度快的圖標(biāo)容忍度更低,這與旋轉(zhuǎn)速度快的圖標(biāo)引起的視覺不適有關(guān)系.圖7為圖標(biāo)旋轉(zhuǎn)度與動(dòng)作時(shí)間的散點(diǎn)圖.如圖7所示,基于所有被試選擇的旋轉(zhuǎn)形式下動(dòng)作時(shí)間平均值計(jì)得到擬合模型,對(duì)動(dòng)作時(shí)間的平均值進(jìn)行組內(nèi)ANOVA 分析,表明圖標(biāo)自變量旋轉(zhuǎn)角度與因變量動(dòng)作時(shí)間的線性關(guān)系顯著,均不考慮受試者之間的差異,擬合度較高.由圖7所示,隨著旋轉(zhuǎn)角度的增大,動(dòng)作時(shí)間則越長(zhǎng),但是當(dāng)旋轉(zhuǎn)角度趨近360°的情況下,被試對(duì)于動(dòng)作時(shí)間上閾的容忍度也逐漸增加,也就是說(shuō)被試能接受更長(zhǎng)的動(dòng)作時(shí)間.

表4提供了最佳動(dòng)作時(shí)間、上閾、下閾的映射模型系數(shù),動(dòng)態(tài)圖標(biāo)的旋轉(zhuǎn)角度與動(dòng)作舒適時(shí)間顯著相關(guān)F=57.223,P=0.000＜0.05,隨著旋轉(zhuǎn)角度的增加,動(dòng)作時(shí)間也呈正相關(guān)增長(zhǎng).動(dòng)態(tài)圖標(biāo)旋轉(zhuǎn)角度上閾線性回歸方程為：y=3.444x+410.05 (R2=0.997,P＜0.001),下閾線性回歸方程：y=1.101x+128.67(R2=0.979,P=0.000＜0.05),舒適值線性回歸方程：y=2.075x+242.96(R2=0.993,P=0.000＜0.05).

圖7 圖標(biāo)旋轉(zhuǎn)角度與動(dòng)作時(shí)間模型擬合的散點(diǎn)圖

表4 動(dòng)態(tài)圖標(biāo)旋轉(zhuǎn)映射模型系數(shù)

3.2 動(dòng)作幅度適合度(實(shí)驗(yàn)2)數(shù)據(jù)分析

實(shí)驗(yàn)2 目標(biāo)是確定動(dòng)態(tài)圖標(biāo)4 種形式在該移動(dòng)設(shè)備下的最佳動(dòng)作幅度,將不同最佳動(dòng)作時(shí)間下的動(dòng)態(tài)幅度所獲得的評(píng)分進(jìn)行單因子變異數(shù)分析,失蹤動(dòng)態(tài)形式均顯示顯著差異,為了解不同的差異情況,再次將平均評(píng)分進(jìn)行Duncan 法多重檢驗(yàn).

由表5,左右移動(dòng)的圖標(biāo)最合適的動(dòng)作幅度是75 px,其平均評(píng)分至3.79 分,動(dòng)作幅度120 px、90 px、105 px與75 px 的評(píng)分無(wú)明顯差別.上下圖標(biāo)的最佳動(dòng)作幅度為90 px,其最高評(píng)分為3.83 分,動(dòng)作幅度75 px、105 px、120 px 的評(píng)分與最高評(píng)分的移動(dòng)幅度無(wú)顯著差異,略高于左右移動(dòng)最佳動(dòng)作幅度,這與移動(dòng)端的尺寸有關(guān).

表5 Duncan 法鑒定結(jié)果

圖標(biāo)旋轉(zhuǎn)角度在120°的時(shí)候獲得最高平均評(píng)分3.71 分,旋轉(zhuǎn)角度在90°、135°、60°、75°、360°的評(píng)分無(wú)顯著差異,可以發(fā)現(xiàn),用戶對(duì)圖標(biāo)的旋轉(zhuǎn)角度并無(wú)絕對(duì)的偏好,用戶對(duì)旋轉(zhuǎn)角度的偏好可以將旋轉(zhuǎn)角度分為75°、120°、270°、360°四個(gè)階段,可以滿足設(shè)計(jì)師對(duì)不同意象的設(shè)計(jì)需求.圖標(biāo)前后縮放最高的是半徑增幅為18 px,平均評(píng)分為3.78 分,其與半徑增幅量為20 px、16 px、22 px 的評(píng)分無(wú)明顯差別,與旋轉(zhuǎn)的用戶偏好的動(dòng)作幅度不同的是,用戶對(duì)于縮放的比例傾向于不超過(guò)原本圖標(biāo)的2 倍.

根據(jù)實(shí)驗(yàn)2 中得到的最佳動(dòng)作幅度,將4 種動(dòng)態(tài)形式下的最佳動(dòng)作幅度運(yùn)用在實(shí)驗(yàn)1 中得到的回歸方程中,獲得4 種動(dòng)態(tài)形式的最佳動(dòng)作時(shí)間、上閾與下閾.如表6所示,不同的動(dòng)態(tài)形式推薦使用不同的動(dòng)作時(shí)間；左右移動(dòng)與上下移動(dòng)的動(dòng)作時(shí)間上閾、下閾數(shù)值上無(wú)明顯差別；前后縮放與旋轉(zhuǎn)形式的動(dòng)作時(shí)間上閾、下閾、舒適值的數(shù)值也無(wú)明顯差別；4 種動(dòng)態(tài)形式的動(dòng)作時(shí)間舒適值通常在450 ms 左右,動(dòng)作時(shí)間均未超過(guò)1 s.

表6 動(dòng)態(tài)效果設(shè)計(jì)參考值

4 討論

從本文的實(shí)驗(yàn)結(jié)果可以看出,動(dòng)態(tài)圖標(biāo)的動(dòng)態(tài)形式與運(yùn)動(dòng)方向、速率、路徑、范圍顯著相關(guān),用戶對(duì)于不同的動(dòng)態(tài)形式會(huì)產(chǎn)生不同的情緒感受與滿意度.根據(jù)實(shí)驗(yàn)1 和實(shí)驗(yàn)2 中動(dòng)作時(shí)間閾值測(cè)試及分析結(jié)果,結(jié)合Google Material Design 與Fluent Design 推薦的動(dòng)畫時(shí)長(zhǎng),發(fā)現(xiàn)在4 種動(dòng)態(tài)形式下,移動(dòng)端的動(dòng)態(tài)圖標(biāo)運(yùn)動(dòng)時(shí)長(zhǎng)在450 ms 左右最為合適；即使是動(dòng)作時(shí)間的上閾也不大于1 s,不然會(huì)使用戶產(chǎn)生遲緩、卡頓的感覺.

4.1 圖標(biāo)復(fù)雜度與動(dòng)作時(shí)間變化

根據(jù)實(shí)驗(yàn)1 的數(shù)據(jù)顯示,當(dāng)相同元素的圖標(biāo)沿X/Y 軸做勻速運(yùn)動(dòng)的動(dòng)作時(shí)間明顯小于圖標(biāo)做前后縮放以及旋轉(zhuǎn)運(yùn)動(dòng)的動(dòng)作時(shí)間,因此推測(cè)動(dòng)作時(shí)間的偏好與動(dòng)態(tài)圖標(biāo)復(fù)雜度相關(guān).為了確定圖標(biāo)復(fù)雜度對(duì)動(dòng)作時(shí)間偏好的影響,基于五分量表法計(jì)算了4 個(gè)運(yùn)動(dòng)圖標(biāo)的復(fù)雜度,包括形狀復(fù)雜度和運(yùn)動(dòng)復(fù)雜度,將簡(jiǎn)單形狀的復(fù)雜度設(shè)置為1,評(píng)價(jià)結(jié)果示于表7.

表7 動(dòng)態(tài)圖標(biāo)復(fù)雜度

該結(jié)果表明,旋轉(zhuǎn)形式的復(fù)雜度最高,且與之對(duì)應(yīng)的運(yùn)動(dòng)時(shí)間最高.結(jié)果與之前的假設(shè)一致,用戶對(duì)復(fù)雜形狀和運(yùn)動(dòng)模式(旋轉(zhuǎn)、縮放)的關(guān)注負(fù)荷高于簡(jiǎn)單運(yùn)動(dòng)模式(水平運(yùn)動(dòng)和垂直運(yùn)動(dòng)),用戶的注意力負(fù)荷小于復(fù)雜的運(yùn)動(dòng)模式,因此用戶需要更多的時(shí)間認(rèn)知?jiǎng)討B(tài)圖標(biāo),因此,除了表6中得到的一般狀態(tài)下的動(dòng)作幅度與動(dòng)作時(shí)間外,針對(duì)復(fù)雜的形狀以及運(yùn)動(dòng)模式下,動(dòng)態(tài)圖標(biāo)的動(dòng)作時(shí)長(zhǎng)應(yīng)該合理增加.

4.2 設(shè)備尺寸與動(dòng)作幅度變化

當(dāng)相同元素的圖標(biāo)做沿X/Y 軸的勻速運(yùn)動(dòng)時(shí),用戶更加偏向Y 軸上的動(dòng)作幅度大于X 軸上的動(dòng)作幅度,這或許與智能設(shè)備的尺寸與重力(weigh)相關(guān),實(shí)驗(yàn)中采用的設(shè)備模型長(zhǎng)寬比大于1,除此之外,研究顯示用戶更加傾向于重力方向一致的運(yùn)動(dòng)方向,為用戶增加了Y 軸方向上的動(dòng)作幅度接受程度.因此,與之前的一些研究結(jié)果類似,最佳動(dòng)作幅度的數(shù)值與設(shè)備尺寸呈正相關(guān),較大的屏幕需要更大的動(dòng)作幅度,更多的運(yùn)動(dòng)時(shí)間,以確保圖標(biāo)不會(huì)移動(dòng)得太快.除此之外,動(dòng)作幅度的大小與設(shè)備尺寸以及需要表達(dá)的意向相關(guān),根據(jù)實(shí)驗(yàn)過(guò)程中被試反饋,不同的動(dòng)作時(shí)間與相同的動(dòng)作幅度形成了不同的圖標(biāo)運(yùn)動(dòng)速率,即使在試驗(yàn)前并未對(duì)被試提及聯(lián)想意象,被試在試驗(yàn)過(guò)程中仍舊會(huì)聯(lián)想到旋轉(zhuǎn)速度相似的意象,例如：汽車的雨刷、時(shí)針搖擺、晃蕩的秋千等,用戶偏好的動(dòng)作速率總是與自然界中的運(yùn)動(dòng)相對(duì)應(yīng),說(shuō)明用戶更加偏好于接近自然界中平滑連貫的動(dòng)效.

綜上所述針對(duì)圖標(biāo)動(dòng)態(tài)形式設(shè)計(jì)時(shí),為了達(dá)到高滿意度與低認(rèn)知負(fù)荷,除了依照實(shí)驗(yàn)1 中得到的預(yù)測(cè)模型與表6中的建議數(shù)值,根據(jù)情況的不同動(dòng)作時(shí)間與動(dòng)作幅度可以做相應(yīng)的調(diào)整：(1)復(fù)雜的形狀以及復(fù)雜的運(yùn)動(dòng)模式,動(dòng)態(tài)圖標(biāo)的動(dòng)作時(shí)長(zhǎng)應(yīng)該合理增加；(2)幅度大、復(fù)雜的、全屏過(guò)渡的動(dòng)畫需要更長(zhǎng)的持續(xù)時(shí)間,相同時(shí)間內(nèi)圖標(biāo)做長(zhǎng)距離運(yùn)動(dòng)時(shí),動(dòng)作時(shí)間應(yīng)該比短距離運(yùn)動(dòng)時(shí)更大,更大的屏幕需要更多的動(dòng)作時(shí)間來(lái)確保圖標(biāo)不會(huì)移動(dòng)過(guò)快；(3)動(dòng)作幅度與動(dòng)作時(shí)間的設(shè)定應(yīng)盡量貼近自然界中的運(yùn)動(dòng).

5 結(jié)論與展望

研究結(jié)果表明,動(dòng)態(tài)圖標(biāo)運(yùn)動(dòng)方向、速率、路徑、范圍對(duì)動(dòng)態(tài)形式有顯著影響；對(duì)動(dòng)態(tài)圖標(biāo)的最佳、上閾、下閾動(dòng)作時(shí)間設(shè)定影響最大的是圖標(biāo)動(dòng)作幅度,其次為動(dòng)作復(fù)雜度,而動(dòng)作幅度的設(shè)定與設(shè)備的尺寸相關(guān).本研究基于用戶偏好滿意度對(duì)動(dòng)態(tài)圖標(biāo)進(jìn)行改善,為人機(jī)界面以及動(dòng)態(tài)圖標(biāo)設(shè)計(jì)提供了理論參考.

本研究調(diào)查對(duì)象為移動(dòng)端APP 界面中使用的動(dòng)態(tài)圖標(biāo)的影響,但僅限于具有屏幕尺寸和圖形設(shè)計(jì)限制的手機(jī)屏幕,許多研究限制仍有待解決.未來(lái)需要研究動(dòng)態(tài)圖標(biāo)對(duì)用戶指導(dǎo)的作用,以及動(dòng)態(tài)圖標(biāo)對(duì)用戶腦力負(fù)荷的影響進(jìn)行詳細(xì)的評(píng)估,該評(píng)估將使用眼動(dòng)追蹤和神經(jīng)生理學(xué)辦法完成,深入探索動(dòng)態(tài)圖標(biāo)對(duì)于視覺搜索和認(rèn)知負(fù)荷的影響,為動(dòng)態(tài)圖標(biāo)的設(shè)計(jì)模式制定更詳細(xì)的標(biāo)準(zhǔn)是提高用戶對(duì)人機(jī)界面的認(rèn)知績(jī)效以及體驗(yàn)的重要環(huán)節(jié).