廈門市高校門戶網(wǎng)站網(wǎng)頁設(shè)計研究

郭長見

摘要：學(xué)校網(wǎng)站是展示校園文化、教師風(fēng)采、學(xué)生風(fēng)貌、教育理念的窗口，隨著互聯(lián)網(wǎng)大數(shù)據(jù)技術(shù)的不斷成熟，廈門地區(qū)各高校普遍開通了門戶網(wǎng)站，但是只是形式化的開通網(wǎng)站，對網(wǎng)站的整體設(shè)計普遍缺乏內(nèi)涵與風(fēng)格，滿足不了現(xiàn)代新媒體大環(huán)境下用戶的人性化、視覺化、交互性的需求.本人通過對廈門工學(xué)院官方網(wǎng)站界面設(shè)計的調(diào)查，針對存在的問題進行研究分析并提出一些建議，旨在促進我校校園網(wǎng)建設(shè)的深化.

關(guān)鍵詞：高校網(wǎng)站；網(wǎng)頁設(shè)計；版式設(shè)計；色彩

中圖分類號：TP37 文獻標識碼：A 文章編號：1009-3044（2018）11-0210-02

1 概述

學(xué)校門戶網(wǎng)站是學(xué)校的“網(wǎng)上名片”。是現(xiàn)代學(xué)校對外宣傳展示自我溝通交流的必需品。可以提高軟實力，增強綜合競爭力?？梢哉故拘@文化、教師風(fēng)采、學(xué)生風(fēng)貌、教育理念等，可以在教育領(lǐng)域樹立新形象新品牌，體現(xiàn)辦學(xué)實力。

學(xué)校網(wǎng)站能提供教學(xué)互動的全新方式，也能能夠提供個性化學(xué)習(xí)的平臺，使得教師與教師、教師與學(xué)生、學(xué)生與學(xué)生之間的交流有了全新的方式，網(wǎng)絡(luò)提供的豐富資源可以使學(xué)生尋覓不同的教育方式，各取所需。

廈門工學(xué)院現(xiàn)有的官方網(wǎng)站存在著很多的問題，主要包括：1）外觀老舊，沒有現(xiàn)在時尚感；2）規(guī)劃雜亂無章，不利于瀏覽者進行順暢瀏覽；3）布局不合理，板塊內(nèi)容重復(fù)極容易造成瀏覽不清晰；4）版式設(shè)計過于傳統(tǒng)缺乏個性化設(shè)計；5）色彩搭配上和本校的VI理念不符，過于陳舊缺乏視覺沖擊力；6）交互設(shè)置不科學(xué)，沒法適應(yīng)現(xiàn)代社會人群的需求，缺少現(xiàn)代主流互動軟件的應(yīng)用；7）內(nèi)容信息不明朗，字體不統(tǒng)一；8）在移動終端顯示效果較差。為了廈門工學(xué)院有一張“新名片”必須對現(xiàn)有的網(wǎng)站進行重新規(guī)劃、重新設(shè)計、重新建設(shè)的工作。跟上現(xiàn)代多媒體時代的步伐，通過本次課題的研究工作，可以給該領(lǐng)域的網(wǎng)站設(shè)計應(yīng)用工作樹立新標桿，有利于廈門地區(qū)學(xué)校網(wǎng)站平臺的構(gòu)建以及與時俱進

2 課題意義：理論意義和實際意義

1）在國內(nèi)外眾多的教育機構(gòu)特別是學(xué)校，都建設(shè)具有自身特色的網(wǎng)站，作為宣傳自我的重要平臺，并把其做成知名品牌，極大地提升了該地區(qū)教育水平的知名度，在廈門該形式目前已經(jīng)有了一定的的規(guī)模，但是沒有形成規(guī)范化、特色化。研究該課題可以填補廈門地區(qū)高校群網(wǎng)站的規(guī)范化、潮流化、特色化的形成，有力推動學(xué)校網(wǎng)站的設(shè)計理念和形式，進行品牌推廣。并且總結(jié)經(jīng)驗逐層次進行遞增推廣，可以提升整個廈門高校教育的知名度。

