李華珍

摘要：網(wǎng)絡(luò)課程是重要的在線教學(xué)資源，科學(xué)的交互設(shè)計(jì)可有效提升網(wǎng)絡(luò)課程質(zhì)量，優(yōu)化學(xué)習(xí)效果。作者從交互設(shè)計(jì)的角度出發(fā)，結(jié)合國(guó)家精品課程中的典型實(shí)例，從網(wǎng)絡(luò)課程界面交互設(shè)計(jì)的原則、視覺要素和策略三個(gè)方面對(duì)其進(jìn)行闡述和說明，形成教學(xué)交互良好的網(wǎng)絡(luò)課程界面，為優(yōu)質(zhì)網(wǎng)絡(luò)課程設(shè)計(jì)與應(yīng)用提供實(shí)質(zhì)性策略和可行性方法。

關(guān)鍵詞：網(wǎng)絡(luò)課程界面;交互設(shè)計(jì);視覺要素;原型構(gòu)建;認(rèn)知匹配

中圖分類號(hào)：G434? 文獻(xiàn)標(biāo)識(shí)碼：B? 論文編號(hào)：1674-2117（2020）08-0108-04

引言

網(wǎng)絡(luò)課程由教學(xué)內(nèi)容和網(wǎng)絡(luò)教學(xué)支撐環(huán)境兩部分構(gòu)成，其媒體內(nèi)容豐富、交互功能多元，具有共享性、靈活性和生動(dòng)性等特點(diǎn)。[1]網(wǎng)絡(luò)課程目前已成為教育領(lǐng)域重點(diǎn)建設(shè)的資源形式，尤其在高校網(wǎng)絡(luò)教育、國(guó)家精品課程和開放教育中占主導(dǎo)地位。但目前很多網(wǎng)絡(luò)課程的質(zhì)量良莠不齊，一些設(shè)計(jì)者忽視相關(guān)理論依據(jù)，使得存在問題的網(wǎng)絡(luò)課程仍在傳播，造成學(xué)習(xí)者視聽負(fù)擔(dān)和認(rèn)知負(fù)荷超載，進(jìn)而很難發(fā)揮網(wǎng)絡(luò)課程的優(yōu)勢(shì)。

一門優(yōu)質(zhì)的網(wǎng)絡(luò)課程其設(shè)計(jì)應(yīng)體現(xiàn)有用性、科學(xué)性和認(rèn)知負(fù)荷合理性，以形成良好的學(xué)習(xí)體驗(yàn)。而交互設(shè)計(jì)是研究活動(dòng)參與者和具有反饋性物體之間的信息交流，以優(yōu)化用戶體驗(yàn)。由此可見，這兩者的目標(biāo)一致。網(wǎng)絡(luò)課程中的多元視覺符號(hào)是實(shí)現(xiàn)交互功能的載體。交互設(shè)計(jì)中的諸多原理可用于網(wǎng)絡(luò)課程的設(shè)計(jì)，筆者從交互設(shè)計(jì)的角度，結(jié)合國(guó)家精品課程實(shí)例，從網(wǎng)絡(luò)課程界面交互設(shè)計(jì)原則、視覺要素和設(shè)計(jì)策略三個(gè)方面對(duì)其進(jìn)行闡述。

網(wǎng)絡(luò)課程界面交互設(shè)計(jì)原則

網(wǎng)絡(luò)課程界面是指人與計(jì)算機(jī)之間借助網(wǎng)絡(luò)平臺(tái)所呈現(xiàn)出的教學(xué)信息界面以及人機(jī)交互的媒體[2]，其目標(biāo)是通過良好的交互設(shè)計(jì)來滿足學(xué)習(xí)者需求，以促進(jìn)有效學(xué)習(xí)。界面設(shè)計(jì)是網(wǎng)絡(luò)課程設(shè)計(jì)的重要環(huán)節(jié)，其質(zhì)量決定了網(wǎng)絡(luò)課程的質(zhì)量。[3]其中，可用性和易用性是衡量網(wǎng)絡(luò)課程界面呈現(xiàn)效果的重要指標(biāo)，它們能夠使界面形成良好的交互體驗(yàn)，讓學(xué)習(xí)者感到舒暢。界面在可用性和易用性上強(qiáng)調(diào)導(dǎo)航功能的科學(xué)性、全面性、層次性等。交互設(shè)計(jì)中對(duì)界面交互的研究，有助于我們對(duì)界面有用性和易用性的精準(zhǔn)設(shè)計(jì)。例如，界面交互中關(guān)于簡(jiǎn)單化人與界面之間的交流，采用簡(jiǎn)潔清晰的界面設(shè)計(jì)風(fēng)格和全面易操作的功能導(dǎo)航，有助于學(xué)習(xí)者流暢地完成學(xué)習(xí)任務(wù)，形成良好的自主學(xué)習(xí)環(huán)境。

