國內兒童網站界面設計的調查分析

陶 漪 劉桂峰

（南通大學現代教育技術中心,江蘇 南通 226019）

1.引言

兒童本身是一類特殊的群體，他們的思維認知階段處于前運算階段與具體運算階段，抽象和概括能力都比較差，認識活動更多地依賴于感覺、知覺和表象，那么針對兒童這一特殊受眾而設計的網站是不是已經考慮到兒童的特殊性呢？網站的內容當然首先是一個及其重要的方面，但一個網站如果僅僅是圖片和文本材料這些內容的簡單堆積，而沒有經過精心的設計，這個網站必然不會形成獨特的風格，那么也必然無法給兒童留下深刻的印象。因此，兒童網站的設計不僅要注重網站的內容，更重要的是關注網站的界面設計。從兒童的認知角度出發，設計出符合兒童需求的網站。

2.界面設計簡述

界面本身的概念很廣，這里所指的界面就是人機接口，是用戶和計算機進行信息交換的通道，它提供了一種控制方法或操作模型。從心理學意義來分，界面可分為感覺（視覺、觸覺、聽覺等）和情感兩個層面。感覺層面是我們通過知覺器官可以直接接收到的信息。情感性層面是界面傳遞給人的感受，與人取得的感情共鳴，是與人的心理相互作用后產生的復雜結果。

簡單地說，界面通常包含了圖形、文字等存在于層面上的所有素材。而界面的設計,則是對所有素材取舍及組織形式的處理手段。這些處理包括界面整體的布局、文字圖片的編排、色彩的搭配等多個方面的內容。一個優秀網站的界面設計必然是可以在情感層面上可以與人產生共鳴的，這樣的網站才能最大限度的發揮其功效。

3.兒童網站樣本選擇

對于研究對象的兒童網站的選取，本次調查中采取使用較為廣泛的搜索工具，百度搜索、Google搜尋、新浪愛問搜尋以及多種網址搜索工具進行選樣。本文主要選取各大綜合類型的兒童網站，并不局限于某一類別，同時本文也扣除了幼兒園、小學各個班級所自行架設的網站、校園網站及兒童個人主頁等。搜尋結果發現，就目前而言國內兒童網站無論是在數量還是質量上其實都還處在一個起步的階段。本研究從中共選擇了20個兒童網站作為分析的樣本，這些網站都是三大搜尋及網址搜尋網站的結果中皆有出現的兒童網站的名稱，并且都是目前可以運行使用的網站。

4.樣本的簡要分析

伴隨網絡技術的發展，以往單指平面設計的靜態界面定義中又增加了新的內容，如聲音、動畫等。換句話說，本文所指界面是包括了文字、圖形、圖像、動畫、音效和視頻等多種設計元素而成為一種新的集合。

本文將從頁面的布局、色彩的搭配、文字的變化、圖片的處理等幾個方面進行簡要的分析，從中了解目前兒童網站在界面設計上的一些基本情況及存在的問題。

4.1 界面設計中的布局排版

頁面的布局指網頁中的各組成要素的整體構成，設計就是協調這構成中的種種關系，將頁面上的各要素進行有機的排列組合，順應視覺感受，從而打動觀看者，得到我們期望的效果。一般網頁布局大致可分為“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型。

所選樣本兒童網站中的布局情況如表1所示：

表1 樣本布局類型統計表

從框架布局結構看，可以發現兒童網站具有兩大特點：

(1)傳統型布局結構的網站還是占了很大的優勢（國字型+拐角型），大約占了整體的一半以上。

“國”字型也可以稱為“同”字型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。拐角型布局這種結構與上一種布局結構只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右側是很寬的正文，下面也是一些網站的輔助信息。

這類布局方式的網站最大的特點就是含有的信息量較大，如樣本中的兒童文學網站類網站大多采用這類方式。這樣的布局雖然使內容清晰明了，但是極其缺乏個性，沒有自己的風格，視覺沖擊力不大，無法讓人留下深刻的影響。

