地方工科類院校門戶網(wǎng)站界面設(shè)計研究

遲瑞豐 許宏年

摘 要：近幾年隨著地方工科類院校信息化建設(shè)的不斷發(fā)展，門戶網(wǎng)站建設(shè)越來越受到重視，同時對門戶網(wǎng)站的界面設(shè)計提出了更高的要求。文章研究了地方工科類院校門戶網(wǎng)站界面設(shè)計存在的問題，并提出了界面設(shè)計的基本原則，重點論述了扁平化技術(shù)、網(wǎng)站地圖、線框圖、學(xué)校大數(shù)據(jù)展示等內(nèi)容。

關(guān)鍵詞：門戶網(wǎng)站；界面設(shè)計；學(xué)校大數(shù)據(jù)

隨著計算機信息技術(shù)迅速普及和網(wǎng)絡(luò)技術(shù)應(yīng)用的發(fā)展，地方工科類院校門戶網(wǎng)站己經(jīng)成為學(xué)校對內(nèi)、對外展示和宣傳手段方面發(fā)揮著越來越重要的作用。如果把高校信息化建設(shè)比做一個框架，那么高校門戶網(wǎng)站建設(shè)就是信息化建設(shè)的主要窗口，高校門戶網(wǎng)站的建設(shè)水平和內(nèi)容豐富程度直接決定了信息化建設(shè)水平。通過對現(xiàn)有地方工科類高校門戶網(wǎng)站行比對與分析，發(fā)現(xiàn)網(wǎng)站界面設(shè)計問題較多，信息框架復(fù)雜，功能定位不準(zhǔn)確，交互設(shè)計不友好等問題嚴(yán)重影響了高校門戶網(wǎng)站的使用效果。

1 高校門戶網(wǎng)站的定義

1.1 門戶網(wǎng)站的定義

門戶網(wǎng)站中的門戶原意是指正門、入口，現(xiàn)多用于互聯(lián)網(wǎng)的門戶網(wǎng)站和企業(yè)應(yīng)用系統(tǒng)的門戶系統(tǒng)。所謂門戶網(wǎng)站指的是一個應(yīng)用框架，它將各種應(yīng)用系統(tǒng)、數(shù)據(jù)資源和互聯(lián)網(wǎng)資源集成到一個信息管理平臺之上，并以統(tǒng)一的用戶界面提供給用戶。根據(jù)維基百科的定義門戶網(wǎng)站（Web portal，又稱入口網(wǎng)站，入門網(wǎng)站）指的是將不同來源的信息以一種整齊劃一的形式整理、儲存并呈現(xiàn)的網(wǎng)站。

1.2高校門戶網(wǎng)站的定義

高校門戶網(wǎng)站的是一個讓高校師生以及校友、訪客利用校園網(wǎng)絡(luò)平臺獲取校內(nèi)、外信息資源和互聯(lián)網(wǎng)信息資源的重要入口，建立門戶網(wǎng)站同時也是高校對外展現(xiàn)學(xué)校實力和宣傳學(xué)校自身優(yōu)勢的一種有效手段。通常來說高校門戶網(wǎng)站一般是由作為形象框架的門戶主網(wǎng)站和作為內(nèi)容主體的二級網(wǎng)站以及各類信息系統(tǒng)來共同組成的，是高校內(nèi)部所有校園信息與互聯(lián)網(wǎng)資源實現(xiàn)交互、共享的窗口，同時高校門戶網(wǎng)站解決了高校信息孤島問題，整合了校園內(nèi)部所有資源，方便了師生以及校友、訪客的使用。

2.1地方工科類院校門戶網(wǎng)站界面設(shè)計存在的主要問題

1）網(wǎng)站界面設(shè)計內(nèi)容過于繁多，重點不突出，所有的信息都想在門戶網(wǎng)站的首頁展示出來，網(wǎng)站界面排版非常亂，沒有統(tǒng)一的設(shè)計風(fēng)格，造成用戶使用不方便，更不能及時得找到感興趣的內(nèi)容，用戶體驗差。

