視覺效果和教育心理學(xué)在教學(xué)網(wǎng)頁設(shè)計(jì)中的應(yīng)用發(fā)布者：本站     時(shí)間：2020-05-05 13:05:18

1 引言

當(dāng)代社會(huì)，信息化學(xué)習(xí)已經(jīng)席卷而來，學(xué)習(xí)環(huán)境網(wǎng)絡(luò)化、學(xué)習(xí)資源數(shù)字化、學(xué)習(xí)方式多樣化作為信息時(shí)代學(xué)習(xí)的特征，得到學(xué)術(shù)界的認(rèn)定。學(xué)習(xí)者必須充分利用網(wǎng)絡(luò)資源、轉(zhuǎn)變學(xué)習(xí)方式，變被動(dòng)學(xué)習(xí)為主動(dòng)學(xué)習(xí)、變接受式學(xué)習(xí)為發(fā)現(xiàn)式學(xué)習(xí)、變個(gè)別學(xué)習(xí)為協(xié)作式學(xué)習(xí)。逐步改變以教師為中心、課堂為中心、書本為中心的局面，促進(jìn)學(xué)生創(chuàng)新意識(shí)與實(shí)踐能力的發(fā)展。

與此同時(shí)，作為互聯(lián)網(wǎng)時(shí)代混合式學(xué)習(xí)的重要元素--教學(xué)網(wǎng)站設(shè)計(jì)，其重要性也日益顯現(xiàn)和提高。統(tǒng)觀教學(xué)網(wǎng)頁的多元化發(fā)展，其結(jié)果卻不盡人意，大部分仍停留在文本瀏覽或簡(jiǎn)單網(wǎng)頁跳轉(zhuǎn)水平，有悖于我們當(dāng)前提倡的"自主、探究與協(xié)作"的學(xué)習(xí)方式。此外，大部分有關(guān)教學(xué)網(wǎng)頁設(shè)計(jì)的研究，都是從網(wǎng)頁設(shè)計(jì)本身出發(fā)，如頁面風(fēng)格、交互功能以及導(dǎo)航策略等，缺乏對(duì)視覺效果和教育心理學(xué)在教學(xué)網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究，這在很大程度上制約了自主學(xué)習(xí)的積極性。

2 視覺傳達(dá)下的教學(xué)網(wǎng)站設(shè)計(jì)

2.1 文字的視覺傳達(dá)

作為信息傳播的主要符號(hào)和手段，文字無疑是網(wǎng)頁設(shè)計(jì)的主體，不僅是網(wǎng)頁的重要組成元素，更是網(wǎng)頁信息的重要描述要素。作為網(wǎng)頁的形象要素之一，文字除了表意功能外[1]，還要具體結(jié)合學(xué)生的視覺特征，綜合考慮字號(hào)、字體以及行間距等設(shè)計(jì)要素。為了打造教學(xué)網(wǎng)站自己的特色和風(fēng)格，設(shè)計(jì)者可以結(jié)合實(shí)際選擇字體。比如，選擇粗仿宋體來體現(xiàn)專業(yè)化，選擇廣告體來體現(xiàn)精美化，選擇手寫字體來體現(xiàn)親切化，等等。教學(xué)網(wǎng)頁設(shè)計(jì)時(shí)，可以對(duì)字體選擇進(jìn)行考慮和設(shè)計(jì)，用不同字體的變化來打破刻板的教學(xué)模式，讓學(xué)生在學(xué)習(xí)過程中通過視覺傳達(dá)體會(huì)愉悅的學(xué)習(xí)過程。

2.2 圖形的視覺傳達(dá)