1.可用性的交互設(shè)計(jì)原則

在交互設(shè)計(jì)領(lǐng)域，可用性反映產(chǎn)品能否以正確的方式提供合適的功能，以及能否讓用戶有效使用該功能并獲取滿足感。[4]可用性會(huì)影響學(xué)習(xí)者的使用滿意度，其能夠體現(xiàn)導(dǎo)航功能的全面性、流暢性和直觀性等特點(diǎn)，進(jìn)而影響學(xué)習(xí)者的學(xué)習(xí)體驗(yàn)。當(dāng)界面的可用性較低時(shí)，學(xué)習(xí)者會(huì)產(chǎn)生不自在甚至厭煩的情緒，降低對(duì)課程的價(jià)值認(rèn)可度，所以，設(shè)計(jì)者在設(shè)計(jì)網(wǎng)絡(luò)課程界面時(shí)要充分考慮界面的可用性，課程的導(dǎo)航圖標(biāo)設(shè)計(jì)應(yīng)全面而清晰，讓學(xué)習(xí)者能在較短時(shí)間內(nèi)了解和使用課程的操作。例如，國(guó)家精品課程《攝影基礎(chǔ)課》，呈現(xiàn)了清晰的課程簡(jiǎn)介和全面的功能導(dǎo)航。課程界面展現(xiàn)了課程的類別、簡(jiǎn)介、名稱、進(jìn)度、分享、簽到和手機(jī)課堂等多種功能圖標(biāo)，能夠滿足學(xué)習(xí)者的自主學(xué)習(xí)和交流互動(dòng)。此外，這些功能圖標(biāo)設(shè)計(jì)得十分直白和清晰，學(xué)習(xí)者只需簡(jiǎn)單查看即可了解這些導(dǎo)航的功能并進(jìn)行交互，提升了學(xué)習(xí)者使用界面的流暢性，為學(xué)習(xí)者創(chuàng)造了良好的知識(shí)建構(gòu)環(huán)境。

2.易用性的交互設(shè)計(jì)原則

對(duì)具體的網(wǎng)絡(luò)課程來說，易用性是指學(xué)習(xí)者對(duì)網(wǎng)絡(luò)課程信息容易了解，操作功能易于掌握，認(rèn)知負(fù)荷較低，有著合理的人機(jī)交互功能。[5]易用性是界面交互設(shè)計(jì)的前提和關(guān)鍵，與可用性息息相關(guān)，只有充分考慮到易用性，才能夠設(shè)計(jì)出更符合廣泛人群操作的課程界面，如《攝影基礎(chǔ)課》課程主界面（如圖1）。

人們的視覺注意順序一般是從左往右、自上而下，認(rèn)知過程則是從整體概念到子概念，該課程模塊劃分符合人們的視覺順序和認(rèn)知特征，左側(cè)為導(dǎo)航模塊，體現(xiàn)了整體的功能設(shè)計(jì)，學(xué)習(xí)者通過點(diǎn)擊圖標(biāo)進(jìn)入其所屬功能進(jìn)行具體的課件、作業(yè)與考試等學(xué)習(xí)活動(dòng)。右側(cè)分為兩個(gè)板塊，右上部分顯示“開始學(xué)習(xí)”的醒目圖標(biāo)，右下部分為課程公告，主題和內(nèi)容層次清晰。采用由左到右、自上而下的排版方式能夠很好地適應(yīng)學(xué)習(xí)者的視覺過程。課程界面主次分明，學(xué)習(xí)者能夠很容易把握該課程的學(xué)習(xí)目標(biāo)和學(xué)習(xí)活動(dòng)，便于建立該課程的學(xué)習(xí)計(jì)劃。此外，清晰簡(jiǎn)潔的課程界面有助于減輕學(xué)習(xí)者的視覺負(fù)擔(dān)，為學(xué)習(xí)者營(yíng)造一種愉悅的學(xué)習(xí)氛圍。

網(wǎng)絡(luò)課程界面交互設(shè)計(jì)視覺要素