(2)一些新型的網頁布局結構在兒童網站上也有體現，但并不突出。

首先是變化型布局，這種是傳統型的變體，它在傳統型上有一些突破，但就是這一點點的突破可以使視覺上不再那么的單調。

其次是封面型布局，這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這類布局方式在兒童網站中也有出現，但不多，一般都是在第一層上使用。

再次是Flash型，這種方式與封面型結構是類似的，只是這種類型采用了目前非常流行的Flash，它與封面型布局結構的不同是由于Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果若處理得當，絕不差于傳統的多媒體。這種布局可以呈現出一種生動形象的虛擬場景，對兒童來說情景學習是比較適合的方式，由于兒童特殊的認知特點，抽象和概括能力還比較差，認識活動更多地依賴于感覺、知覺和表象，那么在兒童網站中設計具體事物的模擬仿真環境，代替書本或僅用抽象語言的描述，應該更容易理解得多。安排兒童熟悉的場景，讓兒童自己去探索發現，從兒童的認知特點來說，自我發現和自我探索最能夠引起學習者的興趣，激發學習動機，保證學習的持久性，并能夠較長時間地保留學習成果。因此Flash場景式布局結構應該是最適合兒童網站的布局結構。

4.2 界面設計中的色彩應用

頁面中的用色設計不是單純的運用，還要考慮到眾多方面的因素。例如，訪問者的類別、社會背景、心理需求和場合的差異等等。色彩給人視覺上造成的沖擊應該是最為直接與迅速的。

從樣本中我們也可以發現，飽和度大的色彩如鮮紅、翠綠、明黃、寶藍等在兒童網站色彩設計時經常被使用，而且還是作為一個網站的主體色、重點色。這類色彩較鮮艷濃烈，易引起人的注意。兒童網站中大多使用鮮艷濃烈的色彩，這樣給觀看者一個強有力的視覺沖擊。在最初一瞬間，色彩就已經牢牢地捕捉住觀看者的眼光，達到引起關注的目的，達到更有效的傳遞目的。

界面的整體色彩對這個界面所要表達的主題和美感具有極大的影響，也會進一步影響到瀏覽者的學習情感和求知欲望。所以在網站界面設計時要考慮界面的整個顏色基調。顏色基調主要體現為色彩結構在色相及純度上的整體印象。對顏色基調的把握主要在于對色量的控制，可以形成調和色調和對比色調。

所選樣本中的界面色調情況如表2所示：

表2 樣本網站色調類型統計表

從表2中可以看出一般的兒童網就色調而言：調和色調采用的比較少，調和色調是讓主色的面積大到足以使整體的色彩效果傾向于它，根據需要再適當搭配其他對比色。這類顏色應用畫面效果柔和、含蓄、統一，色彩接近而顯得單調。這類色調適合兒童文學網站，視覺效果比較溫和，不易產生視疲勞。兒童網站中大部分采用的是鮮明的對比色調，并且在界面中大量使用彩色色塊，而非彩色系列(黑白灰)應用的比較少。這是與一般網站相比一個比較大的不同之處。對比色調是用不同色彩產生強烈對比，使界面形成生動、活潑、鮮明的視覺效果。當畫面中明亮色占優勢并有強烈的對比時，這樣的色調可以表現出活躍熱烈的氣氛。兒童階段對色彩的認知還處在比較低級的階段，兒童網站采用這種鮮明的對比色調容易對兒童產生強烈的視覺沖擊效果，便于加深對整個畫面的印象。

4.3 界面設計中的文字與圖片

文字，圖片，圖像，動畫都是界面設計中的重要視覺要素，這些要素的合理安排十分重要，好的網站的界面設計絕不是這些要素的簡單堆積。

經過對樣本的研究發現兒童網站中關于文字和圖片的使用具有以下幾個特點：

(1)文字內容比較少，圖片的數量較多。就整個界面而言出現的文字的總體數量較一般的網站要少。文字排版的間距也是比較稀疏。

