淺議教育網站頁面設計的感性因素

☆ 汪翠義 張新明

（安徽師范大學教育科學學院，安徽蕪湖 241000）

教育網站是隨著因特網的的普及和教育技術學理論研究的不斷深化而逐步發展起來的。教育網站的頁面設計是教育網站設計的最重要也是最核心的部分。教育網站頁面的設計與其他類別網站的網頁設計有著一些不同點，教育網頁的設計更強調感性設計。要設計出以人為本的網頁，就必須對一般的教育網站頁面的感性因素進行提取與分析。

一、感性與感性設計

據《現代漢語詞典》，“感性”一詞是“指屬于感覺、知覺等心理活動的認識”。該詞來自日本語，是明治時代的思想家西周在介紹歐洲哲學時所造的一系列用語之一，如：“哲學”、“主觀”、“客觀”、“理性”、“悟性”等詞一直沿用至今。《辭苑》對“感性”一詞解釋為：感覺能力，直觀力和感受性，是人感受事的能力，即基于人類身體的感覺而產生的情感沖動和欲求。從認知學的角度來講，人對事物的認識首先是感性的，感性認識是基于事物表面現象的認識，主要是通過人的感覺器官對事物的感知。從理論角度出發，能夠用語言和表情等方式來描述這種期待和感受。[1]

當產品的形態、色彩、肌理、觸覺等方面給人一種“美”的感覺和體驗，而使產品具有人情意味時，我們稱之為“感性設計”。[2]感性設計是一種新興的設計理念，是一項以人的感性因素和多元需求為目標的產品開發技術。感性設計強調感性的思維方法和感性的表現形式，即在設計過程中設計者用感性思維進行創造，同時，注重人的情感與感覺。

感性是相對理性而言的，理性的特點是邏輯性強，強調思辨性。感性是感官知覺，人類對事物的感知最初是通過感覺器官進行的，這些事物的信息以各種形式的形象作為載體，通過感覺器官傳達給人類大腦，從而形成諸如視覺、聽覺、味覺、觸覺、嗅覺等感覺形象類型。感性是設計者對客觀事物的直觀認識，這就要求在設計過程中，要充分地體現以人的直觀感覺的“美”為特征。尤其在設計教育網站頁面時，不僅強調頁面的資源豐富、結構合理，更要關注什么樣的學習者來瀏覽這樣的教育網頁。總之，感性引導下的教育網站頁面設計就是要求關注教育網頁的各個細節以為學習者提供無微不至的服務，讓學習者感受“美”的存在，激發學習者的學習興趣。

二、教育網站頁面分析

（一）網頁

網站的頁面簡稱網頁。它是指網站的用戶頁面，包括網站畫面中的按鈕、動畫、文字、聲音、窗口等與網頁用戶直接或間接接觸的網頁設計元素。

網站頁面是人和網站之間的信息交流頁面。網站頁面的設計是指對網站中為用戶提供交互功能的視覺元素進行規劃、設計的活動。它的設計直接關系到人與網站關系的和諧和人在此網站學習中的主題地位，以及網站可使用性和效率。可見，研究網站的頁面就是研究網站怎樣適應人的有效學習的問題。

頁面是網站的構成部分，網站頁面是網站界面的重要組成部分。網站頁面強調的是相對靜態的頁面本身，而界面則不僅考慮到頁面本身還考慮到用戶實際情況和用戶的互動作用，以及信息是如何交流的。因此，網站界面設計包含網站頁面設計。

（二）網頁的通用元素

1.導航

如何對一個網站進行導航設計是網站設計中必須要考慮的問題。首先，應當確定網站的主要欄目頁，并在主導航欄中顯示。關于網站導航設計存在一個普遍的錯誤觀念，那就是設計者往往認為導航設置得越詳細越好，他們總是傾向于在頁面上放置盡可能多的鏈接，這種做法導致的結果很可能就是：羅列的信息過多，反倒使用戶不能有效地獲取和使用這些信息。太多的選擇和太少的選擇一樣都會讓人無所適從。其實，只要有從一個鏈接通向下一個頁面的明確路徑，用戶是會繼續深入訪問網站的。頁面中一個清晰而簡單的導航，會給訪問者帶來舒適的感覺，從而提高網頁的點擊率。

2.LOGO

