qq界面设计.doc

2. 界面的关系图和工作流程图- 21 -机构图标企业即时通用户界面设计报告版 本 历 史版本/状态作者参与者起止日期备注1.0王鹏2006-05-220. 文档介绍0.1 文档目的本文用于指导软件分析和设计活动中用户界面的设计原则、设计步骤和设计方法。0.2 文档范围本文档包含以下几部分：1.应当遵循的界面设计规范2.界面的关系图和工作流程图3.主界面4.子界面5.美学设计6.界面资源设计7.其他0.3 读者对象本文仅用于指导软件开发部用户界面设计工作，同时作为其他分析和设计工作的参考资料。本文的预期读者是：设计员/软件工程师、程序员、界面设计员/美工。0.4 参考文献提示：列出本文档的所有参考文献（可以是非正式出版物），格式如下：标识符 作者，文献名称，出版单位（或归属单位），日期例如：AAA 作者，立项建议书，机构名称，日期SPP-PROC-SD SEPG，系统设计规范，机构名称，日期0.5 术语与缩写解释缩写、术语解 释UIUser Interface，用户界面。GUIGraphic User Interface，图形用户界面。FrmForm 的缩写btnButton 的缩写lblLabel 的缩写txtTextBox的缩写cmbComboBox 的缩写1. 应当遵循的界面设计规范本系统坚持图形用户界面（GUI）设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。用户界面设计的总体原则：统一。这也是本规范遵循的最高原则，用户界面的设计，无论是控件、信息提示措辞、界面配色等，都要遵循统一的标准，做到真正的一致。本规范的施行方法：针对用户界面设计的特殊性，用户界面设计规范队某些方面只进行原则性的规范，具体的内容（比如配色方案用暖色系还是冷色系等）应在每一个应用系统的开发启动之前，由项目小组根据应用系统自身的特点、系统用户对象的特点等信息，确立每一个部分的具体内容，然后在应用系统设计过程当中执行。1.1 窗体控件布局1.1.1 控件间距窗体控件布局合理，绝对不能显得拥挤；拥挤的窗体控件布局让人难以理解，因而难以使用。让人看上去，不能太拥挤，也不能太松散。控件对窗体的覆盖率以不高于75%为宜。控件间隔（垂直）：组与组之间间隔15，组内控件间间间隔10。控件间隔（水平）：组与组之间间隔15，组内控件间间间隔10。注：控件间间隔应该根据窗体的覆盖率灵活进行调整，但以大于10为宜；而且在整个系统内，采用统一的控件间隔。可以通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的间隔。1.1.2 控件对齐控件水平排列成一行时，采用水平中对齐, 控件间隔按要求基本保持一致。行与行之间间隔相同，靠窗体边界距离应大于行间间隔。当窗体中有多个编辑区域时，以视觉效果和效率来分组组织这些区域。 1.1.3 文字对齐界面文字（包括数字和英文字母），一般情况下都应垂直右对齐，并且使用中文全角标点符号。1.1.4 窗口缩放窗体不可避免地会进行最小化、最大化等改变窗体大小的缩放操作，为了使窗体界面不出现混乱，应该在窗体布局设计时考虑相应的解决方法：（1）固定窗口大小，不允许改变大小，也不允许最大化、最小化的操作，避免窗体界面出现混乱；（2）使用控件的Dock（Fill、Top、Left等）属性，结合Panel、GroupBox等控件进行设计，使窗体在缩放的时候，控件能自动进行大小调整。（3）通过程序自行控制。在窗口大小改变的时候，捕捉窗体的Resize或SizeChanged事件进行相应处理。 1.2 界面配色1 如果使用经过设计的系列界面，则必须统一色调，针对软件类型以及用户工作环境选择恰当色调。注：如安全软件可以选取黄色；绿色表现环保，蓝色表现时尚，紫色表现浪漫等；淡色背景可以使人舒适，暗色做背景使人不觉得累等。 2 如果不使用系列界面，采用标准界面则必须做到与操作系统统一 。3 遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字。注：如蓝色文字以白色为背景容易识别，而在红色背景下则不易分辨，原因是红色与蓝色的对比度不够，而蓝色和白色的对比度很大，容易识别。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。 4 整个界面色彩尽量不使用或少使用多种不同的颜色。 1.3 控件风格1 命名控件命名统一采用简写_控件名称的方式，其中简写由控件在系统中的默认英文名称的大写字母组成，如TextBox控件则简写为tb；控件名称一般根据控件的用途或者控件显示的内容进行命名，比如：LoginName，则整个控件可以命名为tb_LoginName。2 系统中使用的控件，样式、前景色、背景色、功能、操作方式等尽量保持一致，并且符合系统的整体配色风格，避免给用户造成混乱感觉。3 当在某一特定条件下，某个控件用户不可用时，对控件Enabled属性设置为False而不是将Visible属性设为False。注：如用户显示文本的RichText控件有右键弹出菜单，则在系统内所有的RichText控件都应该一致地有右键弹出菜单。1.4 字体一般情况下，中文字体使用的宋体，字号大小9号；英文字体使用标准Microsoft Sans Serif字体。注：在系统中，一定使用标准字体，不考虑特殊字体（隶书、草书等特殊情况使用图片代替)，以保证每个用户使用系统时显示都正常。1.5 交互信息在用户与计算机应用系统交互过程中，交互信息是极其重要的。它向用户提示有关系统的操作、运行状态、系统错误等各个方面的信息，让用户更好地了解系统，更好地使用系统。注：本规范中的交互信息主要包括系统提示信息（提示需要让用户注意的问题）、询问信息（如是否继续某个操作）、警告信息（如提示某个安全问题）、错误信息（系统运行时出现的错误信息）等。系统中交互信息应遵循的原则有：1 简洁易懂尽量使用简单易懂的表述，如口语化，杜绝使用生涩难懂的专业术语；注意断句，正确、合理的使用顿号、逗号等标点符号，内容有较大差别时，注意分段。2 分类统一按照提示信息、询问信息、警告信息、错误信息等进行分类，对每种信息提供的方式及相关的窗体设计、布局进行统一，包括窗体标题，使用的提示图片、字体、字体颜色、字体大小等。注：如错误信息统一使用弹出窗口，并使用错误标记，只留下确定按钮，统一窗口标题为系统错误，统一表述的语气及方式：系统出现错误：（错误内容）。请与系统管理员联系。3 合理使用当用户的指令系统需要较长的时间进行处理时，系统应提供相应的提示信息，并在处理完成后给与用户适当提示，以提示处理已经完成。1.6 其他方面1 Tab键（TabIndex）按Tab激活控件的顺序一般按照从左至右、从上至下的顺序排列（注意设定TabIndex的值）。2 快捷键、加速键以及辅助菜单（1）系统快捷键在菜单中进行描述，并在系统帮助中特别说明；避免使用与系统重复的快捷键（如Ctrl + Alt + Del）。（2）辅助菜单必须在可视化窗体界面上拥有对应的按钮或者菜单选项。1.7帮助提示原则一个设计优良的程序除了应该具备友好的界面，还应具备必要的帮助和提示性信息。因此，对于本产品中界面上的按钮组件和工具栏组件在操作中必须提供相关信息的提示。A 工具栏组件中的按钮添加ToolTip提示性信息。B 具有重要功能的按钮组件在点击后或功能操作完毕后必须显示消息提示对话框，用来确认用户执行的操作或者提示用户操作是否成功等等。消息提示语言应该友好，并尽量做到简洁明确2. 界面的关系图和工作流程图2.1 界面功能一览（客户端）界面名称界面标识功能说明登录UserLoginFrm连接服务器，对用户的身份进行验证主界面ClientMainFrm显示用户头像和好友列表，包含其他操作功能用户信息维护MyInfoFrm更新用户的详细信息聊天ChatFrm与好友进行在线即时通信聊天记录ChatLogFrm查看与某个好友聊天的历史记录好友信息FridendInfoFrm查看好友的详细信息关于AboutFrm本软件的版本信息、版权说明、开发小组信息表2-1 企业即时通客户端界面一览表2.2 界面功能一览（服务器端）界面名称界面标识功能说明主界面ServerMainFrm显示服务器状态和消息日志信息公司信息维护CorpInfoFrm更新公司的基本信息部门信息维护DeptManagerFrm显示、更新、删除部门的基本信息添加部门信息DeptAddFrm添加部门的基本信息用户信息维护UserInfoManagerFrm显示、更新、删除用户的基本信息添加用户信息UserInfoAddFrm添加用户的基本信息在线用户查看ShowOnlineUserFrm查看在线用户的详细信息关于AboutFrm本软件的版本信息、版权说明、开发小组信息表2-2 企业即时通服务器端界面一览表 2.3界面关系及工作流程2.3.1 客户端界面关系图2-1 企业即时通客户端界面关系及工作流程图2.3.2 服务器端界面关系图2-1 企业即时通服务器端界面关系及工作流程图3. 客户端界面3.1 客户端主界面3.1.1 主界面视图图3-1 企业即时通客户端主界面ClientMainFrm3.1.2 主界面控件命名及功能一览对象名类功能操作ClientMainFrmForm窗体MainMenuMenuStrip主菜单栏ImglistImageList图片集合RightMenuContextMenuStrip右键快捷菜单modifyMenuItemMenuItem修改基本资料loginMnuItem MenuItem重新登录helpMenuMenuItem关于exitMenuItemMenuItem退出chatLogMenuItemMenuItem聊天记录beginMenuItemMenuItem开始交谈fridendMenuItemMenuItem好友信息MainTreeTreeViewTreeView控件视图nicknameLabelLabel用户昵称headPicPictureBox用户头像3.2 好友信息界面3.2.1 好友信息视图图3-2 企业即时通客户端好友信息界面FriendInfoFrm3.2.2 好友信息界面组件命名及功能一览对象名类功能操作FriendInfoFrmFromnickNamelblLabelnamelblLabelsexlblLabelphonelblLabelemaillblLabelregionlblLabelmyInfolblLabeldeptlblLabelexitbtnButtonmyInfotxtTextBoxheadPicPictureBox3.3 用户信息维护界面3.3.1 用户信息维护视图图3-3 企业即时通客用户端信息维护界面MyInfoFrm3.3.2 用户信息维护界面组建及功能一览对象名类功能操作MyInfoFrmForm窗体nicknamelblLabel昵称nicknametxtTextBox昵称文本框pwdlblLabel密码pwdTwolblLabel确认密码pwdtxtTextBox密码文本框pwdTwotxtTextBox确认密码文本框namelblLabel名称nametxtTextBox名称文本框sexlblLabel性别phoneLabelLabel电话emailLabelLabel电子邮件sexmanrdbRadioButton性别选项1sexwmanrdbRadioButton性别选项2phonetxtTextBox电话文本框emailtxtTextBox电子邮件文本框regionlbl Label来自那里regioncmbComboBox来自选项框headpiclblLabel头像headpiccmbComboBox头像选项框myInfolblLabel个人说明myinfotxtTextBox个人说明文本框exitbtnButton退出按钮updatebtnButton更新按钮deptlblLabel部门deptnamelnlLabel部门名称3.4 关于界面3.4.1 关于界面视图图3-4 企业即时通客户端关于界面HelpFrm3.4.2 关于界面组建及功能一览对象名类功能操作AboutFrmForm窗体aboutTabTabControl 选项卡imgPicPictureBox图片infolblLabel标签3.5 登录界面3.5.1 登陆界面视图图3-5 企业即时通客户端登录界面UserLoginFrm3.5.2 登陆界面组建及功能一览对象名类功能操作UserLoginFrmForm窗体useraccountlblLabel用户帐号userpwdlblLabel用户密码useraccounttxtTextBox用户帐号文本框IplblLabelIPPortlblLabel端口号pwdtxtTextBox密码输入框iptxtTextBoxIP地址输入框porttxtTextBox端口号输入框loginbtnButton登录按钮exitbtnButton退出按钮3.6 聊天界面3.6.1 聊天界面视图图3-6 企业即时通客户端聊天界面ChatFrm3.6.2 聊天界面组建及功能一览对象名类功能操作ChatFrmForm窗体SendbtnButton发送按钮exitbtnButton关闭按钮chatlogbtnButton聊天记录按钮friendinfogroupboxGroupBox好友信息框myinfogroupboxGroupBox当前用户信息框chatLogtxtTextBox聊天记录文本框chattxtTextBox聊天信息框friendpicPictureBox好友头像mypicPictureBox当前用户头像3.7 聊天记录界面3.7.1 聊天记录界面视图图3-7 企业即时通客户端聊天记录界面ChatLogFrm3.7.2 聊天记录界面组建及功能一览对象名类功能操作ChatLogFrmForm窗体chatlogtxtTextBox聊天记录clearButtonButton清除按钮exitButtonButton关闭按钮exportFileJFrameButton导出文件4. 服务器端界面4.1 主界面4.1.1 主界面视图4.1.2 主界面组件命名及功能一览对象名类功能操作ServerMainFrmForm窗体serverMainMenuMenuStrip主菜单infoModifyMenuMenuItem信息管理菜单systemManagerMnuItemMenuItem系统管理菜单helpMnuItemMenuItem帮助菜单corpManagerMenuMenuItem公司信息维护deptManagerMnuItemMenuItem部门信息维护userinfoManagerMnuItemMenuItem用户信息维护exitMnuMenuItem退出startserverMnuItemMenuItem启动服务器stopserverMnuItemMenuItem停止服务器configinfoMnuItemMenuItem查看配置信息aboutMenuMenuItem关于serverMaintoolToolStrip工具栏startServertoolToolStripButton启动服务stopServertoolToolStripButton停止服务configtoolToolStripButton查看配置信息useinfotoolToolStripButton查看在线用户checkusertimerTimer定时检测用户是否在线4.2 公司信息维护界面4.2.1 公司信息维护界面视图4.2.2 公司信息维护界面组件命名及功能一览对象名类功能操作CorpManagerFrmForm窗体saveButtonButton保存按钮exitButtonButton关闭按钮corpNamelblLabel公司名称addresslblLabel公司地址domainlblLabel域名emaillblLabel电子邮件phonelblLabel电话faxlblLabel传真corpnametxtTextBox公司名称文本框addresstxtTextBox地址文本框domaintxtTextBox域名文本框emailtxtTextBox电子邮件文本框phonetxtTextBox电话文本框faxtxtTextBox传真文本框4.3 部门信息维护界面4.3.1 部门信息维护界面视图4.3.2 部门信息维护界面组件命名及功能一览对象名类功能操作DeptManagerFrmForm窗体deptListListBoxListBox控件deptNamelblLabel部门名称deptnametxtTextBox部门名称文本框deptDescrlblLabel部门描述deptDescrtxtTextBox部门描述文本框addbtnButton添加delbtnButton删除savebtnButton保存exitbtnButton退出4.4 用户信息维护界面4.4.1 用户信息维护界面视图4.4.2 用户信息维护界面组件命名及功能一览对象名类功能操作UserManagerFrmForm窗体userListListBoxListBox控件useraccountlblLabel用户帐号pwdlblLabel密码usernamelblLabel用户名称sexlblLabel性别useraccounttxtTextBox用户帐号文本框pwdtxtTextBox密码文本框usernametxtTextBox用户名称文本框manrdbReadioButton单选按钮wmanrdbReadioButton单选按钮deptcmbComboBox部门集合addbtnButton添加delbtnButton删除savebtnButton保存initPwdbtnButton初始化密码exitbtnButton退出4.5 添加部门信息维护界面4.5.1 添加部门信息维护界面视图4.5.2 添加部门信息维护界面组件命名及功能一览对象名类功能操作DeptAddFrmForm窗体deptnamelblLabel部门名称deptnametxtTextBox部门名称文本矿deptdescrlblLabeldeptdescrtxtTextBoxsavebtnButtonexitbtnButton4.6 添加用户信息界面4.6.1 添加用户信息界面视图4.6.2 添加用户信息界面组件命名及功能一览对象名类功能操作UserAddFrmForm窗体useraccountlblLabel帐号pwdlblLabel密码usernamelblLabel用户名称sexlblLabel性别deptlblLabel部门useraccounttxtTextBox用户帐号usernametxtTextBox用户名称manrdbComboBox部门wmanrdbReadioButton性别1deptcmbReadioButton性别2savebtnButton保存exitbtnButton关闭4.7 在线用户查看界面4.7.1 在线用户查看界面视图4.7.2 在线用户查看界面组件命名及功能一览对象名类功能操作ShowOnlineUserFrmForm窗体userInfoviewDataGridViewDataGridView控件RenovatebtnButton刷新exitbtnButton关闭4.8 关于界面4.8.1 关于界面视图4.8.2 关于界面组件命名及功能一览对象名类功能操作AboutFrmForm窗体aboutTabTabControl 选项卡imgPicPictureBox图片infolblLabel标签翰子昂实训教程系列