開放大學(xué)門戶網(wǎng)站的構(gòu)建與優(yōu)化

張新海 蔡會(huì)霞

摘要：開放大學(xué)門戶網(wǎng)站是對(duì)外信息發(fā)布和宣傳的重要窗口，是網(wǎng)上教學(xué)和各種業(yè)務(wù)系統(tǒng)的應(yīng)用匯聚。開放大學(xué)門戶網(wǎng)站的設(shè)計(jì)理念和設(shè)計(jì)風(fēng)格，直接關(guān)系到網(wǎng)站的服務(wù)質(zhì)量。該文從設(shè)計(jì)理念和設(shè)計(jì)風(fēng)格兩方面，以服務(wù)終端用戶為根本目標(biāo)，對(duì)開放大學(xué)門戶網(wǎng)站的構(gòu)建進(jìn)行了實(shí)踐和探索。最后通過實(shí)踐，驗(yàn)證了門戶網(wǎng)站優(yōu)化方案是有效的。

關(guān)鍵詞：門戶網(wǎng)站；訪客細(xì)分；服務(wù)理念

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）25-6022-03

Construction and Optimization of the Open University Portal

ZHANG Xin-Hai， CAI Hui-Xia

（Network Center， Jiangsu Open University， Nanjing 210036， China）

Abstract： In this paper， open university portal is an important window of external information dissemination and publicity， is the application of e-learning and a variety of business systems converge. Open University portal design and style， directly related to the quality of service the site. From the design concept and design aspects， to serve visitors as a fundamental goal， the establishment of open universities portals were practice and exploration.

Key words： Portal； visitors segmentation； service concept

開放大學(xué)是以廣播電視大學(xué)為基礎(chǔ)，依托市縣開放大學(xué)，整合各類教育資源的辦學(xué)系統(tǒng)和服務(wù)體系。作為開放大學(xué)的基礎(chǔ)設(shè)施之一，各級(jí)市縣開放大學(xué)都建設(shè)了自己的門戶網(wǎng)站，在對(duì)外宣傳和網(wǎng)絡(luò)教學(xué)中發(fā)揮了重要的作用。在開放大學(xué)的辦學(xué)過程中，經(jīng)過多年努力已經(jīng)建成了一系列完善的業(yè)務(wù)系統(tǒng)群，如：開放大學(xué)學(xué)習(xí)平臺(tái)、課程輔導(dǎo)答疑庫、終身教育學(xué)分銀行、數(shù)字圖書館等。開放大學(xué)門戶網(wǎng)站不僅是各級(jí)開放大學(xué)信息溝通和交流的樞紐，還是各種業(yè)務(wù)系統(tǒng)的應(yīng)用匯聚，如何更好的建設(shè)開放大學(xué)門戶網(wǎng)站，服務(wù)廣大訪客，顯得尤為迫切和重要。

1 國(guó)內(nèi)外主流高校門戶網(wǎng)站分析

通過對(duì)國(guó)內(nèi)外主流高校（英國(guó)開放大學(xué)、鳳凰城大學(xué)、華東師范大學(xué)）門戶網(wǎng)站進(jìn)行分析[1]，可以發(fā)現(xiàn)，江蘇開放大學(xué)門戶網(wǎng)站在設(shè)計(jì)理念、設(shè)計(jì)風(fēng)格等方面與這些主流國(guó)內(nèi)外高校還存在一定差距，主要體現(xiàn)在以下幾點(diǎn)：

1.1 服務(wù)對(duì)象定位模糊

高校門戶網(wǎng)站承擔(dān)著對(duì)外信息發(fā)布和網(wǎng)上學(xué)習(xí)的功能，合理的信息分類和導(dǎo)航可以使訪客迅速找到“自己想要”的內(nèi)容。如英國(guó)開放大學(xué)，門戶網(wǎng)站首頁的第一幅導(dǎo)航大圖就是字母A-Z的課程導(dǎo)航，網(wǎng)站正中間醒目的搜索框?yàn)镕ind a course，很顯然英國(guó)開放大學(xué)門戶網(wǎng)站設(shè)計(jì)的主要訪客就是訪問率最高的“在校學(xué)生”或“潛在學(xué)生”[2]。國(guó)內(nèi)高校門戶網(wǎng)站首頁通常都是設(shè)置“新聞速遞”、“最新消息”、“機(jī)構(gòu)設(shè)置”等欄目，這些內(nèi)容的訪客通常都是“本校教職工”或“社會(huì)人員”，學(xué)生通常找不到自己感興趣的內(nèi)容[3]。

