祝曉銘　王艷平

摘要：高校門戶網站的頁面樣式主要可以概括為“簡約式”、“圖片式”和“俱全式”三大類。不同的網站頁面樣式，具有不同的特征、特點，需要網站設計者根據(jù)網站設計要求靈活選擇和運用。設置“分角色瀏覽”、“Banner圖說”和“自適應網頁設計”，是優(yōu)秀高校門戶網站頁面樣式的特色功能設計，也是其頁面樣式設計的亮點之處和成功所在。

關鍵詞：高校門戶網站；頁面樣式設計；分角色瀏覽；Banner圖說

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

Abstract： In the portal sites of universities， page style design can be summarized as three styles “simple ”， “picture” and “mixture”. Different page style design owns different feature and characteristic. Setting “browsing in roles ”、“banner of picture speaking” and “responsive web design” is not only the feature of outstanding page style design in the portal sites of universities， but also the highlight and the success of the page style.

Key words： Portal Sites of Universities； Page Style Design； Browsing in Roles； Banner of Picture Speaking

“高校門戶網站”通常被稱為高校的網上“門面”或“名片”。它既是高校對外宣傳或展示自己“辦學實力、辦學水平、服務能力”的重要窗口，又是高校服務師生的基礎信息平臺，也是高校傳遞大學文化的有效載體。因此，創(chuàng)建優(yōu)秀的門戶網站是高校進行信息化建設和大學文化建設的重要內容。其中，網站的頁面樣式設計起關鍵性作用。

1 綜述

我們知道，一個網站的主頁面通常由Logo、導航、Banner、內容、鏈接、版權這六部分元素組成。網站設計者通常會根據(jù)網站的總體規(guī)劃設計要求，對這六部分組成元素進行版面設計和位置定位，其最終呈現(xiàn)的視覺效果也不盡相同。

有研究認為，網頁布局包括傳統(tǒng)“T”型布局、上下對照式布局、“上中下”“三”字布局、左右對稱型布局、“回”字形布局、文字型布局、氛圍式布局、“雜物箱”布局、“人物風格化”布局、封面型布局、簡約型布局、綜合型布局和瀑布流式布局，[1]這是基于對網頁結構“形式”的劃分。

通過對國內近1400所高校網站進行頁面樣式的歸納分析，對其存在的共性特點和個性特色進行概括研究，筆者認為，高校門戶網站的頁面樣式主要可以概括為“簡約式”、“圖片式”和“俱全式”這三大類。每一類型的頁面樣式都具有統(tǒng)一的構成元素，但彼此間又有自己獨特的布局特點，因而呈現(xiàn)出不同的網站視覺效果和網頁設計風格。

2 頁面樣式的分類特征

1）“簡約式”

“簡約式”的特征是布局簡潔精煉、頁面主體“一屏顯示”。

“一屏顯示”是指在主流顯示分辨率①下，網站瀏覽者不再需要上下、左右的拖動鼠標，即可實現(xiàn)頁面主要內容的相對完整的瀏覽效果。這樣做可以使網站瀏覽者對于網站傳遞的整體信息一目了然，既縮短了瀏覽時間，又增強了傳達效果。對此，要求網站設計者要做到導航分類科學嚴謹，欄目設置標準規(guī)范，布局結構簡潔精煉。

“簡約式”的代表為“北京理工大學”網站和“內蒙古師范大學”網站?！氨本├砉ご髮W”網站的頁面布局完全按照網站組成六元素的排列順序進行設計，Banner部分圖片的分辨率（2000*376 pixels）適應主流顯示分辨率下滿屏顯示的要求，圖片貫穿顯示器的左右兩端，具有通欄顯示的效果。而“內蒙古師范大學”網站的頁面布局將Banner部分包含于內容部分，圖片面積相對較小，與文字新聞內容版塊左右平行排列，位置下邊沿暗合對齊，構成內容部分的完整一欄，使頁面布局結構更顯緊湊。

2）“圖片式”

“圖片式”的特征是布局簡潔明晰、頁面圖片感強烈。

圖片是文字以外最早引入到網絡中的多媒體對象，它傳達信息的直觀性與寓意性遠遠超過文字，而且圖片的引入也大大美化了網絡頁面。[2]隨著網絡帶寬提升和網絡速度加快，超大圖片的應用成為網頁設計的趨勢之一。把照片用作網站的背景，這樣可以讓網站頁面形成強烈的視覺效果，大號圖片的應用也是簡潔設計的一種體現(xiàn)，清晰而明確的圖片內容能夠讓網站訴求更加明確。[3]

