眼動(dòng)技術(shù)在用戶界面設(shè)計(jì)中的運(yùn)用

龐小敏

Pang Xiao-ming

（長(zhǎng)沙理工大學(xué)設(shè)計(jì)藝術(shù)學(xué)院，湖南長(zhǎng)沙 410114）

(School of Design and Art， Changsha University of Technology， Changsha， Hunan， 410114)

良好的用戶界面設(shè)計(jì)（User Interface，UI）應(yīng)該是好的可用性、功能性和美感的綜合體[1]。其中，視覺(jué)設(shè)計(jì)是一項(xiàng)重要內(nèi)容。好的視覺(jué)設(shè)計(jì)一方面能創(chuàng)造出美感，另一方面也能夠引領(lǐng)用戶順利完成交互過(guò)程，確保界面的可用性。視覺(jué)設(shè)計(jì)和交互設(shè)計(jì)的最終目的都是為了創(chuàng)造好的用戶體驗(yàn)，運(yùn)行良好的界面設(shè)計(jì)能夠給用戶帶來(lái)獲得信息的滿足感。

西方的眼動(dòng)研究開始于19 世紀(jì)末。中國(guó)眼動(dòng)研究則起步稍晚。在20 世紀(jì)五六十年代，中國(guó)只有幾項(xiàng)眼動(dòng)研究的報(bào)告。進(jìn)入80 年代后，中國(guó)一些大學(xué)的心理系、教育系和科研機(jī)構(gòu)陸續(xù)從國(guó)外購(gòu)進(jìn)了眼動(dòng)儀，并初步開展了一些研究工作。近10 年來(lái)，中國(guó)在眼動(dòng)研究領(lǐng)域已經(jīng)取得令人可喜的成果[2]，但仍處于起步階段，而且眼動(dòng)技術(shù)在界面設(shè)計(jì)的運(yùn)用方面存在如下幾個(gè)問(wèn)題：①眼動(dòng)研究資料不足。②存在較為明顯的眼動(dòng)專業(yè)術(shù)語(yǔ)不統(tǒng)一，以及中英文翻譯不統(tǒng)一的情況。在個(gè)別論文中，甚至出現(xiàn)生造出來(lái)的專業(yè)術(shù)語(yǔ)。③很多設(shè)計(jì)師還沒(méi)有意識(shí)到眼動(dòng)研究對(duì)視覺(jué)設(shè)計(jì)的重要性，很多人更喜歡憑感覺(jué)去解決設(shè)計(jì)上的問(wèn)題。即使有部分設(shè)計(jì)師對(duì)眼動(dòng)儀有興趣，但由于眼動(dòng)儀的運(yùn)用要求使用者掌握相關(guān)的專業(yè)知識(shí)，讓很多人望而卻步。目前，中國(guó)已經(jīng)有越來(lái)越多的設(shè)計(jì)院校和科研單位購(gòu)置了眼動(dòng)儀，但并沒(méi)有被廣泛應(yīng)用。

針對(duì)這些問(wèn)題，筆者梳理了眼動(dòng)技術(shù)與界面設(shè)計(jì)研究領(lǐng)域國(guó)內(nèi)外的相關(guān)文獻(xiàn)資料，對(duì)眼動(dòng)技術(shù)和眼動(dòng)儀的使用原理和生產(chǎn)情況進(jìn)行總結(jié)，以期為下一步眼動(dòng)技術(shù)在界面設(shè)計(jì)中的運(yùn)用研究奠定堅(jiān)實(shí)的基礎(chǔ)。

1 什么是眼動(dòng)技術(shù)

眼動(dòng)技術(shù)基于人眼睛如何看外界事物?？茖W(xué)發(fā)現(xiàn)，外界的光線通過(guò)瞳孔進(jìn)入到眼球底部的視網(wǎng)膜上成像。視網(wǎng)膜將光的刺激信號(hào)傳到大腦皮層的視覺(jué)中心，人即可感受外界事物。

