淺談精品課程網(wǎng)站的人機界面設(shè)計

林玲

（集美大學(xué) 教師教育學(xué)院，福建 廈門 361021）

淺談精品課程網(wǎng)站的人機界面設(shè)計

林玲

（集美大學(xué) 教師教育學(xué)院，福建 廈門 361021）

基于精品課程網(wǎng)站建設(shè)目標(biāo)和內(nèi)容特點，本文著重從人機界面設(shè)計角度，以人腦信息處理模型為指導(dǎo)，討論精品課程網(wǎng)站頁面的設(shè)計思路。

精品課程；信息處理模型；人機界面；網(wǎng)頁設(shè)計

一、引言

精品課程建設(shè)是高等學(xué)校教學(xué)質(zhì)量與教學(xué)改革工程的重要組成部分。實施精品課程建設(shè)對于提高高等學(xué)校人才培養(yǎng)質(zhì)量，改進學(xué)校育人環(huán)境，激發(fā)師生工作學(xué)習(xí)的積極性和創(chuàng)造性，有著重要的作用。[1]而作為一個提供開放式學(xué)習(xí)平臺的精品課程網(wǎng)站，其人機界面的設(shè)計顯得十分重要。擁有一個簡潔、美觀、易用的用戶界面不僅能給瀏覽者帶來視覺上的享受，更能夠調(diào)動廣大師生進行學(xué)習(xí)交流的積極性。

二、精品課程網(wǎng)站建設(shè)目標(biāo)

精品課程網(wǎng)站建設(shè)旨在為高等院校的網(wǎng)上教學(xué)提供一種前所未有的交互、開放、易用的全新環(huán)境和豐富、高效的技術(shù)手段及開發(fā)工具，以達到共享優(yōu)質(zhì)教學(xué)資源，滿足學(xué)生在線高效學(xué)習(xí)要求、實施個性化教學(xué)、提高教學(xué)質(zhì)量。因此，精品課程相關(guān)網(wǎng)站的建設(shè)質(zhì)量將直接影響精品課程優(yōu)質(zhì)資源的共享，也是影響精品課程建設(shè)工作績效的重要因素。如何在網(wǎng)絡(luò)環(huán)境中科學(xué)地組織這些優(yōu)質(zhì)教學(xué)資源，設(shè)計出適合廣大師生進行學(xué)習(xí)交流的、和諧舒適的網(wǎng)站頁面，可以從人機界面的角度進行深入地研究。

三、人機界面

人機界面（Human-Computer Interface,簡寫HCI）是人與計算機之間傳遞、交換信息的媒介和對話接口，指人和機器在信息交換和功能上接觸或互相影響的領(lǐng)域或界面，包括人與機器的硬接觸和軟接觸。人機界面是計算機科學(xué)與心理學(xué)、圖形學(xué)、認(rèn)知科學(xué)和人機工程學(xué)的交叉研究領(lǐng)域。[2]現(xiàn)階段人機界面設(shè)計側(cè)重以用戶需求為主導(dǎo)，重視系統(tǒng)的可用性、用戶體驗，所以又稱之為 “用戶界面”。網(wǎng)站是一種典型的人機界面，因此，明確精品課程網(wǎng)站的用戶群體，了解并遵循用戶認(rèn)知心理是進行課程網(wǎng)站設(shè)計的前提。

1.“以人為本”與用戶定義

使計算機在人機界面上適應(yīng)人的生理特性、心理特性，就是“以人為本”的設(shè)計價值理念，其設(shè)計思想主要來自動機心理學(xué)、認(rèn)知心理學(xué)、符號學(xué)等。在設(shè)計人機界面時要求：

（1）適應(yīng)人的行動基本特性，把握行動的動機因素；

（2）遵循人腦活動的特性，如記憶、思維、語言表達、交流理解等方面，減少認(rèn)知負(fù)擔(dān)，提高認(rèn)知效率；

（3）把握符號（文字和圖形）的構(gòu)成、符號的主語義以及符號使用的基本特性，在設(shè)計中必須使計算機符號符合人的表達和交流習(xí)慣。