“圖片式”的代表為“中國人民大學”網站和“北京航空航天大學”網站?！爸袊嗣翊髮W”網站頁面樣式的最明顯特征在于其多篇幅、高質量、超大圖片（1680*1050 pixels）的“全屏”應用。網站設計者改變了以往超大圖片僅作為頁面背景元素的單一用途，涵蓋“Banner”傳統(tǒng)的視覺信息傳達作用的同時，使超大背景圖片轉化為前端頁面設計的重要組成部分，畫面極具沖擊力，視覺效果令人震撼。“北京航空航天大學”網站同樣使用了超大圖片（2000*1000 pixels）作為頁面背景，但背景圖片僅作為單一篇幅的視覺裝飾元素出現(xiàn)，其功用與“人大”網站具有明顯區(qū)別。網站設計者作此處理，是因為網站頁面的內容部分，具有顯著的圖片化特點，保留背景圖片的視覺裝飾功能而弱化其視覺傳達功能，避免了網站頁面前、后端視覺元素的矛盾與沖突，有利于頁面視覺觀感的完整和統(tǒng)一。

3）“俱全式”

“俱全式”的特征是布局規(guī)整秩序、版塊眾多、“多屏顯示”。

“俱全式”的代表為“清華大學”網站和“青島濱海學院”網站?！扒迦A大學”網站頁面的六部分組成元素，區(qū)間劃分明確，布局結構清晰，信息傳達直觀，視覺呈現(xiàn)形式感極強。內容部分眾多的信息版塊按照通欄分列樣式進行布局設計，結構樣式極其簡潔，除卻正文文字、配發(fā)圖片以及起分割作用的單色線條，再無其他外設圖標。只以字體的大小對標題文字與正文內容加以區(qū)分，區(qū)別于以往欄目圖標的復雜顯示效果，具有“扁平化”的設計特點?？v觀整個頁面布局，留白空間處理得當，含蓄蘊藉，格調高雅?！扒鄭u濱海學院”網站的突出特點是頁面營造出的良好秩序感，其組成元素之間，既錯落有致，又和諧統(tǒng)一，畫面緊湊而飽滿。雖然內容版塊數(shù)量眾多且版塊內信息含量大，但網站設計者講求頁面空間秩序的有效利用和合理劃分，空間留白發(fā)揮效用突出，所以版塊間或版塊內并不存在元素抵觸或視覺擁擠。

3 頁面樣式的特色功能

不同分類的頁面樣式除去明顯的區(qū)分特征，還具有一些特色功能設計，主要包括“分角色瀏覽”、“Banner圖說”、“自適應網頁設計”等。

1）“分角色瀏覽”

“分角色瀏覽”是指網站設計者主觀上假定網站瀏覽者為在讀學生、教職員工、考生、校友、訪客以及“粉絲”等不同角色，再按照不同角色的瀏覽需求，對網站綜合信息進行分類和聚合，來方便不同網站瀏覽者的訪問行為。有研究認為，如果網頁能夠創(chuàng)造一種溫暖的、與人接觸的感覺，那么網頁就能夠建立一種與用戶的心理連接。[4]“分角色瀏覽”正是網站設計者以個性化、人性化設計來提升網站瀏覽者對網站的體驗好感度、黏度的重要舉措。

2）“Banner圖說”

“Banner圖說”功能可以看做是Banner②在高校門戶網站中“廣告”效果的實現(xiàn)和擴展。Banner在高校門戶網站的頁面設計中，大多以校園的風景圖片或人像圖片出現(xiàn)，只是起到單一的畫面裝飾作用，而欠缺其“廣而告之”的宣傳效果?！对O計的法則》中提到：要增加人們的辨識力，讓人回想起重要信息，就可以利用“圖片優(yōu)勢效應”。用圖片加上文字，并且確認兩者強調的是同一信息，以便達到最佳效果。[5]有鑒于此，網站設計者將“Banner”作為一個專題欄目進行使用，充分利用其“圖說”功能，將學校教學、科研和生活的不同主題內容以圖文并茂的方式貫穿其中，在實現(xiàn)其突出視覺裝飾功能的同時，也發(fā)揮其強化信息傳達效果的作用。

