淺談遠程教育網(wǎng)頁樣式設(shè)計的特色應(yīng)用

曹紅英

【摘要】 不同的網(wǎng)站頁面樣式，具有不同 的特點，需要網(wǎng)站設(shè)計者根據(jù)網(wǎng)站設(shè)計要求靈活選擇和運用。設(shè)置“角色瀏覽”、“Banner圖示”和“適應(yīng)網(wǎng)頁設(shè)計”，是優(yōu)秀遠程教育網(wǎng)頁樣式的特色功能設(shè)計。

【關(guān)鍵詞】 頁面樣式設(shè)計 角色瀏覽 Banner圖示 適應(yīng)網(wǎng)頁設(shè)計

創(chuàng)建面向用戶的遠程教育門戶網(wǎng)站是高校遠程教育機構(gòu)進行信息化建設(shè)和大學(xué)文化建設(shè)的重要內(nèi)容。“遠程教育網(wǎng)站”通常被稱為遠程教育的網(wǎng)上“門面”。它既是服務(wù)師生的平臺，也是對外宣傳或展示自己辦學(xué)實力及服務(wù)能力的重要窗口，也是傳遞大學(xué)文化的有效載體。其中，網(wǎng)頁樣式設(shè)計起關(guān)鍵性作用。

一、綜述

遠程教育網(wǎng)站應(yīng)該盡量做到門戶結(jié)構(gòu)清晰，頁面精美，訪問快捷、功能實用。主要包含：整體布局要求和網(wǎng)站整體設(shè)計風(fēng)格統(tǒng)一；界面設(shè)計體現(xiàn)用戶相互之間交流互動的特色；網(wǎng)絡(luò)響應(yīng)速度應(yīng)該盡量快，更快的信息訪問速度、更加省時和智能化的用戶界面；更簡便、智能化程度更高的瀏覽查詢流程；后臺管理功能強大、錄入效率高；易于查看網(wǎng)民的建議和評論以及后臺信息。一個網(wǎng)站門戶的主頁面通常由Logo、導(dǎo)航、Banner、內(nèi)容、鏈接、版權(quán)這六部分元素組成。有研究認為，網(wǎng)頁布局包括傳統(tǒng)“T”型布局、上下對照式布局、“上中下”“三”字布局、左右對稱型布局、“回”字形布局、“同”字形布局、“國”字型布局、“川”字型布局、氛圍式布局、POP海報四、式布局、“雜物箱”布局、“人物風(fēng)格化”布局、封面型布局、簡約型布局、綜合型布局、瀑布流式布局等，這是基于對網(wǎng)頁結(jié)構(gòu)“形式”的劃分。每一類型的頁面樣式都具有統(tǒng)一的構(gòu)成元素，但彼此間又有自己獨特的布局特點，因而呈現(xiàn)出不同的網(wǎng)站視覺效果和網(wǎng)頁設(shè)計風(fēng)格。

二、頁面樣式的分類特征

1）“簡約式”。“簡約式”的特征是頁面主體“一屏顯示”、布局簡潔。在主流顯示分辨率下，網(wǎng)站瀏覽者不再需要上下、左右的拖動鼠標(biāo)，即可實現(xiàn)頁面主要內(nèi)容的相對完整的瀏覽效果。2）“圖片動畫式”。“圖片動畫式”的特征是布局簡潔明晰、頁面圖片感強烈。一個精彩的網(wǎng)頁缺少不了圖片，如圖片按鈕、翻轉(zhuǎn)圖片、濾鏡、透明圖、導(dǎo)航圖等，圖片往往在網(wǎng)頁中起到畫龍點睛的作用。圖片傳達信息的直觀性與寓意性遠遠超過文字，大號圖片的應(yīng)用也是簡潔設(shè)計的一種體現(xiàn)，可以明確的表達網(wǎng)站訴求。3）“完整式”。“完整式”的特征是布局規(guī)整秩序、信息直觀、“多屏顯示”、視覺感強。網(wǎng)站頁面組成元素之間，既錯落有致，又和諧統(tǒng)一，營造出的良好秩序感。一般按照分列樣式布局設(shè)計，以字體的大小對標(biāo)題文字與正文內(nèi)容加以區(qū)分，區(qū)別于以往欄目圖標(biāo)的復(fù)雜顯示效果，具有“扁平化”的設(shè)計特點。

