曹紅英

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

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

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

一、綜述

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

二、頁面樣式的分類特征

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

三、頁面樣式的特色功能

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

四、結(jié)語

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

參 考 文 獻(xiàn)

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

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

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

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