精品課程網(wǎng)站的用戶群體十分明確，即本專業(yè)的廣大師生具有一定的專業(yè)基礎(chǔ)知識，訪問網(wǎng)站的動機就是進行專業(yè)課程的學(xué)習(xí)與交流。同時，他們具有相對較高水平的記憶、思考與理解能力，并能較為熟練地運用語言符號進行交流。

2.基于人腦信息處理模型指導(dǎo)

人機界面是人機交互的接口，在網(wǎng)站人機界面平臺上進行高效的學(xué)習(xí)與交流，須建立在充分把握人腦信息處理模型的基礎(chǔ)之上，其模型如圖1所示。

人腦信息處理模型顯示：人機交互系統(tǒng)中，人在接受刺激信息后通過感知系統(tǒng)、認(rèn)識系統(tǒng)和反應(yīng)系統(tǒng)進行信息處理并做出行動。[3]

（1）感知系統(tǒng)：用戶的視覺、聽覺等感知系統(tǒng)接收到計算機的輸出信息后，傳輸?shù)酱竽X感知處理模塊。這些信號被短暫地儲存并被初步理解，如果沒有進一步的處理，這些信息會很快消失。因此，在網(wǎng)頁界面設(shè)計中應(yīng)當(dāng)考慮到感知系統(tǒng)器官和感知處理器的特點。例如，頁面格式和布局的設(shè)計應(yīng)減少不必要的眼球移動，內(nèi)容應(yīng)易于瀏覽，并注意提供用戶理解的上下文信息，適當(dāng)提供擴展超鏈接等。避免感知的重要信息過早消失或被誤解。

（2）認(rèn)知系統(tǒng)：思維與記憶的協(xié)調(diào)工作完成認(rèn)識過程。感知處理器處理后的信息會有選擇地被送到短時記憶，短時記憶與思維處理協(xié)調(diào)工作，短時記憶中的信息會被有選擇地送到長時記憶中。長時記憶中存儲的與人所感知的信息關(guān)聯(lián)度越強的部分內(nèi)容越容易被發(fā)現(xiàn)和提取出來。

人的短時記憶與長時記憶的特點為課程頁面設(shè)計提供了一些設(shè)計準(zhǔn)則。例如，為了不超過短時記憶的能力范圍，在頁面設(shè)計中應(yīng)盡量將信息按照相互關(guān)系分類組織起來，這樣短時記憶在任何時刻只需要處理總體信息的一小部分。同時，用戶界面的設(shè)計還應(yīng)該簡單明了。較復(fù)雜的界面功能可以考慮拆分為不同的部分或步驟來實現(xiàn)，在網(wǎng)頁設(shè)計中，站內(nèi)的內(nèi)容可以按模塊分頁組織，需有清晰的網(wǎng)站地圖和分類導(dǎo)航。為了提高長時記憶的信息存儲和提取的效率，頁面設(shè)計中也應(yīng)當(dāng)科學(xué)地使用圖符，使得信息的結(jié)構(gòu)清晰易懂，并可適當(dāng)?shù)貫楦鱾€信息點提供擴展超鏈接。

（3）反應(yīng)系統(tǒng)：人機界面設(shè)計應(yīng)當(dāng)盡可能減少鍵盤和鼠標(biāo)之間過多的切換，頁面布局設(shè)計應(yīng)分模塊清晰呈現(xiàn)，減少不必要的眼球轉(zhuǎn)動，還應(yīng)為用戶提供友好快捷的反應(yīng)交互模塊。在網(wǎng)站設(shè)計中，各個欄目與模塊組要有條理，層次分明，同時還須提供問題交流模塊。

四、精品課程網(wǎng)站人機界面設(shè)計

在網(wǎng)頁設(shè)計中，瀏覽者通常根據(jù)心理偏好與網(wǎng)站所提供的交互方式進行瀏覽，精品課程網(wǎng)站應(yīng)深入研究人機界面設(shè)計原理，始終從用戶角度思考問題，從網(wǎng)站版面結(jié)構(gòu)、欄目導(dǎo)航設(shè)置、頁面配色及整體風(fēng)格的設(shè)計，考慮如何提供和諧界面和良好交互性。

