高校門戶網(wǎng)站頁面樣式設(shè)計探析

祝曉銘　王艷平

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

關(guān)鍵詞：高校門戶網(wǎng)站；頁面樣式設(shè)計；分角色瀏覽；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

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

1 綜述

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

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

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

2 頁面樣式的分類特征

1）“簡約式”

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

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

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

2）“圖片式”

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

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

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

3）“俱全式”

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

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

3 頁面樣式的特色功能

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

1）“分角色瀏覽”

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

2）“Banner圖說”

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

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

3）“自適應(yīng)網(wǎng)頁設(shè)計”

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

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

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

4 結(jié)語

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

注釋：

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

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

③ 2010年，Ethan Marcotte提出了“自適應(yīng)網(wǎng)頁設(shè)計”（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計

參考文獻：

[1]雷宇.網(wǎng)頁布局結(jié)構(gòu)與色彩搭配解析[D]. 武漢：中南民族大學美術(shù)學院，2012：17-25.

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

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

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

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