陳婷婷

（天津?yàn)I海職業(yè)學(xué)院，天津市 300451）

教務(wù)網(wǎng)站交互界面設(shè)計(jì)原則淺析

陳婷婷

（天津?yàn)I海職業(yè)學(xué)院，天津市 300451）

學(xué)校教務(wù)網(wǎng)站是一種特定功能的網(wǎng)絡(luò)平臺(tái)。教務(wù)網(wǎng)站交互界面設(shè)計(jì)，從用戶瀏覽教務(wù)網(wǎng)站時(shí)的生理和心理狀態(tài)出發(fā)，探尋了該類網(wǎng)站界面設(shè)計(jì)中的視覺(jué)元素運(yùn)用，提出了教務(wù)網(wǎng)站交互界面設(shè)計(jì)原則。

教務(wù)網(wǎng)站；交互界面；視覺(jué)元素；用戶

教務(wù)網(wǎng)站可以實(shí)現(xiàn)教務(wù)管理手段的計(jì)算機(jī)化、規(guī)范化和網(wǎng)絡(luò)化，提高了教務(wù)工作效率，降低了教務(wù)人員的工作強(qiáng)度，還改善了服務(wù)，滿足教務(wù)管理人員、教師、學(xué)生的信息化管理及其發(fā)展的多方面需要，同時(shí)也保證了教務(wù)信息的長(zhǎng)期保存。

在設(shè)計(jì)教務(wù)網(wǎng)站交互界面，要充分考慮到用戶在閱讀網(wǎng)頁(yè)時(shí)的生理和心理狀態(tài)，要讓用戶在最短的時(shí)間內(nèi)，迅速的理解網(wǎng)站里所提供的信息內(nèi)容，以及簡(jiǎn)單、方便、快速的進(jìn)行教務(wù)操作。

一、教務(wù)網(wǎng)站中視覺(jué)元素運(yùn)用分析

教務(wù)網(wǎng)站交互界面中的視覺(jué)元素由圖形、文字和色彩組成。它具有提高用戶的工作效率、表示視覺(jué)和空間概念、節(jié)省空間、加快搜索并且有利于界面的標(biāo)準(zhǔn)化和規(guī)范化等作用。視覺(jué)元素設(shè)計(jì)首要考慮用戶的視覺(jué)尋找特性，明確表達(dá)它所蘊(yùn)含的功能、易于被用戶識(shí)別、易于被用戶搜索、易于被用戶用輸入設(shè)備所激活。

視覺(jué)元素的構(gòu)圖應(yīng)當(dāng)有利于視覺(jué)的直接感知，使用戶能夠較容易的發(fā)現(xiàn)和識(shí)別想要的圖標(biāo)，而后進(jìn)行一系列的操作，所以圖形設(shè)計(jì)不要太復(fù)雜，如果視覺(jué)圖形信息過(guò)多，視覺(jué)必然要注意看其細(xì)節(jié)，就會(huì)造成視覺(jué)感知困難，尋找的速度也會(huì)減慢，很難實(shí)現(xiàn)直接感知，也不符合用戶操作的動(dòng)機(jī)。

1．圖形

圖形是教務(wù)網(wǎng)站交互界面中最重要的設(shè)計(jì)元素之一。它在教務(wù)網(wǎng)站版面的視覺(jué)構(gòu)成中占有很大比例，視覺(jué)沖擊力相對(duì)同等面積的文字強(qiáng)。圖形的使用不但可以增加交互界面的美觀性，同時(shí)還可以傳達(dá)網(wǎng)站的某些信息，具有烘托視覺(jué)效果和引導(dǎo)閱讀兩大功能，因而更易形成視覺(jué)信息的中心。圖形鏈接按鈕直觀、形象，也更易識(shí)別，可以明確的表現(xiàn)它所要進(jìn)行的操作。

