校園門戶網(wǎng)站遷移至世界大學(xué)城空間的網(wǎng)頁設(shè)計(jì)探析

引言：校園門戶網(wǎng)站遷移至世界大學(xué)城空間，不僅能滿足目前各高校教育信息化發(fā)展的需要，而且對(duì)學(xué)校教育信息化的發(fā)展思路能起到良好的推動(dòng)作用。大學(xué)城空間機(jī)構(gòu)平臺(tái)其功能遠(yuǎn)遠(yuǎn)強(qiáng)于傳統(tǒng)網(wǎng)絡(luò)功能，真正實(shí)現(xiàn)了全球教育學(xué)習(xí)資源的聚合和共享。因此，校園門戶網(wǎng)站遷移至世界大學(xué)城機(jī)構(gòu)平臺(tái)后的網(wǎng)頁設(shè)計(jì)問題就值得我們來研究探析。本文從網(wǎng)頁的布局結(jié)構(gòu)和色彩搭配等方面來分析校園門戶網(wǎng)站遷移至世界大學(xué)城機(jī)構(gòu)平臺(tái)后的網(wǎng)頁設(shè)計(jì)需求，并提出一些可行性建議以供各高校作為參考。

校園門戶網(wǎng)站是為與學(xué)校有關(guān)的各類人群，如學(xué)生、老師、管理人員、家長、校友、高中生等，提供定制信息、綜合服務(wù)和訪問內(nèi)部/外部資源便利性的網(wǎng)站。而世界大學(xué)城機(jī)構(gòu)平臺(tái)則是一個(gè)資源共建共享型、交互式的教育學(xué)習(xí)平臺(tái)，其功能遠(yuǎn)遠(yuǎn)強(qiáng)于傳統(tǒng)網(wǎng)絡(luò)功能。因此。將校園門戶網(wǎng)站遷移至世界大學(xué)城機(jī)構(gòu)平臺(tái)后的網(wǎng)頁設(shè)計(jì)問題就需要根據(jù)世界大學(xué)城空間的特性和固定內(nèi)設(shè)模式來進(jìn)行設(shè)計(jì)，同時(shí)也要綜合門戶網(wǎng)站的一些設(shè)計(jì)特點(diǎn)來進(jìn)行美化，以求達(dá)到最佳的視覺效果和使用功能。

從頁面設(shè)計(jì)的角度出發(fā)，網(wǎng)頁的美觀性和實(shí)用性主要可以從網(wǎng)頁的布局結(jié)構(gòu)和色彩搭配等方面來進(jìn)行設(shè)計(jì)。

一、校園門戶網(wǎng)站遷移至世界大學(xué)城機(jī)構(gòu)平臺(tái)后的網(wǎng)頁布局結(jié)構(gòu)設(shè)計(jì)

由“布局”一詞古往今來的解釋我們可以看出，布局，絕不僅僅只是簡單的

畫面組合。對(duì)于網(wǎng)頁來說，布局絕不僅僅只是網(wǎng)頁版式的簡單編排，而是網(wǎng)頁中

各種可供使用的元素和技術(shù)的整體規(guī)劃，通過布局，使網(wǎng)頁本身具備良好的視聽

效果，方便的操作，生動(dòng)的互動(dòng)效果。

網(wǎng)頁設(shè)計(jì)經(jīng)過多年的發(fā)展，對(duì)于各種類型的網(wǎng)頁，頁面的布局有了一定的規(guī)律可供遵循。常見的布局結(jié)構(gòu)有傳統(tǒng)“T”型布局、上下對(duì)照式布局、“上中下”“三”字布局、左右對(duì)稱型布局、“回”字型布局、文字型布局、氛圍式布局、“雜物箱”布局、“人物風(fēng)格化”布局、封面型布局、簡約型布局、綜合型布局、瀑布流式布局等等。作為網(wǎng)頁的信息接受者，對(duì)網(wǎng)頁的布局也有約定俗成的印象，瀏覽者對(duì)這類站點(diǎn)也有著相同的使用習(xí)慣。如門戶站，大家只要一看到門戶站，就能夠想到是 T 字形的布局，特別是校園門戶網(wǎng)站的網(wǎng)頁布局結(jié)構(gòu)多采用這種布局形式。因?yàn)檫@類站點(diǎn)，瀏覽者更注重用戶的瀏覽體驗(yàn)和操作體驗(yàn)，特別注重功能性和內(nèi)容。

