色彩在學齡前兒童APP界面設計中的應用探究

朱敏 羅岱

摘要：聚焦學齡前兒童，探究色彩在學齡前兒童APP界面設計中的應用原則。梳理學齡前兒童的視覺狀況、認知能力，結合具體案例分析總結色彩在學齡前兒童APP界面中的多重作用，并將色盲兒童的色彩辨識與用戶體驗情況納入研究范疇。從學齡前兒童的需求與用戶體驗出發，結合色彩的功能性與審美性，提煉出適用于學齡前兒童的APP界面色彩搭配方案。

關鍵詞：色彩 學齡前兒童 界面設計

中圖分類號：J0-05

文獻標識碼：A

文章編號：1003-0069 （2019） 03-0128-02

引言

作為APP重要組成部分的用戶界面，承擔著表達信息與情感，實現人機交互的重任，這些功能的實現仰賴于多種設計語言的綜合使用，其中最重要的語言之一就是色彩語言。色彩語言使用情況的好壞直接影響著界面的功能和用戶的體驗，因此要求界面設計者需要更加精準地將其進行把握。為了能夠達到這一目的，更好地滿足用戶對色彩的需求，需要對APP目標用戶的相關情況進行全面了解，從而制定行之有效的色彩應用策略，面向學齡前（本文指3-6歲）兒童進行界面設計時亦是如此。

一、學齡前兒童的視覺狀況和認知能力

（一）視覺狀況

1.視力發育狀況

學齡前兒童的視力還處于發育完善的階段，一般而言，隨著年齡的增長視力也在不斷提高，到學齡前晚期會達到成人水平。

2.視覺異常情況

對人類而言，視覺是最為重要的器官，我們所感知到的包括色彩在內的所有外界信息有95%來自于視覺。因此，視覺的異常會給人們帶來諸多障礙，本文重點探討色盲這一視覺異常情況。色盲包括全色盲、紅色盲、綠色盲等[1]，一般由先天或后天原因導致，據有關人員統計，全世界有8%（一說9%）的男性和0.5%的女性存在著不同程度的色盲情況。雖然目前還沒有關于學齡前色盲兒童的準確數據，但是通過推斷可得知，學齡前兒童是存在色盲情況的且或許不在少數。

（二）認知能力

1.認知方式

按照皮亞杰對兒童認知發展階段的劃分，學齡前兒童處于前運算階段，這一階段兒童的主要思維方式為具體形象思維，在這一思維方式的支配下，兒童可以憑借各種事物的具體形象或表象進行思考和解決問題，但他們的抽象邏輯思維能力較弱，還不能像成人一樣通過對事物的理解、判斷等來解決問題。因此，他們更喜歡具體形象的事物，無法理解過于抽象和繁復的事物。

2.色彩認知

學齡前兒童的色彩認知能力也是在成長過程中不斷提高的。3歲左右的兒童往往難以區分較為復雜的混合色，只能辨識紅、綠、藍等基本色，隨著年齡的增大加之正確的引導，一般兒童到了4歲后便可漸漸習得對不同色相、不同明度、不同飽和度的顏色的辨別能力，并學會對色彩與其名稱進行聯系記憶。在學齡前階段，兒童也已經對顏色建立起了自己的喜好，總體而言，他們喜好鮮艷明亮的色彩。就色彩的冷暖屬性來說，學齡前兒童不僅可以習得較為基礎的辨別能力，而且他們往往還對暖色調產生了一定的偏好[2]。

3.認知范圍

除色彩認知外，對學齡前兒童認知范圍的考察還包括形狀認知、時間認知等。在學齡前階段，兒童的形狀認知能力已經得到了較快的發展，可以分辨三角形、四邊形、圓形等，也可以分辨較為復雜的橢圓形、星形等，甚至還可以辨別出一些組合圖形。但可能會將這些圖形與他們日常生活中的具象事物相聯系，如將圓形看作西瓜或太陽等[3]。對于時間認知的能力，學齡前兒童的掌握程度較低，有研究證明5歲以下的兒童無法對時間進行穩定和準確的感知，造成這種現象的原因是“時間”較為抽象，而這一階段的兒童抽象邏輯思維能力還比較弱，無法理解它。

