以用戶(hù)為中心的高校網(wǎng)站界面設(shè)計(jì)

李 葳

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

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

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

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

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

表 用戶(hù)分類(lèi)及需求分析

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

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

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

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

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

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

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

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

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

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

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

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

2.從范圍層分析

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

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

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

4.從框架層分析

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

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

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

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

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

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

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

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

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

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

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

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

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

2.巨幅圖片

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

3.減少首頁(yè)文字信息

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

4.單頁(yè)布局

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

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

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

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

[3]侯靜,歐陽(yáng)榮彬,種連榮,王珂平.基于 Web標(biāo)準(zhǔn)的高校網(wǎng)站建設(shè)與實(shí)現(xiàn)[J].中山大學(xué)學(xué)報(bào)自然科學(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.