線性圖標內(nèi)部特征對視覺搜索的影響機理

顧浩然， 金濤， 陳春朋， 吳正新， 明成業(yè)

(中國石油大學(xué)(華東)機電工程學(xué)院， 青島 266580)

圖標具有超越語言障礙并以簡明形式表達含義的能力，它們通常更能捕獲用戶的注意并快速傳遞有用信息。當使用具有復(fù)雜用戶界面的計算機和其他設(shè)備工作時，用戶會收到大量需要解釋的圖形信息，對這些信息的感知需要盡可能準確、快速且毫不費力。計算機圖標的不同呈現(xiàn)方式是增加用戶對應(yīng)用興趣和互動的重要因素[1]，線性圖標是復(fù)雜數(shù)字界面應(yīng)用廣泛的圖標形式[2]，圖標的線寬是已知會影響其易讀性的關(guān)鍵變量[3]，但這種變量對視覺搜索效率的影響機理尚不明確。

眾多學(xué)者研究圖標類型對圖標易讀性的影響機制，但學(xué)界對于線性圖標的內(nèi)部特征及其影響機理鮮有研究。Lin等[4]通過置換和組合，以線性、面性圖標以及正負背景的6種組合形式作為素材，研究捕獲注意的最佳呈現(xiàn)方式。胡瑩[5]以線性圖標和面性圖標兩種不同的圖標類型，探究其對視覺注意力和舒適度的影響機理，結(jié)果表明，圖標的邊框形狀能從不同程度上捕獲視覺注意，但其實驗限定了圖標的線寬，未考慮將線寬作為變量進行深入研究。而Li等[6]發(fā)現(xiàn)，顯示圖像的線寬參數(shù)及其對比度調(diào)制機制會影響數(shù)字界面的顯示閱讀性能。Funakawa等[7]通過使用低通濾波數(shù)字圖像，比較了在多種圖像符號中仍能被視覺清晰分辨的最小截止頻率。他們的研究表明，對于具有正常視力的人來說，開口寬大的圖像符號更容易閱讀，而過窄可能會降低其可讀性。Funakawa[8]在之后的實驗中比較了由7個不同筆劃寬度組成的羅馬字母圖像的可讀性，實驗結(jié)果顯示，對于正常視力人群來說，字母的最佳寬度為其高度的12%～16%，但造成這種影響的原因尚不清楚。為確定圖標易讀性是否受線寬的影響，Ya-Hsien[3]探究顯示特征對品牌圖標易讀性的影響，實驗材料為按照4種不同亮度對比下的128張彩色圖片，這些圖片由2種不同粗細的羅馬字體和顏色組合背景構(gòu)成，實驗結(jié)果表明，筆畫較寬的品牌圖標具有更高的可讀性。Shieh等[9]研究斜線寬度如何影響禁止符號的掃視清晰度，實驗中定義了5%～45%的5個線寬梯度作為實驗變量，發(fā)現(xiàn)在圖像識別方面，寬度越大，圖片的可用空間就越少，斜線覆蓋的圖片就越多，因此導(dǎo)致清晰度較低。但前者的實驗中缺少顯示環(huán)境因素的考慮，Shieh等[10]引入亮度對比度梯度進一步分析斜線厚度對警示圖標掃視清晰度的影響，實驗結(jié)果表明在低亮度對比度下，較小線寬的圖標易讀性高，反之，較大線寬的圖標易讀性高，但線寬標準都應(yīng)在35%以下。

