朱莉萍 黃吉蘭

摘要：本文筆者結(jié)合所在院?？记诠ぷ鞯膶嶋H需要，設(shè)計開發(fā)基于Andrmd平臺的學生考勤系統(tǒng)。在完成了前期需求分析和設(shè)計概要基礎(chǔ)上，對App系統(tǒng)進行交互設(shè)計，以提升用戶的操作流程體驗。根據(jù)交互設(shè)計流程和規(guī)范，分析系統(tǒng)需實現(xiàn)的功能，完成App線框圖、流程圖的繪制，原型設(shè)計，可用性測試。在測試后又對線框圖、流程圖、原型進行了修改與完善。

關(guān)鍵詞：交互設(shè)計；Android；原型設(shè)計；可用性測試

中圖分類號：TP302.2 文獻標識碼：ADOI：10.3969/j.issn.l003-6970.2017.08.016

引言

在互聯(lián)網(wǎng)及移動通信技術(shù)高速發(fā)展的今天，傳統(tǒng)的課堂點名方式顯得尤為落后。通過點名方式可以提高出勤率，進而增強班級課堂管理、促進學習氛圍和積極性，因此許多高校都在進行考勤改革，有的也將課堂出勤率納入教師考核當中。為了提高簽到效率，同時方便教師或教務處及時查詢考勤統(tǒng)計數(shù)據(jù)，進行本學生考勤系統(tǒng)App的開發(fā)。要能夠同時滿足學生和教師，提高簽到效率和準確性。

1 考勤系統(tǒng)需求分析

本系統(tǒng)的主要目的是設(shè)計實現(xiàn)一個基于Android的學生考勤系統(tǒng)App，僅供三類人員使用：管理員、教師、學生。管理員具有最高權(quán)限，學生和教師賬號均由管理員分配，按照默認的學號和工號進行登錄，指定統(tǒng)一的初始密碼，可自行修改。教師有發(fā)布通知公告、調(diào)停課、生成簽到碼、查詢權(quán)限，學生僅有請假、簽到、查詢權(quán)限。

1.1 功能設(shè)計

管理員：信息管理和數(shù)據(jù)維護，如導入、修改教師和學生數(shù)據(jù)，導入課程、班級名單等，對異常數(shù)據(jù)進行處理和修復。

教師：查看課程和課時、調(diào)停課情況，查看所授課程班級名單，發(fā)布公告，進行調(diào)停課，生成簽到碼，查看學生請假信息，查看出勤率及遲到曠課學生名單等。

學生：通過wifi定位教學地點后輸入教師發(fā)布的簽到碼進行簽到，查看當天的出勤情況，查看每門課程的出勤情況，查看當前學期的課程和總出勤率，查看公告，請假等。

1.2 框架設(shè)計（信息架構(gòu)圖）

根據(jù)需求分析中的功能設(shè)計，對系統(tǒng)的功能進行梳理并分類歸納，從用戶行為、內(nèi)容結(jié)構(gòu)、數(shù)據(jù)關(guān)系等角度進行分析，得出信息架構(gòu)圖。這是交互設(shè)計流程中的一個基本步驟。后期的界面設(shè)計、數(shù)據(jù)庫設(shè)計等都要以此圖為藍本進行開發(fā)設(shè)計。需要注意的是，本系統(tǒng)面向三類用戶，各自擁有的權(quán)限不同，根據(jù)功能的定位和信息架構(gòu)層級之間的關(guān)系，列出每一個層級涉及的所有操作。圖1，圖2是僅包含部分子系統(tǒng)部分層級的信息架構(gòu)圖。

2 系統(tǒng)交互設(shè)計

2.1 線框圖

線框圖是App系統(tǒng)設(shè)計的重要部分，通過繪制線框圖可以清晰地展現(xiàn)App的頁面、結(jié)構(gòu)、功能和用戶行為。線框圖一般包含文字、圖片、視頻等，多用簡潔的線框、占位符等表示圖標、文本等。總之，線框圖就是用線條、圖形等描繪出的App系統(tǒng)框架，從而描述頁面功能與內(nèi)容的邏輯關(guān)系。