視網(wǎng)膜成像的清晰程度并不一致。成像最清晰的區(qū)域?yàn)橐暰W(wǎng)膜上正對(duì)瞳孔并凹陷的位置——“中央凹”。其直徑為1.5 mm，視野范圍僅2°[3]。在“中央凹”范圍之外的視線范圍，被稱為“邊界視野”。離“中央凹”越遠(yuǎn)，視線越不清楚。也就是說(shuō)，要想看清事物，就必須將眼球的中央凹區(qū)域?qū)?zhǔn)它（即注視）。

當(dāng)代眼動(dòng)試驗(yàn)通常采用基于視頻的瞳孔/角膜反射法，即根據(jù)人瞳孔中心的位置和角膜反射關(guān)系來(lái)判斷人在看什么[4]。

在眼動(dòng)試驗(yàn)中，采用紅外線作為光源（人眼看不到，不會(huì)使人分心）對(duì)眼睛進(jìn)行照射，用可以拍攝紅外線的照相機(jī)來(lái)拍攝用戶的眼睛。紅外線光源會(huì)在角膜上產(chǎn)生反射光，人們將反射光位置（角膜反射）作為基準(zhǔn)點(diǎn)（靜止部分），瞳孔則作為動(dòng)點(diǎn)。根據(jù)瞳孔與角膜反射點(diǎn)的相對(duì)位置的變化，可以檢測(cè)出視線。

假設(shè)頭部保持不動(dòng)的話，瞳孔和角膜反射的相對(duì)位置會(huì)隨著眼球轉(zhuǎn)動(dòng)而改變。因此，可以根據(jù)瞳孔和角膜反射的相對(duì)位置的變化了解視線是怎樣轉(zhuǎn)移的。而且，即使觀察者的頭部有輕微的移動(dòng)，只要看著同一個(gè)目標(biāo)，其瞳孔和角膜反射的相對(duì)位置也不會(huì)改變[5]（圖1）。

通過(guò)眼動(dòng)試驗(yàn)，可以得到熱點(diǎn)圖、注視軌跡圖、眼動(dòng)路徑、凝視時(shí)間、注視率、掃視率、最大掃視時(shí)間、平均掃視速度、平均掃視幅度、最大掃視幅度、瞳孔最大值和瞳孔平均值等多個(gè)眼動(dòng)指標(biāo)。通過(guò)對(duì)眼動(dòng)指標(biāo)的解讀，可以推測(cè)出界面中用戶感興趣的地方，讓用戶難以理解的地方，以及用戶當(dāng)時(shí)的情緒和心理狀態(tài)等。

2 關(guān)于眼動(dòng)儀

眼動(dòng)試驗(yàn)要通過(guò)眼動(dòng)儀來(lái)完成?？茖W(xué)家真正使用眼動(dòng)儀對(duì)眼動(dòng)進(jìn)行觀察和試驗(yàn)是從中世紀(jì)開始的。但當(dāng)時(shí)的研究結(jié)果并不精確，而且使用起來(lái)十分麻煩。在當(dāng)代的用戶體驗(yàn)研究中，經(jīng)常使用的是兩種眼動(dòng)儀：遠(yuǎn)程眼動(dòng)儀和可穿戴眼動(dòng)儀。遠(yuǎn)程眼動(dòng)儀能讓參與者在較為自然的環(huán)境中參與研究，對(duì)于試驗(yàn)結(jié)果的數(shù)據(jù)分析較為簡(jiǎn)便。因此，遠(yuǎn)程眼動(dòng)儀是一般試驗(yàn)的首選眼動(dòng)儀類型。而可穿戴式眼動(dòng)儀需佩戴在參與者的頭上，常用于需要參與者四處走動(dòng)的眼動(dòng)研究中。

目前，世界范圍內(nèi)生產(chǎn)眼動(dòng)儀的廠家已經(jīng)有很多家。如中國(guó)用得較多的進(jìn)口眼動(dòng)儀出自加拿大SR 公司、瑞典Tobii 公司、德國(guó)SMI 公司和美國(guó)Arlington 公司。此外，也有很多機(jī)構(gòu)采用中國(guó)產(chǎn)品，如北京的心拓英啟（EyeSo）、上海的青研、重慶的愛威視（EYEVISION）等。

