基于視覺行為的手機(jī)新聞App圖文布局設(shè)計(jì)研究

劉　婷,侯文軍,2

(1.北京郵電大學(xué) 數(shù)字媒體與設(shè)計(jì)藝術(shù)學(xué)院，北京　100876;2.北京郵電大學(xué) 網(wǎng)絡(luò)系統(tǒng)與網(wǎng)絡(luò)文化北京市重點(diǎn)實(shí)驗(yàn)室，北京　100876)

?

基于視覺行為的手機(jī)新聞App圖文布局設(shè)計(jì)研究

劉婷1,侯文軍1,2

(1.北京郵電大學(xué) 數(shù)字媒體與設(shè)計(jì)藝術(shù)學(xué)院，北京100876;2.北京郵電大學(xué) 網(wǎng)絡(luò)系統(tǒng)與網(wǎng)絡(luò)文化北京市重點(diǎn)實(shí)驗(yàn)室，北京100876)

摘要:通過實(shí)例總結(jié)出手機(jī)新聞App的三種基礎(chǔ)圖文布局結(jié)構(gòu)，即左圖右文式、左文右圖式和上文下圖式布局。以圖文布局結(jié)構(gòu)的客觀評(píng)價(jià)為目的，從視覺搜索和視覺瀏覽規(guī)律的角度，分析了手機(jī)新聞App圖文布局結(jié)構(gòu)對(duì)用戶閱讀效率的影響。運(yùn)用眼動(dòng)儀對(duì)三種圖文布局方案進(jìn)行了實(shí)驗(yàn)評(píng)價(jià)與分析。通過注視軌跡、注視熱點(diǎn)、注視點(diǎn)數(shù)量和搜索時(shí)間，研究不同圖文布局方案下視覺瀏覽和視覺搜索的眼動(dòng)規(guī)律。實(shí)驗(yàn)發(fā)現(xiàn)用戶使用手機(jī)新聞App呈現(xiàn)文字導(dǎo)向型的視覺瀏覽規(guī)律，上文下圖式圖文布局的視覺搜索效率最高。研究結(jié)論可為手機(jī)新聞App圖文布局設(shè)計(jì)提供科學(xué)的參考依據(jù)。

關(guān)鍵詞:圖文布局; 眼動(dòng)追蹤; 人機(jī)交互; 用戶體驗(yàn)；手機(jī)新聞軟件

進(jìn)入移動(dòng)互聯(lián)網(wǎng)時(shí)代之后，信息爆炸呈現(xiàn)出更加碎片化的特征，新聞客戶端成為用戶獲取信息的主要來源。隨著移動(dòng)新聞應(yīng)用競(jìng)爭(zhēng)加強(qiáng)，如何吸引使用習(xí)慣改變的用戶、聚合碎片化的信息成為新的挑戰(zhàn)。而為了提高移動(dòng)新聞應(yīng)用信息的傳達(dá)效率，使用戶更加快捷、高效地從應(yīng)用獲取新聞資訊，新聞資訊的設(shè)計(jì)需要遵循用戶的視覺搜索和視覺瀏覽規(guī)律。因此，基于視覺搜索和視覺瀏覽行為特點(diǎn)探討移動(dòng)新聞應(yīng)用圖文布局結(jié)構(gòu)，將有助于在碎片化的使用時(shí)間內(nèi)向用戶提供更多有價(jià)值的新聞資訊，提升新聞?lì)悜?yīng)用的瀏覽體驗(yàn)。

一、圖文布局結(jié)構(gòu)研究分析

1. 新聞應(yīng)用圖文布局結(jié)構(gòu)提取

在對(duì)目前綜合信息類覆蓋率較高的騰訊新聞、搜狐新聞、網(wǎng)易新聞、今日頭條等新聞?lì)悜?yīng)用總結(jié)分析后，發(fā)現(xiàn)目前新聞客戶端的圖文布局有三種結(jié)構(gòu)：左圖右文式結(jié)構(gòu)、左文右圖式結(jié)構(gòu)和上文下圖式結(jié)構(gòu)。圖1所示為提取的新聞應(yīng)用三種圖文布局結(jié)構(gòu)。

