李 葳

（福州職業(yè)技術(shù)學(xué)院，福建 福州 350001）

如何搭建完整的網(wǎng)站架構(gòu)并設(shè)計出一個出色的學(xué)校網(wǎng)站？關(guān)于這個問題，很難提出一個絕對權(quán)威和正確的設(shè)計思路，但任何網(wǎng)站的設(shè)計都需要遵循一個循序漸進(jìn)的步驟。根據(jù)Web標(biāo)準(zhǔn)：結(jié)構(gòu)(Structure)，表現(xiàn)(Presentation)和行為(Behavior)，網(wǎng)站的設(shè)計大致可具體分為網(wǎng)站模型構(gòu)建、審美與交互設(shè)計、風(fēng)格設(shè)計、代碼設(shè)計、可用性測試等五方面，這五個方面的設(shè)計均是建立在用戶分析和需求分析的基礎(chǔ)上。[1]

一、高校網(wǎng)站用戶分析

1.網(wǎng)站設(shè)計最重要目的

網(wǎng)站設(shè)計最重要目的是滿足用戶查詢信息的需求，所以網(wǎng)站界面設(shè)計的第一步就需要決策者和設(shè)計師從確定用戶群體入手，分析群體特征及需求，繼而確定整體界面設(shè)計方案。首先從用戶分類、用戶需求定位及訪問頻率三個方面對學(xué)校網(wǎng)站進(jìn)行用戶分析，如表所示。

表 用戶分類及需求分析

2.在校學(xué)生及準(zhǔn)學(xué)生是學(xué)校網(wǎng)站的主要訪問人群

從不同用戶的數(shù)量上看，學(xué)校網(wǎng)站雖然有別于專門的網(wǎng)絡(luò)教育站點(diǎn)，但在校學(xué)生及準(zhǔn)學(xué)生（perspective students）由于基數(shù)大，仍作為學(xué)校網(wǎng)站的主要訪問人群，貢獻(xiàn)了學(xué)校網(wǎng)站大部分的訪問量。教師及行政工作人員在訪問次數(shù)和訪問頻率方面較少，如圖1所示。

圖1 用戶數(shù)量分布

依據(jù)以上兩點(diǎn)分析，學(xué)生是學(xué)校網(wǎng)站的主要服務(wù)對象，所以學(xué)生群體的使用需求、使用習(xí)慣和使用特征都是學(xué)校網(wǎng)站設(shè)計的重要考量內(nèi)容和指導(dǎo)方向。

二、以用戶為中心的高校網(wǎng)站設(shè)計項(xiàng)目分析

一個成功的以用戶體驗(yàn)為中心的設(shè)計項(xiàng)目，應(yīng)該正確處理和協(xié)調(diào)以下五個層面的關(guān)系，如圖2所示。

圖2 以用戶為中心的網(wǎng)站設(shè)計五層次

1.從戰(zhàn)略層分析

作為教育類型網(wǎng)站，高校站點(diǎn)設(shè)計的決策者由高校分管的校領(lǐng)導(dǎo)承當(dāng)，由設(shè)計師具體實(shí)施，通常站點(diǎn)的內(nèi)容大致由以下三個功能模塊構(gòu)成：

（1）向社會（包括國內(nèi)外）展示校園文化和教研成果，樹立良好的教育形象；

（2）介紹學(xué)校的機(jī)構(gòu)設(shè)置并及時發(fā)布學(xué)校的通知公告和新聞動態(tài)，讓社會了解學(xué)校的最新動態(tài)；

（3）為全校師生提供一個良好的教學(xué)與學(xué)習(xí)的網(wǎng)絡(luò)平臺。

2.從范圍層分析

以學(xué)生作為學(xué)校網(wǎng)站的中心用戶，必須對學(xué)生的具體使用需求進(jìn)行分析。網(wǎng)站界面設(shè)計流程，最重要的是考慮學(xué)生所要檢索的信息版塊均能在首頁中得到清晰的指向，并使站點(diǎn)有合理的結(jié)構(gòu)，最終抵達(dá)有價值的信息。

3.從結(jié)構(gòu)層分析

