交互式在線學習APP 界面設計研究
——以中國大學MOOC （慕課） 為例

阮曉敏， 孫亞云

（中國礦業(yè)大學 建筑與設計學院， 江蘇 徐州 221116）

0 引言

伴隨著大數(shù)據(jù)、移動互聯(lián)、云計算等技術在各個領域的不斷成熟和普及， 信息的傳遞由原先的單向傳遞向多向互動傳遞發(fā)展，促使知識量增長、知識更新周期縮短，因而充分利用碎片化時間， 靈活運用各種網(wǎng)絡手段及技術渠道即時獲取知識便尤為重要?；诖?，國內(nèi)掀起了新一輪教育信息化的浪潮，交互式在線學習類APP 在高校學生及教育者中日漸普及， 給傳統(tǒng)高校教育帶來了機遇與挑戰(zhàn)。

交互式在線學習是指利用多媒體計算機技術和網(wǎng)絡技術， 在教育者和受教育者之間構建橋路實現(xiàn)交流互動的新興學習方式。 交互式在線學習APP 界面的合理設計能夠利于發(fā)布者傳達有效信息，受眾接收知識，同時也保證了視覺、 心理上的舒適感， 為受眾帶來良好的學習體驗。因此，探析合理適用的APP 界面所具有的特征便顯得尤為重要。

1 中國大學MOOC 界面設計分析

知識經(jīng)濟的火熱催生了MOOC 這一新型的、 開放的網(wǎng)絡教學模式，其被譽為“印刷術發(fā)明以來教育最大的革新”[1]，MOOC 所具備的自主性、多樣性、開放性、連接性和互動性使其成為交互式在線學習平臺的典型。 在國內(nèi)，有中國大學MOOC（慕課）、學堂在線、ewant 育網(wǎng)開放教育平臺等都多個MOOC 平臺。 文章選取移動端APP 開發(fā)較成熟的中國大學MOOC（慕課）為研究對象。

1.1 界面設計中的風格體現(xiàn)

中國大學MOOC （慕課） 選用了簡約主義的設計風格，簡約主義作為現(xiàn)代主義的發(fā)展和繼承，保留了現(xiàn)代主義簡潔、實用、樸素、美觀的設計特點，符合當前大眾的審美趨勢和界面設計風格的時代特征。 如圖1 所示，設計摒棄了厚重繁雜的裝飾性線條、紋理、擬物化圖標等，使整體界面保持干凈整潔， 以扁平化的設計風格突出了要表達的內(nèi)容，產(chǎn)品的各類功能及信息清晰明確，能讓用戶及時的找到自己要尋找的信息，增加實用性及舒適性。

圖1 中國大學MOOC（慕課）手機端界面Fig.1 Interface of China Universities MOOC application

1.2 界面設計中的布局

界面布局是對界面中所存在的文字、 圖形或表格進行排布、設計[2]。 合理的布局設計在使用及視覺感受上給受眾帶來良好體驗，因此，界面設計時設計者需要對頁面中的各種信息進行考慮和推敲，要對用戶人群的需求、行為與信息發(fā)布者的傳達目標進行綜合考慮， 以滿足不同使用群體的使用習慣。

在“中國大學MOOC（慕課）”的主界面布局中采用的是宮格布局、 列表式布局和分模塊布局相結合的布局形式[3]，例如圖2（a）框內(nèi)推薦欄按鈕板塊采用的是宮格布局，圖2（b）框內(nèi)所示“精選”等板塊布局采用的是列表式布局，同時也會結合圖2（c）框內(nèi)分模塊布局。這樣布局一方面利用布局形式的組合，使得界面簡約而不單調，另一方面，多利用矩形圖片展示內(nèi)容，顯得規(guī)范嚴謹，與MOOC的教育定位更為符合。另外，這樣布局可以讓界面顯得簡潔清晰，能夠將用戶的關注力集中在界面信息內(nèi)容上，利于信息有效傳遞。

圖2 中國大學MOOC（慕課）手機端界面Fig.2 Interface of China Universities MOOC application

1.3 界面設計中圖形元素

圖形是界面設計中占比極大的元素， 會直接影響用戶感受，美觀實用而有創(chuàng)新性的圖形元素在APP 的界面設計中很受歡迎。做好信息與圖形之間的相互融合，以圖文并茂的形式給手機界面設計帶來獨特的視覺體驗[4]。

