高職院校門戶網(wǎng)站界面設計理念與技巧

周書林

摘 要：高職院校門戶網(wǎng)站是高職院校信息化建設的窗口，優(yōu)質(zhì)的門戶網(wǎng)站界面設計能提升學院的品牌價值，樹立良好的社會形象。文章以南通航運職業(yè)技術學院網(wǎng)站界面設計為例，分析和論述了高職院校門戶網(wǎng)站界面設計時應考慮的理念與技巧。

關鍵詞：高職院校；網(wǎng)站；界面設計；理念；技巧

在當今這個數(shù)據(jù)化信息需求日益增長的時代，大部分人獲得信息的主要來源是互聯(lián)網(wǎng)。無論個人或是企事業(yè)單位、組織的發(fā)展，信息的發(fā)布交流等，同樣大部分是通過互聯(lián)網(wǎng)來實現(xiàn)的。互聯(lián)網(wǎng)的普及應用，也讓高職院校門戶網(wǎng)站日漸成為高職院校日常信息管理和信息交換最重要的平臺之一。高職院校門戶網(wǎng)站是高職院校信息化建設的窗口，它由多媒體元素組成，以網(wǎng)絡傳播的方式展示高職院校的信息資源，它帶動了高職院校的信息化建設持續(xù)深入推進。而內(nèi)容豐富、條理清晰、使用便捷、賞心悅目的門戶網(wǎng)站界面設計則迅速擴大學院的影響力，提升學院的品牌價值。因此，在這個信息化時代，高職院校樹立良好的社會形象，加強門戶網(wǎng)站界面的設計與規(guī)劃顯得非常重要。南通航運職業(yè)技術學院（以下簡稱“學院”）是一所立足交通，圍繞水上運輸產(chǎn)業(yè)鏈設置專業(yè)，辦學特色鮮明的全日制高等職業(yè)院校，下面筆者就自己在學院門戶網(wǎng)站界面設計中的實際操作體會，來談談高職院校門戶網(wǎng)站界面設計時應考慮的理念與技巧，以期能給其他院校帶來一定的借鑒作用。

1 高職院校門戶網(wǎng)站設計的必要性

在這個高度信息化社會，高職院校門戶網(wǎng)站是最能宣傳學院文化、塑造良好學院形象的一種手段，讓外界深入了解學院，傳播具有鮮明特色、個性突出的學院品牌。高職院校門戶網(wǎng)站可以營造一個共同討論、共同分享的環(huán)境，加強教師與學生之間的交流。豐富的網(wǎng)絡資源，提供給學生一個先進的學習平臺，增添學生對學習資源獲取的濃厚興趣，充分發(fā)揮自己的內(nèi)在潛力。高職院校門戶網(wǎng)站成就最佳的教學研究室，學院網(wǎng)站與教育類專門網(wǎng)站的有效鏈接，給學院教學研究帶來一片新天地，各種優(yōu)秀教案、專家論壇、網(wǎng)絡觀摩課、各科素材、多媒體課件制作等內(nèi)容為教師教研提供了極佳的平臺，有效地降低教研成本、提高效率。綜上所述，高職院校門戶網(wǎng)站的建設與設計是十分必要的。

2 前期網(wǎng)站功能策劃與設計定位

網(wǎng)頁良好的視覺展示，能向瀏覽者充分展示個人或企事業(yè)單位、組織自身的個性特征和企業(yè)文化。進行個性化的網(wǎng)頁設計，首先必須了解自己要做網(wǎng)站的內(nèi)容，只有抓住網(wǎng)站內(nèi)容的個性化特征并且視覺化，然后從網(wǎng)頁的界面、導航條、交互方式、文字、圖片、色彩、聲音、視頻等元素入手，才能設計出精彩且個性化的網(wǎng)頁。高職院校門戶網(wǎng)站的前期網(wǎng)站功能策劃與設計定位，需要根據(jù)高職院校的辦學特色與理念、網(wǎng)頁的服務對象、提供人性化的服務（便捷性）等方面進行綜合分析，在目標明確的基礎上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設計方案，對網(wǎng)站的整體風格和特色做出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)，制作出欄目結(jié)構(gòu)關系圖等。門戶網(wǎng)站的整體設計風格要符合學院的整體對外形象，結(jié)合我院實際情況，學院網(wǎng)站首頁設計的重點將突出功能性和使用便捷性，重新設置了網(wǎng)站結(jié)構(gòu)，完備相關使用功能。在設計過程中，嚴格遵循四個網(wǎng)頁排版原則，即：對比、對齊、重復和親密性進行設計。

3 網(wǎng)頁的個性化設計