1.2 網(wǎng)站設(shè)計(jì)風(fēng)格落后

互聯(lián)網(wǎng)技術(shù)的發(fā)展，推動(dòng)了Web前端技術(shù)的飛躍發(fā)展，Html5、JavaScript、Ajax等前端技術(shù)成為網(wǎng)站前端開發(fā)的主流[4]。受國(guó)內(nèi)用戶低版本瀏覽器使用率較高的影響，Html5技術(shù)在國(guó)內(nèi)流行度不廣，限制了網(wǎng)站前端技術(shù)的發(fā)展，網(wǎng)站的交互功能較差。國(guó)內(nèi)高校門戶網(wǎng)站在設(shè)計(jì)上主要偏重內(nèi)容，多以文字方式呈現(xiàn)，網(wǎng)站缺乏感染力、吸引力。國(guó)外網(wǎng)站通常采用扁平化風(fēng)格、響應(yīng)式、交互式設(shè)計(jì)，網(wǎng)站在具有強(qiáng)烈的視覺沖擊力同時(shí)，還有良好的用戶體驗(yàn)[5]。

2 門戶網(wǎng)站設(shè)計(jì)理念和風(fēng)格的探析

2.1 基于訪客的信息分類

開放大學(xué)辦學(xué)系統(tǒng)和服務(wù)體系分為省市縣三級(jí)開放大學(xué)，網(wǎng)站的主要訪客為全省辦學(xué)機(jī)構(gòu)教職工、學(xué)生、未來學(xué)生、校友和社會(huì)人員。網(wǎng)站發(fā)布的信息不僅包含行政部門的文件通知，還包含教學(xué)部門的網(wǎng)上教學(xué)信息，必須對(duì)這些信息進(jìn)行科學(xué)的分類，設(shè)計(jì)合理的欄目，才能使每類訪客迅速找到自己想要的信息。

根據(jù)信息受眾的不同，高校門戶網(wǎng)站信息的處理有兩種模式：

第一種模式是以行政部門和教學(xué)部門作為信息劃分的依據(jù)，將信息劃分為兩大類提供給用戶。目前國(guó)內(nèi)高校普遍采用這種按職能部門劃分信息的方式，采用這種模式，信息的發(fā)布和歸類都比較簡(jiǎn)單，但訪客查詢信息時(shí)就必須篩選掉一些對(duì)訪客無用的信息，信息投遞效率不高。

第二種模式是分析訪客的實(shí)際需求，對(duì)每類訪客進(jìn)行分析，客觀地統(tǒng)計(jì)出每類訪客的大致數(shù)量，每類訪客信息查詢的大致范圍，并以此為依據(jù)對(duì)信息進(jìn)行分類，將用戶最關(guān)心的信息呈現(xiàn)給用戶。采用這種信息處理方式，網(wǎng)站的設(shè)計(jì)和運(yùn)維難度相對(duì)較大，因?yàn)榇罅啃畔⑹强缭胶芏嗦毮懿块T后聚集出來的綜合信息，但這種信息處理方式無疑給每類訪客提供了更好的服務(wù)。

在現(xiàn)代遠(yuǎn)程教育中，開放學(xué)員是門戶網(wǎng)站最重要的訪客。開放大學(xué)門戶網(wǎng)站的建設(shè)應(yīng)采用第二種信息處理模式，將學(xué)員最需要的資源、信息直接呈現(xiàn)出來，更好的體現(xiàn)：“一切為了學(xué)生，為了學(xué)生的一切”的服務(wù)理念。

2.2 建立完善的信息發(fā)布機(jī)制

門戶網(wǎng)站是信息發(fā)布和呈現(xiàn)的平臺(tái)，內(nèi)容更新滯后、欄目混亂是國(guó)內(nèi)高校門戶網(wǎng)站的普遍現(xiàn)象。職能部門和教學(xué)部門往往側(cè)重部門二級(jí)網(wǎng)站的建設(shè)，將信息發(fā)布在部門網(wǎng)站上，各自為政，缺乏全局觀。

