一种门禁控制管理系统的UI设计和Visual C++实现

2015-03-16宋维

电子设计工程 2015年24期

宋维

（广东科学技术职业学院广东广州 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设计原则，很好的完成了门禁控制管理系统。