一種門禁控制管理系統(tǒng)的UI設(shè)計(jì)和Visual C++實(shí)現(xiàn)

宋維

（廣東科學(xué)技術(shù)職業(yè)學(xué)院 廣東 廣州 510640）

蘋果Macintosh之父Jef Raskin曾說(shuō)過(guò)：“對(duì)消費(fèi)者而言，界面就是產(chǎn)品?！盵1]目前關(guān)于UI設(shè)計(jì)的理念很多，范圍廣泛。如“以用戶為中心”，“以人為本”[2]、“能用、會(huì)用、好用、快用”等各種原則和方法在各類文獻(xiàn)中都有闡述，范圍涉及到計(jì)算機(jī)科學(xué)、人體工程學(xué)、心理學(xué)多種學(xué)科的內(nèi)容。本文以實(shí)際的門禁控制管理系統(tǒng)產(chǎn)品為例，對(duì)現(xiàn)代UI設(shè)計(jì)原則容易被忽略的部分和與特定應(yīng)用不能完全對(duì)應(yīng)的不足之處進(jìn)行補(bǔ)充和再整理后提煉出符合本系統(tǒng)要求的UI設(shè)計(jì)基本原則，并在門禁控制管理軟件產(chǎn)品的開(kāi)發(fā)過(guò)程中按照這些原則進(jìn)行實(shí)踐，探討了如何按照這些原則的要求開(kāi)發(fā)成功滿足用戶要求的門禁控制管理系統(tǒng)產(chǎn)品。

1 系統(tǒng)結(jié)構(gòu)及工作原理

本文所涉及的門禁系統(tǒng)由控制器、讀卡器、電子鎖、出門開(kāi)關(guān)、識(shí)別卡和通訊轉(zhuǎn)換器、管理主機(jī)服務(wù)器、門禁控制管理軟件等組成。其中控制器、讀卡器、電子鎖、出門開(kāi)關(guān)、識(shí)別卡構(gòu)成基本的門禁控制單元設(shè)備?？刂破饔梢慌_(tái)微處理機(jī)相應(yīng)的外圍電路組成，由它和上位機(jī)門禁控制管理軟件系統(tǒng)來(lái)共同決定某一張是否為本系統(tǒng)已注冊(cè)的有效卡，該卡是否符合所限定的時(shí)間段和卡開(kāi)門權(quán)限等。系統(tǒng)結(jié)構(gòu)如圖1所示。

門禁控制管理系統(tǒng)建立在計(jì)算機(jī)技術(shù)、通信技術(shù)及非接觸式IC卡技術(shù)之上[3]，目的是為了有效的控制人員的出入，并且記錄所有出入的詳細(xì)情況，為門禁出入控制提供安全、方便的管理。具體包含發(fā)卡、出入授權(quán)、實(shí)時(shí)監(jiān)控、出入查詢及查詢報(bào)表等；控制器可以聯(lián)網(wǎng)和脫機(jī)工作；通訊轉(zhuǎn)換器根據(jù)使用場(chǎng)合不同，不同廠家的產(chǎn)品可供選擇使用；門禁的出入紀(jì)錄可以作為考勤依據(jù)；門禁控制管理系統(tǒng)同時(shí)也可兼做巡更，巡更人員刷卡時(shí)會(huì)紀(jì)錄刷卡信息但不會(huì)開(kāi)門。

系統(tǒng)的工作過(guò)程為：用戶通過(guò)IC門卡刷卡，控制器對(duì)讀卡器模塊讀到的門卡信息進(jìn)行接收操作，然后對(duì)接收到的內(nèi)容進(jìn)行解析后通過(guò)串行通訊和網(wǎng)絡(luò)通訊的方式傳送給服務(wù)器，服務(wù)器上的門禁控制管理軟件完成各種門禁信息的顯示和數(shù)據(jù)管理。本文重點(diǎn)討論服務(wù)器上門禁控制管理軟件的UI設(shè)計(jì)和實(shí)現(xiàn)。

2 門禁控制管理系統(tǒng)UI設(shè)計(jì)的原則

