教學(xué)網(wǎng)頁的視覺設(shè)計(jì)研究（網(wǎng)上轉(zhuǎn)載）
隨著互聯(lián)網(wǎng)絡(luò)的迅猛發(fā)展，信息傳播面臨著一場(chǎng)深刻的變革。網(wǎng)絡(luò)教育的迅速發(fā)展和普及不僅對(duì)推進(jìn)素質(zhì)教育、構(gòu)建創(chuàng)新教育模式、培養(yǎng)適應(yīng)知識(shí)經(jīng)濟(jì)時(shí)代要求的創(chuàng)新型人才做出了貢獻(xiàn)，同時(shí)也醞釀出一個(gè)全新的設(shè)計(jì)領(lǐng)域——教學(xué)網(wǎng)頁設(shè)計(jì)。教學(xué)網(wǎng)頁設(shè)計(jì)與一般的網(wǎng)頁設(shè)計(jì)不同，它應(yīng)以結(jié)構(gòu)嚴(yán)謹(jǐn)、內(nèi)容規(guī)范、便于教育信息傳遞為原則，既要符合美學(xué)原理，又要具備科學(xué)性、教育性、準(zhǔn)確性、完備性等。在教學(xué)網(wǎng)頁設(shè)計(jì)的諸多因素中，視覺設(shè)計(jì)占有很重要的地位。有科學(xué)研究表明，在人們接受的信息中，通過視覺獲得的占83%，聽覺占11%，嗅覺占3.5%，觸覺占1%，由此說明視覺是人們接受信息的主要通道。本文分析了教學(xué)網(wǎng)頁設(shè)計(jì)中的視覺因素，探討了網(wǎng)頁視覺信息如何更有效、更為合理地表現(xiàn)與傳達(dá)。
一、教學(xué)網(wǎng)頁視覺設(shè)計(jì)的基本要素
教學(xué)網(wǎng)頁的視覺要素范圍很廣，但從設(shè)計(jì)角度來說，主要由文字、圖形圖片、色彩、圖標(biāo)及按鈕、版面布局五部分組成。
（一）文字
文字作為信息傳達(dá)的主要手段是網(wǎng)頁設(shè)計(jì)的主體，文字是網(wǎng)頁中必不可少的元素，也是網(wǎng)頁中的主要信息描述要素。在網(wǎng)頁中，文字將占據(jù)相當(dāng)大的面積，發(fā)揮相當(dāng)大的作用，文字表現(xiàn)的好與壞將影響到教學(xué)網(wǎng)頁的整體效果。①字體：字體的設(shè)計(jì)、選用是版面構(gòu)成的基礎(chǔ)。在教學(xué)網(wǎng)頁版面構(gòu)成中，選擇兩到三種字體為最佳視覺效果。否則，會(huì)顯得繁雜凌亂，而影響教學(xué)信息傳遞的有效性。在選用的這兩、三種字體中，可用加粗、變細(xì)、拉長(zhǎng)、壓扁或調(diào)整行距來變化字體的形狀，同樣能產(chǎn)生豐富多樣的視覺效果。②字號(hào)：字號(hào)是表示字母大小的術(shù)語。在網(wǎng)頁設(shè)計(jì)中選用大字號(hào)會(huì)產(chǎn)生視覺上強(qiáng)烈的沖擊，而小字號(hào)則造成視覺上連續(xù)的吸引。標(biāo)題文字大小和正文文字大小的比率叫做跳躍率，跳躍率高，則版面生動(dòng)活潑；跳躍率低，則顯得整體、清秀。在教學(xué)網(wǎng)頁設(shè)計(jì)時(shí)，應(yīng)避免跳躍率太高而造成學(xué)習(xí)者的視覺疲勞，影響教學(xué)信息的傳達(dá)。
（二）圖形圖片
教學(xué)網(wǎng)頁的圖形圖片主要包括：圖形、圖片、照片、圖表等。一般而言，客觀的教學(xué)內(nèi)容適合用文字來表達(dá)，而情緒性、主觀性、意象性、無法用文字表達(dá)的意念，則適合用圖形圖片的方式表達(dá)。
圖形圖片有二重含義：一是從屬性，是再現(xiàn)和補(bǔ)充文字語言所表達(dá)的視覺形象，使學(xué)生深入理解傳達(dá)的思想內(nèi)涵；二是獨(dú)立性，突出頁面形式之美，增強(qiáng)學(xué)習(xí)的趣味性，豐富頁面的視覺效果。在使用圖形圖片時(shí)要注意：①圖片要明晰，有強(qiáng)烈的視覺性；②傳達(dá)上要有簡(jiǎn)潔明了的易懂性；③圖形上要有引向文字的導(dǎo)讀性；④背景與主體在明度上有強(qiáng)烈的對(duì)比性。
（三）色彩
色彩是一種對(duì)觀察者有強(qiáng)烈情緒影響和心理暗示作用的視覺因素。色彩設(shè)計(jì)在創(chuàng)造視覺沖擊力、吸引受眾注意力上起著重要作用。過于調(diào)和、灰暗、陳舊的色調(diào)，由于不會(huì)引起受眾注意，反而會(huì)導(dǎo)致設(shè)計(jì)頁面被視而無睹，達(dá)不到視覺傳達(dá)的目的。
色彩被分為冷色調(diào)（如藍(lán)色、紫羅蘭色、綠色、青色等）、暖色調(diào)（如紅色、橘紅色、黃色、洋紅色等）和中間色調(diào)（如黑色、白色、灰色、褐色等）。心理學(xué)研究表明，冷色調(diào)會(huì)減緩人們的時(shí)間知覺，從而使人們對(duì)事物的知覺注意力得到持續(xù)；反之，雖然暖色調(diào)容易引起視覺注意，但是由于其加快了人們的時(shí)間知覺，長(zhǎng)時(shí)間注意容易使人們產(chǎn)生視覺疲勞；而中間色調(diào)具有比較穩(wěn)定的情緒特征。當(dāng)然，每一種色彩都有與之對(duì)應(yīng)的具體情緒，在網(wǎng)頁設(shè)計(jì)時(shí)可遵循這樣一個(gè)基本規(guī)律：網(wǎng)頁的主要色彩，一般應(yīng)選擇冷色調(diào)或中間色調(diào)；與此同時(shí)，可以適當(dāng)?shù)貞?yīng)用暖色調(diào)色彩來強(qiáng)調(diào)和刺激學(xué)習(xí)者的學(xué)習(xí)。
（四）圖標(biāo)及按鈕
圖標(biāo)及按鈕在網(wǎng)頁設(shè)計(jì)中雖然所占的空間較小，但它卻是設(shè)計(jì)的亮點(diǎn)，是設(shè)計(jì)構(gòu)思的濃縮。用一些有象征意義的形狀、圖標(biāo)或按鈕傳達(dá)與文字相近的概念性的內(nèi)容，甚至比用文字語言表達(dá)更形象。在按鈕的設(shè)計(jì)時(shí)要注意： ①在頁面較單調(diào)的情況下，可設(shè)計(jì)按鈕來調(diào)整氣氛；②要配合頁面的整體要求，避免過于高調(diào)活潑和喧賓奪主；③如果選用插圖或字體進(jìn)行配合，應(yīng)考慮字跡清晰和色彩簡(jiǎn)練；④按鈕設(shè)計(jì)要小而精，點(diǎn)綴頁面，為頁面增加趣味性。
（五）版面布局
版面指的是通過瀏覽器看到的完整的一個(gè)頁面，布局就是以最適合瀏覽的方式安排圖片和文字在頁面上的位置。網(wǎng)頁版面的設(shè)計(jì)同報(bào)刊雜志等平面媒體的版式設(shè)計(jì)有共同之處，它在網(wǎng)頁的藝術(shù)設(shè)計(jì)中占據(jù)著重要的地位。但網(wǎng)頁的排版與書籍雜志的排版又有很多差異。印刷品有固定的規(guī)格尺寸，網(wǎng)頁則不然，它的尺寸是由讀者來控制的。這使網(wǎng)頁設(shè)計(jì)者不能精確控制頁面上每個(gè)元素的尺寸和位置。而且，網(wǎng)頁的組織結(jié)構(gòu)不像印刷品那樣為線性組合，這給網(wǎng)頁的版面設(shè)計(jì)帶來了一定難度。所以，在版式上，將頁面中各視覺要素作通盤考慮，合理地布局導(dǎo)航鏈接、標(biāo)題、小圖標(biāo)、表格、按鈕等元素，以周密的組織和定位來獲得頁面的秩序感，即使運(yùn)用“散”性結(jié)構(gòu)，也是經(jīng)過深思熟慮之后的決定，整個(gè)網(wǎng)站內(nèi)部的頁面，都應(yīng)統(tǒng)一規(guī)劃、統(tǒng)一風(fēng)格，讓瀏覽者體會(huì)到設(shè)計(jì)者完整的設(shè)計(jì)思想。
二、
教學(xué)網(wǎng)頁的動(dòng)感表現(xiàn)
網(wǎng)頁中的動(dòng)感是由構(gòu)成動(dòng)態(tài)的各種因素形成的，所謂動(dòng)態(tài)因素，應(yīng)包括點(diǎn)、線、面、動(dòng)畫及視頻圖像等，是網(wǎng)頁設(shè)計(jì)中特殊的視覺構(gòu)成因素。
動(dòng)、光、色是影響視覺的最活躍的三大因素，其中動(dòng)的影響最大，在網(wǎng)頁設(shè)計(jì)藝術(shù)中“動(dòng)”受到各界的廣泛青睞，是因?yàn)閯?dòng)感往往使人聯(lián)想具有現(xiàn)代感和生命力極強(qiáng)的事物。在教學(xué)網(wǎng)頁中增加動(dòng)感因素，可以突破屏幕的二維空間限制而表現(xiàn)三維空間的結(jié)構(gòu)和形態(tài)，可以使大腦產(chǎn)生刺激，強(qiáng)化易記性，可以深化趣味空間，讓學(xué)生在輕松愉快地學(xué)習(xí)的同時(shí)留下奇趣的回味。
（一）點(diǎn)、線、面
點(diǎn)、線、面作為視覺語言中的基本元素，可以被用來進(jìn)行互相穿插，互相襯托構(gòu)成最佳的頁面效果，組合成各種各樣的視覺形象和千變?nèi)f化的視覺空間。網(wǎng)頁設(shè)計(jì)中點(diǎn)、線、面的結(jié)合運(yùn)用將有助于表達(dá)完美的設(shè)計(jì)意境。
1．點(diǎn)：在網(wǎng)頁中，點(diǎn)可以是一個(gè)相對(duì)微小、單純的視覺形象，如一個(gè)按鈕、一個(gè)標(biāo)識(shí)等。點(diǎn)是構(gòu)成網(wǎng)頁的最基本單位，點(diǎn)在頁面中使用得當(dāng)，可做畫龍點(diǎn)睛之筆。
2．線：點(diǎn)動(dòng)成線。線在頁面中的作用在于表示方向、位置、長(zhǎng)短、寬度、形狀、質(zhì)量和情緒。直線條的效果是流暢、挺拔、規(guī)矩和整齊，直線在頁面上的重復(fù)組合可以呈現(xiàn)井井有條、涇渭分明的視覺效果，一般應(yīng)用于比較莊重、嚴(yán)肅的教學(xué)內(nèi)容。線的放射、粗細(xì)和漸變可以體現(xiàn)三維空間的感覺，水平線的重復(fù)排列還可以形成一種強(qiáng)烈的形式感和視覺沖擊力，能夠使學(xué)習(xí)者第一眼就產(chǎn)生興趣，達(dá)到吸引注意力的目的。曲線的效果是流動(dòng)、活躍并具有動(dòng)感。曲線和弧形在頁面上的重復(fù)組合可以呈現(xiàn)流暢、輕快和富有活力的視覺效果。一般用于青春、活潑的主頁題材。
3．面：線動(dòng)成面。面是無數(shù)點(diǎn)和線的組合，面具有一定的面積和質(zhì)量，占據(jù)空間的位置更多，因而相比點(diǎn)和線來說視覺沖擊力更大、更強(qiáng)烈。面的形狀可以分為：方、圓、三角形、多邊形有機(jī)切面、不規(guī)則形面和意外因素形成的隨意形面。面具有自己鮮明的個(gè)性和情感特征，在網(wǎng)頁的版面設(shè)計(jì)上，不同形狀的面之間的相互關(guān)系和整體的和諧需要設(shè)計(jì)者去把握。只有合理地安排好面的關(guān)系，才能設(shè)計(jì)出充滿美感、實(shí)用的網(wǎng)頁作品。
（二）動(dòng)畫
動(dòng)畫具有的變化性對(duì)視覺有極強(qiáng)的作用。動(dòng)畫裝飾表現(xiàn)手法除了具有教學(xué)內(nèi)容的表現(xiàn)功能外，還能提高人們觀賞頁面的興趣，增加瀏覽頁面的情趣。動(dòng)畫在教學(xué)網(wǎng)頁設(shè)計(jì)中可以參與教學(xué)內(nèi)容設(shè)計(jì)、片頭設(shè)計(jì)、圖標(biāo)及按鈕設(shè)計(jì)。[2]
片頭一般多采用動(dòng)態(tài)或動(dòng)、靜結(jié)合的頁面設(shè)計(jì)，如整個(gè)頁面復(fù)雜的背景，輕松、自然的文字有序地排列移動(dòng)；通過文字的移動(dòng)并疊置于圖形上，形成多層次空間而產(chǎn)生空間運(yùn)動(dòng)的節(jié)奏感；整個(gè)頁面靠文字和圖形的二維或三維移動(dòng)、漸進(jìn)、旋轉(zhuǎn)、翻轉(zhuǎn)、變形等手法產(chǎn)生有序或無序的節(jié)奏，突出動(dòng)感表現(xiàn)。
將圖標(biāo)和按鈕處理為動(dòng)態(tài)效果，如跳動(dòng)、閃動(dòng)、扭動(dòng)、擺動(dòng)、抖動(dòng)加上精美的造型設(shè)計(jì)，使之成為濃縮的“亮點(diǎn)”。
在做動(dòng)態(tài)處理時(shí)，應(yīng)當(dāng)注意：①動(dòng)態(tài)與靜態(tài)部分要有密切關(guān)系，搭配和諧；②動(dòng)態(tài)變化不能過多，否則反而會(huì)削弱動(dòng)態(tài)效果，分散學(xué)生的注意力。
（三）視頻圖像
照片記錄的是人或事物瞬間的展現(xiàn)，在屏幕上仍然是靜止的。而攝像機(jī)在表現(xiàn)形式上可以做到集時(shí)間與空間、視覺與聽覺、表現(xiàn)與再現(xiàn)于一身的有目標(biāo)有主題的運(yùn)動(dòng)。通過恰當(dāng)而巧妙地運(yùn)用各種鏡頭、不同景別及剪接等藝術(shù)創(chuàng)造手段，使瀏覽者可以獲得藝術(shù)的享受。視頻圖像用于網(wǎng)頁設(shè)計(jì)中，會(huì)比靜態(tài)畫面表現(xiàn)更靈活、細(xì)致和深刻。隨著流媒體技術(shù)的日益成熟，視頻圖像的應(yīng)用將會(huì)越來越廣泛。
三、結(jié)束語
教學(xué)網(wǎng)頁設(shè)計(jì)是綜合性的設(shè)計(jì)工作，能將聲音、圖片、文字、動(dòng)畫有效結(jié)合，營造一個(gè)獨(dú)特的傳媒世界，與學(xué)習(xí)者相互交流。在教學(xué)網(wǎng)頁設(shè)計(jì)的諸多因素中，視覺設(shè)計(jì)占有很重要的地位。本文從視覺傳達(dá)的角度對(duì)網(wǎng)頁設(shè)計(jì)進(jìn)行了闡述與分析，明確精美的網(wǎng)頁設(shè)計(jì)除應(yīng)考慮其內(nèi)容上的精益求精外，還應(yīng)對(duì)學(xué)習(xí)內(nèi)容的表現(xiàn)形式進(jìn)行合理有效的視覺編排，創(chuàng)造一種愉悅的視覺環(huán)境，使學(xué)習(xí)者在獲得知識(shí)的同時(shí)，得到一種全身心的享受與共鳴。