線框圖可以手繪，也可以利用軟件工具輔助繪制，可以選用的工具有UxPin，Balsamiq Mockups、Justinmind，Axure，Visio等。其中的Axure是美國Axure Software Solution公司的產(chǎn)品，是一個專業(yè)的快速原型設(shè)計工具，能夠快速創(chuàng)建應用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。本系統(tǒng)主要采用Axure進行繪制，主要的線框圖如圖3所示。

2.2 頁面流程圖

如圖4所示，這個階段是利用相關(guān)工具完成頁面邏輯圖的繪制。頁面流程圖主要描述頁面流轉(zhuǎn)的關(guān)系，也就是用戶通過當前什么操作進入了什么頁面，以及后續(xù)的操作和頁面。換句話來說，就是要設(shè)計頁面之間的行為路徑，這對前端開發(fā)非常重要，可為編寫代碼做重要參考。理順了交互流程邏輯，才能提升用戶的操作流程體驗。

2.3 原型設(shè)計

如圖5所示，原型圖是App用戶界面的高保真模型，可以模擬用戶和界面之間的交互。制作App原型的主要目的是在實際開發(fā)之前測試系統(tǒng)的功能和可用性。原型設(shè)計在整個交互設(shè)計中處于最重要位置，因為它既要展現(xiàn)界面元素，還要實現(xiàn)功能的邏輯。本系統(tǒng)同樣采用Axure進行原型設(shè)計，完成所有的按鈕動作、頁面跳轉(zhuǎn)、提示信息的交互設(shè)計。

3 可用性測試

在完成好以上交互設(shè)計流程后，就需要對原型進行測試了。尋找合適的測試者，在測試中記錄發(fā)現(xiàn)的問題并及時解決。

3.1 測試方案

3.1.1 專家評測

先找多位交互設(shè)計專家對原型進行測試，找出問題后，修改線框圖，調(diào)整流程，更新原型，再次測試。

3.1.2 用戶評測

當前的交互設(shè)計都是以用戶體驗為核心的，在學院內(nèi)各找五位以上學生和教師分別使用原型Demo，記錄下問題和疑問，逐項詢問用戶在使用過程中的感受和體會，通過搜集和整理用戶意見，修改線框圖、原型，重新進行可用性測試。

3.2 測試記錄分析和改善（1）教師端獲取班級名單應以教學班而非行政班的形式列出，對出勤率的統(tǒng)計也應當以教學班為單位，班級名單中除了學號姓名，還應該顯示聯(lián)系電話，電話可點擊并直接撥打；

（2）學生端課程界面，有的課程名稱很長，一行上同時顯示課程編號、名稱及授課教師不一定顯示完整，修改為手指向左右滑動，顯示出全部數(shù)據(jù)；（3）“我的”“設(shè)置”“退出登錄”的位置不容易找到，提升層級，修改在“我的”頁面中，位于最下方的長方形按鈕；

（4）教師測試者提出能否查看到班級中的班委名單，對經(jīng)常遲到曠課的學生標紅顯示?？蛇x擇的修改方式有在“班級名單”頁面中添加一個“班委”按鈕，可轉(zhuǎn)入“班委名單”頁面，顯示班委的學號、姓名、職務、聯(lián)系方式。對遲到達到多少節(jié)數(shù)的學生在班級名單顯示中以黃色顯示，對曠課達到多少節(jié)數(shù)的學生在班級名單顯示頁面中以紅色顯示。

（5）學生測試者提出疑問：簽到碼輸入和提交時間只有兩分鐘，如果遲到五分鐘無法完成簽到，怎么判斷為遲到還是曠課？根據(jù)學院規(guī)章制度，遲到十分鐘以上為曠課，故在學生簽到界面增加一個遲到補簽按鈕，教師端生成簽到碼后兩分鐘內(nèi)學生端簽到按鈕可點擊，兩分鐘后簽到按鈕不可點擊，遲到補簽按鈕可點擊，十分鐘后，兩個按鈕都不能點擊。

4 總結(jié)

通過交互設(shè)計的一系列流程，完成了信息架構(gòu)圖、線框圖、流程圖、原型的設(shè)計，并進行了可用性測試，在測試基礎(chǔ)上修改完善設(shè)計。后續(xù)在確定的原型設(shè)計基礎(chǔ)上進行代碼開發(fā)，以求盡快將此APP系統(tǒng)用于本學院課堂考勤，真正有益于教師和學生。