2. 影響視覺行為的布局因素

用戶在手機(jī)新聞應(yīng)用的視覺行為主要有2種: 視覺搜索和視覺瀏覽[1-2]。視覺搜索是指用戶有明確的搜索目標(biāo)、有目的的在界面上搜索信息的行為; 視覺瀏覽是指用戶沒有明確的搜索目標(biāo)、自由地查看信息的行為。頁面布局可以在多個(gè)維度對(duì)視覺行為產(chǎn)生影響。

(1) 圖文元素物理特性

在手機(jī)新聞應(yīng)用中，用戶面對(duì)的是圖片和文字組合形成的頁面。在人形成感知的過程中，圖形比文字更加容易引起人們的注意，激發(fā)用戶的興趣。圖形作為一種視覺語言，能夠迅速地傳達(dá)信息、豐富界面效果。但在以電腦屏幕作為終端的網(wǎng)絡(luò)傳播中，受眾的閱讀習(xí)慣有所不同，波伊特研究所和斯坦福大學(xué)聯(lián)合研究發(fā)現(xiàn)，電腦屏幕條件下的網(wǎng)絡(luò)新聞讀者打開網(wǎng)頁后首先看的是文字，而不是圖像。那么在移動(dòng)手機(jī)屏幕中，受眾的閱讀習(xí)慣是否還同樣遵循此規(guī)律，這是一個(gè)值得深入研究的課題。

(2) 信息密度因素

在頁面設(shè)計(jì)中，密度通常指由給定區(qū)域內(nèi)的項(xiàng)目數(shù)目與此區(qū)域面積的比值。Melissa et al[3]的研究發(fā)現(xiàn)網(wǎng)頁的密集程度會(huì)影響任務(wù)的復(fù)雜度,從而影響被試進(jìn)行視覺搜索的效率。三種布局方式中，上文下圖式布局的信息密度小于圖文左右式布局，由此推斷上文下圖式由于其低信息密度會(huì)減輕視覺搜索負(fù)擔(dān)，因而會(huì)提高視覺搜索效率。

(3) 搜索目標(biāo)位置因素

由于頁面結(jié)構(gòu)的原因，用戶的視覺搜索軌跡特征也會(huì)隨著頁面的不同布局而有所不同[4]。正常情況下，人類的閱讀習(xí)慣是從左到右，從上往下。Jakob Nielsen在實(shí)驗(yàn)研究中發(fā)現(xiàn)，用戶瀏覽網(wǎng)站時(shí)視線掃描規(guī)律在不同的站點(diǎn)和任務(wù)中保持很高的一致性，總體看來都像字母“F”。但這一結(jié)論受網(wǎng)站整體目錄結(jié)構(gòu)、功能區(qū)域、用戶使用經(jīng)驗(yàn)的影響[5]。那么在移動(dòng)小屏幕終端的新聞應(yīng)用中，用戶視覺瀏覽規(guī)律是否仍遵循“F”型瀏覽規(guī)律，將在實(shí)驗(yàn)中進(jìn)行研究。

(4) 其他因素

除上述因素外，對(duì)視覺有刺激屬性的相關(guān)元素也會(huì)影響視覺搜索效率。宮殿坤等[6]的研究發(fā)現(xiàn),字體特征也會(huì)對(duì)被試視覺搜索的反應(yīng)時(shí)產(chǎn)生影響。White et al[7]發(fā)現(xiàn)，文本的字號(hào)、首字母的樣式會(huì)影響被試視覺搜索的效率。還有學(xué)者發(fā)現(xiàn)人們?cè)诓煌魃木W(wǎng)頁進(jìn)行視覺搜索時(shí)的效率有顯著差異[8]。

二、視覺搜索相關(guān)眼動(dòng)研究分析