2）本團隊都是有多年設(shè)計課程教學(xué)經(jīng)驗的年輕教師，設(shè)計理念先進，有多次完整網(wǎng)頁設(shè)計的經(jīng)驗，和成熟的技術(shù)，完全可以承擔(dān)該課題的研發(fā)、設(shè)計、創(chuàng)造的工作。

3）在廈門這個注重教育的城市。學(xué)校網(wǎng)站的建設(shè)及應(yīng)用有很大的可行性和應(yīng)用前景以及空間，并且可以進行具體實施的推進。

4）廈門校園文化建設(shè)是“和諧社會、和諧廈門”重要的組成部分，是素質(zhì)教育的重要載體。學(xué)校網(wǎng)站的設(shè)計及應(yīng)用是從研究學(xué)校文化現(xiàn)象入手，通過系統(tǒng)作業(yè)幫助學(xué)?？偨Y(jié)和提煉辦學(xué)的核心理念，設(shè)計文化建設(shè)、戰(zhàn)略服務(wù)、有效管理的途徑與方法，從而形成有濃郁校本特色和獨特品牌內(nèi)涵的學(xué)校形象和管理模式，提高教育教學(xué)的整體運作水平的能力。

5）廈門各高校網(wǎng)站的建設(shè)，會成功的開辟“第二課堂”，給學(xué)生和老師多提供了一種交流平臺。同多媒體技術(shù)、虛擬現(xiàn)實技術(shù)相結(jié)合，可實現(xiàn)虛擬圖書館、虛擬實驗室、虛擬課堂等；為教師學(xué)生提供多層次、全方位的學(xué)習(xí)資源也使之成為最佳的教學(xué)研究室。

6）廈門各高校網(wǎng)站的建設(shè)更是契合當(dāng)今互聯(lián)網(wǎng)+的主題，讓學(xué)校各類信息互通互聯(lián)。

7）廈門各所高校網(wǎng)站的開通能更多的宣傳廈門、發(fā)展廈門，在此同時也能展示廈門這座城市的教育水平和教學(xué)理念及質(zhì)量

3 研究內(nèi)容

本項目的研究對象、總體框架、重點難點、主要目標等。

1）網(wǎng)頁版式設(shè)計的特點

網(wǎng)頁版式設(shè)計是指在有限的屏幕空間里，將網(wǎng)頁中的文字、圖像、動畫、音頻、視頻等構(gòu)成元素組織起來，按照一定的規(guī)律和藝術(shù)化的處理方式進行編排和布局，形成整體的視覺形象，從而達到有效信息的最終目的。

由于網(wǎng)頁是在電腦上顯示信息的，電腦屏幕對其的視覺影響很大，因此，在網(wǎng)頁版式設(shè)計時，應(yīng)特別注意文字的編排，字號不宜太小或太細，必要時應(yīng)適當(dāng)增大行距，此外，還應(yīng)注意文字色彩與背景色彩的區(qū)別，以保證信息傳達的清晰度和準確性。

2）網(wǎng)頁版式設(shè)計要點

網(wǎng)頁版式設(shè)計中的色彩運用在編排網(wǎng)頁版式時，設(shè)計是應(yīng)合理地運用色彩，使版面給人以視覺美感。此外，設(shè)計師還應(yīng)深入分析網(wǎng)站的性質(zhì)、經(jīng)營目的或運作模式等因素來恰當(dāng)?shù)剡x擇色彩，以使其更好地襯托網(wǎng)站主旨思想。

3）網(wǎng)格的運用

網(wǎng)格的運用能使版面顯得整齊、干凈，具有穩(wěn)定的結(jié)構(gòu)，使網(wǎng)頁各部分分區(qū)明確，使閱讀流暢，信息鮮明、突出。在對版面進行布局時，應(yīng)充分利用網(wǎng)格的作用合理地設(shè)置網(wǎng)站標題、欄目、導(dǎo)航、文字以及圖片等信息，使其統(tǒng)一中有變化，對比中體現(xiàn)和諧。

4）網(wǎng)頁版式設(shè)計中的圖片編排

網(wǎng)頁設(shè)計同樣是一種視覺傳達設(shè)計，圖片在版式中除了能夠使信息展示更加具象外，還具有調(diào)節(jié)版式活躍度的作用，它能使版面更為生動、豐富。其中，圖片面積的大小決定了版面的活躍程度，圖片的形式影響著版面風(fēng)格。