在教務(wù)網(wǎng)站交互界面中圖形的采用要遵循少而精的原則，盡量選用用戶易認(rèn)、易記、熟知的圖形，圖形的內(nèi)容與風(fēng)格還要與教務(wù)主題內(nèi)容相符合，同時(shí)還要與整個(gè)網(wǎng)站界面的主色調(diào)一致。

2．文字

文字在教務(wù)網(wǎng)站交互界面中可以直觀的傳達(dá)信息，并且用戶更容易識(shí)別和閱讀。文字鏈接按鈕是教務(wù)網(wǎng)站中比較常用的鏈接方式，可以直觀的顯示出鏈接的主題信息，用戶可以方便的檢索所需的信息和完成工作。

文字的形態(tài)及編排設(shè)計(jì)應(yīng)適應(yīng)于人的視覺(jué)流向心理和生理特點(diǎn)，符合用戶的閱讀習(xí)慣，盡量提高教務(wù)網(wǎng)站交互界面的易讀程度，同時(shí)還應(yīng)注意使其具有視覺(jué)上的美感，保持一個(gè)統(tǒng)一的基調(diào)，以使用戶可以愉悅的在教務(wù)網(wǎng)站交互界面上進(jìn)行教務(wù)操作。

3．色彩

色彩也是交互界面設(shè)計(jì)的一種語(yǔ)言，又是視覺(jué)信息傳達(dá)的手段和方式，是教務(wù)網(wǎng)站交互界面設(shè)計(jì)中的重要元素。色彩在教務(wù)網(wǎng)站交互界面中有引導(dǎo)視覺(jué)信息流程的作用，使其具有良好的易讀性，同時(shí)還可以烘托教務(wù)網(wǎng)站的主題，增強(qiáng)網(wǎng)站的吸引力。

在進(jìn)行教務(wù)網(wǎng)站交互界面設(shè)計(jì)時(shí)，色彩的選用應(yīng)注意：

（1）用戶同時(shí)分辨多種色彩的數(shù)量是有限的。一個(gè)教務(wù)網(wǎng)站的標(biāo)準(zhǔn)色彩不應(yīng)超過(guò)3種，太多則讓人眼花繚亂。標(biāo)準(zhǔn)色彩要用于教務(wù)網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊，給人以整體統(tǒng)一的感覺(jué)，其它色彩也可以使用，只是應(yīng)作為點(diǎn)綴和襯托，絕不能喧賓奪主。適合于教務(wù)網(wǎng)站標(biāo)準(zhǔn)色的顏色有：藍(lán)色、黃、橙色和黑、灰、白色三大系列色。

（2）在色彩的選取上要盡可能的符合用戶的習(xí)慣和經(jīng)驗(yàn)，如用黃色表示沙漠，藍(lán)色表示海洋等；

（3）根據(jù)對(duì)象的重要程度來(lái)選擇顏色，一般情況下，重要對(duì)象的顏色選取相對(duì)醒目的顏色；

（4）為了便于區(qū)分對(duì)象，要做好前景色和背景色的選取，背景色盡量少用灰暗、深沉的色彩，注意配色的組合，并且根據(jù)頁(yè)面的主題來(lái)選擇主色調(diào)；

（5）一個(gè)教務(wù)網(wǎng)站中的色彩設(shè)計(jì)應(yīng)該一致，如使用紅色作為錯(cuò)誤信息，黃色表示警告信息等；

（6）如果沒(méi)有特殊用途，教務(wù)網(wǎng)站界面中盡量避免那種強(qiáng)烈色彩對(duì)比的顏色組合，像紅／綠、黃／藍(lán)、藍(lán)／綠等，以免在其邊界產(chǎn)生余象效應(yīng)。

二、教務(wù)網(wǎng)站交互界面設(shè)計(jì)原則

一個(gè)優(yōu)良的網(wǎng)站交互界面設(shè)計(jì)，就是要符合用戶的需求，考慮到用戶的生理、心理狀況；一個(gè)友善便利的網(wǎng)站交互界面，不但可增加使用之方便性，亦可減少使用錯(cuò)誤率，發(fā)揮網(wǎng)絡(luò)最大的功能，達(dá)到造福用戶的目的。教務(wù)網(wǎng)站交互界面設(shè)計(jì)由于它使用范圍的特殊性，設(shè)計(jì)時(shí)應(yīng)該遵從以下的設(shè)計(jì)原則：