“清華大學”網站Banner部分設計成為“清華映像”專題，以精美圖片配合精煉文字的方式向關注清華大學的網絡用戶和社會大眾介紹清華大學在教學、科研、社會服務等方面的成就及師生生活中的亮點。它以日（月）歷標簽的形式呈現(xiàn)多個主題圖片，并輔以簡潔文案作為內容標題或圖片說明，網站瀏覽者進行點選后可閱讀此主題圖片的專題采寫文字，從而完成整個信息內容的傳遞。Banner標簽包含的圖文內容，更新速率頻繁，網站瀏覽者可以根據(jù)時間進行自主選擇，又使它具有了“年鑒”功能的展示效果?！扒迦A映像”專題的設立和運用，是“清華大學”網站頁面樣式設計的顯著特點，是 “Banner圖說”功能在頁面樣式設計中的精彩應用，做到了“以圖引人，以文感人”，實現(xiàn)了“黃金位置”的“黃金”應用。

3）“自適應網頁設計”

現(xiàn)今，網絡使用環(huán)境復雜而多變，除去傳統(tǒng)意義上的臺式機和筆記本電腦，又有了智能手機、平板電腦、智能電視等各類瀏覽器終端。瀏覽者對于網絡閱讀具有方便、快捷和舒適的要求，如何將日新月異的網絡技術應用于高校門戶網站，使網站瀏覽者在各類瀏覽器終端上，盡可能獲得良好的用戶體驗，是網站設計者思考和努力的方向。

鑒于智能手機和平板電腦等移動瀏覽器終端的普及，一些高校門戶網站，利用先進網絡技術，創(chuàng)新設計頁面樣式，來適應和滿足各類移動終端的瀏覽需求。以“清華大學”網站為例，網站采用“自適應網頁設計”③（Responsive Web Design）技術，可以偵測不同類型的瀏覽器終端的屏幕寬度，自動調整頁面布局結構，提供相對應的樣式、內容、功能和交互方式，使網絡瀏覽者獲得最優(yōu)化的頁面視覺效果。

除去“自適應網頁設計”，設計開發(fā)“獨立手機版（App Store）”和“網頁觸屏版”，也能適應各類瀏覽器終端的顯示要求。

4 結語

優(yōu)秀高校門戶網站是信息技術和大學文化在網絡媒介平臺的融合與呈現(xiàn)，網站設計者切不可一味“炫”技，拋棄文化，丟失特色，“陷”于模仿；要做到內容為主，用戶至上，融古鑠今，“意”新“形”美。設計者應對網站設計進行系統(tǒng)把握，對其頁面樣式進行規(guī)律探析，形成更多系統(tǒng)化、理論化的設計經驗和技巧，以此指導設計實踐活動，收獲成功作品。

注釋：

① 主流顯示分辨率即指現(xiàn)階段流行的1080P高清畫面顯示效果，其對應的最佳分辨率為1920x1080（pixels）

② Banner可以作為網站頁面的橫幅廣告（又稱為“網幅廣告”、“旗幟廣告”等），是網絡廣告的主要形式。一般使用GIF格式的圖像文件，可以使用靜態(tài)圖形， 也可用多幀圖像拼接為動畫圖像，位于網頁頂部、中部、底部任意一處，是橫向貫穿整個或者大半個頁面的廣告條

③ 2010年，Ethan Marcotte提出了“自適應網頁設計”（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、并做出相應調整的網頁設計

參考文獻：

[1]雷宇.網頁布局結構與色彩搭配解析[D]. 武漢：中南民族大學美術學院，2012：17-25.

[2]董海斌，王麗梅，孫浩章.網頁界面設計中的平面視覺元素[J].包裝工程，2010（4）：89-91.

[3]林歡，譚浩，趙江洪.圖片優(yōu)勢效應在網頁設計中的應用[J].包裝工程，2014（18）：13-16.

[4]姚海娟.基于眼動記錄技術的網頁視覺吸引力研究[J].包裝工程，2013（10）：4-6.

[5]威廉·立德威爾，克里蒂娜·霍頓，吉爾·巴特勒.設計的法則[M].李嬋，譯.沈陽：遼寧科學技術出版社，2010：152.