淺析眼動理論在移動端幼教用戶界面設(shè)計(jì)中應(yīng)用的可行性分析

宋樹峰，李彬彬

（大連理工大學(xué) 建筑與藝術(shù)學(xué)院，遼寧 大連 116024）

一、幼教用戶界面設(shè)計(jì)中眼動理論應(yīng)用的必要性

（一）背景概述

國務(wù)院2011年頒布的《中國兒童發(fā)展綱要（2011-2020）》中明確指出：“加快發(fā)展3～6歲兒童學(xué)前教育，優(yōu)化教育資源，拓展數(shù)字化學(xué)習(xí)空間，全面推進(jìn)教育現(xiàn)代化和信息化”。伴隨著信息化技術(shù)的普及與國家出臺政策支持，幼教產(chǎn)品如雨后春筍般競相出現(xiàn)，它將大量信息傳遞給兒童，豐富了兒童的日常生活與學(xué)習(xí)。但兒童視力尚處于生長發(fā)育階段，幼教產(chǎn)品的輻射、屏幕色調(diào)等問題，會直接影響兒童視力健康。

首先，從電子產(chǎn)品低齡化角度來看，隨著信息化技術(shù)的普及，電子產(chǎn)品已滲入到兒童生活的方方面面。2013年，北京市婦女兒童博覽會中發(fā)布的《2013年中國城市兒童生活形態(tài)報(bào)告》顯示，4～6歲兒童中約有53%會上網(wǎng)，他們的課余生活是在電腦、手機(jī)等不同屏幕間切換。其次，從兒童數(shù)字化教育趨勢來看，國家政策的支持以及電子教育產(chǎn)品的發(fā)展，兒童教育進(jìn)入數(shù)字化階段。2006年，教育部將“手持式網(wǎng)絡(luò)學(xué)習(xí)系統(tǒng)在學(xué)科教學(xué)中的應(yīng)用研究”定為全國“十一五”教育技術(shù)研究重點(diǎn)課題，至此在相關(guān)政策支持下進(jìn)行電子教科書的研發(fā)推廣，直接推進(jìn)了兒童教育數(shù)字化的發(fā)展。然后，從幼教用戶界面角度來看，兒童電子產(chǎn)品的負(fù)面影響與兒童生理發(fā)展存在著矛盾。北京清華長庚醫(yī)院眼科醫(yī)師郭立斌2016年在京工報(bào)中指出：現(xiàn)代社會中，電腦、Pad、手機(jī)等電子閱讀產(chǎn)品已經(jīng)成了傷害兒童視力的罪魁禍?zhǔn)?。嬰幼兒時(shí)期眼睛是遠(yuǎn)視狀態(tài)，睫狀肌長期處于不同幅度的收縮狀態(tài)。在此期間，如果孩子眼睛超負(fù)荷工作，將導(dǎo)致用眼疲勞，遠(yuǎn)視狀態(tài)結(jié)束的時(shí)間提前，極易發(fā)生近視。

綜上所述，電子化產(chǎn)品已融入到兒童生活的方方面面，經(jīng)前期調(diào)研，兒童使用電子產(chǎn)品引發(fā)的生理與心理問題已引起社會關(guān)注。而本研究集中在預(yù)防兒童近視的幼教用戶界面設(shè)計(jì)方面，經(jīng)調(diào)研分析得出電子產(chǎn)品引發(fā)兒童視力健康問題的原因大體如下：現(xiàn)階國內(nèi)幼教產(chǎn)品界面設(shè)計(jì)處于初步發(fā)展階段，技術(shù)和設(shè)計(jì)不足給兒童身體和心理帶來了不同程度的傷害。其次，3～6兒童處于生長發(fā)育階段，視力發(fā)展尚未成熟，過早、過度使用電子產(chǎn)品會對兒童視力產(chǎn)生不同程度的影響。針對上述問題，筆者擬采用眼動理論與圖形語言相結(jié)合的方法，對現(xiàn)有幼教用戶界面進(jìn)行設(shè)計(jì)，緩解相應(yīng)矛盾。

（二）國內(nèi)外研究調(diào)研

對于幼教用戶界面中眼動理論和圖形語言的應(yīng)用，國內(nèi)外研究具體分析如下：