前人的研究表明圖標對比度會影響視覺搜索， Chen[11]在早期實驗中證實亮度對比度會影響圖形的視覺效果，這種影響與視覺神經(jīng)有著緊密聯(lián)系。Rahimi等[12]在視覺搜索中研究了刺激亮度對比度對性能和眼球運動的影響，并認為增加亮度對比度可改善二維視覺跨度，這符合視覺跨度控制假設(shè)。Jiménez等[13]通過不同顏色和字符形成的14種顏色組合圖像探究亮度對比度和極性對視覺搜索的影響，實驗結(jié)果顯示：在視覺表現(xiàn)中亮度對比度可能比色度對比度起更重要的作用，而圖像的正負極性對搜索效率的影響不明顯，師黎等[14]也從神經(jīng)角度證實亮度表征在不同顏色對視覺神經(jīng)的影響中起重要作用。目前大多數(shù)研究主要集中在文本亮度對比度對閱讀性能的影響[15]，這些研究表明，低亮度對比度不利于人們的文本識別，提高亮度對比度可顯著提高閱讀性能。而圖標的前景色和背景色之間的亮度對比對視覺搜索性能有類似的影響。為研究視覺系統(tǒng)對圖標亮度對比度的認知機理，Shieh等[10]探究了由目標圖形/背景顏色組合形成的面性圖標的呈現(xiàn)效果和用戶偏好度，研究結(jié)果顯示：圖形和背景色對比度大的圖標視覺效果更好(尤其是白色圖形/黑色背景或者黑色圖形/白色背景的圖標)。Shen等[16]對在前者的面性圖標實驗基礎(chǔ)上將圖標面積比納入研究范圍，其研究結(jié)果表明搜索性能隨著亮度對比度的增加而提高，但較大的對比度會導(dǎo)致搜索準確率降低，在亮度對比度和圖標面積比的影響之間有著強烈的相互作用。

線性圖標是由線組成的圖標形式，其構(gòu)成形式與字符相同，因此以往的研究對數(shù)字界面圖形符號設(shè)計具有一定參考價值。因此，現(xiàn)使用不同線寬值和亮度對比度閾值以確定兩個因素和線性圖標搜索效率之間的關(guān)系。采用視覺搜索實驗范式，將具有連續(xù)數(shù)量分級的亮度對比度變化納入研究范圍。實驗a將6種不同線寬的線性圖標作為實驗材料，探究線性圖標的不同線寬對圖標易讀性的影響。實驗b引入邁克遜對比度調(diào)節(jié)的9種亮度刺激[15]，探究不同的圖標亮度對比度閾值對易讀性的影響。實驗c利用眼動實驗采集數(shù)據(jù)，分析被試的注視點數(shù)量及注視時間，從生理角度揭示行為實驗結(jié)果的深層次原因。

1 實驗a：圖標線寬行為實驗

1.1 實驗條件

實驗在中國石油大學(xué)(華東)實驗室進行，實驗程序由E-prime 2.0編寫，刺激呈現(xiàn)在27 in(1in=2.54 cm)的dell顯示器(U2720QM)中央，屏幕分辨率為3 840×2 160，室內(nèi)照明條件正常(40 W日光燈)。計算機屏幕背景為白色，被試與屏幕中心的距離為500 mm。被試為30名在校本科生和碩士生，15男、15女，年齡21～26歲，右利手，視力或矯正視力正常，無色盲或色弱。所有被試實驗前對實驗內(nèi)容不知情，且未參加過類似實驗，實驗后獲得相應(yīng)報酬。

1.2 材料設(shè)計

實驗刺激為圖標的8位灰度圖像，圖標材料是從圖標庫中選出的含義明確的常見圖標[17-18]，如圖1所示。圖標樣式為反色線性圖標，圖像尺寸均為128×128像素，在27 in顯示屏上3 840×2 160的屏幕中央顯示刺激。

圖1 搜索任務(wù)中16個圖標的組合示例Fig.1 Example of a combination of 16 icons in a search task

1.3 流程

實驗將16個圖標作為圓形刺激數(shù)組顯示在搜索字段中[16]。圖2顯示了實驗流程圖的示例，實驗刺激呈現(xiàn)在白色背景上，首先灰色的注視點“+”在屏幕中央出現(xiàn)1 500 ms。隨后搜索目標出現(xiàn)在顯示屏上并保持2 000 ms，后全屏黑色保持1 000 ms以消除視覺殘差，之后屏幕中央顯示圖標集，被試須對目標圖標是否出現(xiàn)屏幕中的16個圖標中進行響應(yīng)，在盡量準確的前提下盡快做出反應(yīng)，目標隨機出現(xiàn)于圓形刺激組的任意位置，出現(xiàn)概率與不出現(xiàn)概率均為50%，若目標圖標出現(xiàn)被試需要將光標移至目標圖標，然后單擊鼠標按鈕；反之，按鍵盤上的“space”鍵以表示目標圖標沒有出現(xiàn)。被試按鍵反應(yīng)后或5 000 ms后無反應(yīng)，進入下一個試次的注視點畫面。正式實驗包括3個組，每組有48個試次，圖標混合均等出現(xiàn)。正式實驗之前，各位被試進行10個試次的練習。每組測試結(jié)束后被試休息1 min，整個實驗過程耗時約20 min。