圖1 門禁系統(tǒng)總體結(jié)構(gòu)圖Fig.1 The overall architecture of access control system

UI（User Interface）設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)[4]。軟件設(shè)計(jì)要注重實(shí)用性、功能性，界面是軟件功能的體現(xiàn)，如果界面出乎尋常、不符合用戶的使用習(xí)慣算是失敗的設(shè)計(jì)。本門禁管理控制系統(tǒng)設(shè)計(jì)的基本目標(biāo)為：

持有效卡人能很方便的進(jìn)出門。

沒(méi)有卡或持無(wú)效卡的人不能進(jìn)出門。

出現(xiàn)異常情況，能通過(guò)電腦軟件方便的查詢到某人某時(shí)的出入詳細(xì)紀(jì)錄。

管理人員能隨時(shí)控制每張卡的進(jìn)出權(quán)限。

簡(jiǎn)潔高效的用戶接口，容易上手的操作和管理。

為了滿足上述目標(biāo)，需要對(duì)UI的主要界面元素進(jìn)行歸類，然后根據(jù)目標(biāo)將所形成的類別體現(xiàn)到軟件設(shè)計(jì)中去。通過(guò)歸類，本系統(tǒng)形成的軟件主界面如圖2所示。

圖2 Door Control門禁管理系統(tǒng)主界面Fig.2 Main UIof"Door Control"access controlmanagement system

如圖所示，根據(jù)門禁管理系統(tǒng)的需求，將整個(gè)UI分成菜單欄，工具欄，主框架幾個(gè)主要部分。其中主框架完成門禁系統(tǒng)中具體信息的呈現(xiàn)工作，又分為左右兩部分視圖。左邊框視圖為樹(shù)形列表，右邊主體視圖為列表框。系統(tǒng)主要操作模式是：通過(guò)左邊框視圖內(nèi)不同樹(shù)節(jié)點(diǎn)的選取，在右邊列表框視圖中展示不同類別的具體信息。系統(tǒng)的主要功能分為如下幾個(gè)類別：

“出入統(tǒng)計(jì)”對(duì)一個(gè)時(shí)間段內(nèi)的任何出入門記錄進(jìn)行查詢。

“用戶查詢”對(duì)使用本門禁系統(tǒng)的所有持卡用戶的信息進(jìn)行管理。

“門卡查詢”對(duì)系統(tǒng)發(fā)卡產(chǎn)生的所有門卡信息進(jìn)行查詢。

“硬件設(shè)置”對(duì)門禁管理系統(tǒng)和門禁下位機(jī)的通訊參數(shù)，以及對(duì)門禁主機(jī)即控制器的運(yùn)行參數(shù)進(jìn)行設(shè)置，包括通訊端口設(shè)置、串行控制器設(shè)置、網(wǎng)絡(luò)控制器設(shè)置和通道設(shè)置。通道設(shè)置是針對(duì)一臺(tái)門禁主機(jī)具有多個(gè)讀卡器或者多門控制的情況，對(duì)每個(gè)獨(dú)立通道的配置參數(shù)進(jìn)行設(shè)置。

“收費(fèi)查詢”是對(duì)出入產(chǎn)生的收費(fèi)費(fèi)用進(jìn)行統(tǒng)計(jì)查詢。

“實(shí)時(shí)監(jiān)控”是對(duì)開(kāi)關(guān)門的動(dòng)作即時(shí)在軟件界面上進(jìn)行監(jiān)控。

“日志查詢”是軟件使用者在對(duì)門禁管理系統(tǒng)軟件進(jìn)行操作時(shí)產(chǎn)生的日志進(jìn)行查詢。

在本門禁管理控制系統(tǒng)的UI設(shè)計(jì)中，提出如下原則：