在國外：與本研究相關(guān)的眼動理論研究有，2005年，Enquiro和Did-it公司與眼動儀公司Eye tools發(fā)現(xiàn)了F型眼動模式，這為具有良好視覺層級結(jié)構(gòu)的界面設(shè)計(jì)提供了依據(jù)；2008年，Sorensen提出眼動行為能測量用戶的情感反應(yīng)，至此，一些學(xué)者開始嘗試用眼動指標(biāo)來研究用戶情感體驗(yàn)①；實(shí)踐方面，2008年，Weinreich等以眼動理論為依據(jù)針對網(wǎng)站進(jìn)行可用性測試，使網(wǎng)站在用戶登陸之際抓住他們的注意力；2016年麻省理工學(xué)院和喬治亞大學(xué)研究人員合作，開發(fā)一款能確定用戶目光注視點(diǎn)的手機(jī)APP，屆時(shí)，眼動跟蹤技術(shù)有望用于智能手機(jī)。從圖形語言的理論研究方面來看，英國?？巳卮髮W(xué)的精神科研究員表明色彩的搭配方式會對眼睛造成不同程度的影響；2012年，Yen KungLai②和Eva③對平板電腦進(jìn)行視覺疲勞研究，找出移動設(shè)備與計(jì)算機(jī)閱讀時(shí)產(chǎn)生視覺疲勞的區(qū)別。實(shí)踐方面，美國Fact Monster少兒網(wǎng)站，對界面色彩的明度、亮度控制，減少兒童瀏覽界面時(shí)產(chǎn)生的視覺刺激；另外，2016年發(fā)布的iphone系列，晚間屏幕顯示自動調(diào)成暖黃色調(diào)，減少視覺疲勞。

在國內(nèi)：與本研究相關(guān)的眼動理論研究主要體現(xiàn)在，2013年，東北大學(xué)李森老師對網(wǎng)絡(luò)瀏覽中的用戶情感進(jìn)行研究，建立了網(wǎng)頁瀏覽中用戶情感體驗(yàn)與眼動指標(biāo)之間的關(guān)系模型④；2014年北京舉辦的和諧人機(jī)環(huán)境聯(lián)合學(xué)術(shù)會議中，利用眼動理論預(yù)測用戶的網(wǎng)絡(luò)搜索行為⑤，進(jìn)而改進(jìn)搜索引擎和提升用戶體驗(yàn)；實(shí)踐方面，2013年第二屆湖北省青年心理學(xué)人論壇中，采用量表和眼動技術(shù)相結(jié)合的方式，探討兒童在觀看視頻時(shí)視覺與心理特點(diǎn)。相關(guān)的圖形語言理論研究有，2012年寧波舉辦的第十四屆全國包裝工程學(xué)術(shù)會議中，對最符合兒童認(rèn)知特點(diǎn)的學(xué)習(xí)型游戲人機(jī)交互界面設(shè)計(jì)方法進(jìn)行探討；圖形語言方面與本研究相關(guān)的實(shí)踐研究有2003年第七屆全球華人計(jì)算機(jī)教育應(yīng)用大會中，中央大學(xué)以平板電腦為例進(jìn)行實(shí)驗(yàn)，探討兒童在提高學(xué)習(xí)效率同時(shí)降低視覺疲勞的用戶界面設(shè)計(jì)方法；2016年，中國標(biāo)準(zhǔn)化研究院與北京陽明智道光電科技有限公司通過對iPad2平板電腦使用者進(jìn)行測試，確定環(huán)境照度與顯示亮度對人眼視覺質(zhì)量和視覺疲勞的影響⑥。

通過前期調(diào)研與分析，眼動理論的相應(yīng)研究主要體現(xiàn)在以視覺搜索為出發(fā)點(diǎn)，通過眼動追蹤技術(shù)對人眼搜索模式進(jìn)行探索；從心理學(xué)角度出發(fā)，對界面各要素與受眾認(rèn)知特點(diǎn)之間的關(guān)聯(lián)性進(jìn)行探討。而圖形語言的相應(yīng)研究主要為幼教用戶界面中各要素與兒童視覺疲勞之間關(guān)系的研究，及從兒童認(rèn)知特點(diǎn)出發(fā)，探討符合兒童認(rèn)知心理的人機(jī)交互界面設(shè)計(jì)的方式方法。而本研究主要從圖形語言角度出發(fā)，著重解決界面設(shè)計(jì)不合理而引發(fā)的兒童近視問題，并以兒童眼動理論和視覺語言理論為依據(jù)，對創(chuàng)建有利于兒童視力健康的幼教用戶界面設(shè)計(jì)方式方法進(jìn)行探究。

二、眼動理論、幼教用戶界面、圖形語言的特點(diǎn)與關(guān)聯(lián)性分析

（一）兒童眼動特點(diǎn)

