基于Android平臺(tái)的學(xué)生考勤系統(tǒng)的交互設(shè)計(jì)

朱莉萍 黃吉蘭

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

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

中圖分類號(hào)：TP302.2 文獻(xiàn)標(biāo)識(shí)碼：ADOI：10.3969/j.issn.l003-6970.2017.08.016

引言

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

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

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

1.1 功能設(shè)計(jì)

管理員：信息管理和數(shù)據(jù)維護(hù)，如導(dǎo)入、修改教師和學(xué)生數(shù)據(jù)，導(dǎo)入課程、班級(jí)名單等，對(duì)異常數(shù)據(jù)進(jìn)行處理和修復(fù)。

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

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

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

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

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

2.1 線框圖

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

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

2.2 頁面流程圖

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

2.3 原型設(shè)計(jì)

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

3 可用性測試

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

3.1 測試方案

3.1.1 專家評(píng)測

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

3.1.2 用戶評(píng)測

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

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

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

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

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

4 總結(jié)

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