淺析眼動理論在移動端幼教用戶界面設計中應用的可行性分析

宋樹峰，李彬彬

（大連理工大學 建筑與藝術學院，遼寧 大連 116024）

一、幼教用戶界面設計中眼動理論應用的必要性

（一）背景概述

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

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

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

（二）國內外研究調研

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

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

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

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

二、眼動理論、幼教用戶界面、圖形語言的特點與關聯性分析

（一）兒童眼動特點

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

1. 承載豐富信息區域優先特點。即不同年齡段兒童在瀏覽界面時眼動視線均集中在承載豐富信息區域，兒童對豐富區域的注視時間越長，對該區域內容的解讀越好⑦。

2. 圖畫優先特點。即兒童在瀏覽界面時視線主要集中在圖畫區域,對文字區域的注視較少。圖畫是對事物的生動再現，通過圖畫進行學習對兒童來說非常有吸引力。

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

4. 大面積信息優先特點。界面中信息比例大小對兒童的吸引力不同，大面積信息會優先引起兒童關注。如經過放大處理的標題會在兒童瀏覽界面時，首先獲得兒童注意。

5. 色彩鮮艷區域優先特點。即與色彩暗淡區域相比，色彩鮮艷區域能吸引兒童關注。如毛毛蟲和背景區域相對比，毛毛蟲的顏色要鮮艷的多，因此更能吸引兒童注意。

6. 面部區域優先特點。人臉是被注視最多的地方，眼動注視點相對集中在五官。且兒童在觀看動物卡通形象時也表現出相同的特點，即視線集中在眼、鼻和嘴上。

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

（二）幼教用戶界面設計中圖形語言的特點與功能分析

本研究中的圖形語言主要應用在幼教用戶界面的各個構成要素中，其特點與功能主要體現在以下幾方面：

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

2. 線。幼教用戶界面中多采用曲線線條，曲線的柔和優雅給兒童飽滿圓實的視覺感受。另外，通過加粗的圓滑線條邊框對信息進行劃分，給人以圓潤的感受。

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

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

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

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

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

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

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

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

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

3. 圖標。界面中的圖標風格分為具象和抽象：具象如細節豐富的擬物化圖標，抽象如簡潔直觀的扁平化圖標。3～6歲兒童抽象思維能力弱，偏愛具象圖形，因此界面中圖標以圖案為主，并進行簡單的設計，確保兒童辨認操作。

4. 角色。與圖標設計相似，根據兒童思維特點，界面中多選用造型生動活潑的卡通形象。另外，對兒童熟悉的元素進行擬人化設計，可提高兒童學習興趣。

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

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

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

（四）幼教用戶界面中眼動理論與圖形語言的關聯性分析

綜上所述，將眼動理論和圖形語言結合，解決幼教用戶界面設計不合理而引發的近視問題，其可行性體現在：

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

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

三、小結

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

注釋：

① 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．

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

⑤ 第十屆和諧人機環境聯合學術會議論文集[C].2014.

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

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

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

參考文獻：

[1] 朱瀅.實驗心理學[M].北京：北京大學出版社.

[2] 樊翠芳.兒童網站的界面設計方法研究[D].上海：東華大學，2009.

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

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

[5] 郭楠.面向兒童安全教育的數字化學習App設計[D].西安：西安理工大學，2013.

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

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

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

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