交互設計在網(wǎng)絡課程界面中的應用研究

李華珍

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

關鍵詞：網(wǎng)絡課程界面;交互設計;視覺要素;原型構建;認知匹配

中圖分類號：G434? 文獻標識碼：B? 論文編號：1674-2117（2020）08-0108-04

引言

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

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

網(wǎng)絡課程界面交互設計原則

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

1.可用性的交互設計原則

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

2.易用性的交互設計原則

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

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

網(wǎng)絡課程界面交互設計視覺要素

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

1.文字的設計

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

2.圖形和色彩的搭配

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

網(wǎng)絡課程界面交互設計策略

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

1.原型構建策略

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

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

2.認知匹配策略

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

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

結語

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

參考文獻：

[1]付國艷.網(wǎng)絡課程中的交互設計研究[D].石家莊：河北大學，2006.

[2][3]陳遲.網(wǎng)絡課程界面設計研究[D].上海：上海外國語大學，2012.

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

[5]陳巖.產品設計中的易用性研究[J].設計，2015（03）：56-57.

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

[7]李世國.交互設計[M].北京：中國水利水電出版社，2016.

[8]陳鋒娟.基于認知負荷理論的微視頻設計與應用研究[D].武漢：華中師范大學，2015.