基于視覺心理視角的網(wǎng)絡(luò)課程界面設(shè)計研究

崔寧

摘 要 網(wǎng)絡(luò)課程在國內(nèi)各大高校遠(yuǎn)程教育、大規(guī)模企業(yè)培訓(xùn)、函授教育等領(lǐng)域已經(jīng)得到普遍應(yīng)用。從視覺心理角度來考察界面設(shè)計的優(yōu)化策略，通過借助視覺心理的相關(guān)理論，提出優(yōu)質(zhì)網(wǎng)絡(luò)課程界面設(shè)計的策略，希望能從視覺心理角度為網(wǎng)絡(luò)課程界面設(shè)計提供一些啟示。

關(guān)鍵詞 網(wǎng)絡(luò)課程；視覺心理；界面設(shè)計

中圖分類號：G712 文獻(xiàn)標(biāo)識碼：B

文章編號：1671-489X（2017）24-0065-03

Research on Network Curriculum Design under Psychological Perspective of Visual Interface//CUI Ning

Abstract Network courses in Chinese universities， distance educa-tion， large-scale enterprise training， correspondence education has

been widely used. This research mainly from the visual psycholo-gical perspective optimization strategy of interface design， put for-ward the optimization strategy of high quality web-based course interface design， hope from the visual psychological point of inter-face design for network course to provide some inspiration.

Key words network curriculum； visual psychology； interface design

1 前言

網(wǎng)絡(luò)課程中的界面是學(xué)習(xí)者與課程交互的一個窗口，在網(wǎng)絡(luò)課程學(xué)習(xí)過程中，學(xué)習(xí)者作為學(xué)習(xí)的主體，主要通過界面來獲取學(xué)習(xí)信息。因此，良好的課程界面可以促進(jìn)學(xué)習(xí)者有效獲取知識，更有興趣參與學(xué)習(xí)、參與互動。而界面效果不理想的網(wǎng)絡(luò)課程，因其單調(diào)或者煩瑣的界面設(shè)置，容易使學(xué)習(xí)者從心理上產(chǎn)生抵觸情緒，從而降低學(xué)習(xí)效率。本文從視覺心理研究出發(fā)，試圖為提高網(wǎng)絡(luò)課程界面設(shè)計質(zhì)量提供一定的啟示。

2 視覺心理概論

視覺心理概念 視覺心理所關(guān)注的是視覺元素的合理定位、合理走向、合理分布，使呈現(xiàn)的視覺內(nèi)容有明確的視覺焦點(diǎn)、清晰的視覺路線以及合理的空間分布。視覺心理是一個較為細(xì)化的分類，從人體學(xué)上講，就是外界信息通過視覺器官引起學(xué)習(xí)者的心理機(jī)能反應(yīng)，是一個由外在到內(nèi)在的過程。這一過程較為復(fù)雜，因為外界信息豐富多彩，學(xué)習(xí)者內(nèi)心心理機(jī)能復(fù)雜多變，兩者在相互連接并發(fā)生轉(zhuǎn)化時建立起千絲萬縷的聯(lián)系。因此，不同的學(xué)習(xí)者不同的學(xué)習(xí)信息，相同的學(xué)習(xí)者相同的學(xué)習(xí)信息，以及不同的學(xué)習(xí)者相同的學(xué)習(xí)信息和相同的學(xué)習(xí)者不同的學(xué)習(xí)信息，產(chǎn)生的心理反應(yīng)是不同的。當(dāng)然，也有一些共同的反應(yīng)，它基于外在信息特征和學(xué)習(xí)者的基礎(chǔ)知識特征以及受教育水平等，在不同程度上會對部分學(xué)習(xí)者產(chǎn)生相同的心理感覺或反應(yīng)。

視覺心理基本理論

1）認(rèn)知心理學(xué)理論。認(rèn)知心理學(xué)也被稱為狹義的認(rèn)知心理學(xué)，是指把人的認(rèn)知和計算機(jī)功能進(jìn)行模擬，認(rèn)為人腦也是一個信息加工系統(tǒng)。認(rèn)知心理學(xué)研究的焦點(diǎn)并不是外部刺激和機(jī)體本身的反應(yīng)，而是發(fā)生在兩者之間的內(nèi)部心理過程，這也符合視覺心理的研究范疇。

2）格式塔理論。格式塔心理學(xué)于1912年起源于德國，又稱“完形”心理學(xué)。從內(nèi)容上來說，格式塔心理學(xué)視直覺原理主要包括三個方面。

①感覺和直覺：一般來說，感覺和直覺是人類最常見的心理現(xiàn)象，但感覺和直覺在人類日常生活中的地位是不容忽視的。

②視知覺：格式塔心理學(xué)認(rèn)為，視覺在作為一種觀看活動的同時，更是一種理性思維活動。

