(太原理工大學(xué) 山西 太原 030024)

一、移動(dòng)學(xué)習(xí)平臺(tái)簡(jiǎn)介

移動(dòng)學(xué)習(xí)已經(jīng)成為一種新的學(xué)習(xí)模式，正在逐漸改變著人們的學(xué)習(xí)方式，也影響著傳統(tǒng)教學(xué)模式，移動(dòng)學(xué)習(xí)平臺(tái)是一種新型的網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)，即在移動(dòng)互聯(lián)網(wǎng)環(huán)境下、基于移動(dòng)設(shè)備開(kāi)展學(xué)習(xí)的網(wǎng)絡(luò)平臺(tái)。

從用戶體驗(yàn)方式來(lái)說(shuō)，移動(dòng)學(xué)習(xí)平臺(tái)可以分為兩種，一種是基于瀏覽器或網(wǎng)站，一種是基于移動(dòng)APP的。其中，移動(dòng)APP包括原生APP(NativeAPP)和WebAPP兩種類(lèi)型。移動(dòng)學(xué)習(xí)平臺(tái)是用于支持學(xué)習(xí)內(nèi)容和活動(dòng)的軟件系統(tǒng)。目前，根據(jù)應(yīng)用場(chǎng)景的不同，移動(dòng)學(xué)習(xí)平臺(tái)也具有多樣性和差異性。本文研究的移動(dòng)學(xué)習(xí)平臺(tái)定位為學(xué)生在自由環(huán)境中的非正式學(xué)習(xí)，目的在于輔助傳統(tǒng)的課堂教學(xué)。同時(shí)，為了保證移動(dòng)學(xué)習(xí)平臺(tái)的穩(wěn)定性能和學(xué)習(xí)者的流暢體驗(yàn)，該移動(dòng)學(xué)習(xí)平臺(tái)采用移動(dòng)原生APP的方式。

二、UI研究背景

目前許多學(xué)者對(duì)UI設(shè)計(jì)進(jìn)行了研究，研究成果主要集中在通用的軟件設(shè)計(jì)、WEB設(shè)計(jì)方面。如八大黃金法則、20大UI設(shè)計(jì)原則等。UI(UserInterface)即用戶界面、人機(jī)界面，廣義上指人機(jī)交互的媒介。UI設(shè)計(jì)即用戶界面設(shè)計(jì)，由人機(jī)交互設(shè)計(jì)演變而來(lái)，具有多學(xué)科交叉性。目前，UI設(shè)計(jì)己經(jīng)形成了一個(gè)完整的研究體系，其主要研究?jī)?nèi)容包括用戶研究、界面交互設(shè)計(jì)、界面視覺(jué)設(shè)計(jì)及界面技術(shù)開(kāi)發(fā)四部分，跨越了心理學(xué)、藝術(shù)設(shè)計(jì)、計(jì)算機(jī)學(xué)科等多個(gè)研究領(lǐng)域網(wǎng)。

三、UI設(shè)計(jì)目標(biāo)及設(shè)計(jì)要求

為保證移動(dòng)學(xué)習(xí)APP的UI的應(yīng)用效果，并對(duì)應(yīng)用效果進(jìn)行定性或定量的描述，本節(jié)提出了UI的設(shè)計(jì)要求及目標(biāo)。本文從設(shè)計(jì)理念、系統(tǒng)性能和用戶體驗(yàn)三個(gè)層面提出了UI的設(shè)計(jì)目標(biāo)?；趯?duì)高校移動(dòng)學(xué)習(xí)APP的UI的功能性需求分析和用戶研究，綜合分析八大黃金法則、20大UI設(shè)計(jì)原則，本文認(rèn)為，此次UI設(shè)計(jì)應(yīng)當(dāng)滿足清晰性、可靠性、高效性和激勵(lì)性四個(gè)方面的要求。

(一)清晰性。讓學(xué)習(xí)者能夠快速獲取對(duì)APP的清晰認(rèn)識(shí)〈包括整體架構(gòu)、主要功能等)。每個(gè)界面主題分明，而且主次清晰；界面中的布局容易熟悉；界面中的重要按鈕容易理解、操作方便。

(二)可靠性。讓學(xué)習(xí)者感受到交互是安全的、符合預(yù)期的，學(xué)習(xí)者能夠控制與平臺(tái)的交互。允許學(xué)習(xí)者根據(jù)自己的需求來(lái)控制界面，通過(guò)消息提示、對(duì)話框等多種方式給予學(xué)習(xí)者充分的指導(dǎo)和反饋等。