世界大學(xué)城機(jī)構(gòu)平臺(tái)的內(nèi)設(shè)布局結(jié)構(gòu)主要以T 字形的布局結(jié)構(gòu)為主，分為上下兩大塊，上面是banner橫幅廣告區(qū)域，是用來展示學(xué)校形象最直觀的板塊。下面板塊則一共有10種布局比例，分別是1：1、1：3、1：4、3：2、4：1、1：1：2、1：2：1、1：1：3、1：2：2、1：3：1。根據(jù)這種布局形式，我們將校園門戶網(wǎng)站遷移至世界大學(xué)城機(jī)構(gòu)平臺(tái)后，可以直接沿用之前門戶網(wǎng)站的T 字形布局結(jié)構(gòu)，將整個(gè)空間首頁的布局分為兩大部分四大塊，兩大部分是指上下兩部分，上部分是banner橫幅廣告一大塊，可用校園圖片制作成動(dòng)態(tài)滾動(dòng)flash，直接展示學(xué)校風(fēng)貌，下部分就是所有信息功能匯集區(qū)域三大塊，左側(cè)為“信息展示”區(qū)，可做院系風(fēng)采展示，讓瀏覽者可以直接點(diǎn)擊進(jìn)入各系部進(jìn)行訪問；中間為“動(dòng)態(tài)信息”區(qū)，是最直觀展示動(dòng)態(tài)信息變化的區(qū)域，這部分應(yīng)該占據(jù)下部分板塊的主要位置，因此，我們選用內(nèi)設(shè)基礎(chǔ)布局里的1：3：1這種布局比例比較合適；右側(cè)為“信息交流” 區(qū)，可直接將校園微信墻、騰訊微信、微博至于此處，以供師生進(jìn)行交流學(xué)習(xí)。

校園門戶網(wǎng)站遷移至世界大學(xué)城機(jī)構(gòu)平臺(tái)后的網(wǎng)頁布局結(jié)構(gòu)設(shè)計(jì)不會(huì)有太大變化，因?yàn)橐裱瓰g覽者對(duì)門戶網(wǎng)站的直觀印象和使用習(xí)慣，所以，在網(wǎng)頁布局結(jié)構(gòu)上不宜有太大變化。

二、校園門戶網(wǎng)站遷移至世界大學(xué)城機(jī)構(gòu)平臺(tái)后的網(wǎng)頁色彩搭配設(shè)計(jì)

