網絡課程的視覺傳達設計

范曉姝，范曉琪，于頂紅

(通化師范學院 物理系，吉林 通化 134002)

網絡課程是運用計算機網絡技術和多媒體數字技術，讓不同地域的學習者在數字化環境下進行交互式學習的網絡教育平臺.在這種學習過程中，學習者接觸最多的就是網絡課程的頁面，頁面設計的好壞直接影響著學習者的學習情感與學習效率.近年來，網絡課程的設計，在網絡教育情感的傳達和視覺藝術表現形式的結合方面做得還不夠，大部分網絡課程單純注重內容和技術的發揮而導致了視覺設計人性化與藝術美的缺憾.筆者認為，對網絡課程的視覺信息設計進行研究，對于構建人性化、藝術化、情感化的網絡學習平臺，對于創設學習者積極的愉悅的學習情境，提升網絡課程的教育教學質量具有極為重要的意義.因此，如何創造性地運用視覺傳達設計的特點和原則，為網絡課程設計出優質的、和諧的、高效的網頁視覺信息，并以其獨特的風格為網絡學習者提供親切美好的學習體驗，是一個值得探討的課題.

1 視覺傳達設計的產生及網絡視覺設計的發展

視覺傳達設計(Visual Communication Design)是指利用視覺符號來傳遞各種信息的設計.設計師是信息的發送者，傳達對象是信息的接受者.視覺傳達設計這一術語在1960年日本東京舉行的世界設計大會中被廣泛的使用，人們把有關內容傳達給眼睛從而進行造型的表現性設計統稱為視覺傳達設計，簡而言之，視覺傳達設計是“給人看的設計，告知的設計”[1].從發展的角度來看，視覺傳達設計是科學、嚴謹的概念名稱，蘊含著未來設計的趨向.

近年來，隨著信息技術的日新月異，以網絡為媒體的數字技術飛速發展，給人們帶來了革命性的視覺體驗.于是，網絡中的視覺傳達設計便應運而生.網絡視覺傳達設計是通過網絡視覺媒介表現并傳達給受眾的設計，體現著設計的時代特征和豐富內涵.隨著網絡技術的進步，網絡視覺傳達設計正與其他領域相互交叉，形成了一個與其他視覺媒介關聯并相互協作的設計新領域.網絡視覺傳達設計主要是圍繞網頁的布局、版式、文字、符號、圖形、圖片、圖像、色彩等元素而展開的藝術創作，所以也稱為網頁的視覺傳達設計[2].它起著溝通瀏覽者—信息—網絡的橋梁作用，在精神文化領域以其獨特的藝術魅力影響著現代人的感情和觀念.網絡視覺傳達設計就是要使各種視覺符號在網頁空間內合理分布，保持一定的形式美法則，能按照人的視覺流程的心理和生理特點，引導瀏覽者清晰、流暢、愉悅、快捷地接受網頁所傳達的信息.

2 視覺傳達設計在網絡課程中的優勢

在師生彼此分離的網絡教育中，視覺信息的傳遞是否靈活有效是設計者們討論的主要話題.除了網絡課程本身的內容之外， 視覺傳達設計是最值得關注的元素，它對于吸引和挽留學習者起到了決定性作用.主要表現為：

(1)視覺傳達設計的藝術感染性有助于提高網絡學習者的學習興趣.網絡視覺傳達的設計元素豐富，表現形式多樣，具有十分強烈的藝術情緒與感染力.生動的網絡課程視覺信息設計，不僅能有效地傳遞教育信息，而且還影響著學習者的感覺、知覺、智力與情感，使學習者在提高科學文化水平的同時，自身的思想、情感、氣質、修養也能夠在潛移默化中得到升華與陶冶.

(2)視覺傳達設計的引導性會促進網絡學習者情感的協調發展.伴隨著網絡的發展，視覺傳達設計領域已經不再似純藝術那樣，具有濃厚的個人情感色彩，它受到理性、法則和公眾需求的限制.當信息社會創造了越來越多的機遇與挑戰時，視覺傳達設計的引導性開始越來越廣泛地凸顯于網絡遠程教育當中，它不僅積極地發揮著教育信息和價值觀念的引導作用，同時也在學習者—網絡—社會之間，建立起交流融通的紐帶，協調著各種情感矛盾和心理沖突[3].因此，如何在設計中正確對待新事物、新理念、新媒介，并將其合理地運用、引導、傳遞給學習者，是每一位網絡教育設計者必須思考的問題.