(三)高效性。借助簡(jiǎn)單的操作，學(xué)習(xí)者能夠快速、高效地查找目標(biāo)內(nèi)容或資源，完成學(xué)習(xí)任務(wù)。通過(guò)貼心的工具設(shè)計(jì)和常用工具的快捷設(shè)計(jì)大大簡(jiǎn)化用戶的工作量等。

(四)激勵(lì)性。讓學(xué)習(xí)者感受到移動(dòng)學(xué)習(xí)APP的實(shí)用性、新穎性、趣味性，以提高用戶粘性和忠誠(chéng)度，激勵(lì)學(xué)習(xí)者未來(lái)繼續(xù)使用產(chǎn)品。

四、系統(tǒng)功能需求分析

基于對(duì)高校移動(dòng)學(xué)習(xí)APP的設(shè)計(jì)定位和總體分析，UI的功能性需求主要包括課程學(xué)習(xí)、學(xué)習(xí)支持、交流討論和系統(tǒng)服務(wù)四個(gè)方面，具體闡述如下。

(一)課程學(xué)習(xí)。課程學(xué)習(xí)是移動(dòng)學(xué)習(xí)APP的重要功能。其中學(xué)習(xí)資源的設(shè)計(jì)與呈現(xiàn)是移動(dòng)學(xué)習(xí)平臺(tái)的設(shè)計(jì)重點(diǎn)。

(二)學(xué)習(xí)支持。為了更好地支持課堂教學(xué)、促進(jìn)深度學(xué)習(xí)，移動(dòng)學(xué)習(xí)平臺(tái)應(yīng)當(dāng)提供作業(yè)、通知、測(cè)試等學(xué)習(xí)支持，使移動(dòng)學(xué)習(xí)平臺(tái)能夠滿足非正式環(huán)境中的個(gè)體學(xué)習(xí)需求以及正式學(xué)習(xí)環(huán)境中的課堂使用需求。

(三)交流討論。移動(dòng)學(xué)習(xí)平臺(tái)應(yīng)當(dāng)充分發(fā)揮技術(shù)優(yōu)勢(shì)，提供論壇等交流方式，可有力地促進(jìn)師生之間、生生之間的隨時(shí)、有效的溝通。

(四)系統(tǒng)服務(wù)。作為一個(gè)系統(tǒng)平臺(tái)，移動(dòng)學(xué)習(xí)平臺(tái)應(yīng)當(dāng)提供必需的系統(tǒng)服務(wù)。系統(tǒng)服務(wù)主要包括系統(tǒng)操作、賬號(hào)管理和系統(tǒng)版本等。

五、UI設(shè)計(jì)與實(shí)現(xiàn)

(一)系統(tǒng)UI框架?；谏衔膶?duì)高校移動(dòng)學(xué)習(xí)APP系統(tǒng)需求的分析和總結(jié)，結(jié)合UI的設(shè)計(jì)要求、性能目標(biāo)和用戶體驗(yàn)?zāi)繕?biāo)，最終確定了移動(dòng)學(xué)習(xí)APP的組織架構(gòu)，將用戶界面分為兩個(gè)層級(jí)。

一級(jí)界面。為了幫助學(xué)習(xí)者進(jìn)行課程學(xué)習(xí)、促進(jìn)學(xué)習(xí)者的個(gè)人學(xué)習(xí)、學(xué)習(xí)者與教師和同伴之間的交流互動(dòng)，同時(shí)，為學(xué)習(xí)者提供方便的系統(tǒng)服務(wù)，移動(dòng)學(xué)習(xí)APP的一級(jí)界面確定為“課程中心”、“課堂筆記”、“學(xué)習(xí)論壇”、“我的課程”、”更多”。這五個(gè)一級(jí)界面也將作為移動(dòng)學(xué)習(xí)APP的五個(gè)功能模塊，作為五個(gè)菜單項(xiàng)組合成一個(gè)固定菜單，為學(xué)習(xí)者提供全局導(dǎo)航。

二級(jí)界面。基于一級(jí)界面，結(jié)合學(xué)習(xí)情境，二級(jí)界面確定如下：”課程中心”的二級(jí)界面為“課程首頁(yè)”；”課堂筆記”的二級(jí)界面為學(xué)習(xí)者所記錄的所有筆記；”學(xué)習(xí)論壇”的二級(jí)界面為“論壇主題”；“我的課程”的二級(jí)界面為“資源列表”；“更多”的二級(jí)界面為功能列表，包括“退出系統(tǒng)”、“關(guān)于版本”等。

(二)系統(tǒng)手勢(shì)操作。手勢(shì)操作是學(xué)習(xí)者與移動(dòng)學(xué)習(xí)平臺(tái)的互動(dòng)方式，對(duì)用戶體驗(yàn)有直接而且重要的影響。目前移動(dòng)設(shè)備中常用的手勢(shì)包括單擊、雙擊、滑動(dòng)、拖拽、長(zhǎng)按、縮放等多種類(lèi)型。