1.網(wǎng)站定位與整體風(fēng)格

精品課程網(wǎng)站屬于教學(xué)類網(wǎng)站，課程體系一般包括教學(xué)計劃、教學(xué)大綱、課程文本、網(wǎng)絡(luò)教程、實習(xí)教程、授課教案、授課課件、課堂錄像、專題課件、形成性練習(xí)、雙語教學(xué)、模擬考場 (在線考試)、互動交流 (學(xué)生反饋BBS)、教學(xué)資源庫、參考資源等,其構(gòu)成符合現(xiàn)代學(xué)習(xí)理論的多層面學(xué)習(xí)架構(gòu),主要內(nèi)容與鏈接結(jié)構(gòu)簡單。作為提供在線學(xué)習(xí)的教育類網(wǎng)站，頁面版式設(shè)計要規(guī)范、嚴(yán)謹(jǐn),整體風(fēng)格簡潔大方,突出清新舒適的視覺特性，并且注意欄目風(fēng)格一致，細節(jié)圖案的適當(dāng)配合運用必須為主體內(nèi)容服務(wù)。

2.網(wǎng)頁布局

內(nèi)容來源于需求，從人機界面設(shè)計的角度來看，網(wǎng)頁排版布局必須首先尊重用戶瀏覽習(xí)慣，然后再根據(jù)模塊之間的聯(lián)系進行合理編排。精品課程網(wǎng)站的主要內(nèi)容相對固定，因此通?？蛇x擇拐角型布局模式，這種布局與“國”字型布局比較相近，上面是標(biāo)題及廣告橫幅，接下來的左側(cè)是一窄列鏈接，頁面下方是一些網(wǎng)站的輔助信息。在文字內(nèi)容較多的頁面上，也可以考慮在頁面?zhèn)冗呌蒙细訑U展鏈接模塊，方便建立相關(guān)內(nèi)容之間的快速鏈接?；趯W(xué)習(xí)類課程網(wǎng)站，精品課程網(wǎng)頁布局應(yīng)該把握幾個注意事項：

（1）邏輯性

網(wǎng)頁的布局和視覺效果設(shè)計是為網(wǎng)頁的目的和內(nèi)容服務(wù)的，網(wǎng)頁內(nèi)容之間的邏輯關(guān)系是設(shè)計的根本依據(jù)。頁面欄目組是課程網(wǎng)站的大綱索引，在制定欄目組時要明確教學(xué)資源各個模塊之間的關(guān)系，合理有序地安排好各個欄目，并且使相關(guān)內(nèi)容之間鏈接跳轉(zhuǎn)方便，從而增強網(wǎng)站的易用性。

欄目組通常放在較顯眼的位置，頁首或側(cè)面，在廣告橫幅下方可以設(shè)置導(dǎo)航或卡片式欄目組。從用戶角度出發(fā)，方便用戶查找與瀏覽，盡可能把課程最有價值的內(nèi)容條理清晰地展現(xiàn)給用戶。

各個主題可以考慮用圖表、線面結(jié)構(gòu)的形式來組織呈現(xiàn)，使得內(nèi)容組織條理清楚，層次分明。正文可用字體大小、顏色、縮進等方式表達內(nèi)容之間的從屬關(guān)系。如，為課程的每一章節(jié)標(biāo)題層次選用不同字體大小與顏色，但同時還得兼顧用戶視覺的舒適、字體類型、大小及顏色要適合閱讀。

（2）一致性

具有高度一致性的網(wǎng)站給用戶以清晰和整體感，精品課程網(wǎng)頁設(shè)計風(fēng)格要保持高度的一致性。包括：