2）網(wǎng)站界面設(shè)計沒有總體規(guī)劃，思路不清晰，目標(biāo)不明確，設(shè)計初期沒有使用設(shè)計原型軟件，致使網(wǎng)站總體設(shè)計結(jié)束以后才去返回重新設(shè)計，更重要的是重新設(shè)計也不一定會是最終的網(wǎng)站效果，浪費了大量時間。

3）網(wǎng)站界面設(shè)計中沒有重點突出學(xué)校的辦學(xué)特色，沒有根據(jù)學(xué)樣現(xiàn)有的文化和辦學(xué)理念找到合適的方式展現(xiàn)出來，導(dǎo)致界面設(shè)計者和學(xué)校要求沒有達到統(tǒng)一的意向，始終達不到最終的理想界面設(shè)計。

4）過時的界面設(shè)計 ，由于負(fù)責(zé)制作地方工科類門戶網(wǎng)站的制作者大部分都是計算機或者相關(guān)專業(yè)的，對界面設(shè)計的現(xiàn)有的流行技術(shù)了解得不是特別多，所以造成制作的網(wǎng)站界面跟不上時代潮流，做不到與時俱進，嚴(yán)重影響了

5）網(wǎng)站界面設(shè)計對用戶訪問的粘性不夠，例如：大部分同學(xué)甚至不知道學(xué)校的門戶網(wǎng)站，或者由于網(wǎng)站界面設(shè)計的不合理，造成沒有興趣去訪問第二次或者更多次的訪問，出現(xiàn)這些問題主要是我們在設(shè)計門戶網(wǎng)站的時間沒有充分的考慮到我們主要的用戶是誰？分為幾類？每一類的用戶都需要什么？我們能提供什么？

3 地方工科類院校門戶網(wǎng)站界面設(shè)計基本原則

3.1 簡潔統(tǒng)一性原則

簡潔統(tǒng)一性原則是門戶網(wǎng)站界面設(shè)計的重要的原則，這條原則說起來簡單卻做起來難，要做到簡潔而不簡單，富有感染力，有強烈的第一印象，簡潔不僅僅是去年不必要的內(nèi)容還要重點突出一些內(nèi)容，同時操作設(shè)計也要盡量做到簡單，使?jié)撛谟脩裟茏羁斓乃俣日业较胍膬?nèi)容，并且有明確的操作提示，而且所有門戶網(wǎng)站的界面要統(tǒng)一，包含所有的二級網(wǎng)站界面也要統(tǒng)一，通過對網(wǎng)站界面的各種元素（框架、顏色、圖片、字體、留白等）使用統(tǒng)一的規(guī)格，使得網(wǎng)站的用戶看起來應(yīng)該是和諧統(tǒng)一的一個整體。通過這些系統(tǒng)的、規(guī)范化的設(shè)計 ，不斷的強化潛在用戶的記憶，使用戶對網(wǎng)站產(chǎn)生良好的印象，減少用戶的學(xué)習(xí)量和記憶量，用戶必須記住的任何信息應(yīng)該是和當(dāng)前操作有關(guān)的，而不是和計算機使用相關(guān)。統(tǒng)一的網(wǎng)站界面設(shè)計對于潛在的報考學(xué)生來說，是了解學(xué)校的第一印象，特別重要，錯誤的網(wǎng)站界面設(shè)計最后會影響到招生的排名。

3.2 界面友好性原則

門戶網(wǎng)站界面友好性是門戶網(wǎng)站制作的需要重要考慮的重要原則，界面友好性對網(wǎng)站潛在用戶的正確使用門戶網(wǎng)站起著十分重要的作用。友好性的界面設(shè)計要符合用戶的使用習(xí)慣，充分考慮到門戶網(wǎng)站頁面的兼容性和信息導(dǎo)航的舒適性，選擇好框架和色彩的搭配，提高網(wǎng)站的訪問率和使用效率，同時也要考慮到網(wǎng)站的界面風(fēng)格、框架設(shè)計和色彩的搭配等因素對網(wǎng)站界面設(shè)計的影響。