新聞傳播活動(dòng)很大程度上就是視覺信息的刺激與反應(yīng)過程，傳播效果在很大程度上可以通過人們的視覺活動(dòng)來加以衡量和檢驗(yàn)[9]。眼動(dòng)追蹤技術(shù)對(duì)界面元素、界面布局等的評(píng)價(jià)工作有較強(qiáng)的實(shí)用性,可以提供客觀的、可以相互比較的、量化的度量標(biāo)準(zhǔn)。在新聞傳播領(lǐng)域，眼動(dòng)儀的實(shí)驗(yàn)及數(shù)據(jù)可以為提高新聞傳播領(lǐng)域的針對(duì)性提供更為科學(xué)的依據(jù)與指導(dǎo)。

國內(nèi)外已有很多眼動(dòng)儀在新聞傳播領(lǐng)域應(yīng)用的相關(guān)研究，在報(bào)紙版面設(shè)計(jì)、網(wǎng)頁瀏覽視覺模式、廣告?zhèn)鞑バЧI(lǐng)域均有相對(duì)成熟的研究成果。如美國的Bojko et al[10]利用眼動(dòng)儀，對(duì)網(wǎng)站頁面設(shè)計(jì)進(jìn)行比較性研究。波伊特研究所等對(duì)報(bào)紙讀者的的閱讀行為展開實(shí)驗(yàn)，研究報(bào)紙閱讀時(shí)的視覺瀏覽規(guī)律。胡鳳培等[11]發(fā)現(xiàn)計(jì)算機(jī)視覺界面有無項(xiàng)目位置信息提示條件下，視覺搜索呈現(xiàn)導(dǎo)向式和序列式兩種不同的搜索策略。

在整體頁面的布局設(shè)計(jì)方面，也有一些相關(guān)研究成果。如石金富等[12]在對(duì)網(wǎng)頁視覺搜索的實(shí)驗(yàn)研究中證實(shí)，網(wǎng)頁不同布局和頁面區(qū)域?qū)σ曈X搜索的影響非常顯著。王海燕等[13]運(yùn)用眼動(dòng)儀對(duì)戰(zhàn)斗機(jī)顯示界面的布局設(shè)計(jì)方案進(jìn)行了實(shí)驗(yàn)評(píng)價(jià)與分析。秦源等[14]運(yùn)用眼動(dòng)儀采用量化的方式衡量三種手機(jī)典型界面結(jié)構(gòu)的視覺瀏覽差異，探討瀏覽手機(jī)屏幕的視覺規(guī)律從而指導(dǎo)設(shè)計(jì)實(shí)踐。但上述這些研究，是在特定產(chǎn)品中所進(jìn)行的實(shí)驗(yàn)，其結(jié)果不能推及所有功能產(chǎn)品應(yīng)用。

由于手機(jī)的運(yùn)行平臺(tái)不同于計(jì)算機(jī)，按本次實(shí)驗(yàn)的程序設(shè)計(jì)，在目前的條件下，無法直接對(duì)手機(jī)界面進(jìn)行評(píng)估。但是目前有研究表明：通過用戶績效測(cè)試的方式用計(jì)算機(jī)模擬的手機(jī)原型界面進(jìn)行可用性評(píng)估是有效的[15]。

三、實(shí)驗(yàn)研究

1. 實(shí)驗(yàn)裝置、被試和實(shí)驗(yàn)任務(wù)

眼動(dòng)儀1臺(tái)。為了避免導(dǎo)航框架結(jié)構(gòu)的影響，針對(duì)某新聞的布局方式進(jìn)行調(diào)整，選取18個(gè)手機(jī)新聞客戶端界面作為實(shí)驗(yàn)材料，每種圖文布局結(jié)構(gòu)選取6個(gè)界面。使用Experiment Center、BeGaze軟件記錄和分析實(shí)驗(yàn)數(shù)據(jù)。實(shí)驗(yàn)時(shí)，被試的視線與顯示器中心齊平，距離為60cm。

