qq界面设计.doc_咨信网zixin.com.cn

资源描述

2. 界面的关系图和工作流程图 - 21 - 机构图标企业即时通用户界面设计报告版本历史版本/状态作者参与者起止日期备注 1.0 王鹏 2006-05-22 0. 文档介绍 0.1 文档目的本文用于指导软件分析和设计活动中用户界面的设计原则、设计步骤和设计方法。 0.2 文档范围本文档包含以下几部分： 1. 应当遵循的界面设计规范 2. 界面的关系图和工作流程图 3. 主界面 4. 子界面 5. 美学设计 6. 界面资源设计 7. 其他 0.3 读者对象本文仅用于指导软件开发部用户界面设计工作，同时作为其他分析和设计工作的参考资料。本文的预期读者是：设计员/软件工程师、程序员、界面设计员/美工。 0.4 参考文献提示：列出本文档的所有参考文献（可以是非正式出版物），格式如下： [标识符] 作者，文献名称，出版单位（或归属单位），日期例如： [AAA] 作者，《立项建议书》，机构名称，日期 [SPP-PROC-SD] SEPG，系统设计规范，机构名称，日期 0.5 术语与缩写解释缩写、术语解释 UI User Interface，用户界面。 GUI Graphic User Interface，图形用户界面。 Frm Form 的缩写 btn Button 的缩写 lbl Label 的缩写 txt TextBox的缩写 cmb ComboBox 的缩写 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 企业即时通客户端主界面－ClientMainFrm 3.1.2 主界面控件命名及功能一览对象名类功能操作 ClientMainFrm Form 窗体 MainMenu MenuStrip 主菜单栏 Imglist ImageList 图片集合 RightMenu ContextMenuStrip 右键快捷菜单 modifyMenuItem MenuItem 修改基本资料 loginMnuItem MenuItem 重新登录 helpMenu MenuItem 关于 exitMenuItem MenuItem 退出 chatLogMenuItem MenuItem 聊天记录 beginMenuItem MenuItem 开始交谈 fridendMenuItem MenuItem 好友信息 MainTree TreeView TreeView控件视图 nicknameLabel Label 用户昵称 headPic PictureBox 用户头像 3.2 好友信息界面 3.2.1 好友信息视图图3-2 企业即时通客户端好友信息界面－FriendInfoFrm 3.2.2 好友信息界面组件命名及功能一览对象名类功能操作 FriendInfoFrm From nickNamelbl Label namelbl Label sexlbl Label phonelbl Label emaillbl Label regionlbl Label myInfolbl Label deptlbl Label exitbtn Button myInfotxt TextBox headPic PictureBox 3.3 用户信息维护界面 3.3.1 用户信息维护视图图3-3 企业即时通客用户端信息维护界面－MyInfoFrm 3.3.2 用户信息维护界面组建及功能一览对象名类功能操作 MyInfoFrm Form 窗体 nicknamelbl Label 昵称 nicknametxt TextBox 昵称文本框 pwdlbl Label 密码 pwdTwolbl Label 确认密码 pwdtxt TextBox 密码文本框 pwdTwotxt TextBox 确认密码文本框 namelbl Label 名称 nametxt TextBox 名称文本框 sexlbl Label 性别 phoneLabel Label 电话 emailLabel Label 电子邮件 sexmanrdb RadioButton 性别选项1 sexwmanrdb RadioButton 性别选项2 phonetxt TextBox 电话文本框 emailtxt TextBox 电子邮件文本框 regionlbl Label 来自那里 regioncmb ComboBox 来自选项框 headpiclbl Label 头像 headpiccmb ComboBox 头像选项框 myInfolbl Label 个人说明 myinfotxt TextBox 个人说明文本框 exitbtn Button 退出按钮 updatebtn Button 更新按钮 deptlbl Label 部门 deptnamelnl Label 部门名称 3.4 关于界面 3.4.1 关于界面视图图3-4 企业即时通客户端关于界面－HelpFrm 3.4.2 关于界面组建及功能一览对象名类功能操作 AboutFrm Form 窗体 aboutTab TabControl 选项卡 imgPic PictureBox 图片 infolbl Label 标签 3.5 登录界面 3.5.1 登陆界面视图图3-5 企业即时通客户端登录界面－UserLoginFrm 3.5.2 登陆界面组建及功能一览对象名类功能操作 UserLoginFrm Form 窗体 useraccountlbl Label 用户帐号 userpwdlbl Label 用户密码 useraccounttxt TextBox 用户帐号文本框 Iplbl Label IP Portlbl Label 端口号 pwdtxt TextBox 密码输入框 iptxt TextBox IP地址输入框 porttxt TextBox 端口号输入框 loginbtn Button 登录按钮 exitbtn Button 退出按钮 3.6 聊天界面 3.6.1 聊天界面视图图3-6 企业即时通客户端聊天界面－ChatFrm 3.6.2 聊天界面组建及功能一览对象名类功能操作 ChatFrm Form 窗体 Sendbtn Button 发送按钮 exitbtn Button 关闭按钮 chatlogbtn Button 聊天记录按钮 friendinfogroupbox GroupBox 好友信息框 myinfogroupbox GroupBox 当前用户信息框 chatLogtxt TextBox 聊天记录文本框 chattxt TextBox 聊天信息框 friendpic PictureBox 好友头像 mypic PictureBox 当前用户头像 3.7 聊天记录界面 3.7.1 聊天记录界面视图图3-7 企业即时通客户端聊天记录界面－ChatLogFrm 3.7.2 聊天记录界面组建及功能一览对象名类功能操作 ChatLogFrm Form 窗体 chatlogtxt TextBox 聊天记录 clearButton Button 清除按钮 exitButton Button 关闭按钮 exportFileJFrame Button 导出文件 4. 服务器端界面 4.1 主界面 4.1.1 主界面视图 4.1.2 主界面组件命名及功能一览对象名类功能操作 ServerMainFrm Form 窗体 serverMainMenu MenuStrip 主菜单 infoModifyMenu MenuItem 信息管理菜单 systemManagerMnuItem MenuItem 系统管理菜单 helpMnuItem MenuItem 帮助菜单 corpManagerMenu MenuItem 公司信息维护 deptManagerMnuItem MenuItem 部门信息维护 userinfoManagerMnuItem MenuItem 用户信息维护 exitMnu MenuItem 退出 startserverMnuItem MenuItem 启动服务器 stopserverMnuItem MenuItem 停止服务器 configinfoMnuItem MenuItem 查看配置信息 aboutMenu MenuItem 关于 serverMaintool ToolStrip 工具栏 startServertool ToolStripButton 启动服务 stopServertool ToolStripButton 停止服务 configtool ToolStripButton 查看配置信息 useinfotool ToolStripButton 查看在线用户 checkusertimer Timer 定时检测用户是否在线 4.2 公司信息维护界面 4.2.1 公司信息维护界面视图 4.2.2 公司信息维护界面组件命名及功能一览对象名类功能操作 CorpManagerFrm Form 窗体 saveButton Button 保存按钮 exitButton Button 关闭按钮 corpNamelbl Label 公司名称 addresslbl Label 公司地址 domainlbl Label 域名 emaillbl Label 电子邮件 phonelbl Label 电话 faxlbl Label 传真 corpnametxt TextBox 公司名称文本框 addresstxt TextBox 地址文本框 domaintxt TextBox 域名文本框 emailtxt TextBox 电子邮件文本框 phonetxt TextBox 电话文本框 faxtxt TextBox 传真文本框 4.3 部门信息维护界面 4.3.1 部门信息维护界面视图 4.3.2 部门信息维护界面组件命名及功能一览对象名类功能操作 DeptManagerFrm Form 窗体 deptList ListBox ListBox控件 deptNamelbl Label 部门名称 deptnametxt TextBox 部门名称文本框 deptDescrlbl Label 部门描述 deptDescrtxt TextBox 部门描述文本框 addbtn Button 添加 delbtn Button 删除 savebtn Button 保存 exitbtn Button 退出 4.4 用户信息维护界面 4.4.1 用户信息维护界面视图 4.4.2 用户信息维护界面组件命名及功能一览对象名类功能操作 UserManagerFrm Form 窗体 userList ListBox ListBox控件 useraccountlbl Label 用户帐号 pwdlbl Label 密码 usernamelbl Label 用户名称 sexlbl Label 性别 useraccounttxt TextBox 用户帐号文本框 pwdtxt TextBox 密码文本框 usernametxt TextBox 用户名称文本框 manrdb ReadioButton 单选按钮 wmanrdb ReadioButton 单选按钮 deptcmb ComboBox 部门集合 addbtn Button 添加 delbtn Button 删除 savebtn Button 保存 initPwdbtn Button 初始化密码 exitbtn Button 退出 4.5 添加部门信息维护界面 4.5.1 添加部门信息维护界面视图 4.5.2 添加部门信息维护界面组件命名及功能一览对象名类功能操作 DeptAddFrm Form 窗体 deptnamelbl Label 部门名称 deptnametxt TextBox 部门名称文本矿 deptdescrlbl Label deptdescrtxt TextBox savebtn Button exitbtn Button 4.6 添加用户信息界面 4.6.1 添加用户信息界面视图 4.6.2 添加用户信息界面组件命名及功能一览对象名类功能操作 UserAddFrm Form 窗体 useraccountlbl Label 帐号 pwdlbl Label 密码 usernamelbl Label 用户名称 sexlbl Label 性别 deptlbl Label 部门 useraccounttxt TextBox 用户帐号 usernametxt TextBox 用户名称 manrdb ComboBox 部门 wmanrdb ReadioButton 性别1 deptcmb ReadioButton 性别2 savebtn Button 保存 exitbtn Button 关闭 4.7 在线用户查看界面 4.7.1 在线用户查看界面视图 4.7.2 在线用户查看界面组件命名及功能一览对象名类功能操作 ShowOnlineUserFrm Form 窗体 userInfoview DataGridView DataGridView控件 Renovatebtn Button 刷新 exitbtn Button 关闭 4.8 关于界面 4.8.1 关于界面视图 4.8.2 关于界面组件命名及功能一览对象名类功能操作 AboutFrm Form 窗体 aboutTab TabControl 选项卡 imgPic PictureBox 图片 infolbl Label 标签翰子昂实训教程系列

展开阅读全文