3.3 以用戶為中心原則

學(xué)校門戶網(wǎng)站界面設(shè)計要從師生方便使用為中心的原則立場上來充分考慮門戶網(wǎng)站界面設(shè)計。深入研究師生的使用習(xí)慣，通過調(diào)查問卷、現(xiàn)場問答等多種方法了解師生的需求，關(guān)注他們的期望和喜好等，對反應(yīng)的問題要想辦法解決，清楚師生使用門戶網(wǎng)站界面習(xí)慣不同，設(shè)計要有針對性，比如：在界面設(shè)計調(diào)查時發(fā)現(xiàn)學(xué)生主要關(guān)注學(xué)習(xí)方面、校園文化、體育活動等方面的內(nèi)容，教師主要關(guān)注教學(xué)任務(wù)、科學(xué)研究等方面的內(nèi)容，針對這一情況我們在設(shè)計界面時要對不同的訪問用戶制作出不同的訪問頁面。

3.4 個性化設(shè)計原則

成功的學(xué)校門戶網(wǎng)站界面設(shè)計可以給潛在用戶帶來親切感，使用方便，提高用戶體驗。對于學(xué)校門戶網(wǎng)站的個性化設(shè)計就是在符合學(xué)校整體網(wǎng)站界面設(shè)計風(fēng)格的基礎(chǔ)上，增加一些個性化的設(shè)計元素（如現(xiàn)在比較流行的學(xué)校大數(shù)據(jù)、扁平化設(shè)計等），同時研究新的界面設(shè)計技術(shù)溶入到網(wǎng)站界面設(shè)計里面。

4 對地方工科類院校門戶網(wǎng)站界面設(shè)計的幾點建議

4.1 深入調(diào)查研究，對地方工科類院校門戶網(wǎng)站界面用戶進行分類

為了更好的方便用戶使用，使用戶更有興趣訪問網(wǎng)站，根據(jù)多年從事門戶網(wǎng)站設(shè)計和調(diào)研結(jié)果分析，目前地方工科類院校門戶網(wǎng)站的用戶主要分為以下幾類用戶：考生、學(xué)生、教工、校友、訪客、捐贈。

考生：主要關(guān)注的信息是學(xué)校的本科、研究生的招生信息，獎學(xué)金、助學(xué)金、貸款等介紹，學(xué)校簡介、校園環(huán)境等相關(guān)信息。

學(xué)生：主要關(guān)注學(xué)校跟學(xué)生自己學(xué)習(xí)和生活密切相關(guān)的網(wǎng)站，如：學(xué)生經(jīng)常訪問的教務(wù)處網(wǎng)站、圖書館網(wǎng)站、學(xué)工處網(wǎng)站、就業(yè)中心網(wǎng)站、本人的學(xué)校郵箱和博客等相關(guān)網(wǎng)站。

教工：主要關(guān)注的是校內(nèi)的教務(wù)信息、科研信息、學(xué)校的新聞和公告等網(wǎng)站，如：人事處網(wǎng)站、教務(wù)處網(wǎng)站、科研處網(wǎng)站等。

校友：校友是學(xué)校門戶網(wǎng)站訪問用戶不可忽略的重要訪問來源，根據(jù)調(diào)研，校友主要關(guān)注校友網(wǎng)站、校友電子雜志、校友查詢等信息。

訪客：主要關(guān)注學(xué)校的校園風(fēng)光、學(xué)校歷史等信息。

捐贈：校友捐贈已經(jīng)是目前很多高校一項重要的收入來源，同時也給在校學(xué)生帶來多項獎學(xué)金、助學(xué)等，校友捐贈主要關(guān)注學(xué)校的捐贈平臺以及所捐贈款項的使用去向等。

如下圖所示：

以上的用戶訪問的位置要跟搜索放在頁面的右上角，方便用戶第一時間找到。