1）結(jié)構(gòu)的一致性：網(wǎng)站結(jié)構(gòu)是網(wǎng)站風(fēng)格統(tǒng)一的重要手段，包括網(wǎng)站布局、文字排版、裝飾性元素（如Logo）出現(xiàn)的位置、導(dǎo)航的統(tǒng)一、圖片的位置、聯(lián)系信息等。

2）色彩與字體的一致性：人的視覺對色彩要比布局更敏感，更容易在大腦中形成記憶符號。保持站點主體色彩的一致，會給人留下很深刻的印象。精品課程網(wǎng)頁可以考慮只選一到兩種主要色彩，保持頁面的和諧，所有的頁面字體風(fēng)格也必須保持統(tǒng)一。

3）導(dǎo)航與瀏覽機制的一致性：導(dǎo)航是課程網(wǎng)站的一項重要組成部分，用戶在課程網(wǎng)站中某一欄目使用的瀏覽方式應(yīng)類同于其他欄目的瀏覽方式。主瀏覽條上的類別內(nèi)容要始終保持一致，以免讓用戶產(chǎn)生迷惑。

4）特別元素和背景的一致性：頁面設(shè)計中個別具有特色的元素（如標(biāo)志、象征圖形等）重復(fù)出現(xiàn)，會給用戶留下深刻印象。網(wǎng)站所有頁面中的重要鏈接都應(yīng)當(dāng)使用同樣的圖形進行標(biāo)識。在不影響下載速度的前提下，各個頁面宜選用一致的淺色背景顏色與圖案。

（3）交互性

精品課程網(wǎng)站應(yīng)具備師生互動模塊，教師可通過答疑系統(tǒng)、論壇等形式，為學(xué)生答疑解惑，這也是課堂教學(xué)的延伸和必要的補充,同時也為學(xué)生的自主學(xué)習(xí)提供了平臺。交互系統(tǒng)設(shè)計應(yīng)充分考慮用戶的需求和使用習(xí)慣。如，可對用戶群進行分類，注冊用戶與游客分別設(shè)置不同權(quán)限，游客身份的用戶只能瀏覽，注冊用戶可以實時參與交互。同時為保證信息的同步，應(yīng)對頁面進行及時刷新。交互系統(tǒng)的建設(shè)與運行的狀況，直接影響精品課程網(wǎng)站教學(xué)的效果。

3.色彩搭配

色彩是整個網(wǎng)站風(fēng)格設(shè)計的“靈魂”，它既是藝術(shù)表現(xiàn)的要素之一，又是一種對學(xué)習(xí)者有強烈情緒影響和心理暗示作用的視覺因素，它可以傳達信息、激發(fā)情感、產(chǎn)生聯(lián)想。在精品網(wǎng)站設(shè)計過程中除了把握一般網(wǎng)站頁面配色的基本原則（色彩的鮮明、獨特、合適、聯(lián)想）以外，還得從用戶群的心理特征與專業(yè)課程特點出發(fā)，針對性地使用顏色。

（1）主色調(diào)的選擇

精品課程網(wǎng)站作為教育類網(wǎng)頁主色調(diào)可以藍、綠或橙色為主。藍色給人以清爽、專業(yè)的感覺，與綠色、白色搭配使網(wǎng)頁清新、干凈；綠色呈現(xiàn)朝氣、健康、青春；橙色可以與多種色彩進行搭配而營造出不同的氛圍。

從用戶心理角度分析，根據(jù)調(diào)查研究發(fā)現(xiàn)，大學(xué)生年齡主要分布在18至24歲之間，而不同學(xué)科性別比例不同。理工類男生占比例較大，而文史類女生比男生多。而從心理學(xué)角度看，男性偏愛冷色調(diào)，因此在理工科專業(yè)課程的精品網(wǎng)站可考慮多使用藍、綠等為主色調(diào)。[4]這種色調(diào)會讓瀏覽者情緒安靜，大腦邏輯思維活躍；而文史類可適當(dāng)考慮使用具有適當(dāng)飽和度和明度的暖色調(diào)，可讓瀏覽者情緒興奮，激發(fā)想象力。

（2）網(wǎng)頁構(gòu)成要素的色彩搭配