在學(xué)校網(wǎng)頁整體主色調(diào)的選擇上，我們應(yīng)該從不同色彩的心理學(xué)特征來進(jìn)行分析，找到能夠展示該校形象特色的主體色彩。比如，紅色頗為醒目，使用紅色作為主色調(diào)的網(wǎng)頁，極易吸引瀏覽者的目光。在網(wǎng)頁界面中使用高純度、高明度的紅色，我們可以以灰色、黑色進(jìn)行搭配，調(diào)和過于刺激的紅色，能帶給瀏覽者現(xiàn)代、時(shí)尚的感受。黃色是使用廣泛的網(wǎng)頁界面色調(diào)。大多數(shù)的瀏覽者都認(rèn)可網(wǎng)頁中出現(xiàn)的黃色，這是因?yàn)辄S色本身就具有一種明朗愉快的效果。通過搭配白色、紫色、藍(lán)色等顏色，能夠得到溫暖愉快的視覺感受。綠色是光的三基色之一，它總能讓我們感到旺盛的生命力。綠色能夠很好的解除眼部的疲勞，讓我們的身心感到寧靜。純正的綠色在網(wǎng)頁配色中有很大的局限性，但偏向于黃色方位的綠色在網(wǎng)頁中運(yùn)用得很多，也就更受到大眾的歡迎。藍(lán)色是最冷的色彩，具有使人心情平靜的力量。純凈的藍(lán)色表現(xiàn)出一種美麗、冷靜、理智、安詳與廣闊。藍(lán)色的網(wǎng)頁配色應(yīng)根據(jù)網(wǎng)站的主題、內(nèi)容以及希望營造的氛圍來進(jìn)行選擇和搭配。高純度的藍(lán)色會(huì)給人整潔輕快的感覺，也能夠營造出時(shí)尚而活潑的氛圍。低純度的藍(lán)色會(huì)給人精密、嚴(yán)謹(jǐn)?shù)母杏X，也能夠營造出安定、可靠的氛圍。藍(lán)色搭配綠色和白色，能夠帶給瀏覽者純凈、天然的感受。藍(lán)色搭配灰色和白色，能夠使網(wǎng)頁顯得干凈整潔，給人莊重、充實(shí)的印象。藍(lán)色搭配青色和白色，能夠進(jìn)一步提高網(wǎng)頁的亮度，讓網(wǎng)頁看起來顯得清爽、動(dòng)感。

當(dāng)網(wǎng)頁的主色調(diào)和輔助色彩決定了之后，就可以考慮文字與背景顏色的選擇

與搭配了。網(wǎng)頁中的文字，除了裝飾性的文字可以不用考慮易讀性之外，其他出

現(xiàn)的文字都要把文字的易讀性放在首要的位置，在滿足了這個(gè)前提之下，再考慮

使用更加匹配或協(xié)調(diào)的色彩。特別是學(xué)校的大學(xué)城機(jī)構(gòu)平臺(tái)，這是一個(gè)資源共建共享型、交互式的教育學(xué)習(xí)平臺(tái)，應(yīng)特別強(qiáng)調(diào)文字在網(wǎng)頁中的易讀性。一般來說，文字會(huì)采用與背景色相對(duì)比的顏色，來保證文字的可讀性，而背景色也會(huì)盡量采用能襯托出文字的配色。文字的配色上要盡量避免過于鮮艷的色彩，以免帶來過于強(qiáng)烈的視覺刺激，降低了頁面的檔次。而在背景色的選擇上，我們還要注意盡量避免出現(xiàn)過于花哨的紋樣，以免影響到文字的閱讀。

不同的色彩給人不同的心理感受，因此，我們?cè)谶M(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，應(yīng)根據(jù)學(xué)校的辦學(xué)特色來選擇合適的色彩進(jìn)行網(wǎng)頁布局色彩搭配，營造出不同的學(xué)校形象特點(diǎn)。

三、結(jié)束語

校園門戶網(wǎng)站遷移至世界大學(xué)城機(jī)構(gòu)平臺(tái)后，在網(wǎng)頁設(shè)計(jì)上我們還應(yīng)該遵循布局與配色的對(duì)稱和平衡、布局與配色的對(duì)比和統(tǒng)一、布局與配色的強(qiáng)調(diào)和突出以及布局與配色的虛實(shí)和留白等原則，這樣，網(wǎng)頁才能達(dá)到最佳的視覺效果，以展示出學(xué)校的個(gè)性形象。

參考文獻(xiàn)

[1]李健《網(wǎng)頁設(shè)計(jì)的色彩調(diào)配和應(yīng)用》安慶師范學(xué)院學(xué)報(bào)（自然科學(xué)版），2010.

[2]陳寧《淺析布局在網(wǎng)頁設(shè)計(jì)中的運(yùn)用》計(jì)算機(jī)光盤軟件與應(yīng)用，2013.

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

[4]吳鯤，劉沈《淺談高職校世界大學(xué)城云空間建設(shè)》中國教育技術(shù)裝備，2013.

（作者單位：湖南鐵路科技職業(yè)技術(shù)學(xué)院）

作者簡介：李靜，湖南鐵路科技職業(yè)技術(shù)學(xué)院講師。