高職院校門戶網(wǎng)站界面設計思路要遵循簡潔實用、使用便捷、整體性強、網(wǎng)站形象突出等方面進行。在網(wǎng)絡的特殊環(huán)境下，盡量以高效方式將用戶所想要得到的信息傳送，去掉所有冗余的信息。在滿足使用者的要求下，網(wǎng)頁做得越適合使用，就越能顯示出其功能美。網(wǎng)站設計最終強調(diào)的是一個整體，只有圍繞一個統(tǒng)一目標所做的設計才是成功的。[1]當然，網(wǎng)頁藝術設計絕不僅僅是對網(wǎng)站中界面各構(gòu)成要素的簡單疊加，它還需要設計師從藝術構(gòu)成和欣賞角度把各個要素有機結(jié)合起來，這其中包含了文字、圖形圖像、色彩、版式等等，協(xié)調(diào)好形、聲、色、動畫以及音頻等諸多元素之間的微妙組合關系，使之達到渾然一體的結(jié)合。高職院校門戶網(wǎng)站界面以頁面精美化設計為目標，使用PS、AI等設計軟件進行設計深化。

3.1 統(tǒng)一的界面風格

目前，網(wǎng)頁設計一般分為三種大類：功能型網(wǎng)頁設計（服務網(wǎng)站&B/S軟件用戶端）、形象型網(wǎng)頁設計（品牌形象站）、信息型網(wǎng)頁設計（門戶站）。根據(jù)設計網(wǎng)頁的目的不同，應選擇不同的網(wǎng)頁界面設計。高職院校門戶網(wǎng)站屬于信息型網(wǎng)站設計，需要采用瀏覽導向清晰的網(wǎng)頁界面，使得電腦終端的瀏覽者看到一個完整的頁面。網(wǎng)頁界面設計作為一種視覺語言，首先講究的是頁面布局，布局是以最適合瀏覽的方式將圖片和文字排放在網(wǎng)頁的不同位置，以求最佳視域。網(wǎng)頁布局大致可分為“國”字形、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型等多種布局方法。選擇哪種布局類型需要具體問題具體分析，要從網(wǎng)站內(nèi)容、頁面結(jié)構(gòu)和表現(xiàn)形式等多方面進行綜合考慮。

根據(jù)我院的綜合情況，門戶網(wǎng)站首頁總體結(jié)構(gòu)布局采用的是采用上、下、左、右結(jié)合的綜合型框架，再結(jié)合F1ash、GIF動畫，使頁面形式更加多樣，視覺沖擊力更強。上部是學院基本信息區(qū)，主要包括學院名稱及標志、校訓（中英文）、搜索欄、設為首頁欄等。中部是學院展示區(qū)，主要包括大幅面的學院形象圖片（校園風景/各類重大活動圖片等進行動態(tài)切換）、導航欄、臨時公告信息欄。下部則為主要功能區(qū)，采用左、中、右的布局，其中左邊是新聞圖片展示（動態(tài)切換）和校內(nèi)導航，中間為學院新聞、公告瀏覽，右邊則是快速登錄、專題網(wǎng)站（動態(tài)切換）、友情鏈接等功能欄目。整齊劃一的界面風格，圖文結(jié)合的疏密位置關系所產(chǎn)生的空間層次富有彈性，給人以簡潔大氣的視覺效果。

網(wǎng)絡資源的優(yōu)勢之一是多媒體功能，要吸引瀏覽者注意力，網(wǎng)頁的內(nèi)容可以充分調(diào)動Gif、FLASH等動態(tài)圖像來表現(xiàn)。在我院網(wǎng)站首頁界面設計中，中部學院展示區(qū)、新聞圖片展示區(qū)等局部區(qū)域采用大幅面的學院風景、新聞圖片進行動態(tài)循環(huán)切換，這樣既可以多角度呈現(xiàn)豐富的學院信息，也可以吸引瀏覽者注意力。endprint

3.2 合理的色彩搭配

色彩是藝術設計中重要的視覺元素之一，好的色彩搭配能夠給人以強烈的藝術感染力和視覺沖擊力，會給用戶留下深刻的印象。[2]在網(wǎng)頁色彩設計中，要充分利用色相、純度、明度、遠近、冷暖等對比關系豐富網(wǎng)頁的視覺效果，設計中首先要確定該網(wǎng)頁的主色調(diào)及輔助色，以及文字、配圖的色彩效果。為了做到主題鮮明突出、要點明確，應該使配色和圖片應圍繞預定的主題，調(diào)動一切手段充分表現(xiàn)門戶網(wǎng)站的個性和情趣，辦出門戶網(wǎng)站的特點。