絕大多數網站頁面都有一些標示所有權的品牌圖像、網站標識或標頭，這就是LOGO。例如：Yahoo網站中幾乎每一個頁面在其左上方都有一個網站標識，其中附加有你正在訪問的頁面所屬的大欄目的名稱，如“Travel（旅游）”、“Movies（電影）”、”Autos（汽車）”等等（如圖1所示）。安徽師范大學網站頁面中的LOGO是由左邊的校徽圖案和郭沫若題寫的“安徽師范大學”五個漢字組成（如圖2所示）。

圖1 Yahoo的LOGO

圖2 安徽師范大學網站的LOGO

3.搜索引擎

頁面的頂部標題部分(橫跨頁面頂部)可以不僅僅包含網站標識，還可以包含或附加上主導航欄。此外，還可以加上搜索欄，搜索引擎的嵌入可以讓用戶直接搜索網站的內容和信息，而不用通過使用菜單和鏈接來導航。搜索框的位置可以根據網頁的實際布局來定。

4.頁腳

頁腳部分(頁面最下端的部分)應包含一些額外的信息，如版權聲明，以及指向有用的輔助頁面（如“About This Site（關于本網站）”、“Terms＆ Conditions（使用條款和條件）”、“Contact Us（聯系我們）”)的鏈接等。

三、教育網站頁面設計的感性因素

教育網站頁面的感性因素是指在頁面上能夠直接給學習者帶來情感反應的頁面的設計元素，包括色彩布局要素、文字圖形要素和聲音動畫要素等。

（一）案例分析

筆者以中國少年兒童教育網站主頁面為例來進行分析，圖3是主頁面的部分截圖。

圖3 中國少年兒童教育網站主頁面

此頁面主要以醒目的黃綠色點綴、白色背景，藍色字為主，白底藍字，黃綠圖案給少年兒童帶來了強烈的視覺沖擊，也符合少年兒童的心理和生理需求，能夠激發學生的學習興趣，吸引學生的注意力。

中國少年兒童教育網站頁面布局采取的是綜合框架型，既有左右框架型又有上下框架型，這是相對復雜的一種框架結構。此網站的頁面有五行主框架，其中第一行中有三列，第二行中有兩列，第三行中有一列，第四行中有兩列，第五行中有三列。這種構圖，內容豐富、主題突出、模塊化強，學習者容易找到所需要的學習資源。

頁面以醒目的白底藍字為主且以宋體五號字顯示主要內容，在黃綠分割條中，則用突出的白色字來搭配作為一個欄目的說明。中國少年兒童教育網在網頁的適當位置配置了大小、類型適當的圖片，更能滿足少年兒童的心理需求。

聲音動畫也是一個不可忽略的因素，尤其是面向少年兒童的網頁，聲音動畫對他們的感官刺激比那些抽象的文字和靜止的圖片的刺激要強烈得多。因此，中國少年兒童網幾乎每個子網頁中都包含聲音動畫內容和一些簡單的互動的操作，這樣更能強化學習者的學習。

中國少年兒童教育網最凸顯感性設計的就是在導航條下面設置了提問與回答板塊，還有一個非常顯眼的長長的搜索框。這對于少年兒童這樣一個特殊的學習群體來說是一種“美”的體驗，這樣一個細節的設置，不僅考慮到網頁的美觀，更考慮到少年兒童的學習習慣與需求。

（二）教育網站頁面的感性因素

1.色彩和布局要素

顏色和布局是頁面設計的重要組成部分。合理利用色彩和布局的劃分，能使學習者對一個教育網頁的結構和重點一目了然，而根據排列組合的不同，網頁帶給用戶的心理感受也不盡相同。通過色彩和布局的不斷優化，使學習者感到舒適、滿意，在學習過程中能保持愉悅的心情。從而激發學習者的學習興趣。

在頁面設計中，色彩設計必須注重給人帶來的生理和心理反應，通過色彩色相、比例、位置等的比較和調和進行綜合設計，以帶給用戶最佳的心理感受。同時，也要注意到色盲、色弱等特殊人群對色彩的感受性不同，在設計中達到通用設計的標準。[3]

教育網站的頁面布局通常包含以下要素：網站標識、導航欄（全局導航與局部導航）、內容信息、其他標識（區域標識與局部標識）、底部導航欄、各種附帶連接。