之前，眼動(dòng)儀由于其昂貴的價(jià)格一直難以普及開來(lái)。近些年，隨著制造成本的降低，以及便攜式眼動(dòng)儀的出現(xiàn)，眼動(dòng)儀逐步成為教育學(xué)和心理學(xué)研究的常規(guī)儀器，并越來(lái)越多地運(yùn)用于醫(yī)學(xué)、語(yǔ)言、人類工效學(xué)、設(shè)計(jì)等領(lǐng)域。

圖1 角膜反射為基準(zhǔn)點(diǎn)，瞳孔為動(dòng)點(diǎn)表示位置關(guān)系

3 眼動(dòng)技術(shù)在界面設(shè)計(jì)中的運(yùn)用

20 世紀(jì)90 年代，隨著萬(wàn)維網(wǎng)（WWW）的誕生和商業(yè)化浪潮，互聯(lián)網(wǎng)走向大眾，西方學(xué)者開始運(yùn)用眼動(dòng)技術(shù)進(jìn)行界面設(shè)計(jì)的研究。中國(guó)學(xué)者在2008 年前后開始這方面的研究。筆者對(duì)界面設(shè)計(jì)中受眼動(dòng)技術(shù)影響的因素進(jìn)行了梳理和總結(jié)，發(fā)現(xiàn)可以運(yùn)用眼動(dòng)技術(shù)，從以下6個(gè)角度入手進(jìn)行界面設(shè)計(jì)的研究。

3.1 眼動(dòng)技術(shù)與用戶界面的大小

界面的大小會(huì)對(duì)用戶的視覺(jué)產(chǎn)生影響，目前市場(chǎng)上屏幕的大小差別較大。如手機(jī)端常用的尺寸包括114.3、119.38、139.7、147.32、165.1mm 等，PC 端目前的主流尺寸則包括469.9、482.6、508、546.1、584.2、609.6、685.8mm 等。

通過(guò)眼動(dòng)試驗(yàn)，可以了解界面尺寸對(duì)于視覺(jué)的影響。比如同一界面布局，在不同尺寸的界面上，對(duì)某類用戶的視覺(jué)影響力有何不同。在此基礎(chǔ)上，人們可以對(duì)界面設(shè)計(jì)方法加以調(diào)整，如自適應(yīng)的設(shè)置標(biāo)準(zhǔn)等。

3.2 眼動(dòng)技術(shù)與用戶界面的布局方式

界面的布局方式同樣會(huì)對(duì)用戶體驗(yàn)產(chǎn)生影響，這也是目前眼動(dòng)技術(shù)運(yùn)用于界面設(shè)計(jì)研究中比較常見的研究?jī)?nèi)容。

在移動(dòng)端的界面中，界面的布局方式主要有：標(biāo)簽式、宮格式、列表式、側(cè)邊展開式、組合式、旋轉(zhuǎn)木馬式等。PC 端的布局則一般比較統(tǒng)一，絕大多數(shù)網(wǎng)頁(yè)都是由頂部導(dǎo)航、banner、內(nèi)容區(qū)和頁(yè)腳組成。

通過(guò)眼動(dòng)試驗(yàn)，可以得到注視時(shí)間、注視點(diǎn)數(shù)、平均掃描軌跡總長(zhǎng)度等眼動(dòng)數(shù)據(jù)，從而判斷出不同界面布局的特點(diǎn)。如注視時(shí)間和掃描軌跡短說(shuō)明該界面的易讀性較好，能讓用戶更快捷地找到目標(biāo)對(duì)象。除此之外，還可以通過(guò)眼動(dòng)試驗(yàn)掌握用戶的視覺(jué)流程，了解布局方式對(duì)視覺(jué)優(yōu)先順序的影響，以及界面內(nèi)容對(duì)布局方式的影響等。

3.3 眼動(dòng)技術(shù)與用戶界面的圖文編排

圖文編排包括界面的整體風(fēng)格、界面的色調(diào)、圖文的大小比例關(guān)系、圖形的形態(tài)、圖形的處理、文字的字體、字號(hào)大小、文字的顏色、字間距、行間距等。

