精品資源共享課網(wǎng)站視覺設計六要素

摘要：精品資源共享課網(wǎng)站的視覺設計不是單純的色彩設計和版式設計，要從風格定位設計、界面功能設計、導航系統(tǒng)設計、版式視覺設計、線條和形狀設計、色彩設計等多方面進行整體統(tǒng)一的設計。要以“學生為中心”，從學生的視覺感受、心理要求出發(fā)進行設計，高質(zhì)量的精品資源共享課網(wǎng)站視覺設計是形式和功能的完美統(tǒng)一。

關(guān)鍵詞：精品資源共享課；網(wǎng)站；視覺設計；六要素

一、引言

精品資源共享課建設是國家精品開放課程建設項目的組成部分，旨在促進教育教學觀念轉(zhuǎn)變，引領教學內(nèi)容和教學方法改革，推動高等學校優(yōu)質(zhì)課程教學資源通過現(xiàn)代信息技術(shù)手段共建共享，提高人才培養(yǎng)質(zhì)量，服務學習型社會建設。要建設好精品資源共享課，其網(wǎng)站建設非常重要，網(wǎng)站的視覺設計效果是影響網(wǎng)站建設質(zhì)量的重要因素，基于此，本文將對影響精品資源共享課網(wǎng)站視覺設計的六個要素進行探討。

二、影響精品資源共享課網(wǎng)站視覺設計的六要素

（一）風格定位設計

風格的定位對于精品資源共享課網(wǎng)站的美化起著至關(guān)重要的作用。任何精品資源共享課的網(wǎng)站建設的風格與形式都是由課程的主題內(nèi)容決定的，要想讓課程達到理想的應用效果就必須達到形式與內(nèi)容的統(tǒng)一。精品資源共享課網(wǎng)站是傳播教育內(nèi)容的載體，課程的內(nèi)容決定課程所采用的形式。界面設計需要考慮不同精品資源共享課網(wǎng)站所要表達的內(nèi)容、主題、思想。只有通過認真設計和充分的考慮才能產(chǎn)生優(yōu)秀的界面，實現(xiàn)形式與內(nèi)容的統(tǒng)一。

文史類的精品資源共享課網(wǎng)站風格一般應莊重大方，有文化底韻。而音、體、美類的精品資源共享課網(wǎng)站則可以形式多樣化、活潑生動一些。理科類的精品資源共享課網(wǎng)站風格則應該具有條理化、形象化一些，把抽象的具體化、生動化，這樣有利于學生們對課程的理解。

影響精品資源共享課網(wǎng)站風格的形成主要因素主要有：網(wǎng)站的版面設計、色彩效果設計、文字與圖片的結(jié)合方式等。精品資源共享課網(wǎng)站是由很多不同性質(zhì)的頁面構(gòu)成的，多數(shù)精品資源共享課網(wǎng)站都對其在表現(xiàn)形式上進行了適當變化處理，但顯示風格、布局、位置、頁面色彩、人機操作方式等又保持了一致。在不同的頁面上，相同功能、相同操作、相同圖標的按鈕總是處于畫面的同一位置，使整個課程各部分之間有機聯(lián)系，整個課程和諧完整。

（二）界面功能設計

合理的界面布局使精品資源共享課網(wǎng)站條理清晰，易于使用。目前精品資源共享課網(wǎng)站一般將界面空間進行功能分區(qū)，如頁面標題區(qū)、內(nèi)容呈現(xiàn)區(qū)、學習工具區(qū)、頁面操作按鈕區(qū)。在這種布局中，各區(qū)視覺條理清晰，主題突出。教學內(nèi)容、背景、菜單、按鈕等按其重要程度在屏幕上進行合理視覺安排，相關(guān)功能的按鈕分組排放，讓學習者容易辨認。課程主從視覺關(guān)系明顯，主次分明，對于需要重點突出、主要強調(diào)的內(nèi)容，安排在屏幕中心位置或進行突出顯示，而對于次要的內(nèi)容，如菜單、工具按鈕，一般放在屏幕的四周。主體內(nèi)容所包含的文字、圖形、視頻、動畫等多媒體對象，都要合理安排，使屏幕的視覺布局簡潔、協(xié)調(diào)、美觀，營造出符合教學設計目的的視覺環(huán)境，突出主體內(nèi)容，增強學習者對精品資源共享課網(wǎng)站的注意力。

（三）導航系統(tǒng)設計