人類從外界獲得的信息約83%來源于視覺，通過眼動研究可以了解用戶視覺特點(diǎn)。筆者通過前期調(diào)研與實(shí)驗(yàn)總結(jié)，歸納出兒童眼動特點(diǎn)如下：

1. 承載豐富信息區(qū)域優(yōu)先特點(diǎn)。即不同年齡段兒童在瀏覽界面時(shí)眼動視線均集中在承載豐富信息區(qū)域，兒童對豐富區(qū)域的注視時(shí)間越長，對該區(qū)域內(nèi)容的解讀越好⑦。

2. 圖畫優(yōu)先特點(diǎn)。即兒童在瀏覽界面時(shí)視線主要集中在圖畫區(qū)域,對文字區(qū)域的注視較少。圖畫是對事物的生動再現(xiàn)，通過圖畫進(jìn)行學(xué)習(xí)對兒童來說非常有吸引力。

3. 新信息優(yōu)先特點(diǎn)。即與“舊信息”相比，界面中出現(xiàn)的新信息會優(yōu)先引起兒童注意⑧。例如，在《好餓的毛毛蟲》中，相對于從第1頁就出現(xiàn)的舊信息毛毛蟲，兒童會先注意到下文中第一次出現(xiàn)的蘋果。

4. 大面積信息優(yōu)先特點(diǎn)。界面中信息比例大小對兒童的吸引力不同，大面積信息會優(yōu)先引起兒童關(guān)注。如經(jīng)過放大處理的標(biāo)題會在兒童瀏覽界面時(shí)，首先獲得兒童注意。

5. 色彩鮮艷區(qū)域優(yōu)先特點(diǎn)。即與色彩暗淡區(qū)域相比，色彩鮮艷區(qū)域能吸引兒童關(guān)注。如毛毛蟲和背景區(qū)域相對比，毛毛蟲的顏色要鮮艷的多，因此更能吸引兒童注意。

6. 面部區(qū)域優(yōu)先特點(diǎn)。人臉是被注視最多的地方，眼動注視點(diǎn)相對集中在五官。且兒童在觀看動物卡通形象時(shí)也表現(xiàn)出相同的特點(diǎn)，即視線集中在眼、鼻和嘴上。

對兒童眼動認(rèn)知特點(diǎn)的分析，為幼教用戶界面設(shè)計(jì)提供理論依據(jù)和數(shù)據(jù)支撐，另外，通過眼動追蹤技術(shù)，快速準(zhǔn)確獲取兒童眼動信息，幫助筆者更清晰的了解兒童視覺感知特性與認(rèn)知過程。

（二）幼教用戶界面設(shè)計(jì)中圖形語言的特點(diǎn)與功能分析

本研究中的圖形語言主要應(yīng)用在幼教用戶界面的各個(gè)構(gòu)成要素中，其特點(diǎn)與功能主要體現(xiàn)在以下幾方面：

1. 點(diǎn)。幼教用戶界面中多使用圓潤平滑的點(diǎn)，視覺效果上顯得親切可愛；另外，在點(diǎn)擊、滑動指令下會加入點(diǎn)的特效元素，使畫面更加生動。

2. 線。幼教用戶界面中多采用曲線線條，曲線的柔和優(yōu)雅給兒童飽滿圓實(shí)的視覺感受。另外，通過加粗的圓滑線條邊框?qū)π畔⑦M(jìn)行劃分，給人以圓潤的感受。

3. 面。幼教用戶界面中的面多為圓形或圓角組成，畫面活潑，而方形、三角形等圖形缺乏親和力，不符合兒童心理需求，因此在界面中使用較少。

4. 形。幼教用戶界面中的圖形多是以動植物為元素的擬人化圖形，且隨著虛擬現(xiàn)實(shí)技術(shù)的發(fā)展與普及，3D效果的表現(xiàn)形式更容易兒童被接受。

5. 色。幼教用戶界面中的色彩明亮、純度高且對比度強(qiáng)烈，兒童視覺處于發(fā)育期，對比強(qiáng)烈、飽和度高的色彩搭配，可吸引兒童的視覺注意力。

6. 光。界面中的色彩通過電子光產(chǎn)生而具有明顯的光亮強(qiáng)度，因此界面在符合美感的前提下可減少色彩的色度以達(dá)到降低電子光對眼睛的刺激，從而降低視覺疲勞感。

通過對幼教用戶界面中圖形語言的特點(diǎn)與功能分析，掌握兒童階段圖形語言的特性并與前述兒童眼動部分結(jié)合，同為創(chuàng)建保護(hù)兒童視力健康的幼教用戶界面提供理論依據(jù)。