圖2 實驗流程圖示例Fig.2 Example of experiment flow chart

1.4 結(jié)果分析

利用傳統(tǒng)知覺載荷的數(shù)據(jù)排除方法，剔除大于5 000 ms和小于2 000 ms的反應(yīng)時間數(shù)據(jù)，結(jié)果剔除3.7%的數(shù)據(jù)[19-20]。再基于保留的正確數(shù)據(jù)，將平均反應(yīng)時間進行單因素重復(fù)測量，結(jié)果表明，圖標線寬主效應(yīng)顯著，F(xiàn)=39.62，P<0.05，結(jié)果如圖3所示。

對圖標線寬的多重比較結(jié)果表明：圖標線寬值的主效應(yīng)顯著，線寬為12 px的圖標平均反應(yīng)時間(2 605 ms)顯著低于其他線寬圖標，P< 0.05。

圖3 不同線寬值下的反應(yīng)時間Fig.3 Reaction time under different line width values

2 實驗b1：圖標對比度行為實驗

2.1 材料設(shè)計

實驗刺激為不同亮度對比度的8位灰度圖標，如圖4所示。圖標材料與實驗a相同，并選取了實驗a中主要效應(yīng)顯著的8 px和12 px兩種線寬，用于進一步實驗。圖像尺寸均為128×128像素。在27英寸顯示屏上的3 840×2 160屏幕的中央顯示了384×384 pix的噪點區(qū)域，并在中央顯示了刺激。

圖標圖像的邁克遜對比度從0.005設(shè)置到0.997(共9個梯度)[15]。為了描述具有適當亮度對比度的刺激，基于顯示器的伽瑪值(1.67)調(diào)整了圖像的pix值。對于對比度為0.32或更大的刺激，背景亮度固定為227.26 cd /m2，圖標的亮度降低。對于對比度為0.16或更小的刺激，調(diào)整圖標和背景，使刺激的亮度分布的中位數(shù)為191.29 cd /m2。為了充分測量對比度值，對于8位灰度圖像，也添加白噪背景，以使像素值與圖像的差的平均值為0，SD = 12。

圖4 亮度對比度實驗材料示例Fig.4 Examples of luminance contrast experimental materials

2.2 流程

實驗利用2(圖標線寬：8/12 px)× 9(亮度對比度：0.005～0.997共9個梯度)被試內(nèi)設(shè)計，搜索范式與實驗a相同。實驗刺激呈現(xiàn)在白色背景上，首先灰色的注視點“+”在屏幕中央出現(xiàn)1 500 ms。隨后搜索目標出現(xiàn)在顯示屏上并保持2 000 ms，后全屏黑色保持1 000 ms以消除視覺殘差，之后屏幕中央顯示圖標集，被試須對目標圖標是否出現(xiàn)屏幕中的16個圖標中進行響應(yīng)，在盡量準確的前提下盡快做出反應(yīng)，目標隨機出現(xiàn)于圓形刺激組的任意位置，出現(xiàn)概率與不出現(xiàn)概率均為50%，若目標圖標出現(xiàn)被試需要將光標移至目標圖標，然后單擊鼠標按鈕；反之，按鍵盤上的“space”鍵以表示目標圖標沒有出現(xiàn)。被試按鍵反應(yīng)后或5 000 ms后無反應(yīng)，進入下一個試次的注視點畫面。正式實驗包括2個組，每組有27個試次，圖標混合均等出現(xiàn)。正式實驗之前，各被試進行10個試次的練習。每組測試結(jié)束后被試休息1 min，整個實驗過程耗時約10 min。

2.3 結(jié)果分析