(3)視覺傳達設計的動態交互性有利于網絡課程頁面內容的快速更新.視覺傳達設計是人們為達到某種目的而進行的有計劃的信息傳遞和交流活動.傳統視覺傳達設計的交互性是斷續的、延遲的，而在網絡教育環境下，視覺傳達設計的交互性是同步的、持續的.這種持續的交互不像印刷品的視覺信息設計那樣，一經發表之后就意味著設計的結束，它的存在意味著網絡課程的設計者們一定要隨時關注課程的動態，根據發展的步伐與學習者的反饋及時對課程信息進行調整與修改，使網絡課程的視覺信息從外在到內在全方位地推陳出新.

(4)視覺傳達設計的多元化有助于提升網絡課程的傳播效率.視覺傳達設計是一種多元化的視覺綜合設計.一直以來，網絡課程給學習者帶來的都是一片枯燥和刻板的視覺印象，無法達到高效的教育傳播目的.多元化的網絡視覺傳達設計將文字、符號、圖形、圖像、色彩等視覺元素在網絡空間內加以創新、綜合與重組，為網絡學習者構建最優化的視覺流程，勢必會大幅度提升網絡課程的傳播效率.

3 網絡課程頁面設計中存在的問題

(1)網絡課程的頁面設計者對視覺傳達設計的理論與原則缺乏認識.作為“為傳達而設計”的視覺傳達設計，如何充分而有效地傳達信息是每一個設計者面臨的中心問題.目前，網絡課程的視覺信息設計由于受到各種設計軟件的影響，多少帶有無序和混亂的局面.很多網絡課程單純地追求頁面的花哨風格和所謂的形式美而忽略了網絡課程視覺信息的基本要素設計.這些問題大都源于網絡課程的設計者缺乏對視覺傳達設計理論的深入認識.網絡視覺傳達設計是建立在視覺心理學和視覺生理學的基礎上，對各種視覺元素進行系統的了解與設計，并通過主觀意向與客觀內容的恰當結合，最終利用形式美法則創造出的視覺形象.它強調對視覺信息的愉悅表達與積極互動，既要激發學習者的學習興趣，又要吸引學習者與網絡頁面信息進行適時的情感交流.如果網絡課程的頁面設計者能夠本著藝術表現與學習者情感交流相一致的原則，從教育內容的客觀要求出發，將美學與心理學完美地結合起來，將會使網絡教育事半功倍，無“網”而不利.

(2)網絡課程的頁面設計過于機械化和技術化，缺乏對學習者人性化的關懷與理解.網絡視覺傳達設計本身就是一個新的設計領域，網絡課程的視覺傳達設計更是對設計者提出了更高的要求，準確地把握被設計對象的心理，是設計能否獲得成功的關鍵.許多網絡課程一味強調內容的邏輯性和技術的先進性，而忽略了網絡教育教與學時空分離的局限，忽視了學習者的認知規律、學習情感需求和視聽覺感官特點，導致了網絡教育效果的嚴重削弱[4].因此，網絡課程的設計者必須克服傳統的思維定勢，擺脫技術權威的刻板思想，立足“以人為本”的基本原則，從人的視覺心理效應、視覺習慣、認知結構以及認知情感出發，將各種視覺元素與技術內容進行人性化地整合與重組，破除一切違背學習規律和視覺規律的現象，運用網絡視覺傳達設計的原理，窮盡一切藝術與技術之長，有效地實現網絡教育環境下教與學的再度整合.

4 視覺傳達設計在網絡課程中的具體分析和運用

視覺傳達設計是網頁設計的核心和靈魂，尤其是在網絡課程中，視覺信息的傳達更應放在首要地位進行設計.只有那些具備良好視覺傳達設計的網絡課程，才能在最短的時間內吸引并鎖定學習者，激發學習者的學習興趣和愉悅的學習情感.因此，在網絡課程的整體設計中一定要注意靈活運用視覺傳達設計的特點和原則，以教育傳播為導向，把握視覺傳達設計藝術的自然與變化、多樣與集中、節奏與平緩、協調與整齊、對比與統一的設計理念，為學習者呈現出一個網絡環境下的溫馨和諧、流暢爽朗的學習空間.下面，筆者從空間布局、文字、圖片、色彩等一些最基本的視覺要素入手，談一談有關網絡課程頁面信息的設計.

(1)頁面空間的設計.網頁界面與傳統媒體不同，其借助由代碼語言編程所實現的各種交互式效果，增加了網頁空間設計的生動性和復雜性，也使得設計者需要更多地考慮頁面元素的排布和優化.按照信息組織的類型，網絡課程的頁面空間結構可以分為序列型、層級型、網格型和網狀型.無論哪種類型都包含有平面構成和立體構成.立體構成主要依據內容呈現的規律及次序，前后銜接，形成層次.而平面構成相對復雜，需要將多種視覺元素進行精心配置.良好的平面構成能使頁面整體視覺效果美觀和諧，便于閱讀和學習.網絡課程的平面構成宜采用“同”字型、框架型、封面型和Flash型等，具體如下：