南通航運職業(yè)技術學院是一所立足交通，圍繞水上運輸產(chǎn)業(yè)鏈設置專業(yè)，辦學特色鮮明的全日制高等職業(yè)院校，在其門戶網(wǎng)站的色彩搭配設計中充分考慮學院的辦學特色、形象定位、網(wǎng)站訪問用戶的文化背景、視覺顯示終端對網(wǎng)站界面色彩呈現(xiàn)的影響等方面因素，最終網(wǎng)站界面主體色采用大面積的海洋藍與點綴其中的高雅灰進行穿插搭配。藍色象征著大海，也象征著知識、邏輯、一切的客觀存在的精神，象征了理想、夢想、未來這些令人憧憬的事物，與學院的辦學理念及特色不謀而合。灰色，在色彩學上屬于中間色，意即是既非暖色又非冷色，而是介于二者之間的色調(diào)。灰色象征著理性、智慧、誠懇、沉穩(wěn)，是一種穩(wěn)重而高雅的色彩，對于中間色來說，在色彩搭配上可以跟任何一種顏色進行搭配。在學院門戶網(wǎng)站界面設計中，大面積海洋藍與高雅灰的色彩搭配，穿插大小不一的彩色動態(tài)新聞圖片，整體界面在視覺顯示終端能呈現(xiàn)出穩(wěn)重而不單一的色調(diào)。

3.3 便捷的操作瀏覽

高職院校門戶網(wǎng)站界面的設計，應盡量將更多豐富的學院信息資源及相關內(nèi)容展現(xiàn)給瀏覽者，方便瀏覽者使用。因此，瀏覽者進入界面之后，應保證界面導向清晰明確、交互式強、快速下載時間等設計因素，使其過程操作簡單，方便易讀。

網(wǎng)站的界面設計發(fā)揮網(wǎng)絡的優(yōu)勢，讓每個使用者都參與到其中來，體現(xiàn)其強大的交互性，這樣的設計才能算成功的設計。多頁面站點頁面的編排設計要求把頁面之間的有機聯(lián)系反映出來，特別要求處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關系。為了達到最佳的視覺表現(xiàn)效果，反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。在互聯(lián)網(wǎng)上30秒的等待時間與我們平常10分鐘等待時間的感覺相同。因此，建議在高職院校門戶網(wǎng)站界面的設計中盡量避免使用過多的圖片及體積過大的圖片，主要頁面的容量應確保普通瀏覽者頁面等待時間不超過10秒以保證其快速地下載時間。非圖形的內(nèi)容在必要時適當使用動態(tài)“Gif”圖片，為減少動畫容量，應用巧妙設計的Java動畫可以用很小的容量使圖形或文字產(chǎn)生動態(tài)的效果。

4 網(wǎng)頁的后期推廣、更新、安全與維護

高職院校門戶網(wǎng)站界面的設計制作好啟用后，需及時跟蹤所有使用者，收集其使用反饋意見，及時進行頁面設計調(diào)整，以達到最優(yōu)效果。因為網(wǎng)頁制作需要時時更新，而維護更新的工作更需要專人專做，要及時更新信息，并把網(wǎng)頁上已經(jīng)作廢的鏈接及時刪除。

5 結(jié)語

優(yōu)質(zhì)的高職院校門戶網(wǎng)站界面設計，是各高校的一張無聲名片，更是提高教學管理、網(wǎng)絡化服務，院內(nèi)外各系部適應教育信息化發(fā)展趨勢的必然途徑。緊緊抓住各高職院校的辦學特色與理念、網(wǎng)頁的服務對象等方面因素，設計出符合當代瀏覽者審美和實用功能需求的優(yōu)質(zhì)界面，為使用者提供便利服務，以此提升學院品牌形象，實現(xiàn)信息服務的可持續(xù)發(fā)展。

參考文獻：

[1] 周暢.高校門戶網(wǎng)站界面設計視覺形象優(yōu)化研究[D].合肥工業(yè)大學，2013.

[2] 岳俊杰.淺析網(wǎng)頁色彩設計的原則與方法[J].改革與開發(fā)，2010（12）.endprint

3.2 合理的色彩搭配

色彩是藝術設計中重要的視覺元素之一，好的色彩搭配能夠給人以強烈的藝術感染力和視覺沖擊力，會給用戶留下深刻的印象。[2]在網(wǎng)頁色彩設計中，要充分利用色相、純度、明度、遠近、冷暖等對比關系豐富網(wǎng)頁的視覺效果，設計中首先要確定該網(wǎng)頁的主色調(diào)及輔助色，以及文字、配圖的色彩效果。為了做到主題鮮明突出、要點明確，應該使配色和圖片應圍繞預定的主題，調(diào)動一切手段充分表現(xiàn)門戶網(wǎng)站的個性和情趣，辦出門戶網(wǎng)站的特點。