二、色彩在學齡前兒童APP界面中的作用

色彩的使用遍布界面設計中的每一個元素，大到整體背景小到一個圖標都離不開色彩，色彩在用戶界面中的重要作用主要體現在輔助學齡前兒童的認知，滿足學齡前兒童的情感需求，增加界面的藝術性三個方面。

（一）輔助學齡前兒童的認知

在界面設計中，色彩的運用可以增加信息傳達的效率和準確度。色彩可以極大地提高對真實世界的還原度，減少認知阻礙和學習負擔，這一點對學齡前兒童來說尤為重要。因為學齡前兒童的思維仍以具體形象思維為主，不太能識別和理解過于抽象的事物，而顏色的使用可以還原事物的固有屬性，使學齡前兒童更容易辨識。這一階段的兒童對時間的感知能力也比較差，而色彩的使用則可以很好地解決這一問題，（如圖1、2）分別為兒童教育類APP“MarcoPolo Weather”同一個場景里白天與夜間的畫面，色彩的使用很好地表達了時間的概念，可以幫助兒童了解晝夜的氣象變化以此學會增減衣物。

對于學齡前兒童來說，顏色的設置還可以對他們的操作產生指示作用。色彩的色相、明度等的對比可以使界面變得更有層次感，以此幫助兒童區分主要元素和次要元素，將他們的注意力成功引導到主要元素上，以便進行下一步的操作，在這個過程中也可以培養他們觀察事物的能力以及思維能力。學齡前階段的兒童一般識字不多，所以APP界面中一些原本可以通過文字來表達的內容只能借由色彩等元素來表達和引導，這就愈發凸顯了色彩的重要性。

（二）滿足學齡前兒童的情感需求

由于經濟和技術的發展，人們對數字娛樂產品的消費需求也指向了更高的層次——精神層次，而且當今社會生活節奏加快，很多時候數字娛樂產品還填補了父母對兒童關愛的空缺。因此，在眾多包括APP在內的數字娛樂產品的設計中，格外重視情感的傳達。

色彩在傳達情感、滿足兒童的情感訴求方面可以起到重要作用。暖色系的顏色可以營造出溫馨祥和的氛圍，給兒童帶來撫慰輕松之感，粉色系的搭配則可以營造出輕松愉悅的感覺，幫助兒童放松身心。不同的顏色可以引發兒童不同的相關想象和心理感受，在滿足他們使用需求的基礎上，給他們帶來更細膩豐富的情感體驗。

（三）增加界面的藝術性

色彩應用的好壞除了會影響界面的功能外，還會對界面的藝術性產生重要影響，“七分顏色三分花”這句話生動闡述了色彩在界面設計中的價值[4]。色彩可以增強界面的藝術感染力，塑造獨一無二的視覺風格，打造出具有競爭力的產品。

三、色彩在掌齡前兒童APP界面設計中的應用原則

（一）色彩與用戶

1.色彩與用戶心智模型

心智模型指的是一個人對周圍世界的理解，它來自人們的經驗或直覺。對兒童而言，他們對色彩的經驗大多來自客觀世界并且經驗十分有限，心智模型并不完善。因此，在進行界面色彩設計的時候，最好能夠遵循現實世界客觀事物的固有色彩，如天空就是藍色的，草地就是綠色的等，以免造成認知摩擦。

2.色彩與用戶群體差異性

APP走出國門走向世界早已成為一種新常態，這也就對APP的界面設計提出了更高的要求。在為多國的學齡前兒童而設計的時候，要充分考慮不同語境下色彩含義的差異，給用戶帶來更好的體驗。