因此，需要建立全新的網(wǎng)站運(yùn)行和維護(hù)機(jī)制，由技術(shù)部門（技術(shù)中心、網(wǎng)絡(luò)中心）負(fù)責(zé)技術(shù)處理，信息主管部門（宣傳部、校辦）負(fù)責(zé)信息審核，行政和教學(xué)部門信息員負(fù)責(zé)信息的收集、編輯、發(fā)布。通過建立一個(gè)完善的信息發(fā)布、審核機(jī)制，提高了門戶網(wǎng)站信息的數(shù)量和質(zhì)量。

2.3 采用Web 2.0設(shè)計(jì)風(fēng)格

隨著Html5、CSS3、JavaScript等網(wǎng)站前端技術(shù)的發(fā)展，網(wǎng)站設(shè)計(jì)風(fēng)格得到了革命性發(fā)展。過去網(wǎng)站設(shè)計(jì)過程中普遍采用Div+CSS技術(shù)，以展示靜態(tài)文本、圖片為主，網(wǎng)站交互功能較差。隨著上述技術(shù)的投入使用，實(shí)現(xiàn)了更復(fù)雜的前端交互應(yīng)用，網(wǎng)站的用戶體驗(yàn)得到了極大的提升。

扁平化設(shè)計(jì)最早是出現(xiàn)在IOS、Android等移動(dòng)終端設(shè)備上，隨著扁平化設(shè)計(jì)得到用戶的快速認(rèn)可，這種設(shè)計(jì)風(fēng)格也影響著網(wǎng)站的設(shè)計(jì)。扁平化設(shè)計(jì)指的是去除漸變、陰影、高光等視覺效果，從而設(shè)計(jì)出一種看上去更“平”的界面。扁平化的一個(gè)優(yōu)勢(shì)就在于它可以更加簡(jiǎn)單直接的將信息呈現(xiàn)出來，減少認(rèn)知障礙的產(chǎn)生。

優(yōu)秀的門戶網(wǎng)站必須適應(yīng)各種屏幕分辨率，傳統(tǒng)的CSS技術(shù)很難做到，隨著Bootstrap、jQuery等JavaScript框架的流行，（Responsive Web Design）成為主流設(shè)計(jì)技術(shù)。通過響應(yīng)式設(shè)計(jì)，網(wǎng)頁可以在多種瀏覽設(shè)備（PC、移動(dòng)終端）上閱讀和導(dǎo)航，同時(shí)減少縮放、平移和滾動(dòng)。

網(wǎng)頁中每個(gè)元素（圖片、按鈕、表單等）都會(huì)對(duì)用戶體驗(yàn)起著關(guān)鍵性作用，影響著用戶的最終訪問行為，從長(zhǎng)遠(yuǎn)角度來看，開放大學(xué)門戶網(wǎng)站需要專業(yè)的美工設(shè)計(jì)。優(yōu)秀的設(shè)計(jì)可以使網(wǎng)站看起來更具有整體感，網(wǎng)頁中每個(gè)元素也更加細(xì)膩，在一定程度上加深了網(wǎng)站對(duì)用戶的吸引力。

3 門戶網(wǎng)站建設(shè)實(shí)踐

江蘇開放大學(xué)門戶網(wǎng)站（第一版）于2013年秋正式上線，網(wǎng)站首頁如圖1所示，按照扁平化述設(shè)計(jì)理念和設(shè)計(jì)風(fēng)格進(jìn)行規(guī)劃與設(shè)計(jì)。

3.1 樹立門戶網(wǎng)站的宣傳理念

在頁面中，①③⑦是對(duì)學(xué)校有力的宣傳。①是學(xué)校的?；蘸托Ｃ；帐谴韺W(xué)校辦學(xué)理念的圖形化象征，有特殊的象征意義。③是滾動(dòng)圖片新聞，采用大圖設(shè)計(jì)，極具視覺上的沖擊力。滾動(dòng)圖片新聞代表的是學(xué)校最重大的新聞和事件，采用圖文并茂的方式呈現(xiàn)給用戶，高質(zhì)量的圖片新聞是宣傳學(xué)校形象的最重要手段。⑦是地址和聯(lián)系方式，用戶在首頁中就能獲取學(xué)校的聯(lián)系方式，拉近了用戶和學(xué)校的距離，增強(qiáng)了親近感。