良好的信息架構(gòu)（Information Architecture），可以讓用戶快速準(zhǔn)確地定位到相關(guān)信息，節(jié)省在無用鏈接中浪費(fèi)的時間；合理的交互設(shè)計，能夠使用戶更便捷地使用網(wǎng)站提供的服務(wù)。

4.從框架層分析

用戶對于一個網(wǎng)站的認(rèn)知由它的界面、導(dǎo)航和信息三個方面構(gòu)成。導(dǎo)航和信息的合理編排構(gòu)成了界面。

5.從表現(xiàn)層分析

即視覺設(shè)計方面，好的頁面布局和設(shè)計能夠提高用戶的使用效率，更好引導(dǎo)和啟發(fā)用戶。對于教師及其他教育者，簡潔合理的設(shè)計能夠讓他們感到網(wǎng)站的權(quán)威和實(shí)用性；對于學(xué)生群體，網(wǎng)站鮮明的特征更能增加他們對網(wǎng)站的好感，引導(dǎo)他們的視線，從網(wǎng)站瀏覽中獲得更多信息。對于引導(dǎo)用戶視線，主要可應(yīng)用以下兩種方式：

（1）應(yīng)用古騰堡圖表

訪問者在瀏覽頁面的時候，視線通常趨向于從左上角移動到右下角。因?yàn)槿藗兺ǔ５拈喿x習(xí)慣，都是從左至右、從上往下，久而久之，瀏覽視線就本能地會沿著這一路徑移動。古騰堡圖表描述了“對角線平衡”這一和諧的閱讀軌跡規(guī)律：“左上角是第一視覺落點(diǎn)區(qū)（Primary Optical Area，POA），而右下角則是最終視覺落點(diǎn)區(qū)（Terminal Anchor，TA）。與之相對，右上角和左下角則是視覺盲點(diǎn)”。[2]為了體現(xiàn)“對角線平衡”的視覺設(shè)計布局，設(shè)計師可以運(yùn)用不同的頁面元素創(chuàng)建出這條虛擬的“線”，引導(dǎo)用戶視線從左上移至右下，并在視線的起落點(diǎn)上安置有起始和延續(xù)作用的重要布局信息。以清華大學(xué)網(wǎng)站為例，如圖3所示。首先，學(xué)校的LOGO標(biāo)志出現(xiàn)在頁面左上角，形成鮮明的印象；其次，中部及下部分布的是學(xué)院網(wǎng)站最主要的信息版塊，包括導(dǎo)航欄和頁面新聞，中間由一副較大通欄圖片或加深印象或提示重要學(xué)?；顒?；在視線末端的右下方，網(wǎng)站提供了多個鏈接到其他功能子站，引導(dǎo)瀏覽者將獲得更多類別的信息。

圖3 清華大學(xué)首頁

（2）利用顏色吸引特定注意

在頁面形成整體一致性的同時，若頁面上某個元素的顏色和其他的形成反差，瀏覽者通常會被這種差異性吸引。所以，在頁面中合理加入一些與主色系互補(bǔ)或者反差的顏色，可以有效把瀏覽者的視線吸引到我們希望他看到的地方。同樣以清華大學(xué)網(wǎng)站為例，頁面底板、LOGO及導(dǎo)航部分選擇了紫紅色，中間通欄圖及部分新聞內(nèi)容就選擇了與之接近互補(bǔ)的黃色。

三、適用于高校網(wǎng)站的設(shè)計流行趨勢

舊形式的網(wǎng)頁隨著設(shè)計和應(yīng)用不斷發(fā)展和更新，逐漸無法適應(yīng)新的需求，主要的缺陷表現(xiàn)在：表格布局繁瑣、訪問速度緩慢、瀏覽器兼容性差以及改版成本高等四個方面。[3]為了保障學(xué)校宣傳工作的時效性和準(zhǔn)確性，必須對在遵循Web標(biāo)準(zhǔn)的基礎(chǔ)上，按照新的應(yīng)用需求和設(shè)計趨勢對網(wǎng)頁進(jìn)行改版。對于高校的門戶網(wǎng)站來說，總體的頁面風(fēng)格已經(jīng)從原來的信息集中式改變?yōu)楝F(xiàn)在的名片式，這點(diǎn)在首頁設(shè)計上尤其明顯。下文仍將以清華大學(xué)的網(wǎng)站為例，分析近年在高校網(wǎng)站設(shè)計中的流行趨勢。