1．用戶為中心原則

教務(wù)網(wǎng)站交互界面設(shè)計(jì)不僅可以提高界面的易用性，使教務(wù)網(wǎng)站交互界面更加符合用戶的思維習(xí)慣和交互經(jīng)驗(yàn)，用戶為中心和出發(fā)點(diǎn)，對(duì)師生群體的實(shí)際需求分析，以及以人為本的設(shè)計(jì)思想的指導(dǎo)，來(lái)構(gòu)建適合當(dāng)前師生群體使用的教務(wù)管理網(wǎng)絡(luò)交流平臺(tái)，使用戶能簡(jiǎn)單輕松的使用網(wǎng)絡(luò)平臺(tái)，通過(guò)網(wǎng)站界面實(shí)現(xiàn)各種教務(wù)交互。

2．網(wǎng)站主題定位明確、鮮明突出

教務(wù)網(wǎng)站內(nèi)的全部信息必須根據(jù)教務(wù)管理相關(guān)內(nèi)容進(jìn)行選擇、鑒別和整理。信息傳達(dá)的目的性要明確，針對(duì)性要強(qiáng)，設(shè)計(jì)的全過(guò)程都要圍繞教務(wù)管理這一主題展開(kāi)。

網(wǎng)站的主要內(nèi)容應(yīng)放在界面中心最醒目的位置，應(yīng)當(dāng)避免將重要的內(nèi)容放在屏幕的右側(cè)和下端，因?yàn)橛覀?cè)和下端的內(nèi)容往往容易被用戶所忽視；重要的內(nèi)容的放置還應(yīng)符合用戶的視覺(jué)流程習(xí)慣；同時(shí)網(wǎng)站的重要內(nèi)容還可以用較大的字體和突出的顏色來(lái)顯示，增加醒目性。

3．網(wǎng)站結(jié)構(gòu)清晰、層次簡(jiǎn)潔

網(wǎng)站結(jié)構(gòu)反映了網(wǎng)站內(nèi)各種信息之間的關(guān)系，是直接影響教務(wù)管理信息傳達(dá)效果的重要因素，鏈接混亂，層次不清會(huì)造成瀏覽的困難，影響教務(wù)相關(guān)內(nèi)容的表達(dá)。結(jié)構(gòu)清晰的教務(wù)網(wǎng)站不僅能使用戶明確自己身在何方，而且能以最少的點(diǎn)擊、迅速、有效的連接到其他同級(jí)或不同級(jí)的頁(yè)面，準(zhǔn)確的找到所需內(nèi)容進(jìn)行教務(wù)操作。所以，在設(shè)計(jì)中應(yīng)盡量把教務(wù)網(wǎng)站的層次簡(jiǎn)化，力求以最少的點(diǎn)擊次數(shù)鏈接到具體的教務(wù)內(nèi)容。

網(wǎng)站信息內(nèi)容不要全部顯示出來(lái)，以減少大片連續(xù)的文字，而應(yīng)以提綱的形式進(jìn)行顯示；需要進(jìn)行操作，找到相應(yīng)的按鈕，進(jìn)入下一級(jí)菜單進(jìn)行具體操作；還可以用字體大小、顏色、縮進(jìn)等方式表達(dá)內(nèi)容之間的從屬關(guān)系，如用較大或較明顯的字體顯示較高層次的內(nèi)容，用較小的字體表示較低層次的內(nèi)容，具有鏈接功能的字體采用下劃線和改變色調(diào)的方法進(jìn)行標(biāo)示等；同時(shí)減少使用滑條、滾輪的次數(shù)；還應(yīng)盡量避免使用不斷循環(huán)的、快速變化的或閃爍刺眼的動(dòng)畫(huà)，減少干擾信息。

4．一致性原則