（三）幼教用戶界面中的視覺要素屬性分析

由于幼教用戶群體的特殊性，其用戶界視覺要素的特點(diǎn)與功能體現(xiàn)在以下幾方面：

1. 色彩。界面色彩通常選用類似色，使風(fēng)格統(tǒng)一。當(dāng)遇到大量信息，會采用白色背景，便于用戶預(yù)覽信息。而兒童階段偏愛對比強(qiáng)烈、飽和度高的色彩，故幼教用戶界面中色彩明度純度較高，使界面看起來生動活潑。

2. 文字。界面中文字標(biāo)題可吸引讀者注意，便于讀者閱讀，因此通過字體版式設(shè)計(jì)，可幫助用戶獲取的信息。而3～6歲兒童認(rèn)識文字較少，故幼教用戶界面中會對文字進(jìn)行趣味性設(shè)計(jì)，輔助兒童進(jìn)行學(xué)習(xí)。

3. 圖標(biāo)。界面中的圖標(biāo)風(fēng)格分為具象和抽象：具象如細(xì)節(jié)豐富的擬物化圖標(biāo)，抽象如簡潔直觀的扁平化圖標(biāo)。3～6歲兒童抽象思維能力弱，偏愛具象圖形，因此界面中圖標(biāo)以圖案為主，并進(jìn)行簡單的設(shè)計(jì)，確保兒童辨認(rèn)操作。

4. 角色。與圖標(biāo)設(shè)計(jì)相似，根據(jù)兒童思維特點(diǎn)，界面中多選用造型生動活潑的卡通形象。另外，對兒童熟悉的元素進(jìn)行擬人化設(shè)計(jì)，可提高兒童學(xué)習(xí)興趣。

5. 動畫。動畫效果的運(yùn)用能夠給用戶帶來新鮮感，增強(qiáng)記憶效果。兒童時(shí)期注意力差，因此，幼教用戶界面中動畫設(shè)計(jì)或交互過程中的動畫特效，可使界面更好的吸引兒童注意力。

6. 界面交互。界面中以菜單的形式將功能與信息分類進(jìn)行排布設(shè)計(jì)，用戶可通過鼠標(biāo)、觸屏等方式獲取所需信息。兒童階段思維邏輯能力較弱，因此在交互方面有明顯引導(dǎo)，輔助兒童使用；另外，界面的層級架構(gòu)不宜過多，方便兒童輕松掌握與操作。

總之，上述幼教用戶界面中視覺要素的屬性特點(diǎn)分析，為本研究中眼動理論和圖形語言在幼教用戶界面中應(yīng)用提供了的方法與準(zhǔn)則。

（四）幼教用戶界面中眼動理論與圖形語言的關(guān)聯(lián)性分析

綜上所述，將眼動理論和圖形語言結(jié)合，解決幼教用戶界面設(shè)計(jì)不合理而引發(fā)的近視問題，其可行性體現(xiàn)在：

本研究中眼動理論和圖形語言均將幼教用戶界面作為研究對象。眼動研究是針對用戶界面中視覺信息加工研究最有效、最直接的手段之一，可直觀顯示眼動特征及用戶對界面信息的感興趣程度。如大量分散的注視點(diǎn)表明搜索效率低，說明界面信息要素排布不合理；重要的要素注視點(diǎn)越多，表明獲得的注意也就越多。圖形語言作為幼教用戶界面中最基本的構(gòu)成要素，在界面中所呈現(xiàn)的形態(tài)，具有不同的功能及屬性。如圖標(biāo)具有直觀、簡明的特點(diǎn)，簡單且辨識度高的圖標(biāo)可以引起兒童的共識；文字作為一種特殊的圖形符號，通過對其字形、顏色設(shè)計(jì)，可吸引兒童的注意力，提高閱讀興趣。而幼教用戶界面作為圖形語言的載體，因其用戶特殊性，故具有自身獨(dú)特的屬性。如界面中多為圓滑字體，且字體經(jīng)過卡通化設(shè)計(jì)，幫助兒童閱讀；對重要信息或圖形添加粗線勾邊，強(qiáng)化視覺效果。