此外，在面向學齡前兒童進行APP界面設計時，也應考慮到色盲兒童的情況并照顧到他們的需求。假使在設計的過程中，必須要用某種顏色來代表特定含義，如要用紅色表示緊急，那么應同時使用另一種區分方案，例如圖標形狀的區分或大小的區分等[5]。我國一款受眾較多的學齡前兒童識字APP《豬迪克識字》（如圖3），為色覺正常者所看到的界面，可以看出，該界面下方的“日”、“月”等文字按鈕原本設定的是被選中后會變為綠色，最下方的導航欄中的選項被選中后會呈現為黃色，然而這個界面在紅色盲人群的眼中看來卻是（如圖4）的樣子，他們所看到的界面沒有綠色和黃色的區別，因此難以通過顏色來辨認選中的情況，好在該界面中的文字按鈕具有圖形大小的區分方案，所以相對導航欄來說更為友好。

（二）色彩與界面

1.單個界面的色彩搭配原則

在界面設計中，常用的色彩搭配方法可分為三種。第一種方法是使用單色，單色雖然具有簡潔以及便于統一頁面的優點，但也容易顯得單調。第二種方法是采用鄰近色搭配方法，能夠有效避免色彩雜亂，使頁面和諧統一。還有一種方法為對比色搭配法，這種方法視覺效果強烈，可以更好地突出重點。在學齡前兒童APP界面中，后兩種方法最為常見，在具體色彩的選用上，以暖色調作為界面主視覺色彩的APP較多，這是因為紅橙黃等暖色系顏色往往給人帶來熱情、親近、明朗的感覺，使人感到振奮和歡快，能夠引發學齡前兒童的興趣、調動他們的積極性。

2.各界面之間色彩搭配原則

APP各界面之間的關系主要體現在引導頁與主頁之間以及主輔頁之間的關系上。在針對引導頁與主頁進行色彩搭配時，可重點考慮同類色及互補色搭配原則。同類色系的搭配可以增進引導頁和主頁的統一性，使不同功能的頁面更為和諧，更具整體感;而互補色的搭配方法則使引導頁與主頁的對比更為強烈，使視覺效果更為豐富，更能吸引用戶的注意力。主輔頁在進行色彩搭配的時候，如果采用不同的主色彩容易使頁面顯得繁亂瑣碎甚至打破用戶的操作流，因此主輔頁可以采用統一的色彩，同時通過變換布局、增加動效等方式消除單調之感。

3.色彩的審美性與功能性

優質的界面色彩設計需要兼具審美性與功能性，但審美性需要服務于功能性。界面設計的核心要義是準確高效地傳達信息，這就要求設計師在進行界面設計時，必須確保文本、按鈕等元素的高識別性和清晰度。為了達到這一目的，可以采用對比色搭配方法進行背景色與文字、按鈕等的色彩配置。值得注意的是，對比色在給用戶帶來強烈的視覺沖擊時也容易引起視覺疲勞，因此在必要時可以降低色彩的明度或飽和度使眼睛更加舒適，更好地保護學齡前兒童的視力[6]。

總結

色彩因其獨特的功能性和藝術性在界面設計中具有重要作用，面向學齡前兒童進行界面設計的時候需要充分了解學齡前兒童視覺和認知特點，重視色彩在學齡前兒童APP界面設計中的作用，把握色彩在學齡前兒童APP界面設計中的多種原則，并始終考慮到色盲兒童的情況，盡可能地為更多人而設計。

參考文獻

[1]馮瑩色盲人群的信息設計研究[D]北京：中央美術學院2011：2 3

[2]郝品基于學齡前兒童認知心理的游戲APP界面設計研究[D]北京：中國礦業大學2015： 53-54

[3]郭云云學齡前兒童移動應用的自然交互方式研究[D]無錫：江南大學2015： 19-20

[4]趙琪UI界面設計中的色彩心理院[D]長春：東北師范大學2016： 12-13

[5]（美）SusanWeinschenk徐佳，馬迪，余盈億譯設計師要懂心理學[M]北京：人民郵電出版社，2013： 23-26

[6]黃超，譚美玲，柯文燕手機UI界面的色彩搭配研究[J]科技創新與應用，2016 （19）：74

[7]周越汪蘭川色彩設計在動畫影片中的應用研究[J]設計，2017，30 （11）：46-47

[8]羅嶠色彩的個性化研究與應用[J]設計，2017，30 （15）：36-37