一個網站最重要的布局頁是它的首頁即導航頁，它是用戶對網站產生第一印象的窗口，用戶通過它在短時間內了解整個網站布局，因此，首頁布局多強調秩序感，以帶給用戶專業、可信賴的感覺。

2.文字圖形要素

教育網頁設計的另一感性要素是文字。文字帶給用戶的感性認識，不但與人的閱讀習慣相關，也與使用的語法相關。

通常閱讀文字的過程分為2種，掃視和凝視。掃視是有經驗的閱讀者快速瀏覽文本的一種方式，他們從辨別文字的形狀到理解其含義速度較快，在閱讀時以行數為單位而非字節為單位對文本進行快速掃視，尋找關鍵字詞。而凝視則是對文本的認知過程，如果文本難以理解，則凝視的時間會增長，也就減慢了閱讀速度。[4]

而在教育網站頁面中，由于不同屏幕設置和網頁滾動條的存在，不同長度的文本帶給人的心理感受也不同。除去小說網站，通常在網站上人們不會沉浸于持續閱讀的文字流中，而主要通過掃視檢索感興趣的字詞來完成，因此，通過設置大小、色彩、樣式等強調關鍵詞，能提高學習者的心理體驗。如面向兒童的教育網站的頁面文字，將關鍵詞直接用大號文字、粗體表現出來，給用戶新穎而又易讀的感受。

3.語音動畫要素

除了視覺認知要素以外，聽覺要素也是提升網頁感性度的重要途徑。通常語音和聽覺要素被用來輔助視覺認知有障礙的用戶感知頁面狀態。研究表明，人們對語音和聲音的反應比對視覺刺激的反應更快。語音在幫助人在虛擬環境下的真實體驗方面起到不可缺少的作用。但在一個教育網站頁面中，人們通常習慣掃描瀏覽而非線性接聽一個語音指示，因為這樣更快速。但值得注意的是，一個突兀的刺激的聲音會帶給用戶一種界面不受自己控制的感覺，而在操作錯誤時聽到一聲刺耳的“嘟”聲也并不能帶來良好的心理感受，因此，在教育網頁的設計中使用語音和聽覺要素必須十分謹慎。

在網頁設計中，一般由Dreamweaver軟件來完成，做成靜態頁面，也有些網站的引導頁面做成Flash動畫形式，當然，大部分頁面還是靜態呈現。某些網站雖然不是整體的動態呈現，但頁面卻包含各種各樣的動態元素，如：網頁中的Flash網絡廣告、網站導航欄動畫、圖片展示動畫、Flash交互動畫、由Flash制作完成的網站注冊、登陸、計算等系統。在教育網站頁面中如果包含這些動態元素，無疑能讓頁面更生動，充分調動學生的學習積極性。但是，頁面不宜太花哨、太亂，否則，就會起到反作用，使學習者目不暇接、眼花繚亂，產生煩躁的情緒。

4.以人為本的細節因素

在頁面的設計過程中，不僅要設計出美觀的頁面，更重要的是要充分考慮到使用對象即用戶的體驗。因此，在設計時，不僅要抓住百分之九十九的宏觀構架，還要考慮到百分之一的細節。在藝術設計中，細節大于整體。整體再好，如果沒有注意到細節或者細節安排不當，都會適得其反，破壞整體。例如：很多的教育網站的頁面都有中英文切換的功能，充分考慮到學習者的實際情況。有很多面向中小學生的教育網站頁面中都設置了在線答疑或留言的功能，這符合中小學生的實際情況，因為，他們的思維都非常活躍，發散思維能力強，教育網站中的教學資源遠遠也不能夠滿足他們的好奇心與求知欲，在線答疑或留言則為他們提供了自由發問，解決問題的途徑。還有些教育網站對一些資源配置了聲音說明，這樣可以解決部分有視覺障礙的學生的學習困難。這些充分考慮用戶以人為本的細節設計，是完善教育類網站設計的途徑之一。

[1]孫琦.基于產品意象的感性設計研究[D].哈爾濱:哈爾濱工程大學,2010.

[2]梁瑩瑩.感性設計方法應用研究[D].濟南:山東大學,2009.

[3]李曉蕙.網頁游戲中頁面設計的研究和應用[D].上海:上海交通大學,2008.

[4]張舒予.視覺文化概論[M].江蘇:江蘇人民出版社,2004.