通過(guò)眼動(dòng)試驗(yàn)，可以研究什么樣的圖文編排方式能將功能與審美更好地結(jié)合起來(lái)，如左文右圖和左圖右文哪種形式更恰當(dāng)；擬物風(fēng)格與扁平風(fēng)哪種風(fēng)格更合適。可以去研究icon 圖標(biāo)形態(tài)對(duì)信息的接收有什么影響。如點(diǎn)、線、面圖形形態(tài)對(duì)用戶接受信息的影響；正方形、三角形、圓形等基本幾何圖形和不規(guī)則形對(duì)用戶接受信息的影響；圓形icon 和圓角矩形icon 對(duì)用戶接受信息的影響；icon 陰影的添加、模糊化的處理、抽象化的處理方式對(duì)用戶的影響等。還可以通過(guò)眼動(dòng)試驗(yàn)去研究不同用戶群的審美偏好，如老年人為用戶主體的界面的文字字號(hào)，也可以通過(guò)眼動(dòng)結(jié)果去解讀當(dāng)前流行的色調(diào)、設(shè)計(jì)風(fēng)格存在的內(nèi)在原因等。

3.4 眼動(dòng)技術(shù)與用戶界面的交互功能

界面的交互設(shè)計(jì)，就是讓人與界面之間更好地“對(duì)話”。如果某個(gè)UI 產(chǎn)品的界面能讓你毫不費(fèi)力地完成各種任務(wù)，那么就認(rèn)為該界面的交互設(shè)計(jì)非常好。如果說(shuō)視覺(jué)的美觀設(shè)計(jì)是靠感性驅(qū)動(dòng)，那交互設(shè)計(jì)則主要是靠理性和邏輯驅(qū)動(dòng)。但交互設(shè)計(jì)中絕大部分仍然是要依靠視覺(jué)而實(shí)現(xiàn)的。界面中交互功能的可視性越好，越方便用戶使用。如：抽屜式導(dǎo)航用不用按鈕？按鈕放在哪？等待時(shí)要不要設(shè)置進(jìn)度條？搜索結(jié)果的排序怎樣影響用戶的點(diǎn)擊等。

用戶等待時(shí)間也是交互設(shè)計(jì)時(shí)要考慮的問(wèn)題，如：頁(yè)面跳轉(zhuǎn)的速度；下載的速度等。此外，還有用戶的交互手勢(shì)問(wèn)題，單擊還是雙擊，上劃還是下劃……這些問(wèn)題也都可以通過(guò)眼動(dòng)試驗(yàn)進(jìn)行研究，分析試驗(yàn)結(jié)果以得到更好的人機(jī)交互方式。

3.5 眼動(dòng)技術(shù)與用戶界面的情感體驗(yàn)

在使用界面的過(guò)程中，用戶會(huì)產(chǎn)生相應(yīng)的情感體驗(yàn)。如愉悅、輕松、煩悶、憤怒等。目前用于描述人類情感狀態(tài)的常用情緒模型是PAD 模型。其中P 代表愉悅度，代表個(gè)體情感狀態(tài)的正負(fù)特性；A 代表喚醒度，表示個(gè)體的神經(jīng)生理激活水平；D 代表優(yōu)勢(shì)度，表示個(gè)體對(duì)情景和他人的控制狀態(tài)。

通過(guò)眼動(dòng)試驗(yàn)，可以得到注視時(shí)間、眨眼率、注釋率、瞳孔最大值和瞳孔平均值等指標(biāo)的數(shù)據(jù)，通過(guò)這些指標(biāo)的結(jié)果能推導(dǎo)出用戶的愉悅度、喚醒度和優(yōu)勢(shì)度。一個(gè)好的界面設(shè)計(jì)應(yīng)該要能讓用戶感到愉悅、喚醒度高且優(yōu)勢(shì)度高?？梢岳醚蹌?dòng)試驗(yàn)去找到能提高PAD 情感的界面設(shè)計(jì)方式。比如，字體的暗色飽和度偏低，段落字間距、行距較大，會(huì)提升用戶的愉悅度和優(yōu)勢(shì)度。

3.6 眼動(dòng)技術(shù)與UI 產(chǎn)品用戶群的分類