“同”字型是很多網絡課程的頁面所喜歡的類型，即最上面是課程的標題以及橫幅標語，接下來就是網頁的主要內容，中間是主體部分，左右兩邊分列一些較小而獨立的信息模塊(研究表明，較小而分立的信息比較長而不分立的信息更為有效和便于瀏覽)，最下面是網絡課程的一些基本交流訊息.這種平面類型具有穩定完整的特點，整個頁面結構自然緊湊，平衡和諧.

框架型分為：左右框架型和上下框架型.左右框架型是一種左右分為兩頁的框架結構類型，一般左面是導航鏈接，有時最上面會有一個小的標題或標志，右面是正文(上下框架型與其類似，區別僅僅在于它是一種上下分為兩頁的框架).論壇性教育內容非常適合這種結構，它的特點是一目了然，頁面層次感強，簡潔流暢.在這種類型中，應該注意導航欄的設計，導航欄的作用是能讓學習者在瀏覽時很容易地到達不同的頁面，一般來講，導航欄在“第一屏”就應該顯示出來，但是左右分開的類型有時第一屏可能不會呈現出導航欄，因此，橫向放置的上下框架型要優于縱向設置的左右框架型.

封面型常用于網絡課程的首頁，大部分為一些精美的圖片設計，也可結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接，也多用于個人主頁的設計，如教師的個人主頁.這種類型如果運用得當，會帶來一種淡雅清新、寧靜致遠的視覺體驗.Flash型與封面型類似，只是這種類型采用了目前非常流行的Flash動畫，由于Flash強大的功能，使得頁面所表達的視覺信息更加生動，充滿激情.如果動畫效果逼真，所帶來的視覺沖擊力絕不會遜色于真實的客觀世界，這是目前最吸引學習者瀏覽和關注的一種結構類型.

此外，網絡課程的頁面設計中還要考慮空間的留白.沒有空白，頁面常常會顯得擁擠堵塞，從而降低了整體的視覺效果.善于運用空白是增強網絡課程信息傳達的有效手段，同時也是分隔頁面上其他元素的最有效方法，設計空白還有助于集中學習者的視覺焦點，提升傳播效率，若能巧妙地使用，常常能創造“此時無聲勝有聲”的意境.而且，在行間段落使用空白還可以為學習者的眼睛提供休息的機會，從而使學習者的學習節奏有張有弛、疏密有致.

(2)文字的設計.從網絡課程網頁最初的純文字界面發展至今，文字仍是其他任何元素無法取代的重要構成.原因是文字所占的存儲空間小，節省了學習者下載和瀏覽的時間.文字的排布對頁面整體設計影響很大，即使整個頁面圖形修飾較少，如果文字編排得當，分類條例清晰，版面同樣可以生動活潑，并不會給人單調乏味的感覺.

網絡課程中的文字主要包括標題、信息、熱字鏈接等幾種主要形式.標題是主體內容的簡要說明，一般比較醒目，應優先編排.設計文字首先從標準字體開始.標準字體是指用于標志、標題、主菜單的特有字體.一般網頁默認的是宋體，如果為了體現課程 “與眾不同”的個性風格，也可以根據需要選擇一些特別的字體.但字體不宜過多，盡量不要使用超過三種以上的字體.簡單、簡潔、簡約是文字設計的主要原則.因為字體太多會顯得雜亂，沒有主題.通常，標題的字體較正文大，顏色也應有所區別.字號要合適，字號過大，會浪費版面空間，字號過小，又不能吸引學習者的注意力，而且容易使眼睛產生疲勞.不同內容的字號要有所區別.字距與行距不是絕對的， 應根據實際情況而定，字距與行距的加寬或縮緊， 要能體現主題的內涵.

一般情況下，網絡課程的頁面中會不可避免地要出現一些按鈕和圖標，可以將這些按鈕和圖標設計成動感的文字及特殊字體，多種瀏覽器都可以支持，頁面也不會顯得太過呆板.此外，網絡課程會有許多只有文本的頁面，這是令人乏味的，并且也浪費Web的潛力.如果有大量的基于文本的文檔，應當以Adobe Acrobat格式的文件形式來放置，以便學習者能離線閱讀.

