淺談遠程教育網頁樣式設計的特色應用

曹紅英

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

【關鍵詞】 頁面樣式設計 角色瀏覽 Banner圖示 適應網頁設計

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

一、綜述

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

二、頁面樣式的分類特征

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

三、頁面樣式的特色功能

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

四、結語

遠程教育網站是信息技術和大學文化在網絡媒介平臺的融合與呈現，網站設計者要做到內容為主，用戶至上，提高用戶滿意系數。設計者應對網站設計進行調研分析，對其頁面樣式進行規律探析，形成更多系統化、理論化的設計經驗和技巧，以此指導網頁樣式設計實踐活動。

參 考 文 獻

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

[2]華磊，許長安.淺談網站設計分析與網頁制作[J].無線互聯科技，2014（08 ）.

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

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