一種門禁控制管理系統的UI設計和Visual C++實現

宋維

（廣東科學技術職業學院 廣東 廣州 510640）

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

1 系統結構及工作原理

本文所涉及的門禁系統由控制器、讀卡器、電子鎖、出門開關、識別卡和通訊轉換器、管理主機服務器、門禁控制管理軟件等組成。其中控制器、讀卡器、電子鎖、出門開關、識別卡構成基本的門禁控制單元設備。控制器由一臺微處理機相應的外圍電路組成，由它和上位機門禁控制管理軟件系統來共同決定某一張是否為本系統已注冊的有效卡，該卡是否符合所限定的時間段和卡開門權限等。系統結構如圖1所示。

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

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

2 門禁控制管理系統UI設計的原則

圖1 門禁系統總體結構圖Fig.1 The overall architecture of access control system

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

持有效卡人能很方便的進出門。

沒有卡或持無效卡的人不能進出門。

出現異常情況，能通過電腦軟件方便的查詢到某人某時的出入詳細紀錄。

管理人員能隨時控制每張卡的進出權限。

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

為了滿足上述目標，需要對UI的主要界面元素進行歸類，然后根據目標將所形成的類別體現到軟件設計中去。通過歸類，本系統形成的軟件主界面如圖2所示。

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

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

“出入統計”對一個時間段內的任何出入門記錄進行查詢。

“用戶查詢”對使用本門禁系統的所有持卡用戶的信息進行管理。

“門卡查詢”對系統發卡產生的所有門卡信息進行查詢。

“硬件設置”對門禁管理系統和門禁下位機的通訊參數，以及對門禁主機即控制器的運行參數進行設置，包括通訊端口設置、串行控制器設置、網絡控制器設置和通道設置。通道設置是針對一臺門禁主機具有多個讀卡器或者多門控制的情況，對每個獨立通道的配置參數進行設置。

“收費查詢”是對出入產生的收費費用進行統計查詢。

“實時監控”是對開關門的動作即時在軟件界面上進行監控。

“日志查詢”是軟件使用者在對門禁管理系統軟件進行操作時產生的日志進行查詢。

在本門禁管理控制系統的UI設計中，提出如下原則：

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

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

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

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

4）“主要操作流程越短越好”的原則。這里說的主要操作流程，是指使用該軟件最常用功能的操作步驟，或者軟件使用者在使用軟件各項功能時所形成的操作步驟里，在頻率上靠前的操作流程。主要操作流程最好不要超過五步，過多的步驟容易引起軟件使用者的不耐煩和畏難情緒，直接導致對軟件的易操作性產生不好的評價。雖然是否容易操作在一定程度上只是用戶的主觀感受，而且深受用戶已有操作習慣的影響，但是如果主要流程都簡單短小，可以通過很簡單的操作步驟得到結果，對用戶是一種便利，能夠提高軟件的使用效率并利于降低軟件使用的培訓成本。在本系統中，以日志查詢為例，其流程為：鼠標切換視圖、鼠標右鍵點擊彈出菜單，點擊“查詢日志”子菜單，三個步驟即可顯示結果，顯得非常便捷。如果要進行更復雜的操作，比如查詢一個時間段內的操作日志，則第三步選擇“按時間段查詢日志”子菜單，然后第四步在彈出的對話框中點選時間，然后點擊確定，整個過程不超過五步，符合“操作流程最好不要超過五步”的原則。另外，軟件使用者在頻繁進行的“查詢日志”的三步操作中形成了操作習慣，這種操作習慣類似于一種幫助和暗示，在進行更復雜的“按時間段查詢日志”操作時會依照這個習慣和暗示，整個操作流程的設計也體現了第2個原則“幫助導向性原則”。

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

3 門禁控制管理系統界面接口的Visual C++編程實現

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

1）如何形成左邊視圖和中間視圖的雙視圖結構。

2）在鼠標點選左視圖節點后，中間不同視圖如何切換。

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

CFrameClientWnd m_wndSplitter；

然后重載主框架類的OnCreateClient消息處理函數，先創建切分窗口，再通過切分窗口的CreateView函數創建左視圖和主視圖。具體代碼如下[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）函數用來得到左視圖和主視圖指針，以便隨后在程序需要的任何地方可以使用這個指針。

對于第二個問題在鼠標點選左視圖節點后，中間視圖要切換為理想的視圖，程序實現時首先要重載左樹形視圖的TVN_SELCHANGED消息函數：

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

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

CTreeCtrl*pCtrl=&GetTreeCtrl（）；

HTREEITEM hSelItem=pCtrl-＞GetSelectedItem（）；

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

CString strCaption=pCtrl-＞GetItemText（hSelItem）；

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

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

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

首先通過切分窗口GetPane函數獲得切分窗口的第二個視圖指針pView，該pView可能指向默認視圖CDoorCtrlSWView，也可能指向其它主視圖，實際上，根據門禁系統的需求，左邊葉節點分為多少類，就可以定義多少種主視圖，這里獲得pView主要是為了下一步判斷當前視圖是哪種。這里以兩種主視圖為例，默認創建CDoorCtrlSWView視圖，切換后創建CCenterListView視圖。下一步程序處理要從“出入統計”視圖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是切分窗口類的對象，可以理解為主框架下的主框架，所有視圖都通過切分窗口創建。切分窗口是在MFC類庫中定義的，有幾個重要函數調用，DeleteView是刪除某個視圖，CreateView是創建某個視圖，RecalcLayout是在創建完成后重新布局窗口，GetPane是取得已創建視圖的指針[6]。

對于鼠標右鍵快捷菜單的創建很簡單，只要在鼠標右鍵消息處理函數中調用：

CMenu menu；

menu.CreatePopupMenu（）；

menu.AppendMenu（MF_ENABLED,

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

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

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

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

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

以上為門禁管理控制系統UI的編程實現的主要過程，按照上文提出的4個UI設計原則，很好的完成了門禁控制管理系統。

4 結束語

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

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

[2]楊獻之.現代產品中人機界面設計的研究——基于以人為本的視角[J].金陵科技學院學報，2012，28（2）:37-40.

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

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

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

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