圖像設計原則

從幼兒觀點來看數位遊戲的圖像設計，就不得不論述圖像表徵對於幼兒的意義，接 著分析、比較成人與幼兒的圖像設計原則，最後再將先前研究者所發展出來的圖像檢核 表歸納、整理至學齡前幼兒圖像設計原則中，如圖 2-3。

圖 2-3 從幼兒觀點看數位遊戲的圖像設計 資料來源：研究者自行整理

幼教軟體圖像隱喻適切 檢核表暨圖像設計三角

原則 一般性原則

圖像表徵對幼兒的意義

幼教軟體圖像隱喻 適切檢核表 立即辨識

普遍性 一致性 特徵描述 可溝通性 相異性

美感 應用和文化獨立

使用者慣例

圖像設計三角原則 幼兒心理學

Bruner

22

一、圖像表徵對幼兒的意義

研究指出，3-7歲的幼兒語言行為尚未成熟，但對視覺、圖形等以右腦為主的學習 卻反應靈敏，4歲更是圖形知覺的敏感期（林崇德，1995）；認知方面，Bruner(1966)提 到2-3歲後，兒童能運用視覺及聽覺去感受周遭事物，並能用形像（圖像）來代表外界 事物（陳峰津，1982），因此，對於一個文字理解能力尚嫌不足的幼兒來說，圖像式學 習一直被認為是最簡單且易懂的學習方式。

雖然圖像具有清楚並易於理解的特色及外表，但是詮釋圖像的意義時，使用者的心 智模式、背景經驗與知識的豐富程度皆會影響隱喻之解讀(Chi, Feltovich & Glaser, 1981)，

因此當圖像運用於電腦多媒體的環境下，要能適當地、貼切地、正確地傳遞它所期望表 示的意涵，即關係到圖像的設計原則。

二、圖像的一般性設計原則

本研究所指的圖像(Icons)是狹義的概念，包含電腦螢幕上表示指令、程序的符號、

影像。圖像是 GUI 的重要組成部分，能給予使用者直覺性的操作與引導，其傳遞的隱喻 不受年齡、文化和語言的限制，使用者透過視覺識別螢幕上呈現的圖像後，就能以指令 動作操作電腦，不需額外記憶複雜的過程，或是理解技術性的相關問題，換句話說，圖 像提供使用者視覺與記憶上的強烈暗示(Preece, 1995)。如此一來，不僅能縮短使用者學 習軟體的時間，也減少操作上的種種問題（方裕民，2003；陳建雄譯，2006；周陟，2012）。

表2-3綜合各學者對於發展有效圖像須依循的原則，包含「立即識別」、「普遍性」、

「一致性」、「特徵描述」、「可溝通性」、「相異性」、「美感」、「應用和文化獨 立」、「使用者慣例」原則（魏澤群，2005；方裕民，2003；卓良政，2000；馮淑萍，

2000；謝毅彬，1994；Horton, 1994；黃崇冀，1993；Norman, 1988）： 1.立即辨識(immediacy)

圖像設計時應藉由外型，讓使用者容易辨識，一眼見到就明白它的功能，無須深入 解讀其意涵。

23

2.普遍性(generality)

圖像設計時應抽離單一物品的細節特徵，變得更抽象，就可以代表普遍的、類似的、

更高層次類別的物品群。

3.一致性(cohesiveness)

屬於同一群組的圖像，應有共同的視覺特徵，以便使用者辨識出這些是屬於共同群 組的圖像。

4.特徵描述(characterization)

圖像應表現出物體或動作的重要特徵，不應太複雜。

5.可溝通性(communicability)

圖像設計者應建立與使用者共通的脈絡(context)，使圖像得以被使用者辨識。

6.相異性

圖像間的區別差異需夠大，讓使用者能很快的區分出意義，加快操作速度。

7.美感

此為最主觀的一項因素，也是操作圖像設計的基本要素。多數使用者對於令人愉悅 之畫面，仍有很高的期待。

8.應用和文化獨立