3.2 訪客細(xì)分的設(shè)計(jì)理念

頁面中②是網(wǎng)站的主導(dǎo)航，將“學(xué)歷教育”和“非學(xué)歷教育”欄目設(shè)置在主導(dǎo)航最醒目、關(guān)鍵的位置，就是為了清晰區(qū)分開放大學(xué)兩種教育類型，主要針對(duì)的用戶是“學(xué)生”和“未來學(xué)生”?！皩W(xué)員服務(wù)”欄目中的內(nèi)容貫穿學(xué)生的整個(gè)學(xué)習(xí)過程，包含“學(xué)習(xí)平臺(tái)”、“數(shù)字資源中心”、“數(shù)字圖書館”、“虛擬實(shí)驗(yàn)室”等學(xué)習(xí)過程中必不可少的學(xué)習(xí)環(huán)境和資源。對(duì)學(xué)生最常用的平臺(tái)和資源在⑤中進(jìn)行了提取，設(shè)置成專門的“快速通道”區(qū)域，使處在各個(gè)階段的學(xué)生都可以快速地獲取相應(yīng)的資源和信息。

針對(duì)教職工和下屬辦學(xué)點(diǎn)，④為他們提供了行政管理信息和教學(xué)教務(wù)信息。對(duì)這些信息也進(jìn)行了分類，分為“學(xué)校新聞”和“教學(xué)教務(wù)”。一般情況下，高校門戶網(wǎng)站的部門導(dǎo)航都會(huì)放在主導(dǎo)航中，但我們的主導(dǎo)航設(shè)計(jì)針對(duì)的是學(xué)生用戶，所以將這些部門導(dǎo)航在⑦中提取出來，形成了公共欄目區(qū)域，在這里還可以鏈接到其他應(yīng)用信息系統(tǒng)和專題網(wǎng)站，如一周會(huì)議、電話號(hào)碼、辦公系統(tǒng)等。對(duì)于未來學(xué)生（想要報(bào)名的學(xué)生），主導(dǎo)航②中提取了學(xué)校概況和招生信息，這些信息內(nèi)容的設(shè)置偏重于針對(duì)學(xué)生，使未來學(xué)生感覺這些信息就是為他們定制的，從而加強(qiáng)了未來學(xué)生的報(bào)名和學(xué)習(xí)欲望。

3.3 專業(yè)美工設(shè)計(jì)

網(wǎng)站的視覺效果直接決定了用戶體驗(yàn)，同時(shí)影響著用戶的繼續(xù)訪問和后續(xù)操作。頁面采用藍(lán)色系作為顏色主基調(diào)，設(shè)計(jì)簡(jiǎn)單、快速，沒有多余的花哨圖片和內(nèi)容。頁面布局采用扁平化設(shè)計(jì)，從視覺效果上看分成七塊，訪客可以清晰地區(qū)分頁面中每一塊區(qū)域的范圍和功能。 在頁面元素的處理上，采用“響應(yīng)式”設(shè)計(jì)，鼠標(biāo)所到之處“一切皆有響應(yīng)”，激勵(lì)用戶進(jìn)一步操作，具有良好的用戶體驗(yàn)。

4 基于熱力圖的網(wǎng)站優(yōu)化策略

門戶網(wǎng)站的設(shè)計(jì)是漸進(jìn)式的，在網(wǎng)站上線初期，需要對(duì)網(wǎng)站用戶群和用戶感興趣的信息做客觀地統(tǒng)計(jì)和分析，然后做出科學(xué)的優(yōu)化和調(diào)整。下面是通過網(wǎng)站分析工具（Heat Map），對(duì)江蘇開放大學(xué)門戶網(wǎng)站用戶訪問行為進(jìn)行分析的實(shí)例：

1） 分析門戶網(wǎng)站用戶群

通過熱力圖中網(wǎng)站訪問量的統(tǒng)計(jì)，我們可以大致分析出網(wǎng)站訪問量：“學(xué)習(xí)平臺(tái)”訪問量占58%，"辦公系統(tǒng)"訪問量占8%，“新聞?lì)惡凸矙谀款悺崩塾?jì)訪問量占34%。其中圖片新聞、學(xué)校新聞、教學(xué)教務(wù)等新聞?lì)悪谀?，每條新聞的訪問量在1～2%左右，學(xué)校概況、職能部門等公共欄目幾乎無人訪問。我們可以大致認(rèn)為，開放大學(xué)門戶網(wǎng)站學(xué)生用戶占60%，其他類型用戶（教職工、社會(huì)人員）占40%，學(xué)生用戶是門戶網(wǎng)站的主要服務(wù)對(duì)象。

