基于高校移動學習平臺的UI設計與實現

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

一、移動學習平臺簡介

移動學習已經成為一種新的學習模式，正在逐漸改變著人們的學習方式，也影響著傳統教學模式，移動學習平臺是一種新型的網絡學習平臺，即在移動互聯網環境下、基于移動設備開展學習的網絡平臺。

從用戶體驗方式來說，移動學習平臺可以分為兩種，一種是基于瀏覽器或網站，一種是基于移動APP的。其中，移動APP包括原生APP(NativeAPP)和WebAPP兩種類型。移動學習平臺是用于支持學習內容和活動的軟件系統。目前，根據應用場景的不同，移動學習平臺也具有多樣性和差異性。本文研究的移動學習平臺定位為學生在自由環境中的非正式學習，目的在于輔助傳統的課堂教學。同時，為了保證移動學習平臺的穩定性能和學習者的流暢體驗，該移動學習平臺采用移動原生APP的方式。

二、UI研究背景

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

三、UI設計目標及設計要求

為保證移動學習APP的UI的應用效果，并對應用效果進行定性或定量的描述，本節提出了UI的設計要求及目標。本文從設計理念、系統性能和用戶體驗三個層面提出了UI的設計目標。基于對高校移動學習APP的UI的功能性需求分析和用戶研究，綜合分析八大黃金法則、20大UI設計原則，本文認為，此次UI設計應當滿足清晰性、可靠性、高效性和激勵性四個方面的要求。

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

(二)可靠性。讓學習者感受到交互是安全的、符合預期的，學習者能夠控制與平臺的交互。允許學習者根據自己的需求來控制界面，通過消息提示、對話框等多種方式給予學習者充分的指導和反饋等。

(三)高效性。借助簡單的操作，學習者能夠快速、高效地查找目標內容或資源，完成學習任務。通過貼心的工具設計和常用工具的快捷設計大大簡化用戶的工作量等。

(四)激勵性。讓學習者感受到移動學習APP的實用性、新穎性、趣味性，以提高用戶粘性和忠誠度，激勵學習者未來繼續使用產品。

四、系統功能需求分析

基于對高校移動學習APP的設計定位和總體分析，UI的功能性需求主要包括課程學習、學習支持、交流討論和系統服務四個方面，具體闡述如下。

(一)課程學習。課程學習是移動學習APP的重要功能。其中學習資源的設計與呈現是移動學習平臺的設計重點。

(二)學習支持。為了更好地支持課堂教學、促進深度學習，移動學習平臺應當提供作業、通知、測試等學習支持，使移動學習平臺能夠滿足非正式環境中的個體學習需求以及正式學習環境中的課堂使用需求。

(三)交流討論。移動學習平臺應當充分發揮技術優勢，提供論壇等交流方式，可有力地促進師生之間、生生之間的隨時、有效的溝通。

(四)系統服務。作為一個系統平臺，移動學習平臺應當提供必需的系統服務。系統服務主要包括系統操作、賬號管理和系統版本等。

五、UI設計與實現

(一)系統UI框架。基于上文對高校移動學習APP系統需求的分析和總結，結合UI的設計要求、性能目標和用戶體驗目標，最終確定了移動學習APP的組織架構，將用戶界面分為兩個層級。

一級界面。為了幫助學習者進行課程學習、促進學習者的個人學習、學習者與教師和同伴之間的交流互動，同時，為學習者提供方便的系統服務，移動學習APP的一級界面確定為“課程中心”、“課堂筆記”、“學習論壇”、“我的課程”、”更多”。這五個一級界面也將作為移動學習APP的五個功能模塊，作為五個菜單項組合成一個固定菜單，為學習者提供全局導航。

二級界面。基于一級界面，結合學習情境，二級界面確定如下：”課程中心”的二級界面為“課程首頁”；”課堂筆記”的二級界面為學習者所記錄的所有筆記；”學習論壇”的二級界面為“論壇主題”；“我的課程”的二級界面為“資源列表”；“更多”的二級界面為功能列表，包括“退出系統”、“關于版本”等。

(二)系統手勢操作。手勢操作是學習者與移動學習平臺的互動方式，對用戶體驗有直接而且重要的影響。目前移動設備中常用的手勢包括單擊、雙擊、滑動、拖拽、長按、縮放等多種類型。

針對高校移動學習場景學習需求，結合學習者認知習慣，遵循手勢設計的基本原則，高校移動學習APP的一系列的手勢，如下表所示。

手勢作用具體應用單擊打開對象所有按鈕、圖標等雙擊將對象全屏將圖片、文字等放大至全屏滑動切換屏幕切換同級萊單縮放縮放對象縮放圖片、文字等資源下拉刷新數據更新內容長按顯示更多功能查找功能

(三)頁面結構及導航設計。為了保持布局的一致性，提高UI的清晰性和易用性，移動學習APP的UI的界面基本組成元素從上到下一次為狀態欄、導航欄、內容區和菜單欄。其中，狀態欄可以直接使用移動設備系統狀態亂，菜單欄可以具體UI針對具體學習情境進行微調即可。

為了提供清晰、方便的導航，移動學習APP的導航設計可以分為全局導航和局部導航，具體闡述如下：

1、全局導航。基于上文對系統架構和界面結構的分析，移動學習APP的全局導航包括“課程中心”、“課堂筆記”、“學習論壇”、“我的課程”、”更多”五個菜單項，以菜單的形式固定在界面底部。

2、局部導航。第一種形式是界面中的按鈕、圖文按鈕等按鈕導航。第二種形式是界面中的內容提供導航，如標簽導航、宮格導航、列表導航、tab導航、組合導航等。

通過全局導航，學習者可以始終明確當前所處位置，并方便地跳轉到不同模塊。局部導航幫助學習者從當前界面快速跳轉到其它界面。兩種導航方式結合可以確保學習者始終不迷航，并且能夠快速進入指定界面。

六、總結

本文首先梳理了移動學習平臺、及UI設計的概念、研究范圍、相關理論及研究現狀。基于前人的研究成果，包括設計理念和功能框架，結合移動學習APP的設計目標，本文闡述了移動學習APP的UI設計理念與UI實現的總體方案與核心技術框架。

隨著移動互聯網的發展，移動學習己經成為一種新的教育現象，而高校已經成為移動學習的主要陣地。移動學習平臺作為一種新的網絡學習平臺，有利于構建課堂內外無縫銜接的一體化學習環境，還能促進學生開展系統學習和深度學習。移動學習平臺的UI(用戶界面)作為學習者與移動學習平臺進行交互的媒介，其設計質量直接影響著學習者的學習體驗。隨著用戶體驗的普及，人們開始追求實用性和享受性的雙重目標。因此，移動學習平臺的UI設計至關重要。