同實驗a，基于保留的正確數(shù)據(jù)，將平均反應(yīng)時間進行2(圖標線寬：8、12 px)× 9(亮度對比度閾值：0.005～0.997共9個梯度)重復(fù)測量方差分析。實驗結(jié)果表明：亮度對比度主效應(yīng)顯著，F(xiàn)=61.42，P<0.05，圖標亮度對比度對圖標易讀性有明顯影響，符合視覺性能變化[11]。對線寬8 px及線寬12 px進行兩兩比較(圖5)，亮度對比度較高時，線寬為12 px的反應(yīng)時間低于線寬為8 px的反應(yīng)時間；反之，亮度對比度較低時，線寬為12 px的反應(yīng)時間顯著提高，P<0.05。

圖5 8、12 px線寬圖標在不同對比度下的反應(yīng)時間Fig.5 Reaction time of 8，12 px line width icon under different contrast

實驗b1采用具有梯度變化的亮度對比度作為實驗材料，結(jié)果發(fā)現(xiàn)：①隨著亮度對比度的減小，線寬為8 px和12 px的圖標反應(yīng)時間均提高;②亮度對比度值較大時，兩種線寬圖標的反應(yīng)時間較接近，線寬為12 px的反應(yīng)時間略低于線寬為8 px的反應(yīng)時間;③亮度對比度為0.02時是反應(yīng)時間的明顯轉(zhuǎn)折點(P<0.01)，線寬為12 px的圖標反應(yīng)時間明顯提高。通過實驗結(jié)果推測：在較低亮度對比度下，較小線寬的圖標需要的反應(yīng)時間更短，圖標線寬與圖標亮度對比度產(chǎn)生交互效應(yīng)。為驗證實驗b1的結(jié)果，實驗b2引入線寬大小為2 px的圖標作為實驗變量做進一步分析驗證。

3 實驗b2：交互效應(yīng)行為實驗

3.1 材料設(shè)計

實驗材料與實驗b1相同。

3.2 流程

實驗利用1(圖標線寬：2 px)× 9(亮度對比度閾值：0.005～0.997共9個梯度)被試內(nèi)設(shè)計，搜索范式及流程與實驗a相同。正式實驗包括1個組，每組有27個試次，圖標混合均等出現(xiàn)。正式實驗之前，各被試進行10個試次的練習。每組測試結(jié)束后被試休息1 min，整個實驗過程耗時約5 min。

3.3 結(jié)果分析

同實驗a，基于保留的正確數(shù)據(jù)和實驗b1所得數(shù)據(jù)，將平均反應(yīng)時間進行3(圖標線寬：2、8、12 px)× 9(亮度對比度閾值：9個梯度)重復(fù)測量方差分析。實驗結(jié)果表明：圖標亮度對比度主效應(yīng)顯著，F(xiàn)=49.90，P<0.05；亮度對比度較高時，線寬為2 px的圖標反應(yīng)時間顯著高于8 px和12 px，P<0.01；亮度對比度在0.04～0.16時三種線寬圖標反應(yīng)時間接近，P>0.05；亮度對比度較低時，線寬為2 px的圖標反應(yīng)時間顯著高于8 px和12 px，P<0.05，如圖6所示。

圖6 2、8、12 px線寬圖標在不同對比度下的反應(yīng)時間Fig.6 Reaction time of 2，8，12 px line width icon under different contrast

實驗b2引入線寬為2 px的圖標進行圖標線寬與亮度對比度交互效應(yīng)分析，彌補前人空白，結(jié)果發(fā)現(xiàn)：①亮度對比度較高時，線寬大小顯著影響反應(yīng)時間，而線寬為2 px的圖標反應(yīng)時間隨對比度減小有所下降，說明在較高對比度下，圖標線寬與亮度對比度產(chǎn)生了交互效應(yīng)；②亮度對比度在0.01～0.16時，三種線寬圖標的反應(yīng)時間接近，線寬主效應(yīng)不顯著，說明在此區(qū)間內(nèi)只有對比度對圖標易讀性產(chǎn)生影響，而線寬值的影響不大；③亮度對比度較低時，線寬小的圖標反應(yīng)時間顯著提高，說明較窄線寬的線性圖標在低對比度下會影響圖標易讀性，使用戶的認知績效降低。為驗證實驗b2的結(jié)果，實驗c從眼動生理角度采集注視點數(shù)量及注視時間作進一步分析。