1.醒目的站點(diǎn)名稱（LOGO）及標(biāo)頭（HEADERS）

從清華大學(xué)的首頁上看到，LOGO的白字在紫色底上顯得鮮明又突出，大小恰當(dāng)。整個標(biāo)頭區(qū)域以紫色塊為主，圖案以低透明度的方式顯示在標(biāo)頭處，既不影響色塊的純粹性，又為標(biāo)頭帶來豐富的感覺。

在LOGO顯示區(qū)域，應(yīng)盡量避免如標(biāo)語、飛出頁面等的干擾，這樣影響了瀏覽者對網(wǎng)站第一印象的形成，容易在初始瀏覽階段就產(chǎn)生混沌，影響后續(xù)的瀏覽效果。

2.巨幅圖片

清華大學(xué)首頁展示的圖片占據(jù)頁面接近一半的視覺面積，為了更加突出其效果，設(shè)計師選擇了與底板紫色互補(bǔ)的黃色，更好地吸引了瀏覽者的眼光。這與之前的飛出頁面（Splash pages）功能相近，但飛出界面或者彈出窗口的設(shè)計已經(jīng)非常過時。訪問者通常對強(qiáng)迫點(diǎn)擊非常反感，這讓飛出界面非但不能起到預(yù)期的作用，往往還造成瀏覽者對網(wǎng)站的排斥心理，所以這種設(shè)計逐漸被現(xiàn)在的巨幅照片所取代。

3.減少首頁文字信息

在一些傳統(tǒng)網(wǎng)站的設(shè)計中，設(shè)計者或者網(wǎng)站擁有者通常希望用戶在首頁上就能盡可能多地獲得信息，所以提供了各種類型信息的預(yù)覽，甚至有更長的介紹性文字。但許多研究表明，用戶都希望盡快定位到他所需要瀏覽的信息群，而不會在其他不相關(guān)版塊和文字中花費(fèi)時間。諾曼集團(tuán)負(fù)責(zé)人Jakob Nielson在他的專欄中指出，人們通常不會在首頁上閱讀文字，他們只是掃描，如果是更長的介紹性文字，人們往往會直接忽略。[4]所以，首頁應(yīng)側(cè)重其設(shè)計的功能性、交互性和吸引力，而不需要在閱讀性上花費(fèi)大量精力。重要信息稍微提示即可，導(dǎo)航的設(shè)計才是將用戶引導(dǎo)到大量有用信息的最重要的交互元素。

4.單頁布局

單頁布局是使用一個單獨(dú)的頁面來呈現(xiàn)網(wǎng)頁內(nèi)容。有些單頁布局的設(shè)計者是遵循“少即是多”的極簡主義原則，盡可能刪除不必要的信息，僅呈現(xiàn)最重要的功能；新的設(shè)計喜歡在單個頁面中包含豐富而生動的圖像動畫效果，讓信息和交互功能以更鮮明的方式呈現(xiàn)。

總的來說，高校網(wǎng)頁設(shè)計和開發(fā)，是一個十分詳細(xì)的項(xiàng)目拆解和建構(gòu)的過程，在認(rèn)真分析用戶需求的基礎(chǔ)上，才能開發(fā)出適應(yīng)高校教學(xué)、管理和宣傳等功能的網(wǎng)站，并且提供準(zhǔn)確、高效的交互服務(wù)。

[1]李超.CSS網(wǎng)站布局實(shí)錄——基于Web標(biāo)準(zhǔn)的網(wǎng)站設(shè)計指南[M].北京:科學(xué)出版社,2006.

[2][美]Robert Hoekman,Jr.向怡寧譯.瞬間之美:Web頁面設(shè)計如何讓用戶行動[M].北京:人民郵電出版社,2009.

[3]侯靜,歐陽榮彬,種連榮,王珂平.基于 Web標(biāo)準(zhǔn)的高校網(wǎng)站建設(shè)與實(shí)現(xiàn)[J].中山大學(xué)學(xué)報自然科學(xué)版,2009(3):91-99.

[4][美]Jakob Nielson.Blah-Blah Text:Keep,Cut,or Kill?[DB/OL].http://www.useit.com/alertbox/intro -text.html October 1,2007.