一致的外觀與感覺(jué)可以在教務(wù)網(wǎng)站中創(chuàng)造一種和諧，任何內(nèi)容看上去都是那么協(xié)調(diào)。如果教務(wù)網(wǎng)站交互界面缺乏一致性，則很可能引起混淆，并使頁(yè)面看起來(lái)非?；靵y、沒(méi)有條理，影響教務(wù)網(wǎng)站的實(shí)際操作。教務(wù)網(wǎng)站交互界面設(shè)計(jì)應(yīng)堅(jiān)持一致性原則，這樣有助于用戶減少學(xué)習(xí)量和記憶量。

（1）元素外觀一致。教務(wù)網(wǎng)站應(yīng)采用一致風(fēng)格的外觀。元素外觀一致性包括具有相似的網(wǎng)站界面外觀、風(fēng)格、布局，字體、色彩的一致性，如采用學(xué)校的標(biāo)志作為網(wǎng)站的標(biāo)志，以及相似的信息顯示格式；同時(shí)保持一致的瀏覽條和瀏覽機(jī)制等。

（2）交互行為一致。在交互模型中，其交互行為需要一致。例如：所有需要用戶確認(rèn)操作的對(duì)話框應(yīng)都包含確認(rèn)和取消兩個(gè)按鈕。教務(wù)網(wǎng)站中所有的交互行為應(yīng)保持一致。

5．易用性原則

教務(wù)網(wǎng)站界面的易用性原則包括：將網(wǎng)頁(yè)根據(jù)其內(nèi)容劃分清晰定義的分區(qū)，可以運(yùn)用視覺(jué)處理方法予以區(qū)分；界面的顯示信息要清晰明了，易讀易懂，包括結(jié)果與狀態(tài)信息的顯示，提示與錯(cuò)誤信息的顯示等；界面的操作部分要明顯可辨識(shí)，操作應(yīng)該簡(jiǎn)單方便，直接有效；向用戶傳遞信息盡量及時(shí)而明確，在執(zhí)行命令中應(yīng)及時(shí)的把運(yùn)行的狀態(tài)、執(zhí)行的結(jié)果顯示出來(lái)。

三、結(jié)語(yǔ)

通常情況下，設(shè)計(jì)者在教務(wù)網(wǎng)站設(shè)計(jì)時(shí)大多是考慮如何編程實(shí)現(xiàn)其功能，而沒(méi)有真正從用戶的角度考慮，忽略了許多認(rèn)知心理因素。上述設(shè)計(jì)原則正是在深入了解用戶認(rèn)知特性的基礎(chǔ)上，對(duì)師生群體的實(shí)際需求分析，以及以人為本的設(shè)計(jì)思想的指導(dǎo)下進(jìn)行總結(jié)的，對(duì)教務(wù)網(wǎng)站交互界面設(shè)計(jì)有一定的參考作用，有助于構(gòu)建適合當(dāng)前師生群體使用的教務(wù)管理網(wǎng)絡(luò)交流平臺(tái)。

［1］羅仕鑒，朱上上，孫守遷．人機(jī)界面設(shè)計(jì)［M］．北京：機(jī)械工業(yè)出版社，2002．

［2］李樂(lè)山．人機(jī)界面設(shè)計(jì)［M］．北京：科學(xué)出版社，2004．

Abstra c t：Academic website is a network platform with special functions．The design of its interface should focus on the physical and mental state of users when browsing the website and on the application of visual elements．

Key w ords：academic website；interface；visual elements；users

A Brief Analysis on the Design Principles of Academic Website＇s Interface

CHEN Ting－ting

（Tianjin Coastal Polytechnic，Tianjin 300451 China）

TP393．092．2

A

1673－582X（2011）03－0012－03

2001－12－08

陳婷婷（1980－），女，天津市人，天津?yàn)I海職業(yè)學(xué)院應(yīng)用藝術(shù)系講師，碩士，研究方向：工業(yè)設(shè)計(jì)、電腦藝術(shù)設(shè)計(jì)。