在中國大學MOOC（慕課）應用內(nèi)，其圖形元素設計體現(xiàn)出來差異性、豐富性、柔和美。 在內(nèi)容上，中國大學MOOC（慕課）融合國內(nèi)眾多高校的大量專業(yè)、學科，這些學科特征在其圖標設計上都有一定的體現(xiàn)， 充分顯示學科間、各功能板塊見的差異性，提升辨識度，進一步使界面簡潔；如圖3 所示，中國大學MOOC（慕課）中的圖標設計類型廣泛，線性、異形、面性都有涉及，將對應功能的圖形進行外在線條的勾勒或顏色填充， 形成了豐富的APP圖形元素，增強使用過程中視覺上的舒適度；在界面顯示的圖形中，廣泛使用圓角矩形取代直角，界面圖標設計不生硬，更具有親和力，也使整個界面具有一定美感，給使用者帶來較為深刻的印象。

圖3 中國大學MOOC（慕課）界面圖標Fig.3 Icons of China Universities MOOC application

1.4 界面設計中色彩元素

界面設計中選取不同的色彩帶給人以不同的視覺沖擊、心理感受，在界面設計中進行顏色的選擇和搭配時，要明確以下兩個目的：其一是要通過色彩的對比，使用戶能及時把握界面的重點信息，見圖4，在“立即參加”功能鍵及相關課程價格上選用與主體色對比強烈的橙色；其二是美化界面，給用戶以舒適感，甚至可以達到提升學習效率的效果。

UI 色彩系統(tǒng)一般分為兩部分： 主色調和輔助色調。 設計中對于色彩的應用是規(guī)范性和藝術性的統(tǒng)一。一方面色彩的選擇要突出品牌的特征和優(yōu)點，產(chǎn)生獨一性，完善、提升該品牌的知名度。 中國大學MOOC（慕課） 主體色選用接近自然的綠色，廣泛應用于LOGO、標準字、導航按鈕及其他小功能鍵上，帶給人以舒適、健康、輕松的感覺，可以適度緩解學習壓力。 另一方面結合少量其他色彩，如黃色、橙色、紅色等構成暖性色調。相比色調單一的灰白黑或者冷色調，柔和、活躍的色彩具有良好的親和力，舒適感更容易使用戶在使用應用時產(chǎn)生愉悅的心情。

圖4 中國大學MOOC（慕課）手機端界面Fig.4 Interface of China Universities MOOC application

2 交互式智能在線學習APP 界面設計原則

基于對中國大學MOOC（慕課）的深入分析并調研了解多個互動式在線學習APP， 總結梳理得出了互動式在線學習APP 的設計原則。

2.1 統(tǒng)一性原則

對于APP 來說， 首因效應普遍存在。 這也就意味著其界面上的文字、 圖形和色彩等細節(jié)和局部元素與整體風格能否做到協(xié)調一致， 影響著當下的用戶體驗和后續(xù)的用戶使用粘性。

恰當?shù)纳蚀钆涫橇己媒缑嬖O計的基礎， 圖標、文字、界面分區(qū)都要要注意色彩統(tǒng)一性。在同一界面的色彩使用上，應避免兩種以上高對比度，高純度的色彩搭配，這樣搭配短時間內(nèi)會吸引用戶的眼球， 但極易造成用戶視覺疲勞， 一定程度上減少用戶使用該APP 時間和頻率。 界面色彩可以用二種色相相近，但純度、明度有差異的顏色為主色，再以三種到五種顏色作為輔助色。在保證顏色統(tǒng)一的基礎上，也增加界面的豐富度。

在學習類移動端界面設計布局中常采用的是宮格布局與列表式布局相結合的布局形式。 這種布局方式能在滿足用戶實際需求的基礎上帶來良好的視覺感受。

2.2 年輕化原則