南通航運職業(yè)技術學院是一所立足交通，圍繞水上運輸產(chǎn)業(yè)鏈設置專業(yè)，辦學特色鮮明的全日制高等職業(yè)院校，在其門戶網(wǎng)站的色彩搭配設計中充分考慮學院的辦學特色、形象定位、網(wǎng)站訪問用戶的文化背景、視覺顯示終端對網(wǎng)站界面色彩呈現(xiàn)的影響等方面因素，最終網(wǎng)站界面主體色采用大面積的海洋藍與點綴其中的高雅灰進行穿插搭配。藍色象征著大海，也象征著知識、邏輯、一切的客觀存在的精神，象征了理想、夢想、未來這些令人憧憬的事物，與學院的辦學理念及特色不謀而合。灰色，在色彩學上屬于中間色，意即是既非暖色又非冷色，而是介于二者之間的色調(diào)。灰色象征著理性、智慧、誠懇、沉穩(wěn)，是一種穩(wěn)重而高雅的色彩，對于中間色來說，在色彩搭配上可以跟任何一種顏色進行搭配。在學院門戶網(wǎng)站界面設計中，大面積海洋藍與高雅灰的色彩搭配，穿插大小不一的彩色動態(tài)新聞圖片，整體界面在視覺顯示終端能呈現(xiàn)出穩(wěn)重而不單一的色調(diào)。

3.3 便捷的操作瀏覽

高職院校門戶網(wǎng)站界面的設計，應盡量將更多豐富的學院信息資源及相關內(nèi)容展現(xiàn)給瀏覽者，方便瀏覽者使用。因此，瀏覽者進入界面之后，應保證界面導向清晰明確、交互式強、快速下載時間等設計因素，使其過程操作簡單，方便易讀。

網(wǎng)站的界面設計發(fā)揮網(wǎng)絡的優(yōu)勢，讓每個使用者都參與到其中來，體現(xiàn)其強大的交互性，這樣的設計才能算成功的設計。多頁面站點頁面的編排設計要求把頁面之間的有機聯(lián)系反映出來，特別要求處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關系。為了達到最佳的視覺表現(xiàn)效果，反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。在互聯(lián)網(wǎng)上30秒的等待時間與我們平常10分鐘等待時間的感覺相同。因此，建議在高職院校門戶網(wǎng)站界面的設計中盡量避免使用過多的圖片及體積過大的圖片，主要頁面的容量應確保普通瀏覽者頁面等待時間不超過10秒以保證其快速地下載時間。非圖形的內(nèi)容在必要時適當使用動態(tài)“Gif”圖片，為減少動畫容量，應用巧妙設計的Java動畫可以用很小的容量使圖形或文字產(chǎn)生動態(tài)的效果。

4 網(wǎng)頁的后期推廣、更新、安全與維護

高職院校門戶網(wǎng)站界面的設計制作好啟用后，需及時跟蹤所有使用者，收集其使用反饋意見，及時進行頁面設計調(diào)整，以達到最優(yōu)效果。因為網(wǎng)頁制作需要時時更新，而維護更新的工作更需要專人專做，要及時更新信息，并把網(wǎng)頁上已經(jīng)作廢的鏈接及時刪除。

5 結(jié)語

優(yōu)質(zhì)的高職院校門戶網(wǎng)站界面設計，是各高校的一張無聲名片，更是提高教學管理、網(wǎng)絡化服務，院內(nèi)外各系部適應教育信息化發(fā)展趨勢的必然途徑。緊緊抓住各高職院校的辦學特色與理念、網(wǎng)頁的服務對象等方面因素，設計出符合當代瀏覽者審美和實用功能需求的優(yōu)質(zhì)界面，為使用者提供便利服務，以此提升學院品牌形象，實現(xiàn)信息服務的可持續(xù)發(fā)展。

參考文獻：

[1] 周暢.高校門戶網(wǎng)站界面設計視覺形象優(yōu)化研究[D].合肥工業(yè)大學，2013.

[2] 岳俊杰.淺析網(wǎng)頁色彩設計的原則與方法[J].改革與開發(fā)，2010（12）.endprint

3.2 合理的色彩搭配