導航系統(tǒng)在精品資源共享課網(wǎng)站的視覺設計中占重要地位。精品資源共享課網(wǎng)站不同于一般的網(wǎng)頁，它主要是一種以網(wǎng)絡為媒介和學生進行交流、學習的新的學習方式。一個導航系統(tǒng)的清晰性直接影響學生們的學習效果。學生可以通過導航系統(tǒng)從一個網(wǎng)頁快速而簡單的跳轉(zhuǎn)到目標頁。

頁面框架的導航結(jié)構(gòu)是以一個或幾個穩(wěn)定的框架頁面來呈現(xiàn)教學內(nèi)容的導航結(jié)構(gòu)的視覺設計。頁面框架使用非常普遍，如窗口左邊是頁面導航結(jié)構(gòu)，右面呈現(xiàn)鏈接的教學內(nèi)容。頁面框架導航視覺設計優(yōu)點在于以下幾點。

1.保持了課件的整體性和導航的靈活性，使學生在有限的視覺范圍內(nèi)清晰、準確地找到所需信息，避免因頁面變化大而轉(zhuǎn)移學習者的注意力。

2.視覺結(jié)構(gòu)清晰，有利于學習者方便地學習和檢索教學內(nèi)容。

3.有利于內(nèi)容組織，一個框架可以多次使用，可以節(jié)省制作設計資源。

（四）版式視覺設計

版式視覺設計的美觀與否，直接關(guān)系到精品資源共享課網(wǎng)站的質(zhì)量。協(xié)調(diào)美觀的版式能吸引學習者，讓學習者對課程有一個良好的第一印象，而簡潔的版式則能夠讓學習者在最短的時間內(nèi)熟練地使用課程。“版式設計”即“版面設計”，在中國古代畫論中又被稱之為“經(jīng)營位置”。文字、圖片、視頻、動畫等內(nèi)容構(gòu)成了精品資源共享課網(wǎng)站，這些內(nèi)容按照合理的順序，科學的安排，甚至是按照藝術(shù)的標準，呈現(xiàn)到觀眾眼前的形態(tài)就是精品資源共享課網(wǎng)站的版式視覺設計的結(jié)果，要做好版式視覺設計需要注意以下幾個方面。

1.主次分明。一個網(wǎng)頁的視覺中心通常在屏幕的中央或者中間偏上的部位。因此，網(wǎng)頁要展現(xiàn)的重要信息一般可以安排在這個部位，讓學習者打開網(wǎng)頁就能迅速地看到網(wǎng)頁要表達的主題。而一些次要的信息一般可放在視覺中心以外的地方，這樣在頁面上就能做到重點突出，主次分明。

2.圖文并茂。文字和圖片具有一種相互補充的視覺關(guān)系，頁面上文字太多，就顯得呆板，缺乏活力。頁面上圖片太多，缺少文字，必然就會減少頁面的信息容量。在進行網(wǎng)頁設計時，應該合理搭配文字和圖片，使它們相互襯托，這樣既能使網(wǎng)頁充滿活力，又使網(wǎng)頁有豐富的內(nèi)容。

3.動靜結(jié)合。視頻和動畫現(xiàn)在已經(jīng)是精品資源共享課網(wǎng)站不可缺少的內(nèi)容之一，與文字和圖片相比，它能更快更高效的讓廣大的網(wǎng)站使用者接受課程里老師所講授的知識。因此，在頁面設計的時候，要注意合理使用動態(tài)和靜態(tài)的素材資源，做到動靜結(jié)合，使網(wǎng)頁能夠在有限的空間里展現(xiàn)更多的信息。

（五）線條和形狀設計

文字、圖片、動畫等的組合，會在網(wǎng)頁上形成各種各樣的線條和形狀。這些線條與形狀的組合，構(gòu)成了頁面的總體藝術(shù)效果。合理地搭配這些線條和形狀，才能增強網(wǎng)頁的藝術(shù)魅力和表達效果。

1.直線（矩形）的應用。直線、矩形通常給人的感覺是規(guī)矩、整齊、流暢。在進行網(wǎng)頁設計時，運用直線和矩形可以呈現(xiàn)井然有序的視覺效果。一般應用于比較正式和莊重的精品資源共享課網(wǎng)站題材。

2.曲線（弧形）的應用。曲線、弧形通常給人的感覺是流動、活潑，具有動感。在進行網(wǎng)頁設計時，允許曲線和弧形可以呈現(xiàn)活潑、輕快、活力十足的視覺效果。一般應用于活潑、時尚的精品資源共享課網(wǎng)站題材。