從上述分析來看，眼動理論中的各項(xiàng)測量指標(biāo)可直觀測量出兒童在使用幼教用戶界面時(shí)的眼動規(guī)律，進(jìn)而分析用戶心理特征及對界面中各要素的感興趣程度；另外，以兒童眼動作為指標(biāo)，可對界面進(jìn)行優(yōu)化設(shè)計(jì)，使界面更加符合兒童的認(rèn)知心理與使用習(xí)慣。圖形語言作為幼教用戶界面中的構(gòu)成要素，也是界面中信息的載體，在吸引兒童注意力，傳遞信息的同時(shí)，還能從兒童的生理心理角度出發(fā)，確保兒童閱讀使用時(shí)的“舒適性”。因此，基于眼動理論與圖形語言的以上特性，并將其結(jié)合，為構(gòu)建保護(hù)兒童視力健康的幼教用戶界面提供了方法與可能。

三、小結(jié)

綜上所述，伴隨著信息化技術(shù)的普及與國家出臺政策支持，電子產(chǎn)品在兒童教育中的應(yīng)用不斷推廣。但兒童視力處于生長發(fā)育階段，長時(shí)間使用幼教產(chǎn)品，眼睛處于超負(fù)荷工作狀態(tài)，將導(dǎo)致用眼疲勞，繼而引發(fā)近視。在此背景下，本研究針對幼教用戶界面設(shè)計(jì)不合理而引發(fā)的兒童近視問題，從圖形語言角度出發(fā)，以眼動理論為切入點(diǎn)，對圖形語言在保護(hù)兒童視力健康的幼教用戶界面設(shè)計(jì)中應(yīng)用的必要性和可能性進(jìn)行了分析總結(jié)，為后續(xù)研究中，探討基于眼動理論的幼教用戶界面設(shè)計(jì)的可行性，總結(jié)相關(guān)應(yīng)用方法及原則，以及進(jìn)行相應(yīng)實(shí)證研究等奠定了重要前期基礎(chǔ)?！?/p>

注釋：

① Sorensen J．Measuring emotions in a consumer decision-making context—approaching or avoiding[J]．Aalborg University，Department of Business Studies，2008（20）：1-41.

② Lai Y K，Ko Y H．Visual Performance and Visual Fatigue 0f long Period Reading on Electronic Paper Displays [J].journal of Ergonomic Study，2012，14（2）：119-126．

③ Eva S，Yves B，Per B，et a1．Reading on LCD VS e—Ink Displays：Effects on Fatigue and Visual Strain [J]．0phthalmic＆Physiological Optics，2012，32（5）：367-374．

④ 李森，孫敏，許娜，劉凡濤．網(wǎng)頁瀏覽任務(wù)的用戶情感測量模型研究[J]．工業(yè)工程與管理，2013，18（1）：106-110．

⑤ 第十屆和諧人機(jī)環(huán)境聯(lián)合學(xué)術(shù)會議論文集[C].2014.

⑥ 蔡建奇，杜鵬，郭婭,等. Ipad 使用過程中環(huán)境照度對人眼視覺質(zhì)量的影響研究[J].照明工程學(xué)報(bào)，2016，27（6）：6-9.

⑦ RAYNEIL K．Eye movement in reading and information processing［J］．Psychological Bulletin，1978，85（3）： 618-660．

⑧ 李林慧.學(xué)前兒童圖畫故事書閱讀理解發(fā)展研究——多元模式意義建構(gòu)的視野[D].上海：華東師范大學(xué)，2011.

參考文獻(xiàn)：

[1] 朱瀅.實(shí)驗(yàn)心理學(xué)[M].北京：北京大學(xué)出版社.

[2] 樊翠芳.兒童網(wǎng)站的界面設(shè)計(jì)方法研究[D].上海：東華大學(xué)，2009.

[3] 戴文靜.學(xué)前兒童使用iPad情況的調(diào)查研究——以上海地區(qū)為例[D].上海：上海師范大學(xué)，2013.

[4] 白麗輝，齊桂林.學(xué)前心理學(xué)[M].南京：東南大學(xué)出版社，2015.

[5] 郭楠.面向兒童安全教育的數(shù)字化學(xué)習(xí)App設(shè)計(jì)[D].西安：西安理工大學(xué)，2013.

[6] 韓映虹，閆國利.眼動分析法在學(xué)前兒童認(rèn)知研究中的應(yīng)用[J].心理科學(xué)，2010（1）：191-193.

[7] 高曉妹.漢語兒童圖畫書閱讀眼動研究[D].上海：華東師范大學(xué)，2009.

[8] 李林慧.學(xué)前兒童圖畫故事書閱讀理解發(fā)展研究——多元模式意義建構(gòu)的視野[D].上海：華東師范大學(xué)，2011.

[9] 胡珊.視聽心理學(xué)[M].北京：世界圖書北京出版公司，2012.