4.2 將扁平化設(shè)計應(yīng)用到地方工科類院校門戶網(wǎng)站界面設(shè)計中

早在2013年ios7發(fā)布以來，扁平化設(shè)計就轟動了整個互聯(lián)網(wǎng)世界，很多網(wǎng)站和APP界面設(shè)計都使用了這項技術(shù)，帶來了很好的效果，所以我們要把扁平化設(shè)計應(yīng)用到地方工科類門戶網(wǎng)站界面設(shè)計當(dāng)中。扁平化設(shè)計是一種設(shè)計風(fēng)格，以減法為主要設(shè)計理念，呈現(xiàn)出更加概括、抽象的設(shè)計樣式，在實際運用中不使用透視、漸變、紋理、陰影等效果。扁平化設(shè)計通常應(yīng)用在視覺設(shè)計范疇，即放棄一切裝飾效果，所有元素的形式都更靠近幾何形態(tài)，邊界干凈利落，沒有復(fù)雜的裝飾效果。相比常見的擬物化設(shè)計，扁平化設(shè)計略去了一切仿真的元素，包括陰影效果，高光等，目的在于讓使用者將注意力集中在信息本身，而不是產(chǎn)品的裝飾美等輔助因素上。“在視覺設(shè)計中，扁平化設(shè)計強調(diào)了極簡主義，提倡了‘少即是多的美學(xué)理念”，通過簡潔的色彩、圖形、文字的搭配最直觀的向用戶展示有效信息，是一種極簡的設(shè)計方法。

4.3 使用信息架構(gòu)對地方工科類院校門戶網(wǎng)站界面進行設(shè)計

1）信息架構(gòu)的英文是Information Architecture，簡稱信息架構(gòu)，是美國建筑師沃爾曼（Richard Saul Wurman）先生在1975年創(chuàng)造出的一個新詞匯。目前一般將信息架構(gòu)定義為“組織信息和設(shè)計信息環(huán)境、信息空間或信息體系結(jié)構(gòu)，以滿足需求者的信息需求的一門藝術(shù)和科學(xué)。”，包括調(diào)查、分析、設(shè)計和執(zhí)行過程，它涉及到組織系統(tǒng)、導(dǎo)航系統(tǒng)、搜索系統(tǒng)和標(biāo)簽系統(tǒng)的設(shè)計，目的是幫助人們成功地發(fā)現(xiàn)和管理信息。簡單的說，信息架構(gòu)就是將復(fù)雜的信息簡單地傳達用戶的技術(shù)。人們在出于各種目的對信息加以處理的時候，對復(fù)雜的信息，怎樣才能使他們更易于理解，更便于使用呢？這個時候，需要用到的就是信息架構(gòu)。

2）網(wǎng)站地圖在地方工科類院校門戶網(wǎng)站界面設(shè)計中的的應(yīng)用。維基百科定義：網(wǎng)站地圖描述了一個網(wǎng)站的架構(gòu)。它可以使一個任意形式的文檔，用作網(wǎng)頁設(shè)計的設(shè)計工具，也可以是列出網(wǎng)站中所有頁面的一個網(wǎng)頁，通常采用分級形式。這有助于訪問者以及搜索引擎的機器人找到網(wǎng)站中的頁面。網(wǎng)站地圖是門戶網(wǎng)站界面設(shè)計中的一個重要環(huán)節(jié)，良好的網(wǎng)站地圖設(shè)計可以使?jié)撛诘脑L問用戶第一時間了解到網(wǎng)站的結(jié)構(gòu)、欄目和內(nèi)容等基本信息以及網(wǎng)頁之間的相互關(guān)系，同時可以快速的被各大搜索引摯收錄，就像我們經(jīng)常訪問的城市在線地圖一樣，使我們的潛在用戶快速找到自己想要的內(nèi)容。