1）“主要功能優(yōu)先展示”的原則。通常軟件使用者在遇到一款新軟件的時(shí)候，首先希望在不需要閱讀說(shuō)明書大量文字的情況下明白這款軟件是做什么的，希望在不費(fèi)太多功夫的情況下就能夠操作軟件。為此，本門禁管理系統(tǒng)在設(shè)計(jì)時(shí)按照這樣的原則對(duì)左邊框樹(shù)形視圖的葉節(jié)點(diǎn)順序進(jìn)行調(diào)整，將“出入統(tǒng)計(jì)”排列在第一條位置以方便用戶以從上到下最近的順序點(diǎn)擊鼠標(biāo)切換到“出入統(tǒng)計(jì)”，如圖3所示；并設(shè)定默認(rèn)顯示值，在軟件主界面啟動(dòng)后立即顯示“今天”，即軟件使用當(dāng)日的所有出入記錄事件，而其它日期內(nèi)的出入記錄通過(guò)另外的界面元素進(jìn)行查詢。這樣設(shè)計(jì)的原因是考慮到使用者使用本軟件最重要的目的是想知道今天已經(jīng)有哪些人出入過(guò)，誰(shuí)來(lái)誰(shuí)沒(méi)來(lái)，這也是門禁作為一個(gè)安全管理系統(tǒng)的最基本需求，因此在設(shè)計(jì)時(shí)優(yōu)先和默認(rèn)就實(shí)現(xiàn)了 “出入統(tǒng)計(jì)”功能，使得使用者能夠在登錄后不操作軟件的情況下就能使用軟件。

圖3 門禁管理系統(tǒng)左視圖葉節(jié)點(diǎn)界面與分類Fig.3 The left view leaf node and classification of UIItem

2）“幫助導(dǎo)向性原則”。即軟件使用者在操作軟件時(shí)，在完成任何軟件操作動(dòng)作后，比如菜單或工具條的點(diǎn)擊，樹(shù)形視圖節(jié)點(diǎn)的點(diǎn)擊，按鍵的按下，鼠標(biāo)右鍵的點(diǎn)擊后，所產(chǎn)生的下一界面應(yīng)該具有提示性，使得用戶能夠在此基礎(chǔ)上再進(jìn)行更加深入的操作。如系統(tǒng)在選擇不同的視圖時(shí)對(duì)應(yīng)的工具欄圖標(biāo)會(huì)自動(dòng)被禁止和允許使用，即圖標(biāo)變灰和恢復(fù)，這樣只有跟當(dāng)前視圖展示內(nèi)容有關(guān)的工具欄圖標(biāo)才能被鼠標(biāo)點(diǎn)擊，無(wú)關(guān)的功能不需要也無(wú)法點(diǎn)選工具欄，事實(shí)上形成了一種幫助。這里也符合下面一條原則。“幫助導(dǎo)向性原則”也是一般軟件UI功能設(shè)計(jì)應(yīng)該遵循的原則。

3）“自動(dòng)禁止無(wú)關(guān)內(nèi)容”的原則。即軟件使用者在進(jìn)行任何軟件操作動(dòng)作后，所產(chǎn)生的下一界面應(yīng)該自動(dòng)根據(jù)系統(tǒng)當(dāng)前所處的視圖、當(dāng)前任務(wù)和鼠標(biāo)的位置產(chǎn)生不同界面。比如“人員統(tǒng)計(jì)”視圖中，當(dāng)點(diǎn)擊鼠標(biāo)右鍵菜單時(shí)，如果鼠標(biāo)點(diǎn)擊的位置在空白處，則右鍵菜單中的“刪除條目”子菜設(shè)置為灰色不可用。如果鼠標(biāo)點(diǎn)擊的位置剛好在某條人員信息條目上，則右鍵菜單中的“刪除條目”子菜單可用。這樣可以避免軟件使用者產(chǎn)生在空白處點(diǎn)擊鼠標(biāo)右鍵彈出菜單時(shí)多出來(lái)的“刪除條目”項(xiàng)到底有什么用的疑問(wèn)，而在需要?jiǎng)h除某個(gè)條目時(shí)候能夠省去選擇條目時(shí)要先點(diǎn)擊一次鼠標(biāo)左鍵的步驟。

