姚 君，郭益誠

（中國礦業(yè)大學(xué)，江蘇 徐州 221116）

1 研究背景及現(xiàn)狀

地圖導(dǎo)航類APP為了滿足用戶日益增加的需求，出現(xiàn)了大量優(yōu)秀的界面設(shè)計，雖然這些設(shè)計給予用戶良好的體驗，但是這些作品大多是根據(jù)設(shè)計師自身設(shè)計經(jīng)驗得到的，沒有定量的數(shù)據(jù)支撐設(shè)計過程中用到的設(shè)計方法[1]。

在交互和界面設(shè)計中大量運用了具有透明度特征的設(shè)計元素，如半透明圖標(biāo)、半透明黑色蒙版等[2]，經(jīng)過大量文獻(xiàn)查閱，發(fā)現(xiàn)目前幾乎沒有對具有半透明特征的設(shè)計元素進(jìn)行的相關(guān)研究[3]，尤其是對黑色半透明蒙版的透明度閾限的研究。

2 研究意義

黑色半透明蒙版主要應(yīng)用于用戶使用該軟件時的使用引導(dǎo)、強(qiáng)弱彈窗提醒、廣告推送等使用情景中，在移動手機(jī)APP設(shè)計中被廣泛應(yīng)用[4]。半透明黑色蒙版能夠遮擋背景信息，減弱背景信息對主體內(nèi)容的視覺干擾，將用戶的視覺焦點轉(zhuǎn)移到新的主體內(nèi)容上[5]，在傳遞信息暗示主題的同時，能夠讓用戶了解他們所處的環(huán)境，被廣泛的應(yīng)用于界面交互設(shè)計中[6]。

地圖導(dǎo)航類APP多在復(fù)雜多變的駕駛環(huán)境中使用，駕駛者消耗最多的認(rèn)知資源的是視覺認(rèn)知[7]。半透明黑色蒙版的合理應(yīng)用影響著用戶的視覺認(rèn)知與 （人機(jī)交互的流暢度），合理的半透明黑色蒙版的應(yīng)用可以提高用戶的認(rèn)知效率，減少誤操作，提高用戶在使用導(dǎo)航類用戶體驗。所以對地圖導(dǎo)航類APP界面的黑色半透明蒙版的閾限研究是很有必要的。

3 研究方法

3.1 實驗過程

使用眼動儀記錄用戶與車載信息系統(tǒng)交互時的眼動軌跡，通過分析眼動軌跡來判斷用戶對界面元素的注意順序、注意程度以及所關(guān)注的區(qū)域等，得到半透明黑色蒙版的閾限下限，結(jié)合系統(tǒng)可用性量表分析用戶對車在信息系統(tǒng)中半透明黑色蒙版界面的使用體驗，進(jìn)而得出車載信息娛樂終端半透明黑色蒙版的可用性閾限的上限，結(jié)合黑色半透明蒙版的上限與下限，最終得出半透明黑色蒙版的閾限。

實驗材料包括：使用ADOBE PHOTOSHOP CC與AXURE軟件制作（半透明黑色蒙版透明度分別為0、10%、20%、30%、40%、50%、60%、70%、80%、90%、100%）11 個原型界面（見圖1），所有界面尺寸的大小均為7英寸，分辨率為800×480。用戶在執(zhí)行操作任務(wù)時，流程中各個界面相同，半透明黑色蒙版突出的主題內(nèi)容一致。通過界面原型在觸屏平板電腦上模擬用戶與車載信息娛樂系統(tǒng)的交互場景。實驗采用SMI iView XTM HED頭盔式眼動儀，采樣率為200Hz，利用BeGaze 3.2軟件進(jìn)行數(shù)據(jù)分析。

圖1 界面Fig.1 Display interface

3.2 實驗設(shè)計

實驗采用被試間設(shè)計，自變量為半透明黑色蒙版的透明度，（以10%梯度為梯度設(shè)置），將“疲勞駕駛提醒——確認(rèn)閱讀”設(shè)置為用戶任務(wù)執(zhí)行流程，在該流程中半透明黑色蒙版的透明度保持不變。

本研究以在校本科生和研究生共68人作為實驗對象，平均年齡為22.6歲，其中男性36人，女性32人。所有測試對象的裸眼視力或矯正視力正常，且都未使用過車載信息系統(tǒng)的收音機(jī)和多媒體功能，隨機(jī)將其分為11組，分別對應(yīng)實驗所用到的11個原型。

3.3 系統(tǒng)可用性量表

系統(tǒng)可用性量表是對系統(tǒng)的可用性、有效性等進(jìn)行評估的常用自我報告度量之一，是最具有代表性的量表，通過該量表可以對系統(tǒng)的可用性進(jìn)行詳細(xì)地分析和度量[8]。系統(tǒng)可用性量表由 John Brooke編制，可用性量表由10個陳述句構(gòu)成，其中第一、三、五、七、九句為正向表達(dá)，第二、四、六、八、十句為反向表達(dá)，具體內(nèi)容如下：①我愿意經(jīng)常使用這個系統(tǒng)；②我發(fā)現(xiàn)這個系統(tǒng)沒必要這么復(fù)雜；③我認(rèn)為該系統(tǒng)容易使用；④我需要技術(shù)人員的支持才能使用該系統(tǒng)；⑤我發(fā)現(xiàn)這個系統(tǒng)中的不同功能被很好地整合在一起；⑥我認(rèn)為這個系統(tǒng)不太一致；⑦我認(rèn)為大部分人會很快學(xué)會使用這個系統(tǒng)；⑧我發(fā)現(xiàn)這個系統(tǒng)用起來非常笨拙；⑨我對這個系統(tǒng)感到很自信；⑩我在使用該系統(tǒng)前需要學(xué)習(xí)很多東西。