除了真實照片外，網(wǎng)頁版面中的圖片還可以運用手繪圖片，如素描漫畫、動畫或者水彩畫等，別出心裁的圖片形式令人耳目一新，使版面顯得輕松、活潑，增強版面的趣味性。

5）網(wǎng)頁版式設(shè)計中的文字編排

網(wǎng)頁版式設(shè)計中的文字的編排宣傳簡單、清晰，使其能夠清楚、準確地傳達網(wǎng)頁信息，每行字數(shù)不宜過多，一般不超過30個字，以免造成視覺上的疲勞感。

6）頁面的個性化設(shè)計

隨著網(wǎng)絡(luò)時代的到來，網(wǎng)頁版式形式也越來越多。設(shè)計師應(yīng)根據(jù)所學(xué)知識，結(jié)合網(wǎng)站特點，靈活的編排設(shè)計，才能使網(wǎng)頁在眾多設(shè)計中脫穎而出，更具個性化，更加吸引眼球。

7）該課題調(diào)研的困難和經(jīng)費來源。

8）廈門工學(xué)院網(wǎng)站統(tǒng)一視覺識別系統(tǒng)的推動和實行。

9）如何為廈門所有高校系統(tǒng)提供統(tǒng)一的項目服務(wù)、宣傳、普及、法制推行。

10）如何為廈門高校網(wǎng)站的新建和更新提供全面的模式參考、讓網(wǎng)站發(fā)揮作用的前提下永不褪色，永不落伍，一直保持新鮮、特色、簡潔、清楚的特點。

4 目標、思路方法：研究目標及技術(shù)路線

1）廈門工學(xué)院整套網(wǎng)頁頁面系統(tǒng)的設(shè)計；

2）廈門工學(xué)院官方網(wǎng)站系統(tǒng)設(shè)計視覺的統(tǒng)一；

3）形成一整套視覺效果標準和理論數(shù)據(jù)指導(dǎo)文獻。幫助廈門市其他高校網(wǎng)站建設(shè)更新工作的順利進行。

4）研究技術(shù)路線文獻查閱、問卷調(diào)查、現(xiàn)狀研究、專項研討、課題設(shè)計規(guī)劃研發(fā)設(shè)計及網(wǎng)絡(luò)測試、論文發(fā)表及網(wǎng)站頁面產(chǎn)權(quán)保護。

5 關(guān)鍵問題

1）目前，網(wǎng)站平臺理念和建設(shè)雖然取得了一些成果，并得到一些教育管理和學(xué)校文化研究專家的充分肯定，但存在的問題卻沒有得到重視。對廈門高校教育系統(tǒng)以及廈門市教育局運作環(huán)境的認知，以及他們對待此課題的態(tài)度和是否可行。

2）調(diào)研的困難和經(jīng)費來源。

3）廈門市地區(qū)學(xué)校網(wǎng)站平臺建設(shè)及更新的推動和具體實行方案的制訂。

4）如何為廈門市高校網(wǎng)站服務(wù)、宣傳、普及、法制推行。

6 創(chuàng)新之處

在學(xué)術(shù)思想、學(xué)術(shù)觀點、研究方法等方面的特色和創(chuàng)新。

1）網(wǎng)頁設(shè)計總體方案主題鮮明。便于長周期的使用，不落伍。網(wǎng)頁整體效果以符合廈門工學(xué)院相吻合的字體、形象、顏色等進行設(shè)計。

2）通過對本校師生問卷調(diào)查結(jié)果，約百分九十的認為現(xiàn)有網(wǎng)站的版式過于陳舊，都建議對其進行全新的升級。根據(jù)這種情況本研究團隊根據(jù)本學(xué)院的實際情況進行設(shè)計創(chuàng)新，網(wǎng)頁版式設(shè)計是指在有限的屏幕空間里，將網(wǎng)頁中的文字、圖像、動畫、音頻、視頻等構(gòu)成元素組織起來，按照一定的規(guī)律和藝術(shù)化的處理方式進行編排和布局，形成整體的視覺形象，從而能有效的傳遞信息。廈門工學(xué)院坐落在美麗的廈門，學(xué)院氣質(zhì)和辦學(xué)特色都與廈門這座城市有著眾多的相似之處，時尚、美麗、浪漫、求實創(chuàng)新，所以在版式選擇上應(yīng)用了滿版型加分割型加對稱型的綜合應(yīng)用，形式美法則上主要應(yīng)用了變化與統(tǒng)一、對比與協(xié)調(diào)、節(jié)奏與韻律、對稱與均衡、虛實與留白等多種技巧。