實(shí)驗(yàn)被試為大學(xué)生17名(男生12名，女生5名)，所有被試無行為缺陷，且都有新聞客戶端使用經(jīng)驗(yàn)。實(shí)驗(yàn)中要求被試首先自由瀏覽18張界面6s，作為對(duì)照組數(shù)據(jù)。然后在被要求完成視覺搜索任務(wù)的前提下，依次瀏覽同樣18張界面，任務(wù)要求被試在手機(jī)界面中進(jìn)行目標(biāo)搜索，搜索目標(biāo)項(xiàng)均為界面前三條新聞信息內(nèi)包含的詞語。

2. 實(shí)驗(yàn)方法及設(shè)計(jì)

對(duì)于圖文布局結(jié)構(gòu)評(píng)估，眼動(dòng)追蹤技術(shù)的主要參數(shù)有注視次數(shù)、注釋持續(xù)時(shí)間、注視點(diǎn)序列、注視路徑長度、注釋/跳動(dòng)比、第一次到達(dá)目標(biāo)區(qū)域區(qū)的時(shí)間等[16]。

本實(shí)驗(yàn)的自變量是圖文位置，測(cè)量指標(biāo)有五項(xiàng)：注視點(diǎn)數(shù)目N、注視點(diǎn)序列、注視熱點(diǎn)、任務(wù)搜索時(shí)間T、興趣區(qū)域。實(shí)驗(yàn)通過對(duì)以上評(píng)價(jià)指標(biāo)分析，以期了解圖文布局是如何影響視覺搜索效率及視覺瀏覽規(guī)律的。

3. 實(shí)驗(yàn)程序

(1) 測(cè)試人員為被試講解測(cè)試流程，當(dāng)被試正確理解操作后開始實(shí)驗(yàn)；

(2) 運(yùn)行程序，連接眼動(dòng)儀，進(jìn)行眼動(dòng)校準(zhǔn)；

(3) 依次為被試播放手機(jī)應(yīng)用的18張界面圖片，每張圖片瀏覽6 000ms，每張圖片刺激中間間隔2 000ms，計(jì)算機(jī)自動(dòng)記錄自由瀏覽眼動(dòng)數(shù)據(jù)作為實(shí)驗(yàn)對(duì)照組數(shù)據(jù)；

(4) 在展現(xiàn)界面前顯示任務(wù)詞語，要求被試在新聞界面的標(biāo)題中尋找目標(biāo)詞語，完成視覺搜索任務(wù)后點(diǎn)擊目標(biāo)項(xiàng)所在區(qū)域，切換至下一張任務(wù)詞語提示界面，同時(shí)計(jì)算機(jī)自動(dòng)記錄完成眼動(dòng)搜索任務(wù)的時(shí)間數(shù)據(jù)。

(5) 重復(fù)步驟(4)依次完成18張界面中的詞語視覺搜索任務(wù)。

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

1. 注視點(diǎn)序列分析

圖2所示為對(duì)照組自由瀏覽注視點(diǎn)序列的測(cè)試部分結(jié)果，按照視點(diǎn)上的數(shù)字追蹤測(cè)試人員的視覺軌跡。通過總結(jié)17名測(cè)試人員的注視點(diǎn)序列圖發(fā)現(xiàn)，上文下圖的布局方式更契合“Z”字形的視覺路徑，這與Norman提出的人的視覺邏輯完全一致。左圖右文布局方式中，被測(cè)注視點(diǎn)在呈現(xiàn)“圖片-文字-圖片”的序列交叉排列的現(xiàn)象，這會(huì)造成大腦認(rèn)知在“文字解析”與“圖片解析”間頻繁切換。而左文右圖的布局中被測(cè)注視點(diǎn)序列則集中在文字區(qū)域，且呈現(xiàn)“Z”字形視覺路徑。

2. 熱點(diǎn)測(cè)視圖分析

對(duì)對(duì)照組自由瀏覽行為進(jìn)行熱點(diǎn)圖觀察，可以發(fā)現(xiàn)被測(cè)在觀察界面時(shí)，熱點(diǎn)分布區(qū)域與圖文布局結(jié)構(gòu)有關(guān)，同時(shí)注視熱點(diǎn)分布已不再遵循F型瀏覽規(guī)律。視線集中分布在標(biāo)題文字區(qū)域位置上,圖3中列舉的是三種圖文布局結(jié)構(gòu)的熱點(diǎn)分布圖(注視時(shí)間長的區(qū)域中的熱點(diǎn)顏色呈現(xiàn)紅色)。