2） 根據(jù)訪問量調(diào)整欄目設(shè)置

主頁中欄目的設(shè)置涉及到學(xué)校各個(gè)部門，無論是職能部門還是教學(xué)部門都希望將信息

直接呈現(xiàn)在主頁中。根據(jù)熱力圖中的訪問量對(duì)欄目進(jìn)行調(diào)整顯得更有說服力，因?yàn)橛脩舻脑L問行為統(tǒng)計(jì)是最客觀數(shù)據(jù)。根據(jù)統(tǒng)計(jì)數(shù)據(jù)，需要有針對(duì)性的對(duì)訪問量偏少的欄目進(jìn)行優(yōu)化和調(diào)整，對(duì)沒有訪問量的欄目進(jìn)行重新設(shè)計(jì)或直接替換。

3） 提高信息質(zhì)量

提高網(wǎng)站中信息的質(zhì)量不僅方便了用戶閱讀，更能體現(xiàn)整個(gè)門戶網(wǎng)站的宣傳形象。根據(jù)熱力圖中“圖片新聞”的用戶訪問行

為分析，大多數(shù)用戶的操作行為的是點(diǎn)擊“下一頁”，而不是點(diǎn)擊圖片來進(jìn)行信息閱讀，這就促使我們對(duì)圖片新聞中標(biāo)題和圖片的選取要更具有代表意義，讓用戶一目了然，看完標(biāo)題和圖片就知道這條新聞的含義。

4） 擴(kuò)大鏈接響應(yīng)區(qū)域

從熱力圖中紅色區(qū)域可以看出，用戶點(diǎn)擊目標(biāo)鏈接時(shí)，并不是僅點(diǎn)擊文字，而是點(diǎn)擊這一鏈接區(qū)域。因此我們需要擴(kuò)大鏈接響應(yīng)區(qū)域，將文字鏈接擴(kuò)大為塊狀鏈接，合理地?cái)U(kuò)大頁面鏈接響應(yīng)區(qū)域在一定程度上提高了網(wǎng)頁的易用性。

5 結(jié)論

作為從事遠(yuǎn)程教育為主的開放大學(xué)，門戶網(wǎng)站的建設(shè)應(yīng)該是網(wǎng)絡(luò)和信息化建設(shè)的重點(diǎn)之一。在樹立宣傳和服務(wù)理念，對(duì)訪客進(jìn)行分類，采用主流設(shè)計(jì)風(fēng)格之后，門戶網(wǎng)站更好地發(fā)揮了其宣傳功能，成為終身教育服務(wù)平臺(tái)、遠(yuǎn)程教育的社會(huì)化門戶服務(wù)平臺(tái)。

參考文獻(xiàn)：

[1] 裴蕾，楊李娟.我國(guó)高校中文門戶網(wǎng)站建設(shè)調(diào)查分析——基于對(duì)國(guó)內(nèi)20所高校中文網(wǎng)站的評(píng)測(cè)[J].現(xiàn)代情報(bào)，2013（10）：96-100.

[2] 羅菊蘭.高校門戶網(wǎng)站建設(shè)的問題與思路——從功能定位與設(shè)計(jì)原則角度[J].電子政務(wù)，2008（1）：99-102.

[3] 林帝浣，曾海標(biāo)，關(guān)偉豪.高校門戶網(wǎng)站建設(shè)探討[J].中山大學(xué)學(xué)報(bào)：自然科學(xué)版，2003（S1）：264-266.

[4] 袁紅.基于信息構(gòu)建的高校門戶網(wǎng)站外部用戶可用性測(cè)評(píng)——以江蘇省高校為例[J].圖書情報(bào)工作，2009，23：77-80，60.

[5] 仲惠圣.淺談高校門戶網(wǎng)站建設(shè)的規(guī)范標(biāo)準(zhǔn)[J].中國(guó)教育信息化，2009，23：54-56.