色彩是藝術設計中重要的視覺元素之一，好的色彩搭配能夠給人以強烈的藝術感染力和視覺沖擊力，會給用戶留下深刻的印象。[2]在網(wǎng)頁色彩設計中，要充分利用色相、純度、明度、遠近、冷暖等對比關系豐富網(wǎng)頁的視覺效果，設計中首先要確定該網(wǎng)頁的主色調(diào)及輔助色，以及文字、配圖的色彩效果。為了做到主題鮮明突出、要點明確，應該使配色和圖片應圍繞預定的主題，調(diào)動一切手段充分表現(xiàn)門戶網(wǎng)站的個性和情趣，辦出門戶網(wǎng)站的特點。

南通航運職業(yè)技術學院是一所立足交通，圍繞水上運輸產(chǎn)業(yè)鏈設置專業(yè)，辦學特色鮮明的全日制高等職業(yè)院校，在其門戶網(wǎng)站的色彩搭配設計中充分考慮學院的辦學特色、形象定位、網(wǎng)站訪問用戶的文化背景、視覺顯示終端對網(wǎng)站界面色彩呈現(xiàn)的影響等方面因素，最終網(wǎng)站界面主體色采用大面積的海洋藍與點綴其中的高雅灰進行穿插搭配。藍色象征著大海，也象征著知識、邏輯、一切的客觀存在的精神，象征了理想、夢想、未來這些令人憧憬的事物，與學院的辦學理念及特色不謀而合。灰色，在色彩學上屬于中間色，意即是既非暖色又非冷色，而是介于二者之間的色調(diào)。灰色象征著理性、智慧、誠懇、沉穩(wěn)，是一種穩(wěn)重而高雅的色彩，對于中間色來說，在色彩搭配上可以跟任何一種顏色進行搭配。在學院門戶網(wǎng)站界面設計中，大面積海洋藍與高雅灰的色彩搭配，穿插大小不一的彩色動態(tài)新聞圖片，整體界面在視覺顯示終端能呈現(xiàn)出穩(wěn)重而不單一的色調(diào)。

3.3 便捷的操作瀏覽

高職院校門戶網(wǎng)站界面的設計，應盡量將更多豐富的學院信息資源及相關內(nèi)容展現(xiàn)給瀏覽者，方便瀏覽者使用。因此，瀏覽者進入界面之后，應保證界面導向清晰明確、交互式強、快速下載時間等設計因素，使其過程操作簡單，方便易讀。

網(wǎng)站的界面設計發(fā)揮網(wǎng)絡的優(yōu)勢，讓每個使用者都參與到其中來，體現(xiàn)其強大的交互性，這樣的設計才能算成功的設計。多頁面站點頁面的編排設計要求把頁面之間的有機聯(lián)系反映出來，特別要求處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關系。為了達到最佳的視覺表現(xiàn)效果，反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。在互聯(lián)網(wǎng)上30秒的等待時間與我們平常10分鐘等待時間的感覺相同。因此，建議在高職院校門戶網(wǎng)站界面的設計中盡量避免使用過多的圖片及體積過大的圖片，主要頁面的容量應確保普通瀏覽者頁面等待時間不超過10秒以保證其快速地下載時間。非圖形的內(nèi)容在必要時適當使用動態(tài)“Gif”圖片，為減少動畫容量，應用巧妙設計的Java動畫可以用很小的容量使圖形或文字產(chǎn)生動態(tài)的效果。

4 網(wǎng)頁的后期推廣、更新、安全與維護

高職院校門戶網(wǎng)站界面的設計制作好啟用后，需及時跟蹤所有使用者，收集其使用反饋意見，及時進行頁面設計調(diào)整，以達到最優(yōu)效果。因為網(wǎng)頁制作需要時時更新，而維護更新的工作更需要專人專做，要及時更新信息，并把網(wǎng)頁上已經(jīng)作廢的鏈接及時刪除。

5 結(jié)語

優(yōu)質(zhì)的高職院校門戶網(wǎng)站界面設計，是各高校的一張無聲名片，更是提高教學管理、網(wǎng)絡化服務，院內(nèi)外各系部適應教育信息化發(fā)展趨勢的必然途徑。緊緊抓住各高職院校的辦學特色與理念、網(wǎng)頁的服務對象等方面因素，設計出符合當代瀏覽者審美和實用功能需求的優(yōu)質(zhì)界面，為使用者提供便利服務，以此提升學院品牌形象，實現(xiàn)信息服務的可持續(xù)發(fā)展。

參考文獻：

[1] 周暢.高校門戶網(wǎng)站界面設計視覺形象優(yōu)化研究[D].合肥工業(yè)大學，2013.

[2] 岳俊杰.淺析網(wǎng)頁色彩設計的原則與方法[J].改革與開發(fā)，2010（12）.endprint