3. 任務(wù)搜索時(shí)間分析

在視覺搜索任務(wù)實(shí)驗(yàn)得到被測(cè)在三種圖文布局方案中完成任務(wù)的平均搜索時(shí)間和標(biāo)準(zhǔn)差，對(duì)三種方案完成任務(wù)時(shí)間進(jìn)行單因素方差分析，如表1所示。原假設(shè)為不同圖文布局結(jié)構(gòu)對(duì)信息搜索時(shí)間沒有產(chǎn)生顯著影響。從表2中的分析結(jié)果可以看出，概率P值為0.0447(P<0.05),拒絕原假設(shè)，即不同布局對(duì)搜索時(shí)間產(chǎn)生顯著影響。

表1　搜索時(shí)間的單因素方差分析

4. 興趣區(qū)域注視點(diǎn)數(shù)分析

在對(duì)自由瀏覽行為的對(duì)照組實(shí)驗(yàn)結(jié)果的分析中,按實(shí)驗(yàn)任務(wù)劃分圖片興趣區(qū)和文字興趣區(qū)兩種區(qū)域，通過KPI顯示每個(gè)興趣區(qū)中被試注視點(diǎn)數(shù)，并通過EXCEL數(shù)據(jù)統(tǒng)計(jì)模塊進(jìn)行統(tǒng)計(jì)分析。

表2　注視點(diǎn)數(shù)分配比率成對(duì)樣本檢驗(yàn)

通過成對(duì)樣本檢驗(yàn)，如表3所示得出不同位置的文字區(qū)域內(nèi)的注視點(diǎn)個(gè)數(shù)具有顯著差異，左文右圖布局中文字區(qū)域內(nèi)的注視點(diǎn)個(gè)數(shù)顯著多于左圖右文布局中文字區(qū)域內(nèi)的注視點(diǎn)個(gè)數(shù)。不同位置的圖片區(qū)域內(nèi)的注視點(diǎn)個(gè)數(shù)具有顯著差異，左圖右文布局中圖片區(qū)域內(nèi)的注視點(diǎn)個(gè)數(shù)顯著多于左文右圖布局中文字區(qū)域內(nèi)的注視點(diǎn)個(gè)數(shù)。這說明左右位置不同對(duì)注視點(diǎn)數(shù)量產(chǎn)生顯著影響。

表3　注視點(diǎn)個(gè)數(shù)t-檢驗(yàn)

5. 興趣區(qū)域注視點(diǎn)序列分析

通過圖4分析實(shí)驗(yàn)對(duì)照組自由瀏覽數(shù)據(jù)，被試在無視覺搜索任務(wù)自由瀏覽時(shí)的三種圖文布局AOI區(qū)域注視點(diǎn)序列時(shí)間統(tǒng)計(jì)表，可以發(fā)現(xiàn)左圖右文布局與左文右圖布局中用戶的首視點(diǎn)集中在文字區(qū)域，部分用戶自始至終未曾關(guān)注過圖片區(qū)域。而上文下圖布局方式中，用戶的首視點(diǎn)多集中在第一條新聞的圖片區(qū)域。說明不同的圖文布局方式對(duì)用戶的首視點(diǎn)有影響。

五、結(jié)束語

通過實(shí)例提取了移動(dòng)新聞應(yīng)用三種圖文布局結(jié)構(gòu)，通過眼動(dòng)實(shí)驗(yàn)，分析用戶在不同圖文布局結(jié)構(gòu)頁面中的眼動(dòng)瀏覽與眼動(dòng)搜索規(guī)律，實(shí)驗(yàn)發(fā)現(xiàn)了用戶在不同圖文布局下的視覺瀏覽習(xí)慣差異。

綜合新聞App圖文布局的眼動(dòng)實(shí)驗(yàn)，可得出不同圖文布局對(duì)用戶的視覺瀏覽與視覺搜索行為產(chǎn)生顯著影響，結(jié)果如表4所示。