視覺要素是人類接受信息的重要媒介。在網(wǎng)絡(luò)課程界面中，文字、圖形和色彩均是影響學(xué)習(xí)者視覺效果的重要因素。由于視覺要素能夠直接被學(xué)習(xí)者所感知，其設(shè)計(jì)的好壞會(huì)直接影響界面的質(zhì)量，進(jìn)而影響交互體驗(yàn)。正是有了視覺要素的參與，網(wǎng)絡(luò)課程才能充分發(fā)揮其存在的價(jià)值，兼具科學(xué)性、交互性和美觀性，有效傳達(dá)教學(xué)信息，營(yíng)造舒適自在的學(xué)習(xí)環(huán)境。

1.文字的設(shè)計(jì)

文字的設(shè)計(jì)主要包括字體效果、字號(hào)以及行間距設(shè)置等。網(wǎng)絡(luò)課程界面中的字體效果有靜態(tài)和動(dòng)態(tài)之分[6]，動(dòng)態(tài)字體具有立體感，能夠隨時(shí)間或空間的不同而所有變化，主要是用于特定主題的設(shè)計(jì)，以增強(qiáng)視覺感染力。在界面中文字的設(shè)計(jì)是課程宣傳效果的關(guān)鍵，能夠直接影響學(xué)習(xí)者對(duì)課程的興趣。動(dòng)態(tài)字體的節(jié)奏性和運(yùn)動(dòng)性能夠產(chǎn)生視覺層次感和交互感，設(shè)計(jì)者可依據(jù)宣傳效果選擇重疊、形變、分層、漸變與旋轉(zhuǎn)等動(dòng)態(tài)處理方法。例如，在《設(shè)計(jì)的力量》課程界面中，課程名稱采用了重疊方法，將不同透明度的文字疊加形成空間感、層次感，打破了字體一成不變的二維平面視覺感受，富有趣味性、交互性，能夠更好地引起學(xué)習(xí)者注意，傳遞情緒。

2.圖形和色彩的搭配

課程界面中對(duì)圖形的設(shè)計(jì)包括抽象圖形和具象圖形。抽象圖形表達(dá)自由，可用于對(duì)客觀事物的夸張、變形和聯(lián)想;具象圖形貼近真實(shí)事物，容易引起受眾的共鳴。色彩有冷暖、深淺的表達(dá)方式，一般暖色和深色視覺表現(xiàn)力更強(qiáng)。在課程界面設(shè)計(jì)中可根據(jù)實(shí)際需求、課程內(nèi)容、學(xué)習(xí)者心理等因素，選用正確的圖形搭配以合理的色彩，運(yùn)用對(duì)比、和諧、集中等手法來傳達(dá)教學(xué)信息。例如，中國(guó)國(guó)畫課程，設(shè)計(jì)者可以結(jié)合水墨色特點(diǎn)進(jìn)行界面的設(shè)計(jì)，將傳統(tǒng)的花卉和山水元素通過具象圖形和著色深淺進(jìn)行調(diào)和、對(duì)比，用深色表現(xiàn)重要景象，淺色表現(xiàn)模糊形象。通過色彩分明、意境豐富的搭配能夠體現(xiàn)國(guó)畫的深厚內(nèi)涵與藝術(shù)之美。此外，兩者的搭配除了體現(xiàn)意境和視覺美感，還應(yīng)符合客觀事實(shí)和科學(xué)規(guī)律。例如，自然科學(xué)類課程中，設(shè)計(jì)者應(yīng)嚴(yán)格遵守科學(xué)規(guī)律與自然現(xiàn)象，合理應(yīng)用抽象和具象圖形來展現(xiàn)自然界的生物、環(huán)境等，用正確的色彩揭示生物的生長(zhǎng)歷程、環(huán)境的變化等，以向?qū)W習(xí)者傳達(dá)正確的科學(xué)知識(shí)和規(guī)律，引起學(xué)習(xí)者的共識(shí)與思考。綜上所述，圖形與色彩的搭配不同所產(chǎn)生的效果也會(huì)不同，設(shè)計(jì)者應(yīng)充分利用圖形、色彩的表達(dá)效果和科學(xué)規(guī)律予以搭配，形成傳達(dá)教學(xué)信息的良好媒介。

網(wǎng)絡(luò)課程界面交互設(shè)計(jì)策略