4）“主要操作流程越短越好”的原則。這里說(shuō)的主要操作流程，是指使用該軟件最常用功能的操作步驟，或者軟件使用者在使用軟件各項(xiàng)功能時(shí)所形成的操作步驟里，在頻率上靠前的操作流程。主要操作流程最好不要超過(guò)五步，過(guò)多的步驟容易引起軟件使用者的不耐煩和畏難情緒，直接導(dǎo)致對(duì)軟件的易操作性產(chǎn)生不好的評(píng)價(jià)。雖然是否容易操作在一定程度上只是用戶的主觀感受，而且深受用戶已有操作習(xí)慣的影響，但是如果主要流程都簡(jiǎn)單短小，可以通過(guò)很簡(jiǎn)單的操作步驟得到結(jié)果，對(duì)用戶是一種便利，能夠提高軟件的使用效率并利于降低軟件使用的培訓(xùn)成本。在本系統(tǒng)中，以日志查詢?yōu)槔?，其流程為：鼠?biāo)切換視圖、鼠標(biāo)右鍵點(diǎn)擊彈出菜單，點(diǎn)擊“查詢?nèi)罩尽弊硬藛危齻€(gè)步驟即可顯示結(jié)果，顯得非常便捷。如果要進(jìn)行更復(fù)雜的操作，比如查詢一個(gè)時(shí)間段內(nèi)的操作日志，則第三步選擇“按時(shí)間段查詢?nèi)罩尽弊硬藛危缓蟮谒牟皆趶棾龅膶?duì)話框中點(diǎn)選時(shí)間，然后點(diǎn)擊確定，整個(gè)過(guò)程不超過(guò)五步，符合“操作流程最好不要超過(guò)五步”的原則。另外，軟件使用者在頻繁進(jìn)行的“查詢?nèi)罩尽钡娜讲僮髦行纬闪瞬僮髁?xí)慣，這種操作習(xí)慣類似于一種幫助和暗示，在進(jìn)行更復(fù)雜的“按時(shí)間段查詢?nèi)罩尽辈僮鲿r(shí)會(huì)依照這個(gè)習(xí)慣和暗示，整個(gè)操作流程的設(shè)計(jì)也體現(xiàn)了第2個(gè)原則“幫助導(dǎo)向性原則”。

整個(gè)門禁控制管理系統(tǒng)的UI設(shè)計(jì)遵循著以上4個(gè)原則，使得軟件比較符合用戶的使用習(xí)慣，體現(xiàn)出一定的實(shí)用性和操作便利性。

3 門禁控制管理系統(tǒng)界面接口的Visual C++編程實(shí)現(xiàn)

門禁控制管理系統(tǒng)的UI通過(guò)Visual C++實(shí)現(xiàn)。系統(tǒng)的主界面由兩部分組成：第一部分是由TreeView構(gòu)成的左邊欄視圖，可以選取樹(shù)形視圖的各葉子節(jié)點(diǎn)，以完成管理查詢主要功能的下一步操作。另一部分為中間靠右邊的主視圖，根據(jù)左視圖選取的葉節(jié)點(diǎn)的不同而呈現(xiàn)出不同的視圖。這樣就把需求分析中體現(xiàn)的業(yè)務(wù)主要流程的類別和左視圖的各節(jié)點(diǎn)選擇結(jié)合起來(lái)了。在編程實(shí)現(xiàn)上，這里涉及到幾個(gè)主要問(wèn)題：

1）如何形成左邊視圖和中間視圖的雙視圖結(jié)構(gòu)。

2）在鼠標(biāo)點(diǎn)選左視圖節(jié)點(diǎn)后，中間不同視圖如何切換。

對(duì)于第一個(gè)問(wèn)題，可以通過(guò)在顯示視圖之前先通過(guò)主框架MainFrame顯示一個(gè)切分窗口，再通過(guò)切分窗口創(chuàng)建左和中兩個(gè)視圖來(lái)進(jìn)行。MFC提供了CSplitterWnd類的Create Static函數(shù)可以用來(lái)創(chuàng)建切分窗口。首先從CSplitterWnd派生出一個(gè)CFrameClientWnd類，以便后期對(duì)CSplitterWnd的一些特性進(jìn)行修改，如分割窗口分割條的寬度等，然后給主框架類添加成員變量：

CFrameClientWnd m_wndSplitter；