用戶在使用過地圖導(dǎo)航界面以后，根據(jù)自己的體驗感受對上述十項陳述語句的同意程度用五點量表的形式進(jìn)行打分，研究人員對10項評分進(jìn)行匯總即可得到系統(tǒng)可用性量表的分?jǐn)?shù)，該分?jǐn)?shù)位于 0～100之間，評分在 60分以上的系統(tǒng)一般被認(rèn)為是用戶體驗較好的產(chǎn)品。

4 結(jié)果與討論

4.1 系統(tǒng)可用性量表分?jǐn)?shù)分析

系統(tǒng)可用性量表分?jǐn)?shù)的統(tǒng)計結(jié)果見表1，通過觀察車載信息娛樂系統(tǒng)的操作界面的透明度計算后得出的P值可以發(fā)現(xiàn)，用戶在使用11個界面時所感受到的系統(tǒng)可用性差別較大。當(dāng)黑色蒙版的透明度達(dá)到60%時，用戶對系統(tǒng)的可用性評價最高，即黑色蒙版透明的上限應(yīng)為60%的透明度。

表1 系統(tǒng)可用性量表的平均值（標(biāo)準(zhǔn)差）Tab.1 Means（standard deviations）of SUS

4.2 熱點圖分析

對熱點圖的分析可以從客觀的角度了解用戶對界面關(guān)注的區(qū)域，本研究的熱點圖見圖2?？梢园l(fā)現(xiàn)，在車載信息系統(tǒng)的疲勞駕駛提醒界面中，如圖2（a）～（k），如圖2（a）中熱點比較分散，說明界面中提供的信息量比較多，用戶的注意力被分散，不能很快的篩選出重要信息；圖2（k）中熱點集中在彈框上，說明用戶能夠很直接的捕捉到重要信息。

分析圖2（a）～（k）圖這 11 張熱力圖，可以明顯的看出當(dāng)黑色半透明蒙版的透明度在40%時，用戶的注意力主要集中在，中心彈窗的重要信息上。所以我們可以得出地圖導(dǎo)航類APP黑色半透明蒙版透明度閾限的下限值為40%。

圖2（a）～（k），隨著黑色蒙版透明度的降低，用戶的視覺注意力越來越集中，用戶找到重要信息的速度也越來越快，但是隨著透明度的降低，用戶感知自己所在系統(tǒng)導(dǎo)航位置的能力不斷下降，造成不好的用戶體驗。為了使用戶快速找到重要信息的同時，保證良好的用戶體驗，必須將系統(tǒng)可用性量表與熱力圖結(jié)合起來進(jìn)行分析。

5 結(jié)論

我們結(jié)合系統(tǒng)可用性量表的數(shù)據(jù)及熱力圖分析可以得到以下結(jié)論。在排除主體內(nèi)容與背景對用戶視覺影響的情況下，地圖導(dǎo)航類APP的半透明黑色蒙版透明度閾限為40%～60%。在該閾限范圍內(nèi)可以讓用戶將視覺注意力集中在主題內(nèi)容的同時，讓用戶了解自身所處的環(huán)境，給予用戶良好的體驗。

本研究基于眼動追蹤技術(shù)，構(gòu)建了地圖導(dǎo)航類APP界面設(shè)計的原型測試實驗，通過對系統(tǒng)可用性量表分?jǐn)?shù)、掃描路徑、熱點圖等實驗結(jié)果的深入分析，得出了地圖導(dǎo)航類APP半透明黑色蒙版透明度閾限，對地圖導(dǎo)航類APP黑色半透明蒙版的應(yīng)用與界面設(shè)計具有重要的指導(dǎo)意義。

[1]譚浩，趙丹華，趙江洪.面向復(fù)雜交互情境的汽車人機(jī)界面設(shè)計研究[J].包裝工程，2012，18.

[2]CAI H，LIN Y，CHENG B.Coordinating Multi-level CognitiveAssistance and Incorporating Dynamic Confidence Informationin Drivervehicle Interfaces[J].Human Factors and Ergonom-ics in Manufacturing&Service Industries，2012，22（5）：437-449.

[3]蔡明琬.增強(qiáng)認(rèn)知效率的音樂情感縮略圖研究[D].杭州：浙江大學(xué)，2011.

[4]MITSOPOULOS R E，TROTTER M J，LENN M G.Effects onDriving Performance of Interacting with an In-Vehicle MusicPlayer：a Comparison of Three Interface Layout Concepts forInformation Presentation[J].Applied Ergonomics，2011，42（4）：583-591.

[5]LAVIE T，ORON G T，MEYER J.Aesthetics and Usability of In-Vehicle Navigation Displays[J].International Journal of Hu-man-Computer Studies，2011，69（1-2）：80-99.

[6]劉青，薛澄岐，F(xiàn)ALK H.基于眼動跟蹤技術(shù)的界面可用性評估[J].東南大學(xué)學(xué)報（自然科學(xué)版），2010，2.

[7]朱婧茜，何人可.Android手機(jī)應(yīng)用界面布局的可用性測試研究[J].包裝工程，2014，10.

[8]閔慶飛，李雙明.基于可用性的移動商務(wù)系統(tǒng)采納研究框架[J].計算機(jī)應(yīng)用研究，2009，5.