地圖導(dǎo)航類APP半透明黑色蒙版的透明度閾限研究

姚 君，郭益誠

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

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

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

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

2 研究意義

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

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

3 研究方法

3.1 實(shí)驗(yàn)過程

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

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

圖1 界面Fig.1 Display interface

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

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

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

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

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

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

4 結(jié)果與討論

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

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

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

4.2 熱點(diǎn)圖分析

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

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

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

5 結(jié)論

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

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

[1]譚浩，趙丹華，趙江洪.面向復(fù)雜交互情境的汽車人機(jī)界面設(shè)計(jì)研究[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.基于眼動(dòng)跟蹤技術(shù)的界面可用性評(píng)估[J].東南大學(xué)學(xué)報(bào)（自然科學(xué)版），2010，2.

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

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