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

宋維

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CFrameClientWnd m_wndSplitter；

然后重載主框架類的OnCreateClient消息處理函數(shù)，先創(chuàng)建切分窗口，再通過切分窗口的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ù)用來得到左視圖和主視圖指針，以便隨后在程序需要的任何地方可以使用這個指針。

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

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

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

CTreeCtrl*pCtrl=&GetTreeCtrl（）；

HTREEITEM hSelItem=pCtrl-＞GetSelectedItem（）；

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

CString strCaption=pCtrl-＞GetItemText（hSelItem）；

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

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

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

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

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

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

CMenu menu；

menu.CreatePopupMenu（）；

menu.AppendMenu（MF_ENABLED,

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

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

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

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

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

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

4 結(jié)束語

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

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

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

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

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

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

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