然后重載主框架類的OnCreateClient消息處理函數(shù)，先創(chuàng)建切分窗口，再通過(guò)切分窗口的CreateView函數(shù)創(chuàng)建左視圖和主視圖。具體代碼如下[5]：

m_wndSplitter.CreateStatic（this，1，2）；

m_wndSplitter.CreateView （0,0,RUNTIME_CLASS（CLeftTreeView），CSize（200，200），pContext）；

m_wndSplitter.CreateView （0，1，RUNTIME_CLASS（CDoorCtrlSWView），CSize （200，200）,pContext）；m_pLeftView=（CLeftTreeView*）m_wndSplitter.GetPane（0，0）；

其中切分窗口類的GetPane（x，y）函數(shù)用來(lái)得到左視圖和主視圖指針，以便隨后在程序需要的任何地方可以使用這個(gè)指針。

對(duì)于第二個(gè)問(wèn)題在鼠標(biāo)點(diǎn)選左視圖節(jié)點(diǎn)后，中間視圖要切換為理想的視圖，程序?qū)崿F(xiàn)時(shí)首先要重載左樹(shù)形視圖的TVN_SELCHANGED消息函數(shù)：

CLeftTreeView::OnSelchanged （NMHDR* pNMHDR，LRESULT*pResult）

通過(guò)取得該View的樹(shù)形控件指針進(jìn)而獲得被選中的葉子節(jié)點(diǎn)，以便決定要切換到哪個(gè)視圖。

CTreeCtrl*pCtrl=&GetTreeCtrl（）；

HTREEITEM hSelItem=pCtrl-＞GetSelectedItem（）；

hSelItem即代表被選中的葉子節(jié)點(diǎn)項(xiàng)，如果沒(méi)有節(jié)點(diǎn)項(xiàng)被選擇，則顯示默認(rèn)主視圖，如果有節(jié)點(diǎn)被選中，則遍歷整個(gè)樹(shù)形控件的各節(jié)點(diǎn)，根據(jù)節(jié)點(diǎn)文本來(lái)判斷當(dāng)前被選中的是哪個(gè)節(jié)點(diǎn)。

CString strCaption=pCtrl-＞GetItemText（hSelItem）；

If （strCaption==” 門卡查詢”） pMainFrame-＞Hand Over ToView（DEFAULTVIEW）；

pMainFrame是指向主框架類的指針。比如當(dāng)前用戶鼠標(biāo)點(diǎn)擊從“出入統(tǒng)計(jì)”葉節(jié)點(diǎn)到“門卡查詢”葉節(jié)點(diǎn)，則中間主視圖也要從“出入統(tǒng)計(jì)”視圖切換到“門卡查詢”視圖。這種切換是通過(guò)刪除切分窗口的第二個(gè)視圖，然后重新創(chuàng)建它來(lái)完成的。

CView*pView= （CView*）m_wndSplitter.GetPane（0，1）；

首先通過(guò)切分窗口GetPane函數(shù)獲得切分窗口的第二個(gè)視圖指針pView，該pView可能指向默認(rèn)視圖CDoorCtrlSWView，也可能指向其它主視圖，實(shí)際上，根據(jù)門禁系統(tǒng)的需求，左邊葉節(jié)點(diǎn)分為多少類，就可以定義多少種主視圖，這里獲得pView主要是為了下一步判斷當(dāng)前視圖是哪種。這里以兩種主視圖為例，默認(rèn)創(chuàng)建CDoorCtrlSWView視圖，切換后創(chuàng)建CCenterListView視圖。下一步程序處理要從“出入統(tǒng)計(jì)”視圖CDoorCtrlSWView切換到“門卡查詢”視圖CCenterListView：

m_wndSplitter.DeleteView（0，1）；

m_wndSplitter.Create View（0，1，RUNTIME_CLASS（CCenter ListView），

CSize（1280，800)，NULL）；

m_wndSplitter.RecalcLayout()；

m_pCenterView=（CCenterListView*）m_wndSplitter.GetPane（0，1）；

