郭長(zhǎng)見(jiàn)

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

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

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）11-0210-02

1 概述

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

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

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

2 課題意義：理論意義和實(shí)際意義

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

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

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

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

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

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

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

3 研究?jī)?nèi)容

本項(xiàng)目的研究對(duì)象、總體框架、重點(diǎn)難點(diǎn)、主要目標(biāo)等。

1）網(wǎng)頁(yè)版式設(shè)計(jì)的特點(diǎn)

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

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

2）網(wǎng)頁(yè)版式設(shè)計(jì)要點(diǎn)

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

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

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

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

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

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

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

網(wǎng)頁(yè)版式設(shè)計(jì)中的文字的編排宣傳簡(jiǎn)單、清晰，使其能夠清楚、準(zhǔn)確地傳達(dá)網(wǎng)頁(yè)信息，每行字?jǐn)?shù)不宜過(guò)多，一般不超過(guò)30個(gè)字，以免造成視覺(jué)上的疲勞感。

6）頁(yè)面的個(gè)性化設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

5 關(guān)鍵問(wèn)題

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

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

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

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

6 創(chuàng)新之處

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

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

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

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

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

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

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

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

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

9）方便的反饋程序。

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

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

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

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

7 預(yù)期成果

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

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

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

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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

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

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

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