國內(nèi)兒童網(wǎng)站界面設(shè)計的調(diào)查分析

陶 漪 劉桂峰

（南通大學(xué)現(xiàn)代教育技術(shù)中心,江蘇 南通 226019）

1.引言

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

2.界面設(shè)計簡述

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

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

3.兒童網(wǎng)站樣本選擇

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

4.樣本的簡要分析

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

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

4.1 界面設(shè)計中的布局排版

頁面的布局指網(wǎng)頁中的各組成要素的整體構(gòu)成，設(shè)計就是協(xié)調(diào)這構(gòu)成中的種種關(guān)系，將頁面上的各要素進(jìn)行有機(jī)的排列組合，順應(yīng)視覺感受，從而打動觀看者，得到我們期望的效果。一般網(wǎng)頁布局大致可分為“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型。

所選樣本兒童網(wǎng)站中的布局情況如表1所示：

表1 樣本布局類型統(tǒng)計表

從框架布局結(jié)構(gòu)看，可以發(fā)現(xiàn)兒童網(wǎng)站具有兩大特點(diǎn)：

(1)傳統(tǒng)型布局結(jié)構(gòu)的網(wǎng)站還是占了很大的優(yōu)勢（國字型+拐角型），大約占了整體的一半以上。

“國”字型也可以稱為“同”字型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。拐角型布局這種結(jié)構(gòu)與上一種布局結(jié)構(gòu)只是形式上的區(qū)別，其實(shí)是很相近的，上面是標(biāo)題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右側(cè)是很寬的正文，下面也是一些網(wǎng)站的輔助信息。

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

(2)一些新型的網(wǎng)頁布局結(jié)構(gòu)在兒童網(wǎng)站上也有體現(xiàn)，但并不突出。

首先是變化型布局，這種是傳統(tǒng)型的變體，它在傳統(tǒng)型上有一些突破，但就是這一點(diǎn)點(diǎn)的突破可以使視覺上不再那么的單調(diào)。

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

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

4.2 界面設(shè)計中的色彩應(yīng)用

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

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

界面的整體色彩對這個界面所要表達(dá)的主題和美感具有極大的影響，也會進(jìn)一步影響到瀏覽者的學(xué)習(xí)情感和求知欲望。所以在網(wǎng)站界面設(shè)計時要考慮界面的整個顏色基調(diào)。顏色基調(diào)主要體現(xiàn)為色彩結(jié)構(gòu)在色相及純度上的整體印象。對顏色基調(diào)的把握主要在于對色量的控制，可以形成調(diào)和色調(diào)和對比色調(diào)。

所選樣本中的界面色調(diào)情況如表2所示：

表2 樣本網(wǎng)站色調(diào)類型統(tǒng)計表

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

4.3 界面設(shè)計中的文字與圖片

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

經(jīng)過對樣本的研究發(fā)現(xiàn)兒童網(wǎng)站中關(guān)于文字和圖片的使用具有以下幾個特點(diǎn)：

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

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

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

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

4.4 界面設(shè)計中的聲音

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

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

5.結(jié)束語

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

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

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

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

[4]王愉，隋涌.論網(wǎng)頁視覺要素設(shè)計[J].北京印刷學(xué)院學(xué)報，2005，13（4）：59-62.

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

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