圖片屬于最早被引入網(wǎng)絡(luò)媒體中的表意符號(hào)，在當(dāng)今圖像化時(shí)代，圖片對(duì)受眾的吸引力比文字有過之無不及。圖片在美化網(wǎng)頁的同時(shí)，極大地?cái)U(kuò)展了所傳達(dá)的信息量。圖片所產(chǎn)生的視覺效果能夠有效增強(qiáng)網(wǎng)頁的趣味性，讓原本平淡無奇的網(wǎng)頁變得更有畫面感，實(shí)現(xiàn)信息傳達(dá)的立體化、層面化和直接化。網(wǎng)頁圖片一般分為兩種，即主體圖片和輔助圖片。

主體圖片以信息內(nèi)容的直接傳達(dá)為目的，包括標(biāo)題圖、新聞?wù)掌?。而輔助圖片是為實(shí)現(xiàn)網(wǎng)頁的藝術(shù)化而設(shè)計(jì)的圖片，其主要作用是烘托主題和渲染氛圍，典型的就是背景圖片。在教學(xué)網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)者要賦予圖片以視覺美感，可以通過點(diǎn)線面的不同排列組合，靈活采取夸張、象征等手法來達(dá)到預(yù)期的視覺效果，實(shí)現(xiàn)圖片藝術(shù)性。所以，教學(xué)網(wǎng)頁的設(shè)計(jì)中，要善于合理運(yùn)用圖片，一方面強(qiáng)化知識(shí)點(diǎn)的理解，另一方面激發(fā)學(xué)生的學(xué)習(xí)興趣，通過視覺上的審美沖擊，給學(xué)生留下深刻印象和良好心理反應(yīng)。

3 色彩心理學(xué)下的教學(xué)網(wǎng)頁設(shè)計(jì)

3.1 色彩的整體設(shè)置

色彩的視覺效果不僅在很大程度上直接影響著學(xué)生的瀏覽興趣，而且還決定著網(wǎng)頁的整體效果。在色彩設(shè)計(jì)過程中，要遵循整體協(xié)調(diào)，局部均衡和突出重點(diǎn)的設(shè)計(jì)原則，對(duì)不同色彩進(jìn)行靈活組合，搭配出具有美感的網(wǎng)頁。色彩設(shè)計(jì)要根據(jù)網(wǎng)頁整體風(fēng)格定出主色調(diào)，教學(xué)網(wǎng)頁的主色調(diào)通常以柔和淡雅的淺色為主，然后配以深色文字，這樣有助于突出重點(diǎn)。設(shè)計(jì)者可以通過對(duì)單色色彩的飽和度調(diào)整、鄰近色的選用以及對(duì)比色的配用等方法來實(shí)現(xiàn)[2].網(wǎng)頁的色彩并非多多益善，主色調(diào)通常不超過三種色彩，主要是通過調(diào)整不同色彩的屬性來實(shí)現(xiàn)色彩變化。

此外，不同色調(diào)的心理暗示也不盡相同，色彩知覺同人的主觀情緒、聯(lián)想以及象征意義等因素有著密切聯(lián)系?；诓煌视胁煌睦戆凳?，在教學(xué)網(wǎng)頁色彩構(gòu)圖設(shè)計(jì)中，一定要符合上輕下重的視覺生理特征，把輕色安排在上部，重色安排于下部。若是網(wǎng)頁上部搭配重色，那么在下部邊緣位置要相應(yīng)地配以重色，以此達(dá)到平衡構(gòu)圖的目的。靈活運(yùn)用色彩的強(qiáng)弱，能夠避免畫面的單調(diào)，實(shí)現(xiàn)網(wǎng)頁畫面色彩的動(dòng)態(tài)感和均衡感，消除學(xué)生學(xué)習(xí)過程中的視覺疲勞。在教學(xué)網(wǎng)頁設(shè)計(jì)中，綠色能使人產(chǎn)生一種輕松愉悅的感覺，陽光、綠蔭和草地的搭配作為背景設(shè)計(jì)，能夠給學(xué)生提供一種輕松、自然和愉悅的學(xué)習(xí)環(huán)境。

3.2 色彩的冷暖感