表4　圖文布局對(duì)用戶視覺行為的影響

基于實(shí)驗(yàn)結(jié)果，針對(duì)移動(dòng)新聞圖文布局提出以下幾點(diǎn)建議。

(1)強(qiáng)調(diào)短時(shí)間內(nèi)提供給用戶更多信息的熱點(diǎn)新聞或時(shí)效性強(qiáng)的新聞，宜采用左文右圖的布局方式，如圖5(a)所示。用戶在內(nèi)容型頻道內(nèi)閱讀采用的是文字導(dǎo)向性的視覺瀏覽方式。左文右圖布局有助于提高用戶的閱讀效率，同時(shí)手指的滑動(dòng)操作也不會(huì)對(duì)文字內(nèi)容造成遮擋。

(2)對(duì)于圖片內(nèi)容類的新聞，可通過在左文右圖的主要布局內(nèi)穿插一些左圖右文的圖片內(nèi)容類新聞，如圖5(b)所示。通過圖片打斷用戶在左部文字區(qū)域內(nèi)的視覺流，提高對(duì)本條新聞內(nèi)容的關(guān)注度。

(3)在傍晚到夜間內(nèi)，用戶時(shí)間比較充?？缮疃乳喿x長文，易穿插一些上文下圖的布局結(jié)構(gòu)的新聞，如圖5(c)所示。通過采用對(duì)比度高的圖片吸引用戶點(diǎn)擊，提高頁面的點(diǎn)擊率與轉(zhuǎn)化率。

此外，對(duì)本實(shí)驗(yàn)中存在的問題做出了如下思考：測(cè)試過程的實(shí)驗(yàn)材料中每條新聞標(biāo)題的字?jǐn)?shù)控制得不夠嚴(yán)格，可能會(huì)對(duì)實(shí)驗(yàn)結(jié)果產(chǎn)生影響。被測(cè)人員是以簡(jiǎn)單的電腦屏幕模擬任務(wù)，而不是在移動(dòng)應(yīng)用復(fù)雜多變的使用環(huán)境中進(jìn)行，這也會(huì)對(duì)實(shí)驗(yàn)結(jié)果產(chǎn)生影響。

對(duì)移動(dòng)新聞應(yīng)用界面的三種圖文布局的眼動(dòng)規(guī)律結(jié)果，可為產(chǎn)品設(shè)計(jì)師設(shè)計(jì)手機(jī)新聞資訊類應(yīng)用提供理論依據(jù)，根據(jù)不同的需求選擇不同的圖文布局形式。此研究結(jié)論對(duì)提高新聞資訊傳播的針對(duì)性與轉(zhuǎn)化率有一定的實(shí)用價(jià)值。

參考文獻(xiàn):

[1] 栗覓, 鐘寧, 呂勝富. Web頁面視覺搜索與瀏覽策略的眼動(dòng)研究[J]. 北京工業(yè)大學(xué)學(xué)報(bào), 2011, 37(5): 773-779.

[2] 栗覓, 盧萬譞, 呂勝富, 等. 網(wǎng)頁信息過載時(shí)視覺搜索策略與信息加工方式的眼動(dòng)研究[J]. 北京工業(yè)大學(xué)學(xué)報(bào), 2012, 38(3): 390-395.

[3] Melissa R B, Maura C L. Measuring search efficiency in complex visual serch tasks: global and local clutter[J]. Journal of experimental psychology, 2010, 16(3): 238-250.

[4] 劉珊珊. 關(guān)于網(wǎng)站頁面布局的最新方法研究[J]. 信息與電腦(理論版), 2011(2): 77.

[5] Habuchi Y, Takeuchi H, Kitajima M. Web browsing experience and viewpoint: an eye-tracking study[Z]. Japan: AIST, 2010. http: //csjarchive.cogsci.rpi.edu/proceedings/2006/iccs/p101.pdf.

[6] 宮殿坤, 郝春東, 王殿春. 字體特征與搜索方式對(duì)視覺搜索反應(yīng)時(shí)的影響[J]. 心理科學(xué), 2009, 32 (5): 1142-1145.