通過(guò)眼動(dòng)技術(shù)，還可以研究怎樣針對(duì)不同的用戶群去進(jìn)行界面的設(shè)計(jì)。用戶群的分類較為多樣化。一般來(lái)說(shuō)，可以按年齡、性別、職業(yè)、收入、個(gè)性、文化層次、身體健康情況等標(biāo)準(zhǔn)來(lái)劃分不同的消費(fèi)群。如女性大學(xué)生群體、老年人群體等。不同的消費(fèi)群，在審美傾向、思維方式、行為習(xí)慣等方面都存在著差異。如老年人群體，就是需要人們特殊關(guān)照的龐大群體。近年來(lái)， 部分中國(guó)學(xué)者針對(duì)老年人群體進(jìn)行了深入的研究和實(shí)踐，提出了“適老化設(shè)計(jì)”的概念，積極提升老年人用戶群體對(duì)產(chǎn)品的滿意度[6]。此外，用戶的身體健康情況也是人們可以考慮的因素。針對(duì)殘疾人士的“可及性設(shè)計(jì)”標(biāo)準(zhǔn)盡可能地幫助障礙者掃除生活中的障礙，使障礙者的感官能力獲得提升。如美國(guó)盲人印刷公司開發(fā)的“動(dòng)態(tài)多層觸覺(jué)觸摸顯示屏”就改善了視覺(jué)障礙者對(duì)圖形信息獲取的能力[7]。

在眼動(dòng)試驗(yàn)中，可以邀請(qǐng)具有相同特性的人群作為被試者，從而測(cè)試出不同用戶群的喜好，總結(jié)出某用戶群更青睞于怎樣的版面設(shè)計(jì)和交互方式，從而進(jìn)行有針對(duì)性的界面設(shè)計(jì)。例如女性更傾向于用語(yǔ)言機(jī)制處理信息，男性傾向于用視覺(jué)感官模式處理問(wèn)題[8]。那么在為用戶主體為女性的UI 產(chǎn)品進(jìn)行界面設(shè)計(jì)時(shí)，可以適當(dāng)增加文字內(nèi)容；在為用戶主體為男性的UI 產(chǎn)品進(jìn)行界面設(shè)計(jì)時(shí)，可以適當(dāng)增加圖形部分的比例。

綜上所述，眼動(dòng)試驗(yàn)對(duì)于界面設(shè)計(jì)的研究具有重要的意義。

4 結(jié)語(yǔ)

雖然中國(guó)對(duì)眼動(dòng)技術(shù)的研究越來(lái)越重視，但總的來(lái)說(shuō)還處于初級(jí)階段，對(duì)使用眼動(dòng)儀進(jìn)行界面設(shè)計(jì)的研究還不夠深入和充分。

文章對(duì)國(guó)內(nèi)外的眼動(dòng)研究情況進(jìn)行了總結(jié)，提出中國(guó)的眼動(dòng)技術(shù)在界面設(shè)計(jì)的運(yùn)用上存在3 大問(wèn)題. 并介紹了眼動(dòng)技術(shù)，總結(jié)了國(guó)內(nèi)外眼動(dòng)儀的生產(chǎn)情況和使用情況。在此基礎(chǔ)上，文章提出，我們可以從6 個(gè)角度入手，通過(guò)眼動(dòng)試驗(yàn)，研究眼動(dòng)技術(shù)對(duì)界面設(shè)計(jì)的影響。

文章對(duì)中國(guó)的眼動(dòng)技術(shù)在界面設(shè)計(jì)運(yùn)用方面的現(xiàn)狀和問(wèn)題提出了獨(dú)到的見解，能夠?yàn)樯婕把蹌?dòng)技術(shù)在界面設(shè)計(jì)運(yùn)用的其他研究提供理論基礎(chǔ)，也能夠?yàn)榻酉聛?lái)與界面設(shè)計(jì)有關(guān)的眼動(dòng)試驗(yàn)提供前期的支撐依據(jù)。接下來(lái)，以此為基礎(chǔ)，課題需要針對(duì)文中提到的界面設(shè)計(jì)中的問(wèn)題，進(jìn)行眼動(dòng)試驗(yàn)實(shí)操，將研究深入、具體化，以得到詳實(shí)有效的結(jié)論，這些結(jié)論將促進(jìn)界面設(shè)計(jì)的良性發(fā)展。