所謂的色彩冷暖關(guān)系，就是補(bǔ)色關(guān)系。冷暖感實(shí)際上是人類觸覺對(duì)外界溫度的一種本能反應(yīng)。陽光、火焰等反射出來的紅色光具有導(dǎo)熱作用，人們稱之為"暖色".而人們處于高山、雪地以及藍(lán)天等自然環(huán)境中時(shí)，感覺寒冷，因此藍(lán)色、藍(lán)綠或藍(lán)紫色稱為"冷色".可以說，紅與藍(lán)構(gòu)成了冷暖色系的兩個(gè)極端，而居于兩者中間的中性色就是綠和紫。此外，金銀黑白灰五種色彩在色彩心理上也屬于中性色，能夠同奇特色進(jìn)行調(diào)和，形成緩解效應(yīng)，特別是同原色的調(diào)和。網(wǎng)頁設(shè)計(jì)中的主色調(diào)決定了網(wǎng)頁的整體冷暖感。教學(xué)網(wǎng)頁所傳達(dá)的信息除了需要用精準(zhǔn)的文字加以表述外，還應(yīng)該進(jìn)行色彩的合理搭配，讓學(xué)生形成一種類似色知覺的反映，進(jìn)而有效提高網(wǎng)頁的信息傳達(dá)效果。

3.3 色彩的輕重感

色彩的明度在很大程度上決定著色彩的輕重感。通常明度較高以及色相較冷的色彩給人較輕的感覺，比如，白色就使人感覺輕，讓人不由自主地聯(lián)想到霧、白云等，具有輕柔的美感；相反，那些明度較低和色相暖的色彩給人較重的感覺，典型的就屬黑色。黑色讓人自然地聯(lián)想到夜晚、金屬等，具有厚重、踏實(shí)的感覺。所以，但凡加白提高明亮度的色彩就會(huì)變輕，反之，加黑降低明亮度的色彩就會(huì)變重。在教學(xué)網(wǎng)頁設(shè)計(jì)中，通常網(wǎng)頁的下部采用明亮度較低的色彩，給學(xué)生一種沉靜的感覺，而對(duì)于兒童類教學(xué)網(wǎng)站，最好采用明亮度較高的色彩，給學(xué)生一種輕快感。

3.4 色彩的距離感

網(wǎng)頁上的色彩，有的會(huì)讓人產(chǎn)生突出和親近感，有的會(huì)讓人產(chǎn)生隱退和遠(yuǎn)離感。而色彩的明度和色相是這種距離感產(chǎn)生的主要原因。通常是暖色近，冷色遠(yuǎn)，純色近而灰色遠(yuǎn)，對(duì)比強(qiáng)的色彩近，對(duì)比弱的色彩遠(yuǎn)。色彩鮮明、清晰的暖色有助于主題的突出，色彩模糊、昏暗的冷色能夠烘托主題。有的教學(xué)網(wǎng)站利用這種色彩的距離感，形成一種具有強(qiáng)烈進(jìn)退感的視覺效果。比如，在網(wǎng)頁上部設(shè)計(jì)為廣闊的淺藍(lán)色天空，給學(xué)生一種身心放松，心曠神怡的感覺。

3.5 色彩的華麗與質(zhì)樸感