圖像也受文化環境差異的影響，例如：黥面在漢文化和泰雅文化各代表不同意義。

9.使用者慣例

圖像應以使用者熟悉的圖案為主，遵守圖示的慣例，避免在常用的圖示上過分創 新。

24

Horton (1994)

謝毅彬 (1994)

黃崇冀 (1993)

Norman (1988)

25

26

注 意

續前頁

3 圖像是否以鮮豔的顏色呈現。

4 圖像邊緣是否避免過多尖銳角度。

資料來源：引自蘇翌蒨、邱淑惠(2009b)。孩子懂嗎？軟體圖像隱喻適切性測試，p94。

以下針對符合幼兒的生活經驗、避免幼兒混淆、增進幼兒注意三層面加以說明：

1.符合幼兒的生活經驗

Piaget主張，個體能運用既有的基模處理問題，將新事物吸納既有基模之內，換句 話說，即是既有知識（舊經驗）的類推運用（張春興，2007）。以訊息處理論來說，幼 兒記憶的範圍從日常生活中逐漸擴大，到了5、6歲更是能運用一些簡單的方法，例如；

自言自語、自我複誦來加強記憶。此外，其知識經驗貧乏，抽象思考不發達，不善於連 結新舊知識（林崇德，1995），再加上使用電腦的經驗較為不足，就好比是個操作電腦 的新手，容易誤解隱喻(Mayhew, 1992)，因此圖像所代表的功能須與圖像的現實功能相 似，以利幼兒以舊經驗理解新訊息。從圖像傳達理論來說，符號設計者將符號系統及要 傳達的意義，置入圖像中並傳達給圖像的使用者（韓叢耀，2005），又以優使性之考量，

因此圖像應為幼兒常見之具體物件。綜和上述，我們可以發現，幼兒對於圖像的理解是 從舊經驗、日常生活中出發，因此，選用圖像時，應多符合其原有的經驗模式、操作功 能須與現實功能相似、為常見的具體物件。

2.避免幼兒混淆

Piaget 指出，學齡前幼兒的認知發展正處於運思預備期，因此，常以不合邏輯的思 維來解決遇到問題，分別為：「自我中心」、「知覺集中傾向」、「不可逆性」（張春 興，2007）。「自我中心」指幼兒在解釋問題情境時，只會從自己的觀點著眼，不會由 他人的觀點分析，由此可知，幼兒看到圖像後會以自己的心智模型直覺反應，不會推測 表 2-4 幼教軟體圖像隱喻適切性檢核

表

27

設計師之設計模型，因此圖像趨近於具體實物，操作功能與現實功能相似，將有益於幼 兒理解；「知覺集中傾向」指幼兒在面對問題情境時，僅能注意到事物的單一面向，而 忽略其他面向，由此可知，幼兒無法在有效、立即地綜合介面中其他線索，並加以判斷；

「不可逆性」指幼兒無法進行合於邏輯的思維，由此可知，幼兒無法理解需邏輯思考的 抽象符號。

依據人機介面理論，圖像的一般性設計原則中，「可理解性」、「可區分性」、「可視 性」（文章中缺漏之處）最為專家學者所重視（蘇翌蒨，2009）。「可理解性」係指圖 像應要突顯所要表達的功能特徵、「可區分性」係指不同功能的圖像其特徵應有明顯區 別，兩者皆符合學齡前幼兒圖像設計的「概念相似原則」，即說明使用者可以理解圖像 傳遞的暗示性的訊息，又研究指出人類會依據個人的知識背景特質來解釋隱喻(Gillan, Fogas, Aberasturi & Richards, 1995)，因此圖像設計者須考量圖像使用者的文化經驗，思 索其能否對圖像進行正確的聯想與理解，避免設計出只有某種文化背景經驗的幼兒才能 理解的圖像訊息（蘇翌蒨、邱淑惠，2009b），例如：含有文字符號的圖像，會受到學 習經驗的影響。此外，幼兒正處於運思預備期，以形似的圖像最容易理解，而這也是幼 教老師常以形似的圖卡進行教學的原因。因此，蘇翌蒨、邱淑惠(2009b)建議圖像應形似 於具體實物；傳達單一功能；突顯功能特徵；不同功能的圖像應有明顯的區別；讓不同 背景的幼兒都能產生相同的解讀。