針對(duì)高校移動(dòng)學(xué)習(xí)場(chǎng)景學(xué)習(xí)需求，結(jié)合學(xué)習(xí)者認(rèn)知習(xí)慣，遵循手勢(shì)設(shè)計(jì)的基本原則，高校移動(dòng)學(xué)習(xí)APP的一系列的手勢(shì)，如下表所示。

手勢(shì)作用具體應(yīng)用單擊打開(kāi)對(duì)象所有按鈕、圖標(biāo)等雙擊將對(duì)象全屏將圖片、文字等放大至全屏滑動(dòng)切換屏幕切換同級(jí)萊單縮放縮放對(duì)象縮放圖片、文字等資源下拉刷新數(shù)據(jù)更新內(nèi)容長(zhǎng)按顯示更多功能查找功能

(三)頁(yè)面結(jié)構(gòu)及導(dǎo)航設(shè)計(jì)。為了保持布局的一致性，提高UI的清晰性和易用性，移動(dòng)學(xué)習(xí)APP的UI的界面基本組成元素從上到下一次為狀態(tài)欄、導(dǎo)航欄、內(nèi)容區(qū)和菜單欄。其中，狀態(tài)欄可以直接使用移動(dòng)設(shè)備系統(tǒng)狀態(tài)亂，菜單欄可以具體UI針對(duì)具體學(xué)習(xí)情境進(jìn)行微調(diào)即可。

為了提供清晰、方便的導(dǎo)航，移動(dòng)學(xué)習(xí)APP的導(dǎo)航設(shè)計(jì)可以分為全局導(dǎo)航和局部導(dǎo)航，具體闡述如下：

1、全局導(dǎo)航?；谏衔膶?duì)系統(tǒng)架構(gòu)和界面結(jié)構(gòu)的分析，移動(dòng)學(xué)習(xí)APP的全局導(dǎo)航包括“課程中心”、“課堂筆記”、“學(xué)習(xí)論壇”、“我的課程”、”更多”五個(gè)菜單項(xiàng)，以菜單的形式固定在界面底部。

2、局部導(dǎo)航。第一種形式是界面中的按鈕、圖文按鈕等按鈕導(dǎo)航。第二種形式是界面中的內(nèi)容提供導(dǎo)航，如標(biāo)簽導(dǎo)航、宮格導(dǎo)航、列表導(dǎo)航、tab導(dǎo)航、組合導(dǎo)航等。

通過(guò)全局導(dǎo)航，學(xué)習(xí)者可以始終明確當(dāng)前所處位置，并方便地跳轉(zhuǎn)到不同模塊。局部導(dǎo)航幫助學(xué)習(xí)者從當(dāng)前界面快速跳轉(zhuǎn)到其它界面。兩種導(dǎo)航方式結(jié)合可以確保學(xué)習(xí)者始終不迷航，并且能夠快速進(jìn)入指定界面。

六、總結(jié)

本文首先梳理了移動(dòng)學(xué)習(xí)平臺(tái)、及UI設(shè)計(jì)的概念、研究范圍、相關(guān)理論及研究現(xiàn)狀?；谇叭说难芯砍晒?，包括設(shè)計(jì)理念和功能框架，結(jié)合移動(dòng)學(xué)習(xí)APP的設(shè)計(jì)目標(biāo)，本文闡述了移動(dòng)學(xué)習(xí)APP的UI設(shè)計(jì)理念與UI實(shí)現(xiàn)的總體方案與核心技術(shù)框架。

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)學(xué)習(xí)己經(jīng)成為一種新的教育現(xiàn)象，而高校已經(jīng)成為移動(dòng)學(xué)習(xí)的主要陣地。移動(dòng)學(xué)習(xí)平臺(tái)作為一種新的網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)，有利于構(gòu)建課堂內(nèi)外無(wú)縫銜接的一體化學(xué)習(xí)環(huán)境，還能促進(jìn)學(xué)生開(kāi)展系統(tǒng)學(xué)習(xí)和深度學(xué)習(xí)。移動(dòng)學(xué)習(xí)平臺(tái)的UI(用戶界面)作為學(xué)習(xí)者與移動(dòng)學(xué)習(xí)平臺(tái)進(jìn)行交互的媒介，其設(shè)計(jì)質(zhì)量直接影響著學(xué)習(xí)者的學(xué)習(xí)體驗(yàn)。隨著用戶體驗(yàn)的普及，人們開(kāi)始追求實(shí)用性和享受性的雙重目標(biāo)。因此，移動(dòng)學(xué)習(xí)平臺(tái)的UI設(shè)計(jì)至關(guān)重要。