色彩的華麗與質(zhì)樸與色彩的色相有著很大的關(guān)系。純度、明度較高的鮮明色，包括金、橙、紅等色彩能夠給人一種輝煌、亮麗感覺，反之，那些純度、明度較低的灰暗色，包括藍(lán)、藍(lán)綠等冷色則會(huì)給人一種素淡、質(zhì)樸的感覺。以純度來講，飽和的湖藍(lán)、孔雀藍(lán)以及寶石藍(lán)也會(huì)給人華麗的感覺，而純度低的濁色則會(huì)給人質(zhì)樸感。以明亮度來講，明亮的色彩比較靈動(dòng)、輕快，具有華麗感，而灰暗色彩就顯得比較深沉和厚重，帶有明顯樸素感。前者主要用于藝術(shù)設(shè)計(jì)類教學(xué)網(wǎng)頁設(shè)計(jì)，后者主要用于醫(yī)學(xué)教育網(wǎng)頁設(shè)計(jì)。此外，色相的多少也產(chǎn)生一定的影響，色相多就顯得網(wǎng)頁華麗，色相少則顯得網(wǎng)頁樸素。在教學(xué)網(wǎng)頁的設(shè)計(jì)中，設(shè)計(jì)者要結(jié)合具體情況合理把握網(wǎng)頁色彩的華麗感和質(zhì)樸感[3].

4 認(rèn)知心理學(xué)下的教學(xué)網(wǎng)頁設(shè)計(jì)

互聯(lián)網(wǎng)時(shí)代的混合式學(xué)習(xí)重要元素有：在線課件、教學(xué)視頻、文章案例、文獻(xiàn)導(dǎo)讀、線上討論等。為了更好地對(duì)開放教育源進(jìn)行匯聚和推送，縮短學(xué)生從探究到接受的自主學(xué)習(xí)過程，教學(xué)網(wǎng)頁設(shè)計(jì)必須更加符合學(xué)生的認(rèn)知心理，信息的傳達(dá)和接受才會(huì)更加有效。特別在學(xué)生自主學(xué)習(xí)環(huán)節(jié)，網(wǎng)頁的視覺效果會(huì)直接影響其尋求有效資源的學(xué)習(xí)心理。因此，教學(xué)網(wǎng)頁設(shè)計(jì)要結(jié)合學(xué)生的認(rèn)知心理，在整體布局、認(rèn)知需求等方面進(jìn)行合理設(shè)計(jì)[4].

4.1 整體布局

學(xué)習(xí)瀏覽網(wǎng)頁的習(xí)慣是基于人類生理特征下的正常反應(yīng)。人們?cè)陂喿x時(shí)只能形成一個(gè)焦點(diǎn)，不能同時(shí)將視線投放于幾個(gè)事物之上。同時(shí)，人在閱讀時(shí)有一種習(xí)慣性視覺走向，就是由左到右，從上到下。因此教學(xué)網(wǎng)頁設(shè)計(jì)要符合人類視覺走向的心理特征。此外，教學(xué)網(wǎng)頁要突出重點(diǎn)，抓住學(xué)生眼球，不能讓學(xué)生產(chǎn)生無所適從的迷茫感。在教學(xué)網(wǎng)頁設(shè)計(jì)中，要充分利用視覺走向和瀏覽者的心理，實(shí)現(xiàn)網(wǎng)站信息的高效傳達(dá)。要注意做好各大功能模塊的分布和視覺引導(dǎo)工作，實(shí)現(xiàn)網(wǎng)頁視覺效果的整體性。總之，教學(xué)網(wǎng)頁設(shè)計(jì)首先要考慮兩方面的因素，一方面，要以信息有效傳達(dá)為主，要符合學(xué)生的閱讀和思維習(xí)慣，實(shí)現(xiàn)視覺走向的自然化。另一方面，實(shí)現(xiàn)網(wǎng)頁各要素在整體協(xié)調(diào)下的合理分布，實(shí)現(xiàn)網(wǎng)頁上各種信息在大小、位置以及間距方面的銜接。

4.2 認(rèn)知需求