3）線框圖在地方工科類院校門戶網(wǎng)站界面設(shè)計中的的應(yīng)用。線框圖是門戶設(shè)計設(shè)計不可或缺的重要組成部分，是網(wǎng)站設(shè)計師根據(jù)網(wǎng)站客戶需求將網(wǎng)站構(gòu)架形象化的一種展現(xiàn)形式。良好的網(wǎng)站線框圖的設(shè)計可以使整個門戶網(wǎng)站在設(shè)計前期更早的發(fā)現(xiàn)問題，并及時的解決，這將會大量的節(jié)約我們設(shè)計門戶網(wǎng)站的時間、人力和金錢，使我們有更多的時間去開發(fā)門網(wǎng)戶網(wǎng)站新的功能。本實例使用Axure進行設(shè)計線框圖，這是根據(jù)對地方式工科類院校門戶網(wǎng)站的內(nèi)容的分類的展示。

4）合理的搜索系統(tǒng)設(shè)計。搜索系統(tǒng)主要負(fù)責(zé)幫助門戶網(wǎng)站的用戶第一時間搜索到自己感興趣的信息，通過網(wǎng)站內(nèi)部和外部搜索引擎，使用最快捷的方式提交給用戶搜索的結(jié)果。通過對用戶使用方式的了解，我們將搜索系統(tǒng)放到了門戶網(wǎng)站的右上角，使用戶在使用過程中能快速找到并方便使用。為了能更好的推廣學(xué)校的門戶網(wǎng)站我們這里使用了百度網(wǎng)站的搜索，使搜索的信息更精確，內(nèi)容更豐富。

4.4 運用大數(shù)據(jù)技術(shù)對學(xué)校特色信息進行定期展示

目前我國已經(jīng)處于大數(shù)據(jù)時代，隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展、高校門戶網(wǎng)站建的迅速普及，以及家長和學(xué)生對學(xué)校大數(shù)據(jù)要求了解的逐漸提高，學(xué)校門戶網(wǎng)站急需展示出學(xué)校的核心競爭力，增強學(xué)校的辦學(xué)信心，在高校門戶網(wǎng)站的位置上增加學(xué)校大數(shù)據(jù)的展示已經(jīng)成為未來發(fā)展的必要趨勢，同時學(xué)校的大數(shù)據(jù)信息要不斷的更新，保證信息的準(zhǔn)確，通過學(xué)校大數(shù)據(jù)運用突出數(shù)字和圖示的方式，使訪問者可以快速的了解學(xué)校的一些基本信息

4.5 學(xué)校要統(tǒng)一思想，提高認(rèn)識，充分認(rèn)識到網(wǎng)站界面設(shè)計的重要性

學(xué)校領(lǐng)導(dǎo)以及相關(guān)工作人員要充分認(rèn)識到網(wǎng)站界面設(shè)計是一個重大的系統(tǒng)工程，是學(xué)校信息化建設(shè)的重要組成部分，需要全校干部職工理解、參與 、協(xié)調(diào)及配合。因此，在設(shè)計網(wǎng)站界面之前，要通過召開會議和調(diào)查問卷等形式，廣泛宣傳，了解各方面需求。同時對相關(guān)設(shè)計工作人員進行定期技術(shù)培訓(xùn)，確保設(shè)計人員掌握最新的網(wǎng)站界面設(shè)計技術(shù)，提高界面設(shè)計能力。

5 結(jié)語

綜上所述，本文探索了地方工科類院校門戶網(wǎng)站界面設(shè)計中存在的主要問題，并歸納了地方工科類門戶網(wǎng)站界面設(shè)計的原則和網(wǎng)站界面用戶分類，同時簡要探討了扁平化技術(shù)、信息架構(gòu)、網(wǎng)站地圖、線框圖、搜索系統(tǒng)設(shè)計、學(xué)校大數(shù)據(jù)展示等在地方工科類院校門戶網(wǎng)站界面設(shè)計中的發(fā)展趨勢。

參考文獻：

[1] 王令中.視覺藝術(shù)心理.北京：人民美術(shù)出版社，2006.