通過(guò)以上幾句代碼就完成了主視圖的切換。其中m_wndSplitter是切分窗口類的對(duì)象，可以理解為主框架下的主框架，所有視圖都通過(guò)切分窗口創(chuàng)建。切分窗口是在MFC類庫(kù)中定義的，有幾個(gè)重要函數(shù)調(diào)用，DeleteView是刪除某個(gè)視圖，CreateView是創(chuàng)建某個(gè)視圖，RecalcLayout是在創(chuàng)建完成后重新布局窗口，GetPane是取得已創(chuàng)建視圖的指針[6]。

對(duì)于鼠標(biāo)右鍵快捷菜單的創(chuàng)建很簡(jiǎn)單，只要在鼠標(biāo)右鍵消息處理函數(shù)中調(diào)用：

CMenu menu；

menu.CreatePopupMenu（）；

menu.AppendMenu（MF_ENABLED,

ID_LISTPOPMENU_QUEUECARD，_T （“ 查 詢 門卡：））；

AppendMenu是用來(lái)給右鍵快捷菜單增加子菜單條目的，然后根據(jù)當(dāng)前視圖中鼠標(biāo)的位置和選擇的條目（如果是列表框）來(lái)進(jìn)行條件判斷，如果符合條件則多增加相應(yīng)的子菜單條目，比如在彈出右鍵菜單之前如果鼠標(biāo)點(diǎn)擊了某條主列表視圖的門卡記錄，則根據(jù)當(dāng)前選中的記錄可以增加一項(xiàng)快捷菜單子條目：

menu.AppendMenu （pNMListView -＞iItem == -1 MF_GRAYED:MF_ENABLED，

ID_LISTPOPMENU_DELETECARD，_T（“刪除門卡”））；

如果點(diǎn)擊鼠標(biāo)右鍵，彈出菜單之前沒(méi)有在列表主視圖中選擇任何門卡記錄，則上述代碼自然不會(huì)增加"刪除門卡"子菜單項(xiàng)。在程序設(shè)計(jì)和編程實(shí)現(xiàn)時(shí)，通過(guò)多關(guān)注這種菜單灰色禁止條件的實(shí)現(xiàn)方式，就可以實(shí)現(xiàn)本文提出的UI設(shè)計(jì)“自動(dòng)禁止無(wú)關(guān)內(nèi)容”，也符合 “幫助導(dǎo)向性”原則。

以上為門禁管理控制系統(tǒng)UI的編程實(shí)現(xiàn)的主要過(guò)程，按照上文提出的4個(gè)UI設(shè)計(jì)原則，很好的完成了門禁控制管理系統(tǒng)。

4 結(jié)束語(yǔ)

本文討論了Windows環(huán)境下門禁控制管理軟件的UI設(shè)計(jì)原則和Visual C++實(shí)現(xiàn)。遵循“主要操作流程越短越好”的原則，通過(guò)屏幕左邊樹(shù)狀視圖節(jié)點(diǎn)的選擇完成中間主視圖的切換，以及在開(kāi)發(fā)過(guò)程中遵循“自動(dòng)禁止無(wú)關(guān)內(nèi)容”和“幫助導(dǎo)向性”等原則使得系統(tǒng)呈現(xiàn)出美觀、簡(jiǎn)潔、易操作的特點(diǎn)。

[1]藺慧麗.以用戶為中心的信息系統(tǒng)UI設(shè)計(jì)[J].硅谷，2013（1）:226，232.

[2]楊獻(xiàn)之.現(xiàn)代產(chǎn)品中人機(jī)界面設(shè)計(jì)的研究——基于以人為本的視角[J].金陵科技學(xué)院學(xué)報(bào)，2012，28（2）:37-40.

[3]姜波，李瑞，何培重.基于VC++的門禁管理系統(tǒng)設(shè)計(jì)[J].中國(guó)儀器儀表，2010（3）:63-66.

[4]屠秀棟. 淺談UI設(shè)計(jì)[J].電腦知識(shí)與技術(shù)，2010，6（7）:1706-1707.

[5]Charles Petzold.Programming Windows-5th ed[M].Microsoft Press，1998.

[6]侯俊杰.深入淺出MFC[M].武漢：華中科技大學(xué)出版社，1999.