在網(wǎng)絡(luò)課程界面中，學(xué)習(xí)者需求能否得到滿足以及認(rèn)知空間是否超載都會(huì)直接影響交互體驗(yàn)。交互設(shè)計(jì)策略是設(shè)計(jì)者在宏觀層面的設(shè)計(jì)基準(zhǔn)，能夠指導(dǎo)整個(gè)設(shè)計(jì)過程，其包括原型構(gòu)建和認(rèn)知匹配兩方面。原型構(gòu)建以學(xué)習(xí)者為出發(fā)點(diǎn)，注重學(xué)習(xí)者特征和反饋，以促進(jìn)界面的優(yōu)化;認(rèn)知匹配主要是減少無關(guān)因素干擾以及調(diào)節(jié)學(xué)習(xí)任務(wù)難易度，以形成良好界面交互體驗(yàn)。

1.原型構(gòu)建策略

在交互設(shè)計(jì)中，原型是指對(duì)開發(fā)的產(chǎn)品和概念加以形象化和具體化，體現(xiàn)了設(shè)計(jì)者的設(shè)計(jì)意圖。[7]構(gòu)建原型有助于測(cè)試概念的有效性，通過不斷地改進(jìn)和優(yōu)化，形成最終的概念或產(chǎn)品。在界面交互設(shè)計(jì)中，設(shè)計(jì)者以滿足學(xué)習(xí)者需求為目標(biāo)，通過原型的構(gòu)建和迭代，設(shè)計(jì)出體驗(yàn)效果良好的界面。英國(guó)龍比亞大學(xué)的大衛(wèi)·比揚(yáng)教授提出的PACT模型強(qiáng)調(diào)交互服務(wù)的目的——為人服務(wù)，設(shè)計(jì)要素包括人、人的行為、學(xué)習(xí)的情境和支持學(xué)習(xí)的技術(shù)。對(duì)于網(wǎng)絡(luò)課程而言，設(shè)計(jì)要素應(yīng)包括學(xué)習(xí)者（學(xué)習(xí)行為、學(xué)習(xí)目標(biāo)等）、課程環(huán)境和軟件技術(shù)這三個(gè)層面（如圖2）。

原型構(gòu)建的主要流程為：確定課程目標(biāo)→測(cè)試學(xué)習(xí)者初始狀態(tài)（學(xué)習(xí)目標(biāo)、學(xué)習(xí)行為、學(xué)習(xí)技術(shù)和認(rèn)知能力）→跟蹤、存儲(chǔ)與分析學(xué)習(xí)數(shù)據(jù)→提供可視化學(xué)習(xí)決策→調(diào)整與改進(jìn)原型。設(shè)計(jì)者通過原型構(gòu)建把設(shè)計(jì)思想傳遞給學(xué)習(xí)者，從數(shù)據(jù)中得到反饋，并對(duì)原型進(jìn)行調(diào)整。其中，學(xué)習(xí)者層面包括學(xué)習(xí)目標(biāo)、學(xué)習(xí)行為、學(xué)習(xí)技術(shù)和認(rèn)知能力等信息，課程環(huán)境通過合適的軟件技術(shù)來跟蹤、存儲(chǔ)和分析這些信息，提供可視化決策。此方法獲取的學(xué)習(xí)者交互行為特征依賴于系統(tǒng)環(huán)境。設(shè)計(jì)者還可添加一些界面功能以獲取學(xué)習(xí)者情感特征如情緒、態(tài)度和滿意度等，如在課程界面中添加語音（語氣、語調(diào)、語義）和情緒（帶有感情色彩的評(píng)語和表情等）的輸入功能，及時(shí)地了解學(xué)習(xí)者的界面使用感受，以調(diào)整原型界面的視覺和功能設(shè)計(jì)，進(jìn)而提升學(xué)習(xí)成效。

2.認(rèn)知匹配策略

認(rèn)知負(fù)荷理論認(rèn)為人的工作記憶有限，學(xué)習(xí)是通過工作記憶加工信息的過程，當(dāng)學(xué)習(xí)任務(wù)過于復(fù)雜超過了工作記憶容量時(shí)，學(xué)習(xí)效果較差，即出現(xiàn)認(rèn)知超載。[8]因此，設(shè)計(jì)者在界面設(shè)計(jì)中需考量認(rèn)知負(fù)荷的合理性。認(rèn)知負(fù)荷主要有外部認(rèn)知負(fù)荷和內(nèi)部認(rèn)知負(fù)荷，外部認(rèn)知負(fù)荷是外在學(xué)習(xí)環(huán)境中對(duì)學(xué)習(xí)產(chǎn)生消極影響的負(fù)荷，內(nèi)部認(rèn)知負(fù)荷是由學(xué)習(xí)資源、學(xué)習(xí)任務(wù)難度和學(xué)習(xí)者認(rèn)知水平共同決定。合理的認(rèn)知負(fù)荷可通過降低外部負(fù)荷和調(diào)節(jié)內(nèi)部負(fù)荷來實(shí)現(xiàn)，以設(shè)計(jì)出更加適合學(xué)習(xí)者認(rèn)知規(guī)律的界面。