根據(jù)大數(shù)據(jù)用戶畫像分析，互動式在線學習APP 的主要用戶群體是年齡在20～40 歲之間的高校學生、 高校畢業(yè)生、高校教師等，這一群體接受過相對良好的教育，基本都有十年甚至更長的受教育經(jīng)歷， 已經(jīng)形成一套學習、運用知識的體系，學習中更傾向于找尋自己感興趣或知識結構中缺失的內(nèi)容。 因此在界面功能設計中，其一應符合群體直白明了的習慣，直接給用戶呈現(xiàn)他們想看到的內(nèi)容，不過于復雜和隱晦；其二應滿足年輕人個性化的心態(tài)，用戶的知識體系不盡相同，因此用戶希望根據(jù)自己的需求進行個性化設置。比如可以根據(jù)自己的學習情況系統(tǒng)進行記錄并生成個人學習情況表進行合理化建議等等。

另外，這一群體對于界面美感有個人化的理解，對于布局的要求更傾向于注重虛實留白和便捷美觀， 要充分考慮到年輕用戶的審美傾向和使用方式。 所以在線學習APP 的設計應將年輕化原則貫徹始終。

2.3 擬真性原則

無論是受教育者利用在線學習APP 學習課程還是教育者錄制教學視頻上傳平臺， 都會期望能夠有一個比傳統(tǒng)線下大學課堂更為開放、自由、輕松、靈活的學習環(huán)境，這也就是互動式的內(nèi)涵所在。教學，是教與學的統(tǒng)一，在互動式在線學習APP 中要突出擬真性原則，既模擬課堂環(huán)境， 讓受教育者有一個身臨其境， 代入感強烈的課堂，又要高于傳統(tǒng)課堂，在界面設計充分考慮自由提問、互動、交流的需要。

只有基于認真分析群體的認知特征，使用習慣，情感化需求才能做好在線學習APP 擬真性原則界面設計。 強大的功能性以及界面的擬真性可以促使用戶產(chǎn)生學習興趣并發(fā)現(xiàn)樂趣。

2.4 扁平化原則

這里的扁平化原則包含兩個維度的內(nèi)容，第一個維度在于圖案設計上的扁平化，在圖形的選擇設計上應該多以扁平化的簡單元素和幾何圖形如正方形、圓形為主，異形圖案運用應當適度，擬物化圖形與扁平化圖標在整個應用中不應混合使用，否則會破壞整體布局，干擾信息識別；另一個維度在于信息層級的扁平化，過多的層級只會帶來用戶的疲倦， 一些可以統(tǒng)籌在同一層級的內(nèi)容應當歸納起來，減少用戶點開的層級數(shù)。 界面設計中邏輯清晰的層級劃分處理會給用戶帶來層級分明，內(nèi)容明確，功能豐富以及使用舒適等感受。 從而贏得使用者的喜愛，促使其繼續(xù)使用此款軟件進行相關的知識能力或技術水平的提升。

2.5 品牌化原則

國內(nèi)在線學習平臺的品牌意識已經(jīng)伴隨著經(jīng)濟發(fā)展越發(fā)強烈，例如粉筆APP、果殼網(wǎng)、網(wǎng)易云課堂等都形成了統(tǒng)一的品牌形象。我們在進行界面設計與完善時，應該將界面設計元素與品牌形象與品牌文化深深聯(lián)系在一起，一個立足于用戶，以人為本的品牌形象有助于其產(chǎn)品更好的發(fā)展，增大產(chǎn)品競爭力。品牌因素與產(chǎn)品的發(fā)展是一種辯證地關系，看似相互獨立，其實是一種相輔相成的關系。優(yōu)秀的界面設計會吸引更多用戶，有助于將品牌植根于用戶心中， 而良好的品牌形象會促使用戶產(chǎn)生去使用其產(chǎn)品的興趣，形成一種品牌效應。

3 結束語

科技的革新給大眾生活帶來了便利，在“互聯(lián)網(wǎng)+教育”的背景下，互動式在線學習APP 的普及率越來越高。對于受教育者，全球的教育資源匯聚于此，它是學習知識的課堂。 對于教育者，在線學習APP 是施展教育教學能力的舞臺。 對于平臺的經(jīng)營管理者，在線學習APP 是知識變現(xiàn)的平臺。 互動式在線學習APP 大有可為，為了讓各方圍繞互動式在線學習APP 滿足自身需要，應該充分考慮其界面設計，打造實用、舒適、具有視覺美感的學習平臺。設計師也應善于平衡視覺元素進行設計，滿足實用功能、追求視覺美感、重視心理感受，樹立品牌形象，以設計原則為依托開展科學與藝術相統(tǒng)一的設計工作。