4 實驗c：眼動實驗

4.1 實驗設(shè)備與材料

實驗程序由E-prime編寫，利用青研科技M2型外置紅外眼動儀采集眼動數(shù)據(jù)，實驗刺激材料及實驗流程與實驗a相同，僅采集分析被試眼動數(shù)據(jù)。

4.2 結(jié)果分析

基于所采集的眼動數(shù)據(jù)，首先對6種線寬的平均注視時間進行單因素方差分析，F(xiàn)=50.92，P<0.05，如圖7所示，結(jié)果顯示：線寬為12 px的圖標注視時間顯著低于其他線寬圖標平均注視時間。對注視點個數(shù)進行分析，無顯著差異。其次，對平均反應(yīng)時間進行1(圖標線寬：2 px)×9(亮度對比度：9個梯度)單因素方差分析，F(xiàn)=73.01，P<0.05，如圖8所示，結(jié)果顯示：亮度對比度較高時，平均注視時間顯著低于低對比度，注視時間有隨對比度減小而下降的趨勢。

實驗c眼動實驗證明，亮度對比度較高時(0.160～0.997)，線寬值為2 px的線性圖標平均注視時間顯著低于低對比度下的平均注視時間，不同亮度對比度下的注視點數(shù)量沒有顯著差異，根據(jù)眼動注視時間公式T總注視時間=F注視點數(shù)量×A平均注視時間可知，注視時間隨對比度降低而減少，從視神經(jīng)認知角度解釋了實驗b2中線寬值與亮度對比度的交互效應(yīng)。

圖7 不同線寬值下的注視時間Fig.7 Glance time under different line width values

圖8 2 px線寬圖標在不同對比度下的注視時間Fig.8 Glance time of 2 px line width icon under different contrast

5 討論

本文研究探討了線性圖標的線寬和亮度對比度對線性圖標易讀性的影響機理，實驗結(jié)果補充了前人研究[18]。研究發(fā)現(xiàn)，圖標線寬值和亮度對比度都會影響線性圖標的易讀性。實驗中當線寬值為12 px時具有較高的易讀性，其線寬占圖標高度的比值約為12%，這一發(fā)現(xiàn)與Funakawa等[7]的研究結(jié)果相近。使用較高亮度對比度的線性圖標可顯著提高操作者的視覺搜索績效，證實了Rahimi等[12]的結(jié)論。此外，當線性圖標線寬值極低時，高對比度會干擾視覺搜索。

實驗a中，大線寬值和小線寬值均導(dǎo)致反應(yīng)時間顯著增加，具有統(tǒng)計學(xué)上的顯著影響，說明過小或過大的線寬值都會影響視覺搜索效率。根據(jù)實驗a的結(jié)果可將不同圖標線寬的視覺處理模型分為3個階段，在第一階段中，線性圖標的線寬值較小，在高對比度下被試對線性圖標的細筆畫識別尚不明顯；小面積白色前景區(qū)域和大面積黑色背景之間存在強烈的視覺干擾，嚴重損害了被試的視覺搜索性能，被試根據(jù)筆畫捕捉圖標特征的難度進一步加深，此結(jié)果補充了Beier等[21]的觀點。第二階段中，線寬值適中，線性圖標的反應(yīng)時間顯著降低，被試的視覺搜索效率有效提升，線寬值為12 px的線性圖標(L線寬/H高度比值約為12%)具有最佳的視覺搜索性能。Arditi[22]的實驗結(jié)果顯示更粗的筆畫通常較為清晰，因為它優(yōu)先被編碼和加工，實驗結(jié)論也證實了這一點。第三階段中，反應(yīng)時間隨著線寬值增大顯著上升，說明圖標的易讀性隨著線寬值的增加而降低。Pelli等[23]的視覺處理特性模型表明，早期階段中線寬的增加不會影響視覺系統(tǒng)的特征檢測，而隨后線寬單調(diào)增加會使圖標丟失可辨認的特征，相鄰的線條在某些地方相互接觸直至圖標的形狀完全塌陷，這與Chung等[24]的實驗結(jié)果一致。通過實驗b1發(fā)現(xiàn)，在具有良好視覺性能的線寬條件下，圖標的亮度對比度與易讀性呈正相關(guān)，對比度越高圖標特征越容易捕獲；研究結(jié)果也支持Ohnishi等[25]的觀點，可通過更高的亮度對比度來增強圖標的易讀性的觀點；但在較低對比度下，較小線寬的圖標所需的反應(yīng)時間更短，圖標線寬與亮度對比度產(chǎn)生交互效應(yīng)。與前人的固定數(shù)量或數(shù)量分級的研究相比，本文對實驗方法做出一定改進，在實驗b1中將圖標亮度對比度進行連續(xù)的動態(tài)變化，彌補前人研究的空白。

