阮曉敏， 孫亞云

（中國(guó)礦業(yè)大學(xué) 建筑與設(shè)計(jì)學(xué)院， 江蘇 徐州 221116）

0 引言

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

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

1 中國(guó)大學(xué)MOOC 界面設(shè)計(jì)分析

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

1.1 界面設(shè)計(jì)中的風(fēng)格體現(xiàn)

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

圖1 中國(guó)大學(xué)MOOC（慕課）手機(jī)端界面Fig.1 Interface of China Universities MOOC application

1.2 界面設(shè)計(jì)中的布局

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

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

圖2 中國(guó)大學(xué)MOOC（慕課）手機(jī)端界面Fig.2 Interface of China Universities MOOC application

1.3 界面設(shè)計(jì)中圖形元素

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

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

圖3 中國(guó)大學(xué)MOOC（慕課）界面圖標(biāo)Fig.3 Icons of China Universities MOOC application

1.4 界面設(shè)計(jì)中色彩元素

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

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

圖4 中國(guó)大學(xué)MOOC（慕課）手機(jī)端界面Fig.4 Interface of China Universities MOOC application

2 交互式智能在線學(xué)習(xí)APP 界面設(shè)計(jì)原則

基于對(duì)中國(guó)大學(xué)MOOC（慕課）的深入分析并調(diào)研了解多個(gè)互動(dòng)式在線學(xué)習(xí)APP， 總結(jié)梳理得出了互動(dòng)式在線學(xué)習(xí)APP 的設(shè)計(jì)原則。

2.1 統(tǒng)一性原則

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

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

在學(xué)習(xí)類移動(dòng)端界面設(shè)計(jì)布局中常采用的是宮格布局與列表式布局相結(jié)合的布局形式。 這種布局方式能在滿足用戶實(shí)際需求的基礎(chǔ)上帶來良好的視覺感受。

2.2 年輕化原則

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

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

2.3 擬真性原則

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

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

2.4 扁平化原則

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

2.5 品牌化原則

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

3 結(jié)束語

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