高職院校門戶網站界面設計理念與技巧

周書林

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

關鍵詞：高職院校；網站；界面設計；理念；技巧

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

1 高職院校門戶網站設計的必要性

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

2 前期網站功能策劃與設計定位

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

3 網頁的個性化設計

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

3.1 統一的界面風格

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

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

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

3.2 合理的色彩搭配

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

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

3.3 便捷的操作瀏覽

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

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

4 網頁的后期推廣、更新、安全與維護

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

5 結語

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

參考文獻：

[1] 周暢.高校門戶網站界面設計視覺形象優化研究[D].合肥工業大學，2013.

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

3.2 合理的色彩搭配

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

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

3.3 便捷的操作瀏覽

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

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

4 網頁的后期推廣、更新、安全與維護

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

5 結語

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

參考文獻：

[1] 周暢.高校門戶網站界面設計視覺形象優化研究[D].合肥工業大學，2013.

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

3.2 合理的色彩搭配

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

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

3.3 便捷的操作瀏覽

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

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

4 網頁的后期推廣、更新、安全與維護

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

5 結語

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

參考文獻：

[1] 周暢.高校門戶網站界面設計視覺形象優化研究[D].合肥工業大學，2013.

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