網(wǎng)頁設(shè)計(jì)屬于平面設(shè)計(jì)范疇，要充分利用互動(dòng)式交流的思維進(jìn)行網(wǎng)頁設(shè)計(jì)，增加網(wǎng)頁吸引力，充分滿足受眾認(rèn)知需求。教學(xué)網(wǎng)頁的內(nèi)容和形式要實(shí)現(xiàn)統(tǒng)一，作為一個(gè)資源型網(wǎng)站，面對(duì)大量需要傳達(dá)的信息，必須進(jìn)行合理排布，既要實(shí)現(xiàn)網(wǎng)頁的整體性，同時(shí)又不失信息傳達(dá)的重點(diǎn)。但是各種信息的排布切不可僵硬死板，要在遵從學(xué)生視覺和心理特征的基礎(chǔ)上，適當(dāng)加入些許創(chuàng)新元素，實(shí)現(xiàn)頁面的多樣性、靈動(dòng)性，給學(xué)生留下特別的印象。

以激發(fā)學(xué)生認(rèn)知心理為出發(fā)點(diǎn)，在學(xué)習(xí)平臺(tái)的視覺設(shè)計(jì)方面，首要任務(wù)是信息的有效傳達(dá)，其次是打造學(xué)習(xí)平臺(tái)自身的特色。各信息要素的合理分布是信息得以高效利用的基礎(chǔ)，網(wǎng)頁中要明確設(shè)置學(xué)習(xí)者迫切需求的欄目和平臺(tái)入口，以便他們能夠有針對(duì)性地對(duì)信息進(jìn)行搜索和瀏覽。網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)的構(gòu)建不僅需要全面、清晰的信息資源，更要注重網(wǎng)絡(luò)學(xué)習(xí)氛圍的營(yíng)造，便捷而愉悅的學(xué)習(xí)感受會(huì)讓使用者在進(jìn)行網(wǎng)絡(luò)自主學(xué)習(xí)時(shí)有事半功倍的效果。

5 藝術(shù)審美對(duì)教學(xué)網(wǎng)站功能的整體提升

教學(xué)網(wǎng)站設(shè)計(jì)所呈現(xiàn)的藝術(shù)品質(zhì)使其介于實(shí)用和審美的兩端，成為集實(shí)用和審美為一體的具有雙重屬性的藝術(shù)新形態(tài)，所具有的審美性內(nèi)容同其它藝術(shù)領(lǐng)域的作品并無差別。教學(xué)網(wǎng)頁的藝術(shù)美主要是利用各種藝術(shù)化設(shè)計(jì)手法帶來師生的審美愉悅和體會(huì)[5].在教學(xué)網(wǎng)站設(shè)計(jì)中主要體現(xiàn)為要素比例的和諧性，色彩的鮮明性，形式的完整性，整體的多樣性等等?？梢哉f，優(yōu)秀的設(shè)計(jì)離不開藝術(shù)美學(xué)的支撐。教學(xué)網(wǎng)站的藝術(shù)設(shè)計(jì)中涉及到的色彩選擇，完全可以從藝術(shù)美學(xué)角度出發(fā)進(jìn)行構(gòu)想。藝術(shù)審美下的教學(xué)網(wǎng)站通常以生動(dòng)、豐富、靈動(dòng)和自然為主要特征，追求比例、尺度、色性和色度關(guān)系，簡(jiǎn)單、直接而又生動(dòng)地加以呈現(xiàn)。以藝術(shù)審美角度來講，賞心悅目的背后通常是嚴(yán)格的考量、理性的推敲和細(xì)致的調(diào)整。

教學(xué)網(wǎng)頁的設(shè)計(jì)構(gòu)思可以從學(xué)校的形象塑造、學(xué)校文化的建設(shè)以及教學(xué)內(nèi)容的擴(kuò)展三個(gè)角度為出發(fā)點(diǎn)，創(chuàng)建出獨(dú)具特色的網(wǎng)頁。作為視覺傳達(dá)設(shè)計(jì)系統(tǒng)的子系統(tǒng)，教學(xué)網(wǎng)頁設(shè)計(jì)的審美功能要充分重視，特別是在一些藝術(shù)類教學(xué)網(wǎng)頁中，藝術(shù)審美的追求成為網(wǎng)站設(shè)計(jì)時(shí)需要考量的重要組成部分