[7] White S J, Johnson R L. Eye movements when reading transposed text: the importance of word-beginning letters[J]. Journal of experimental psychology: human perception and performance, 2008, 34(5): 1261-1276.

[8] 黃錦標(biāo), 林善鳳. 網(wǎng)頁主體色對(duì)大學(xué)生視覺搜索影響的眼動(dòng)研究[J]. 企業(yè)家天地(理論版), 2010(5): 255-256.

[9] 彭蘭. 眼動(dòng)研究方法在新聞傳播領(lǐng)域的應(yīng)用[J]. 廣播電視傳播研究, 2010(12): 97-104.

[10] Bojko A. Using eye tracking to compare web page[J]. Journal of Usability Studies, 2006. 1(3): 112-120.

[11] 胡鳳培, 蔡雷厲, 柴黎林, 等. 頁面布局中項(xiàng)目位置信息提示的視覺搜索策略研究[J], 心理科學(xué), 2010, 33 (6): 1512-I515.

[12] 石金富, 曹曉華, 王鋼, 等. 網(wǎng)頁布局對(duì)視覺搜索影響的眼動(dòng)研究[J]. 人類工效學(xué), 2008, 14(4): 1-3.

[13] 王海燕, 卞婷, 薛澄岐. 基于眼動(dòng)跟蹤的戰(zhàn)斗機(jī)顯示界面布局的實(shí)驗(yàn)評(píng)估[J]. 電子機(jī)械工程, 2011, 27(6): 50-53.

[14] 秦源, 侯文軍. 基于眼動(dòng)瀏覽規(guī)律的手機(jī)典型界面結(jié)構(gòu)研究[J]. 北京郵電大學(xué)學(xué)報(bào)(社會(huì)科學(xué)版), 2014, 16(1): 25-30.

[15] 戴均開, 葛列眾. 手機(jī)原型界面的可用性評(píng)估[J]. 人類工效學(xué), 2007, 13(2): 13-15.

[16] Coldberg J H, Kotval X P. Computer interface evaluation using eye movements: methods and constructs[J]. International Journal of Industrial Ergonomics, 1999, 24(6): 631-645.

Graphic Layout Design Study of Mobile News APP Based on Visual Behavior

LIU Ting1，HOU Wen-jun1,2

(1. School of Digital Media and Design Arts, Beijing University of Posts and Telecommunications,Beijing 100876, China; 2. Beijing Key Laboratory of Network and Network Culture, Beijing University of Posts and Telecommunications, Beijing 100876, China)

Abstract:By investigating, three basic graphic layout structures of mobile news App are summarized, namely the picture left and text right type, the text left and picture right type and the text above and picture below type. For evaluating the graphic layout structure objectively, factors that influence the efficiency of news reading are analyzed from the perspective of visual search rules and visual browsing rules. The there kinds of graphic layout schemes were empirically studied by using the eye-tracker. Through watching track, hot spots, the number of watching points and search time, the rules of visual browsing and visual search in different schemes are discussed. Results show that users present the text-oriented visual browsing rule; the text above and picture below type has the highest visual search efficiency. The conclusions provide scientific basis for the graphic layout design of mobile news App.

Key words:graphic layout; eye tracking; human-computer interaction; user experience; mobile News software

收稿日期：2016- 03 - 07

基金項(xiàng)目：高等學(xué)校博士學(xué)科點(diǎn)專項(xiàng)科研基金項(xiàng)目(20110005110016)

作者簡(jiǎn)介：劉婷(1992—)，女，河北滄州人，北京郵電大學(xué)數(shù)字媒體與設(shè)計(jì)藝術(shù)學(xué)院2014級(jí)研究生，主要研究方向?yàn)槿藱C(jī)交互與數(shù)字媒體服務(wù)設(shè)計(jì)。

中圖分類號(hào):G210.7；G213；TP317

文獻(xiàn)標(biāo)識(shí)碼:A

文章編號(hào):1008-7729(2016)03- 0006- 08