降低外部認(rèn)知負(fù)荷主要是從外部環(huán)境著手，如設(shè)計(jì)者可通過減少無關(guān)的圖片、文字和鏈接等方式，來防止過度占用學(xué)習(xí)者認(rèn)知資源。還可利用學(xué)習(xí)者的認(rèn)知習(xí)慣、知識(shí)基礎(chǔ)來規(guī)避不必要的認(rèn)知負(fù)荷，如中小學(xué)的課程，設(shè)計(jì)者可借助耳熟能詳?shù)氖吕?，如擬人化植物、動(dòng)物等元素來展示課程內(nèi)容要點(diǎn)和交互操作，以提升學(xué)習(xí)代入感和趣味性。內(nèi)部認(rèn)知負(fù)荷是以學(xué)習(xí)者的認(rèn)知水平為調(diào)節(jié)依據(jù)，如可在界面中加入知識(shí)前測(cè)和階段性測(cè)試功能以確定學(xué)習(xí)者的認(rèn)知水平，然后鏈接至不同難度和復(fù)雜度的學(xué)習(xí)任務(wù)導(dǎo)航界面，以充分挖掘?qū)W習(xí)者潛力進(jìn)入下一階段的任務(wù)學(xué)習(xí)。

結(jié)語

網(wǎng)絡(luò)課程作為重要的網(wǎng)絡(luò)學(xué)習(xí)資源，其質(zhì)量能夠顯著影響學(xué)習(xí)者的學(xué)習(xí)效果。交互設(shè)計(jì)領(lǐng)域?yàn)榫W(wǎng)絡(luò)課程的界面設(shè)計(jì)提供了豐富的理論基礎(chǔ)和科學(xué)實(shí)踐。本文基于此從網(wǎng)絡(luò)課程界面交互設(shè)計(jì)原則、視覺元素和交互設(shè)計(jì)策略三個(gè)層面進(jìn)行闡述，旨在使網(wǎng)絡(luò)課程界面能夠兼具可用性、易用性、科學(xué)性和藝術(shù)性等，激發(fā)學(xué)習(xí)者的學(xué)習(xí)興趣并匹配學(xué)習(xí)者認(rèn)知負(fù)荷水平，優(yōu)化學(xué)習(xí)過程和學(xué)習(xí)效果。此外，網(wǎng)絡(luò)課程界面的設(shè)計(jì)應(yīng)該有所變化而不是采用千篇一律的模板，筆者認(rèn)為設(shè)計(jì)者可以充分利用信息化時(shí)代提供的便捷工具和操作環(huán)境，提供更加貼近學(xué)習(xí)者真實(shí)需求和特點(diǎn)的專屬設(shè)計(jì)，從而滿足學(xué)習(xí)者的個(gè)性化學(xué)習(xí)需求，培養(yǎng)創(chuàng)新型人才。

參考文獻(xiàn)：

[1]付國(guó)艷.網(wǎng)絡(luò)課程中的交互設(shè)計(jì)研究[D].石家莊：河北大學(xué)，2006.

[2][3]陳遲.網(wǎng)絡(luò)課程界面設(shè)計(jì)研究[D].上海：上海外國(guó)語大學(xué)，2012.

[4]張寶，劉克濤，董磊，等.基于可用性的用戶界面色彩研究[J].設(shè)計(jì)，2017（10）：110-111.

[5]陳巖.產(chǎn)品設(shè)計(jì)中的易用性研究[J].設(shè)計(jì)，2015（03）：56-57.

[6]李瀟.數(shù)字媒介環(huán)境下的動(dòng)態(tài)文字設(shè)計(jì)與編排研究[J].美與時(shí)代（上旬刊），2019（07）：84-86.

[7]李世國(guó).交互設(shè)計(jì)[M].北京：中國(guó)水利水電出版社，2016.

[8]陳鋒娟.基于認(rèn)知負(fù)荷理論的微視頻設(shè)計(jì)與應(yīng)用研究[D].武漢：華中師范大學(xué)，2015.