3.曲線、直線（矩形、弧形）的綜合應用。在進行網(wǎng)頁設計時，綜合運用曲線和直線、矩形和弧形，可以大大增強網(wǎng)頁的表現(xiàn)力，各種題材的網(wǎng)站一般都可以采用這種形式來設計。但是，在網(wǎng)頁排版上，難度就會變大，如果排版不得當就會產(chǎn)生雜亂無章的感覺。因此，一般采用這種形式設計網(wǎng)頁時，通常以一種線條（形狀）為主，其他線條（形狀）為輔。

（六）色彩設計

人眼對色彩最為敏感，因此，色彩設計是精品資源共享課網(wǎng)站設計的一個重要方面。精品資源共享課網(wǎng)站的色彩如果處理得好，就可以起到錦上添花、事半功倍的效果。精品資源共享課網(wǎng)站的整體色彩效果應該是協(xié)調(diào)統(tǒng)一的，一般只有在網(wǎng)站中小部分的地方可以使用一些對比強烈的色彩。

精品資源共享課網(wǎng)站的主色調(diào)可以根據(jù)課程內(nèi)容的需要來選擇。色彩具有象征性、民族性、情感性等特征。充分運用色彩的這些特性，可以使我們的精品資源共享課網(wǎng)站具有深刻的藝術(shù)內(nèi)涵，從而提升精品資源共享課網(wǎng)站的文化品位。另外，在運用色彩時，還要考慮網(wǎng)頁背景色和文字的關(guān)系。如果背景色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容；反之，如果背景色淡，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容。有些網(wǎng)頁，底色是黑的，但文字也選用了棕色等較深的色彩，由于背景色和文字的顏色比較接近，讀者在瀏覽網(wǎng)頁的時候，眼睛就會感覺很吃力，影響了網(wǎng)頁的視覺和閱讀效果。當然，背景色和文字的反差也不能太大，否則容易造成過強刺激的視覺效果，致使讀者瀏覽時眼睛疲勞。

三、結(jié)語

精品資源共享課網(wǎng)站的視覺設計不只是單純的色彩視覺設計和版式設計，而是結(jié)合界面功能設計和導航設計等一系列完整統(tǒng)一的設計，不能只注重單方面的顏色處理和版式設計而忽視了精品資源共享課網(wǎng)站的界面功能設計和導航設計。高質(zhì)量的精品資源共享課網(wǎng)站視覺設計是形式和功能的完美統(tǒng)一，應充分體現(xiàn)課程的人性化和情感化，體現(xiàn)“以人為本”的理念，以“學生為中心”，從學生的視覺感受、心理要求出發(fā)，方便于學生自主學習，讓學生在一種輕松自由的視覺氛圍中體驗學習。

參考文獻：

[1][英]莫里斯·德·索斯馬茲.視覺形態(tài)設計基礎[M].上海：上海人民美術(shù)出版社，2003.

[2][美]艾莉森·古德曼.平面設計的7大要素[M].上海：上海人民美術(shù)出版社，2002.

[3][美]阿歷克斯·伍·懷特.平面設計原理[M].上海：上海人民美術(shù)出版社，2005.

[4]羅仕鑒，朱上上，孫守遷.人機界面設計[M].北京：機械工業(yè)出版社，2004.

[5]李德軍.探討網(wǎng)頁設計的藝術(shù)與處理原則[J].電腦知識與技術(shù)，2005，（12）.

[6]劉巖妍.淺析網(wǎng)頁設計中的視覺設計原則[J].科技情報開發(fā)與經(jīng)濟，2007，（17）.

[7]唐旭，陳蓓.網(wǎng)頁設計的原則和技巧之漫談[J].電腦知識與技術(shù)，2005，（14）.

[8]劉芳.網(wǎng)站設計中應注意的問題[J].邯鄲職業(yè)技術(shù)學院學報，2004，（9）.

基金項目：本文為2012年河南省高等教育教學改革研究省級項目：精品課程的七整合建設模式研究與實踐（2012SJGLX231）的階段性成果

作者簡介：馬武（1964-），男，河南汝州人，教授，洛陽師范學院網(wǎng)絡與電化教育中心主任，主要從事計算機教育應用研究；張峻（1980-），男，河南許昌人，助教，從事計算機教育應用研究。