三、頁面樣式的特色功能

1）“角色瀏覽”。“角色瀏覽”是指網(wǎng)站設(shè)計者主觀上假定網(wǎng)站瀏覽者為在讀學(xué)生、教職員工、考生、訪客等不同角色，按照瀏覽需求對網(wǎng)站綜合信息進行分類和聚合，滿足不同的訪問行為。。在實際應(yīng)用中，網(wǎng)站設(shè)計者運用CSS樣式，以達到利用CSS美化網(wǎng)頁，統(tǒng)一網(wǎng)站內(nèi)各個網(wǎng)頁風(fēng)格。CSS樣式定義可以用代碼編寫，也可以借助樣式生成器可視化生成，樣式可以定義在當(dāng)前網(wǎng)頁，也可以導(dǎo)入外部樣式表。優(yōu)點在于一是簡化了不同網(wǎng)頁重復(fù)的格式設(shè)置工作，二是將來只要更新了CSS樣式，所有引用該樣式的對象都會更新，便于網(wǎng)站的更新和維護。2）“Banner圖示”。“Banner圖示”是Banner在高校門戶網(wǎng)站中“廣告”效果的實現(xiàn)和擴展。《設(shè)計的法則》中提到：要增加人們的辨識力，讓人回想起重要信息，就可以利用“圖片優(yōu)勢效應(yīng)”。用圖片加文字，確認強調(diào)的是同一信息，以便達到最佳效果。有鑒于此，網(wǎng)站設(shè)計者將“Banner”作為一個專題欄目，充分利用其“圖示”功能，實現(xiàn)其突出視覺功能的同時，也發(fā)揮其強化信息傳達效果的作用。網(wǎng)站瀏覽者進行點選后可閱讀，Banner標(biāo)簽包含的圖文內(nèi)容，更新速率頻繁，瀏覽者可以根據(jù)時間進行自主選擇，又使它具有了“書簽”功能的展示效果。3）“適應(yīng)網(wǎng)頁設(shè)計（Responsive Web Design）”。如何將日新月異的網(wǎng)絡(luò)技術(shù)應(yīng)用于高校門戶網(wǎng)站，使網(wǎng)站瀏覽者在各類瀏覽器終端上，盡可能獲得良好的用戶體驗，是網(wǎng)站設(shè)計者思考和努力的方向。網(wǎng)絡(luò)使用環(huán)境復(fù)雜而多變，除去傳統(tǒng)意義上的臺式機和筆記本電腦，又有了智能手機、iPad、iTV等終端。鑒于智能手機和平板電腦等移動瀏覽器終端的普及，一些遠程教育門戶網(wǎng)站，利用先進網(wǎng)絡(luò)技術(shù)，創(chuàng)新設(shè)計頁面樣式，來適應(yīng)和滿足各類移動終端的瀏覽需求。

四、結(jié)語

遠程教育網(wǎng)站是信息技術(shù)和大學(xué)文化在網(wǎng)絡(luò)媒介平臺的融合與呈現(xiàn)，網(wǎng)站設(shè)計者要做到內(nèi)容為主，用戶至上，提高用戶滿意系數(shù)。設(shè)計者應(yīng)對網(wǎng)站設(shè)計進行調(diào)研分析，對其頁面樣式進行規(guī)律探析，形成更多系統(tǒng)化、理論化的設(shè)計經(jīng)驗和技巧，以此指導(dǎo)網(wǎng)頁樣式設(shè)計實踐活動。

參 考 文 獻

[1]祝曉銘，王艷平.高校門戶網(wǎng)站頁面樣式設(shè)計探析[J]. 電腦知識與技術(shù)，2015（VOL.11）第2期：199-200.

[2]華磊，許長安.淺談網(wǎng)站設(shè)計分析與網(wǎng)頁制作[J].無線互聯(lián)科技，2014（08 ）.

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

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