3.增進幼兒注意

訊息處理論指出，「注意」是幼兒認知處理的先決條件（陳烜之，2007）。其中，

鮮明、新穎、具體形象的刺激，都是引起幼兒注意的主要因素（林崇德，1995）。依據 人機介面理論，圖像的一般性設計原則中，「一致性」最為專家學者所重視。「一致性」

係指屬於同一群組的圖像，應有共同的視覺特徵，其符合學齡前幼兒圖像設計的「視覺 相似原則」，即說明圖像要明顯，能吸引幼兒注意。以幼兒對形色的偏好來說，一個圖 像能否吸引幼兒注意，可從「形」與「色」了解是否符合其偏好。然而，幼兒觀察圖像

28

的過程中，往往只側重表面的、明顯的、面積較大的部分，通常只看到大概輪廓而非細 部內容就提出結論（Baller & Charles, 1961，林崇德，1995），據此，圖像應以簡單的造 型呈現。因此，圖像應以鮮豔的顏色呈現；同一群組的圖像具有共同的視覺特徵；造型 簡單、避免細微的特徵。

（二）符合學齡前幼兒的圖像設計三角原則：特別考量使用者為幼兒

為了讓幼兒更容易理解GUI介面，設計者必須要設身處地的為幼兒（使用者）著想，

甚至可以邀請幼兒(Druin, 2002)，或是結合幼稚園老師參與設計（蘇翌蒨、邱淑惠，2009b）。 而這種參與式觀察帶入設計的經驗，關鍵就是要在過程中找到支持兒童的設計方法 (Druin, Stewart, Proft, Bederson & Hollan, 1999)。否則，設計者往往太過專注於設計本身 以至於不能探究幼兒的心智模型；再者，因為幼兒有限的語言表達能力，設計者和幼兒

（使用者）的溝通多少會受到限制。因此，設計介面時，應考量幼兒的發展心理學，特 別著重圖像是否易於理解。

以 Peirce 的三元模型為例，圖像的解讀可包含 3 個要素：1.目標(Object)，即預計完 成的工作；2.圖像(Icon)，代表目標的形象標誌；3.解讀項(Interpretant)，使用者對於目標、

圖像的心智模型（引自 Chiu et al., 2012），如圖 2-4。以這個模型為基礎，一個好的圖像 可以連接皮氏三元的兩側（例如：a-b 以及 b-c），即使用者的心智模型可連結到設計者 的設計模型。

29

圖 2-4 Peirce 學齡前幼兒圖像設計三角原則 資訊出處：引自 Chiu et al., 2012,p230。

為了加強連結 a-b 及 b-c，本研究提出了圖像設計三角原則，以下分別敘述之(Chiu et al., 2012)：

1.視覺明顯原則(Principle of obvious visibility)

就認知神經科學而言，3-8 歲的幼兒的控制能力是不成熟的(Fusaro & Nelson, 2009)，

導致其無法像成人般專注於與介面相關的資訊，同時排除不相關的資訊，因此 Gilut and Nielson(2007)建議設計者應讓圖像看起來是可以點擊的線索，並提供適時的視覺回饋。

而圖 2-4 中的 a-b 便與這樣的觀點相符，設計師選用「一本空白畫冊」來象徵「開始一 幅新繪畫」，並以此作為圖像(icon)。簡言之，視覺明顯原則係指圖像明顯，能吸引幼兒

而圖 2-4 中的 a-b 便與這樣的觀點相符，設計師選用「一本空白畫冊」來象徵「開始一 幅新繪畫」，並以此作為圖像(icon)。簡言之，視覺明顯原則係指圖像明顯，能吸引幼兒