(3)圖片的設計.圖片在網絡課程的視覺傳達設計中因其獨特的個性成為吸引學習者視覺的重要元素.圖片給人的視覺印象要優于文字，圖片易于引起學習者的注意，并激發學習者的閱讀情趣，合理地設計和運用圖片，可以直觀、形象地表現主題內容，起到畫龍點睛、幫助理解的作用，更可以使整個頁面布局立體、富于變化.圖片還具有導讀性，它能具體而直接地把知識信息高質量地準確地表達出來，使本來枯燥無味的內容變成強烈而有感染力的逼真畫面.

圖片的大小以及位置安排直接關系到整個頁面的構圖與布局，所以應根據人的最佳視域與視覺流程原理來安排和選擇.圖片的大小不同，釋放出的情感因素也不同，小圖片能產生精密細致的感覺，大圖片能強化瞬間的視覺效果，形成強烈的視覺識別攻勢.一般情況下，要將重要的、吸引學習者注意力的圖片放大， 從屬的圖片縮小， 形成主次分明的格局.但是，圖片不能過大，最多不要超過屏幕寬度的75%.圖片的位置安排應考慮到學習的視覺右撇現象，依主次從左到右順序安排能夠創造視覺空間的延伸感.如果只有一張圖片，那么最好是將其放在頁面的黃金分割點上.需要特別指出的是背景圖片的作用，以圖片為背景更能襯托主題信息的表現，會更加增強頁面的空間感，使教學內容富于美感和韻致.

(4)色彩的設計.色彩是視覺藝術表現的基本設計要素之一.設計標準色彩是網絡課程色彩設計的第一步.標準色彩是指能體現課程性質和延伸內涵的色彩，是網絡給學習者的第一印象，不同的色彩搭配能產生不同的情感效應，從而影響到學習者的學習情緒.例如：綠色調給人一種收獲希望的情感，黃色調給人一種活潑向上的情感，藍色調給人一種安靜理智的情感等[5].在網絡課程的師生交互環境中，為了讓學習者感受到親切的情感氛圍，感受到一種濃濃的關注，一定要以柔和的色調作為主色調.通常情況下，網絡課程的標準色彩不要超過3種，色彩太多會讓學習者眼花繚亂，影響學習的效果.

注意鄰近色與對比色的搭配使用.例如綠色和藍色，紅色和黃色就互為鄰近色，采用鄰近色進行設計可以使頁面避免色彩雜亂，易于達到信息的和諧統一.反之，采用對比色可以突出重點，產生強烈的視覺效果，明暗冷暖的對比使用，能夠讓內容更加鮮明、重點突出.還要提到的是灰色的運用，灰色在色彩中是萬能色，不僅可以和任何彩色搭配，而且還可以幫助兩種對立的色彩進行和諧的過渡.

另外，網絡學習的一個主要特點就是要長時間面對著顯示器.長時間觀察注視某些內容，會造成視覺的嚴重疲勞，降低學習效率.因此，設計者一定要注意色彩的自然性和舒適性，要根據均衡和重點突出的原則，對色彩進行合理的搭配.例如：持續的觀看暖色調物體容易使人產生煩躁情緒，注意力很快分散，而冷色調的物體則帶來安靜的感覺，易于長時間集中精力學習和工作.根據這一特點，可以把那些需要長時間學習觀看的內容設計成冷色調，而需短時引起注意的內容設計成暖色調，重點內容提高明度，使之靜中有動、動中有靜，讓學習者在一種鮮活、靈動的畫面色彩中學習和掌握知識.

總之，網絡課程的視覺傳達設計需要設計者綜合多方面的知識，它與網絡教育、設計原理、心理學、生理學、美學等領域都有著極為密切的聯系.網絡課程的設計者們應本著一切為學習者服務的宗旨，創造性地運用視覺傳達設計的原則，從學習者的認知規律出發，從學習者的內心情感出發，構筑或穩重、或嚴謹、或活潑、或幽雅的布局新穎的課程網頁，建立起網絡視覺生態環境與學習者情感之間的和諧與均衡.相信隨著視覺傳達設計研究的不斷深入，網絡課程在帶給學習者更多知識的同時，也會帶給學習者更多的情感關懷和美的感受.

[1]蘆影.平面設計藝術[M].北京:中國人民大學出版社，2005.

[2]黃在賢.設計師談精彩網頁設計[M].北京:電子工業出版社，2004.

[3]Thomas A Powell.Web設計大全[M].北京:機械工業出版社，2001.

[4]黃瑤.淺談視覺傳達設計與心理學[J].臺聲·新視角，2006(1).

[5]謝舒瀟，葉長茂.淺談網絡課程的頁面設計[J].高等理科教育，2004(1).