③格式塔視知覺具有一定的組織特征：格式塔心理學(xué)認(rèn)為，每個人對“形”都具有一種與生俱來的組織能力，并提出多項視知覺組織原則，如知覺的完形原則、簡潔原則、視錯覺原則等。

3 視覺心理視角下網(wǎng)絡(luò)課程界面設(shè)計策略

整體優(yōu)化策略 作為網(wǎng)絡(luò)課程，除了要具備普通課程的教育性、科學(xué)性、藝術(shù)性之外，由于其特有的表現(xiàn)形式、運(yùn)行方式及運(yùn)載能力，下面就其整體優(yōu)化策略加以分析。

1）主題鮮明、條理清晰。網(wǎng)絡(luò)課程的內(nèi)容表達(dá)的是一種意圖和目的，有其明確的主題，要按照視覺心理的要求將要表達(dá)的課程內(nèi)容傳達(dá)給學(xué)習(xí)者。這就要求頁面的內(nèi)容不但要簡潔、清晰和明確，而且要注重利用課程內(nèi)容特有的風(fēng)格和強(qiáng)烈的視覺沖擊力鮮明地突出課程內(nèi)容。要取得這種設(shè)計效果，一方面就要對課程內(nèi)容有一個深入的分析，并運(yùn)用邏輯規(guī)律加以條理化處理，使之符合學(xué)習(xí)者接受教學(xué)信息的心理模式和邏輯方式；另一方面，需要對網(wǎng)絡(luò)課程的各構(gòu)成元素進(jìn)行藝術(shù)化處理，使之符合學(xué)習(xí)者的審美要求，極大地吸引學(xué)習(xí)者對課程內(nèi)容的注意。

另外，在設(shè)計網(wǎng)絡(luò)課程的頁面時，有下面兩種可供選擇的頁面都可以做到條理清晰。一種是“樹狀結(jié)構(gòu)”。這種網(wǎng)絡(luò)課程只有一個根節(jié)點(diǎn)，主要通過鏈接來建立站點(diǎn)，在每個網(wǎng)絡(luò)上又有一個次一級的樹枝。這種網(wǎng)絡(luò)課程條理清楚，容易查找，但略顯單調(diào)。另一種是“網(wǎng)狀結(jié)構(gòu)”。這種網(wǎng)絡(luò)課程有一個主頁，在該主頁上又有其他網(wǎng)絡(luò)課程的超鏈接。進(jìn)入這種網(wǎng)絡(luò)課程后，不僅可以學(xué)習(xí)本課程的教學(xué)內(nèi)容，還可以查閱與該網(wǎng)絡(luò)課程有關(guān)的其他站點(diǎn)以及參考書目等。

2）形式與內(nèi)容統(tǒng)一。可以說任何事物都是形式和內(nèi)容的綜合體，網(wǎng)絡(luò)課程自然也不例外，甚至更為注重形式與內(nèi)容的統(tǒng)一。內(nèi)容是構(gòu)成網(wǎng)絡(luò)課程教學(xué)內(nèi)容的總和，是網(wǎng)絡(luò)課程的基礎(chǔ)，甚至可以講是網(wǎng)絡(luò)課程的“靈魂”。形式是網(wǎng)絡(luò)課程內(nèi)容的組成結(jié)構(gòu)或者外在表現(xiàn)形式。顯然，一個優(yōu)秀的網(wǎng)絡(luò)課程必然是內(nèi)容和形式的統(tǒng)一。endprint

一方面，網(wǎng)絡(luò)課程設(shè)計與制作所追求的形式美必須適合其課程內(nèi)容的需要。只追求過于花哨的表現(xiàn)形式，或是只求內(nèi)容而沒有藝術(shù)性的表現(xiàn)形式，都是不合理的。形式美的法則包括單純、對稱、均衡、調(diào)和、比例、節(jié)奏、韻律、多樣統(tǒng)一等元素。一般來說，形式美是其中最基本的原則。

另一方面，要表現(xiàn)出網(wǎng)絡(luò)課程中每一個元素存在的必要性，不要為了炫耀而使用冗余的技術(shù)。

3）視覺整體和諧。這里可以運(yùn)用格式塔心理學(xué)的有關(guān)原理對網(wǎng)絡(luò)課程的優(yōu)化提供借鑒。格式塔心理學(xué)認(rèn)為，部分相加不等于總體，總體也不是部分的總和；整體決定著部分的性質(zhì)和意義。因此，網(wǎng)絡(luò)課程的整體設(shè)計要注意統(tǒng)籌規(guī)劃，要做到整體的風(fēng)格統(tǒng)一，特別要注意在突出部分特色的同時，要始終注意保持同整體的和諧。如在運(yùn)用格式塔理論中的完形原則時，要注意被摳除的部分不破壞界面整體效果，不能因突出特色而影響整體的和諧，使學(xué)習(xí)者產(chǎn)生錯覺。