實驗b2將線寬值為2 px(極小線寬值)的圖標作為實驗材料，深入探究了實驗b1中的交互效應(yīng)，結(jié)果發(fā)現(xiàn)：在高亮度對比度(0.997～0.319)區(qū)間內(nèi)的平均反應(yīng)時間呈下降趨勢。為進一步解釋上述的結(jié)論，實驗c從眼動生理實驗的角度發(fā)現(xiàn)，當線寬值極小時，高亮度對比度區(qū)間的反應(yīng)時間顯著降低，低亮度對比度區(qū)間的反應(yīng)時間顯著提升；高對比度下的平均注視時間顯著低于低對比度，但注視點數(shù)量無顯著差異，從而解釋了實驗b的結(jié)論。根據(jù)以上實驗結(jié)論做出以下推斷：高亮度對比度下，被試對小線寬值的視覺敏感度降低，這與Pelli等[26]對視神經(jīng)的研究結(jié)果相似，在亮度顯示面積較小的情況下視覺神經(jīng)會表現(xiàn)出強烈的對比敏感度(對比度閾值的倒數(shù))反應(yīng)，對比度值越高視覺神經(jīng)的敏感度越低。人體視網(wǎng)膜上中央凹的桿狀雙極細胞對光伏能量刺激的效應(yīng)感知度高，能感受微弱區(qū)域的光能量輻射，但對于邊界特征不能很清楚地區(qū)分，導(dǎo)致高亮度對比度下需要更長時間辨認圖像的特征，這可能是引起視覺神經(jīng)對比敏感度下降的原因。此外，年齡增長、眼科疾病和神經(jīng)系統(tǒng)受損是導(dǎo)致視網(wǎng)膜中央凹視力退化的重要原因[27]，尤其是老齡群體會對光亮的感知下降，所以對于線寬值低的圖標需要謹慎使用。

6 結(jié)論

研究表明，線寬和亮度對比度對線性圖標的認知績效產(chǎn)生顯著影響：①建議選取線性圖標的線寬值為圖標高度的12%左右，此時具有較好的視覺搜索性能，可根據(jù)圖標的復(fù)雜度進行適當?shù)卣{(diào)整；②線性圖標亮度對比度對認知績效影響顯著，可通過更高的亮度對比度來增強圖標的易讀性。眾多學(xué)者的研究表明：亮度對比度的作用優(yōu)于顏色，設(shè)計師在設(shè)計單色界面、電子閱讀器界面、制作交互原型時可選擇較高亮度對比度的圖標；③應(yīng)盡量避免極小線寬值圖標(尤其是黑白色的正負極圖標)的使用，以免影響視覺障礙人群的視覺搜索效率。在本實驗中，僅使用去色的負極性圖標作為實驗材料，使用其他視覺特征的線性圖標可能會獲得不同的實驗結(jié)果；在今后的研究中，將從腦神經(jīng)機制上出發(fā)，以更貼近人類認知本源的視角尋找支持本文結(jié)論的科學(xué)依據(jù)，研究線性圖標的視覺特征與腦認知神經(jīng)機制間的映射關(guān)系及定量分析模型，進而基于線性圖標的亮度對比度和線寬研究其視覺要素的編碼方式。