3）主題鮮明的顏色應(yīng)用根據(jù)和諧、均衡和重點突出的原則，使版面給人以視覺美感，根據(jù)學(xué)校的性質(zhì)、目的、運作模式等眾多因素考量后，根據(jù)問卷調(diào)查結(jié)果，百分八十九的人選擇了主題色為淺藍色搭配白色。使之版面視覺效果清晰明了，時尚沉穩(wěn)。

4）網(wǎng)頁設(shè)計形式與內(nèi)容相統(tǒng)一靈活運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。

5）虛擬現(xiàn)實技術(shù)的應(yīng)用使網(wǎng)站的視覺效果和體驗效果更佳的具有時代感。

6）網(wǎng)頁設(shè)計中多媒體功能的利用。

7）結(jié)構(gòu)清晰并且便于使用。

8）導(dǎo)向清晰。

9）方便的反饋程序。

10）網(wǎng)站的尺寸再設(shè)計上不在追求傳統(tǒng)的滿屏效果也就是1024像素*768像素，更多地使用了現(xiàn)在的“無限滾動”的尺寸效果，符合電腦瀏覽，也適合現(xiàn)在手機客戶的瀏覽。

11）便于大眾化理解和普及和理解。

12）便于形成廈門工學(xué)院網(wǎng)站規(guī)范進行二級學(xué)院逐級推廣。

13）形成經(jīng)驗便于在廈門地區(qū)其他院校推廣經(jīng)驗，形成廈門特色的學(xué)校群網(wǎng)站的建設(shè)。

7 預(yù)期成果

成果形式、使用去向及預(yù)期社會效益等。

1）成果形式：論文理論研究及實體網(wǎng)頁設(shè)計作品。

2）使用去向：提供給廈門工學(xué)院作為官方網(wǎng)站使用。

3）社會效益：滿足瀏覽者瀏覽網(wǎng)站的流暢性、視覺上符合學(xué)校的性質(zhì)，頁面表現(xiàn)上更具有個性化，更加吸引眼球。 在設(shè)計方面給廈門地區(qū)其他院校提供一整套參考的頁面視覺效果，在理論上給其提供一部有參考價值的項目報告，指導(dǎo)其在設(shè)計過程中詳細的數(shù)值、理論等經(jīng)驗。

參考文獻：

[1] 王麗. 淺談網(wǎng)頁設(shè)計中色彩搭配的應(yīng)用[J].黑龍江科技信息，2008（22）.

[2] 張蕾蕾. 網(wǎng)頁設(shè)計中色彩視覺元素探究[J]. 長春大學(xué)學(xué)報， 2011（3）.

[3] 王秋. 校園網(wǎng)頁設(shè)計[J]. 中國教育網(wǎng)絡(luò)， 2008（12）.

[4] 阮渭平. 色彩在網(wǎng)頁設(shè)計中的民族性研究[J]. 浙江工藝美術(shù)， 2007（3）.

[5] 駱媛， 陸晶， 李淼. 版式設(shè)計[M]. 中國時代經(jīng)濟出版社， 2013.

[6] 殷俊. 網(wǎng)頁設(shè)計的藝術(shù)處理原則[N]. 江蘇科技報， 2007.

[7] 嚴富昌. 網(wǎng)站策劃與設(shè)計[M].北京大學(xué)出版社， 2004.

[8] 周穎梅， 姜中敏. 平面設(shè)計在網(wǎng)頁中的應(yīng)用[J]. 福建電腦， 2006.

[9] 李同中. 網(wǎng)頁設(shè)計技巧[J]. 河南氣象， 2004（1）.

[10] 李旭昌. 個人網(wǎng)頁設(shè)計中顏色的應(yīng)用[J]. 新鄉(xiāng)學(xué)院學(xué)報， 2011（3）.

[11] 毛德寶. 版面編輯設(shè)計[M]. 東南大學(xué)出版社， 2007.