具體優(yōu)化策略

1）視覺焦點(diǎn)優(yōu)化。通常，學(xué)習(xí)者在瀏覽網(wǎng)絡(luò)課程時，其視覺焦點(diǎn)都有一定的順序，例如：首先瀏覽課程的整個頁面，接著視線便停留在課程的視覺焦點(diǎn)，然后移動視線，或精讀或跳讀或跳轉(zhuǎn)到其他頁面。這就說明學(xué)習(xí)者在瞬間只能產(chǎn)生一個視覺焦點(diǎn)，也就是說學(xué)習(xí)者的視線不可能停留在兩處或兩處以上。這就要求在網(wǎng)絡(luò)課程的設(shè)計與制作時，要保證需要學(xué)習(xí)者了解到的教學(xué)信息不能被背景或其他起修飾作用的圖案所覆蓋。

2）視覺平衡優(yōu)化。平衡給人的是一種心理感應(yīng)。在網(wǎng)絡(luò)課程設(shè)計時要注意課程的上下、左右的平衡，顏色的平衡等。使課程界面達(dá)到平衡的方法有很多種，比如可以設(shè)計一個上下、左右都對稱的版面。這種平衡設(shè)計簡單，但給人一種單調(diào)的感覺。事實(shí)上，平衡不一定就是對稱，如常用的“黃金分割”“四分法”“三三黃金律”等，都可以對界面平衡的設(shè)計提供一些指導(dǎo)。圖1為華南師范大學(xué)現(xiàn)代教育技術(shù)學(xué)網(wǎng)絡(luò)課程的界面，采用黃金分割定律（頁面的主體部分左右、上下比例均為0.618）來設(shè)計頁面，給人一種和諧優(yōu)雅的感覺。

3）視覺組合優(yōu)化。在格式塔心理學(xué)中有一個靠近法則和相似法則。靠近法則指的是人們在觀察兩個相互靠近的視覺元素時，往往將其看成統(tǒng)一的整體加以觀察。因此，在制作網(wǎng)絡(luò)課程內(nèi)容時，可以將教學(xué)圖片及與其相關(guān)的文字靠在一起，這樣便于學(xué)習(xí)者識記和學(xué)習(xí)；否則，學(xué)習(xí)者在誤解圖片所要表達(dá)的概念時很難找到相關(guān)的文字說明，造成時間上的浪費(fèi)。相似法則講的是學(xué)習(xí)者習(xí)慣于把外表相似的事物看成一個整體。因此，如果在同一個概念下有兩個相似的部分，就可以運(yùn)用相似的色彩、線條等加以表達(dá)，這樣有利于學(xué)習(xí)者記憶，也有利于學(xué)習(xí)者對知識點(diǎn)更好地理解。

4 典型案例解析

這里選用華南師范大學(xué)現(xiàn)代教育技術(shù)網(wǎng)絡(luò)課程（圖2）作為典型案例，從視覺心理的角度探析優(yōu)質(zhì)網(wǎng)絡(luò)課程的界面設(shè)計。該網(wǎng)絡(luò)課程主要針對中小學(xué)各學(xué)科教師，是一門具有指導(dǎo)性、應(yīng)用性、實(shí)踐性的課程。

色彩柔和，界面設(shè)置合理 色彩方面，可以看出該網(wǎng)絡(luò)課程的界面色彩較為柔和，以藍(lán)色為課程界面的主色調(diào)，以黑色為主、白色為底。在幾種顏色中，黑色給人一種穩(wěn)重、深沉的感覺，藍(lán)色給人的感覺是專業(yè)、理智、高深。主界面中深藍(lán)色到淺藍(lán)色的漸變，體現(xiàn)出一種朝氣，與黑白色搭配顯得格外和諧。白色給人一種純潔、樸素、恬靜之美，在它的襯托下，黑色字體顯得更加鮮明。在藍(lán)色背景下的白色大標(biāo)題十分醒目、清晰，藍(lán)色背景下的小標(biāo)題顯得格外穩(wěn)重。整個界面給人一種友好、清晰、簡潔、明朗的感覺，整體效果較好，不容易使學(xué)習(xí)者產(chǎn)生疲勞。

在主界面的上方，課程以工具欄的形式設(shè)置了全局導(dǎo)航，包括首頁、課程簡介、自主學(xué)習(xí)、專家引領(lǐng)、實(shí)踐活動、課程作業(yè)、課程BBS等。并且在全局導(dǎo)航的下方設(shè)置了“關(guān)鍵詞”搜索功能，便于學(xué)習(xí)者迅速定位教學(xué)信息。另外，在界面的右方還設(shè)置了支持服務(wù)、優(yōu)秀課例、專家評價、學(xué)生評價等相關(guān)資源，利于學(xué)習(xí)者對相關(guān)學(xué)習(xí)資源的準(zhǔn)確搜索。在界面的左下方有學(xué)生作品展示，使學(xué)生能夠看到自己的作品，利于激發(fā)學(xué)生的學(xué)習(xí)興趣。