(2)特殊類字體和特殊類圖片使用較多，例如美術類字體或經過變體設計的字體。兒童網站的圖片中大量出現卡通人物，如兒童熟悉的白雪公主、米老鼠等。另外圖片的風格有很多是兒童插畫風格，這些畫的風格與現在兒童使用的教科書上的畫風基本相類似。

在一個界面中，文字占有重要的比重，它往往是界面個性的基本組成部分，并反映著不同的情調。創意性的文字編排，文字本身的變化組合都是極其重要的，它將產生新穎的界面效果。兒童網站中文字的編排要盡可能的簡潔清晰、突出重點，易讀性顯得尤為重要。

圖片內容比較直觀形象，適應兒童的認知特點。對兒童來說圖片比文字容易理解，所以兒童網站中大量應用圖片來表示內容。兒童網站中使用的圖片中很大部分都是所熟悉事物及象征物。在界面中使用熟悉的象征物做菜單、圖標、按鈕時，用戶能較快地了解其功能，節省學習界面的時間。在網站中使用兒童熟悉的卡通人物形象可以增加整個網站的親和力，對于自己熟悉喜歡的東西一般更容易接受。

4.4 界面設計中的聲音

網站中的聲音應該包括背景音樂、音效（如按鈕聲音）、解說。本次樣本網站中，無任何聲音輸入有15個約占75%。有背景音樂的2個占10%，按鈕有音效的有2個占10%，卡卡樂園是唯一一個全程配以童聲解說的網站。我們可以看出大部分網站中提供給兒童的僅是單一的視覺系統。

視覺和聽覺這兩個知覺系統各有其不同的心理特點，但是這兩者對于信息的接受，應該是相輔相成、互為補充的。從心理學意義上講，視覺刺激與聽覺刺激同時作用于人的耳、眼等感官時，人的中樞神經系統接受兩種不同感官通道的信息，更易對其整合分析，做出反映。視聽結合比任何一種單一通道獲取信息都更為有效、準確。所以應盡可能使兒童發揮多種知覺系統的作用，而不僅僅是單一的視覺。目前大部分兒童網站并沒有把視聽結合這個特性顯著發揮出來。視聽結合的心理效應具有1+1>2的優勢，因此在兒童網站界面設計中,要對視覺聽覺的運用給予同等的重視，更為重要的是不要忽視對聲音的必要地運用；要針對具體情況，力求找到視聽的最佳結合點，以更大限度發揮視聽結合的優勢，使學習者獲得最大的信息。

5.結束語

目前兒童網站的設計開發中界面設計的問題已經開始被關注，但是大部分網站的設計還是停留在一般網站設計的層面上。沒有把兒童對象這個特殊性表現出來。所以今后在兒童網站開發過程中，應該對界面設計給與更多的重視，并與審美培養結合起來。兒童網站設計開發不僅僅是一項技術的挑戰，更是一項藝術的挑戰！網站設計者只有在藝術和技術兩個領域中都具備較高的素質，才能合理運用各種技術和藝術手段設計出既實用又令人賞心悅目適合兒童的網站。

[1]侯春在.基于文化適應的解釋：兒童心理發展的成長論觀點[J].教育理論與實踐，2005，25(12)：55-58.

[2]龍雪梅，瞿堃.教學軟件界面設計的視覺文化因素[J].電化教育研究，2002， (5)：45-48.

[3]蒙應杰，王海濤，林和.Internet交互界面設計規范的研究[J].甘肅科學學報，2001，13(4)：26-30.

[4]王愉，隋涌.論網頁視覺要素設計[J].北京印刷學院學報，2005，13（4）：59-62.

[5]文喜華.論網頁設計中的藝術與技術[J].邵陽學院學報(社會科學版)，2005，4（6）：115-116.

[6]吳鳴.淺談色彩在多媒體課件中的運用[J].武漢冶金管理干部學院學報，2005，15（3）：77-78.