網(wǎng)頁中的幾個關(guān)鍵要素，如網(wǎng)頁導(dǎo)航與小標(biāo)題、網(wǎng)頁Logo與Banner(橫幅廣告)、網(wǎng)頁背景與文字，以及鏈接的顏色應(yīng)該如何協(xié)調(diào)，是所有網(wǎng)頁配色時需要認(rèn)真對待的問題。

1）導(dǎo)航與小標(biāo)題

導(dǎo)航與小標(biāo)題在頁面中起著導(dǎo)航、指引的作用。學(xué)生要在網(wǎng)頁間跳轉(zhuǎn)，要了解網(wǎng)站的結(jié)構(gòu)、網(wǎng)站的內(nèi)容，都必須通過課程網(wǎng)頁中的導(dǎo)航或者一些小標(biāo)題，因此，這些元素可以使用稍深點或有點跳躍性的色彩，吸引學(xué)生的視線，讓他們感覺網(wǎng)站清晰、明了、層次分明。

2）Logo與Banner

Logo與Banner是宣傳網(wǎng)站最重要的工具之一，課程網(wǎng)站的Logo一般是學(xué)校的徽標(biāo)?？梢詫刹糠肿龅悯r亮一些，也就是色彩方面跟網(wǎng)頁的主題色分離開來，使得它們在頁面上脫穎而出。

3）背景與文字

精品課程網(wǎng)站中的背景顏色會對整個網(wǎng)站的形象產(chǎn)生影響。背景顏色的選擇要特別注意把握底色與前景內(nèi)容色的關(guān)系，影調(diào)要與前景內(nèi)容色有一定的對比。課程網(wǎng)站內(nèi)容以文本居多，所以要充分考慮用戶閱讀時的視覺舒適度，可以選擇純度或者明度較低的色彩，文字用較為突出的亮色，讓人一目了然。

4）鏈接

文字與圖片的鏈接是網(wǎng)站中不可缺少的一部分。精品課程網(wǎng)站中需要注意的是頁面文字內(nèi)容的鏈接，通常在部分文本中，需要設(shè)置某些內(nèi)容的互相關(guān)聯(lián)，或?qū)I(yè)術(shù)語的詳細解釋。鏈接區(qū)別于文字，所以鏈接的色彩不能跟文字的色彩一樣，應(yīng)該設(shè)置相對易于辨別的鏈接色彩，方便用戶查找相關(guān)內(nèi)容，高效學(xué)習(xí)，彰顯課程網(wǎng)站網(wǎng)狀內(nèi)容組織形式，突出優(yōu)勢。

五、結(jié)束語

網(wǎng)站的頁面設(shè)計是人機界面設(shè)計研究領(lǐng)域中的熱點之一。精品課程網(wǎng)站是教育學(xué)習(xí)類網(wǎng)站，頁面的設(shè)計應(yīng)該明確定位與設(shè)計目標(biāo)，從用戶需求角度出發(fā)，把握用戶群體的思維特性和行為特性，在人機界面設(shè)計的指導(dǎo)原則下，結(jié)合人腦信息處理特點，科學(xué)地規(guī)劃設(shè)計網(wǎng)頁，使得瀏覽者在和諧舒適的視覺環(huán)境下高效地學(xué)習(xí)。☉

[1]劉志穎.淺談精品課程網(wǎng)站的建設(shè)[J].東北電力大學(xué)學(xué)報,2007(5).

[2]李樂山.人機界面設(shè)計[M].科學(xué)出版社,2004.8:12-15.

[3]董建明.人機交互以用戶為中心的設(shè)計和評估[M].北京:清華大學(xué)出版社,2003.9:11-13.

[4]李壽財.國家精品課程網(wǎng)站色彩調(diào)查與分析[J].網(wǎng)絡(luò)教育,2009(3).

[5]廖宏勇.數(shù)字界面設(shè)計[M].北京:北京師范大學(xué)出版社,2010.6:145-172.

（編輯：楊馥紅）

TP393.092

B

1673-8454(2011)17-0088-03