布局清晰，便于學(xué)習(xí)者利用 從圖2可以很清楚地看出，界面版式采用“T”型布局，主次分明、條理清晰，各種媒體元素搭配合理。頁面的形象區(qū)域放置著華南師范大學(xué)的標(biāo)志，左邊設(shè)置一個電子書入口的動畫設(shè)計，相當(dāng)和

諧；形象區(qū)的下方是全局導(dǎo)航，將教學(xué)信息分成九個模塊；中間部分是通知公告，用以提示學(xué)習(xí)者有關(guān)課程的準(zhǔn)備、要求以及希望；界面右方的特色資源，如支持服務(wù)、優(yōu)秀課例、專家評價、學(xué)生評價等，用以促進(jìn)學(xué)習(xí)者更好地學(xué)習(xí)；底部用來設(shè)置版權(quán)信息。整個界面較為簡潔，易于學(xué)習(xí)者操作。

角度全面，人文氣息濃厚 從學(xué)習(xí)者的心理角度看，該網(wǎng)絡(luò)課程的界面設(shè)計符合學(xué)習(xí)者的視覺習(xí)慣，給學(xué)習(xí)者以清晰流暢的視覺導(dǎo)向。以藍(lán)色為主色調(diào)的界面能夠讓學(xué)習(xí)者感覺自己仿佛身在大自然中一般，很輕松地接受相關(guān)的教學(xué)信息，不容易引起視覺疲勞。整個界面設(shè)計合理、脈絡(luò)清晰，界面的色彩簡潔而不單調(diào)，沒有用過于華麗的色彩沖擊眼球。

從設(shè)計者的角度來說，可以說充分考慮到了學(xué)習(xí)者的視覺心理特征，整個網(wǎng)絡(luò)課程的界面具有一種藝術(shù)美感，信息傳達(dá)準(zhǔn)確有效；藍(lán)色和淡藍(lán)色的搭配，不至于學(xué)習(xí)者在接受信息時感到疲勞；界面元素的位置安排合理，各元素之間的間隙適中，既遵循了網(wǎng)絡(luò)課程界面設(shè)計的設(shè)計原則，又充分考慮了學(xué)習(xí)者的認(rèn)知規(guī)律與視覺心理規(guī)律。

5 結(jié)語

本研究從視覺心理的相關(guān)理論出發(fā)，探析視覺心理在現(xiàn)代網(wǎng)絡(luò)課程界面設(shè)計中的應(yīng)用，試圖為現(xiàn)代網(wǎng)絡(luò)課程的制作與設(shè)計提供一些借鑒。在視覺心理部分介紹了視覺心理的基本概念和視覺心理的基本理論，然后從如何優(yōu)化網(wǎng)絡(luò)課程的界面設(shè)計出發(fā)，從視覺心理的角度分析了一些界面設(shè)計優(yōu)化策略。本研究在后期還需要運(yùn)用更多的實(shí)踐加以檢驗，也會更多地進(jìn)行相關(guān)實(shí)證研究。

參考文獻(xiàn)

[1]李啟色.網(wǎng)絡(luò)課程中網(wǎng)頁的視覺設(shè)計研究[J].電化教育研究，2004（7）：30-33.

[2]賈靖林.從視覺心理角度分析網(wǎng)絡(luò)課程界面設(shè)計：以浙江師范大學(xué)《現(xiàn)代教育技術(shù)》國家級精品課程為例[J].浙江教育技術(shù)，2010（5）：12-16.

[3]屈爽，肖亞.格式塔心理學(xué)原理在平面設(shè)計中的應(yīng)用研究[J].科教文匯，2010（6）：40-41.

[4]易霜，曾暇，黃云.激發(fā)學(xué)生認(rèn)知心理之網(wǎng)頁設(shè)計的視覺效應(yīng)[J].軟件導(dǎo)刊，2010（2）：187-189.

[5]慈冉冉.視頻教學(xué)資源在網(wǎng)絡(luò)課程中的設(shè)計與應(yīng)用[D].濟(jì)南：山東師范大學(xué)，2010：18-20.

[6]梁旭.基于學(xué)習(xí)者體驗的精品資源共享課設(shè)計研究[D].江蘇：江南大學(xué)，2010：49.

[7]皮連生.學(xué)與教的心理學(xué)[M].上海：華東師范大學(xué)出版社，1999：18-20.

[8]吳偉敏.網(wǎng)站設(shè)計與Web應(yīng)用開發(fā)技術(shù)[M].北京：清華大學(xué)出版社，2009：40-44.endprint