企业即时通用户界面设计

1、机构图标企业即时通用户界面设计报告文件状态： 草稿 正式发布 正在修改文件标识：Hands-On-企业即时通-SD-UI当前版本：1.0作 者：完成日期：Year-Month-Day机构公开信息版 本 历 史版本/状态作者参与者起止日期备注1.02006-5-22至2006-5-22新建 目 录 0. 文档介绍40.1 文档目的40.2 文档范围40.3 读者对象40.4 参考文献40.5 术语与缩写解释51. 应当遵循的界面设计规范62. 界面的关系图和工作流程图73. 主界面94. 客户端登录界面106. 美学设计107. 界面资源设计100. 文档介绍0.1 文档目的企业即时通用户界面设

2、计报告以用户需求为基础制定窗体界面的设计规范和设计风格，其中包含窗体之间的调用关系，同时详细说明每个界面元素的属性及功能。该文档将作为界面设计与开发时的重要依据。0.2 文档范围本文档主要包含以下几部分：1. 文档介绍2. 界面设计规范3. 界面关系图和工作流程图4. 主界面说明5. 子界面说明6. 美学设计7. 界面资源设计0.3 读者对象本文档的读者主要包含以下几类：1. 界面设计人员2. 美工人员3. 编码人员4. 测试人员0.4 参考文献提示：列出本文档的所有参考文献（可以是非正式出版物），格式如下：标识符 作者，文献名称，出版单位（或归属单位），日期例如：AAA 作者，立项建议书，机

3、构名称，日期SPP-PROC-SD SEPG，系统设计规范，机构名称，日期0.5 术语与缩写解释缩写、术语解 释GIFGraphics Interchange Format的缩写图像交换格式的缩写1. 应当遵循的界面设计规范企业即时通软件的界面使用Sun公司提供的Swing组件设计开发，而目前行业对于Swing的开发并未形成统一的行业标准与规范。为此，我们以用户需求为基础，同时结合行业通用软件界面设计原则及所使用的开发工具注，总结制定出如下的界面设计规范：1. 用户原则产品只有满足用户的需要才能得到用户认可。为了达到用户要求，并保证符合行业标准，还必须将两者结合起来进行综合考虑。用户针对本产品

4、提出了以下界面需求：A 为了避免引起视觉疲劳，程序运行界面以灰色、白色等冷色作为主色调。B 为增加程序的易用性，客户端程序的主窗体应与主流聊天工具（比如QQ，MSN）的外观样式保持一致或相类似。C 客户端主窗体的初始启动位置应位于屏幕的右上角。除客户端主窗体之外的其他所有窗体的初始启动位置应位于屏幕中心。2. 一致性原则风格一致的界面，包括相近的颜色、统一的字体、类似的窗体布局等，这些都会带给用户统一的感觉，不会使他们感到混乱，从而使产品的支持度增加。不仅如此，界面的一致性同时也增强了用户对产品界面的理解与认知度，当用户在不同的界面进行切换时，不会产生陌生甚至困惑的感觉。为了做到真正的一致，制

5、定如下要求：A 窗体布局：统一采用开发工具提供的自由布局管理器，该布局管理器提供了最佳的视觉外观。位于窗体上的每个Swing组件距离窗体边缘的距离，组件之间的距离均采用默认大小，并保证组件间的垂直距离均等、水平距离均等。组件左右边缘在垂直方向上保证左对齐或右对齐，组件在水平方向上保证组件显示文本基线对齐。B 字体样式：统一采用开发工具提供的默认字体样式：正常；黑色；宋体；12，对于提示性、警告性的文本，应加粗显示。C 组件颜色：根据用户的需求，窗体背景颜色采用灰白色作为主色调。组件颜色采用开发工具提供的默认背景色和前景色。D 组件大小：组件的高度均为开发工具提供的默认高度。宽度依照控件显示文本

6、的长度可自动调整，同时兼顾窗体整体布局的要求。 3. 对比性原则对比性原则主要适用组件彼此间颜色差异的规定。该原则应符合行业通用规范的要求或工业标准，例如选用黄色代表安全，绿色体现环保，蓝色表现时尚，紫色蕴含浪漫，淡色可以使人舒适，暗色做背景使人不觉得累等等。设计组件颜色时应避免使用反差大，对比强烈，让人产生憎恶感的颜色，除非组件使用的场合具有特殊要求。根据以上原则，本产品界面组件颜色选择开发工具提供的默认颜色（浅蓝色）。其中，工具栏按钮的图标尺寸根据实际窗体的大小建议选择3232、4848，为了与窗体主色调保证协调一致，图标颜色优先选择以黑色、浅蓝色、白色为底色的图像，图像文件格式一律为GI

7、F格式。3. 规律性原则规律性原则主要考虑以下几个方面的要求：A 对于常用的可操作性控件，应根据用户的实际情况安排在相对固定的位置。比如按钮控件，按操作习惯，应放置在窗体的右下方。如果有多个按钮，还要考虑他们排放时的顺序。本产品在开发中规定：增加、删除、保存、关闭按钮作为一组按钮出现时，应位于窗体的右下方，排列顺序以上述顺序为准。B 功能相近的一组控件应有效的组合在一起，比如可以放在一个带边框的面板中，并为该边框指定功能性说明文字。C 按Tab键的访问顺序，按照从上向下，从左向右的顺序访问窗体上的每个组件。D 对于每个菜单和菜单项必须指定合适的访问键。访问键的形式为(Key),例如用户(U)4

8、. 帮助提示原则一个设计优良的程序除了应该具备友好的界面，还应具备必要的帮助和提示性信息。因此，对于本产品中界面上的按钮组件和工具栏组件在操作中必须提供相关信息的提示。A 工具栏组件中的按钮添加ToolTip提示性信息。B 具有重要功能的按钮组件在点击后或功能操作完毕后必须显示消息提示对话框，用来确认用户执行的操作或者提示用户操作是否成功等等。消息提示语言应该友好，并尽量做到简洁明确。注：本产品的开发工具采用Sun公司提供的NetBeans 5.0 JDK1.5.02. 界面的关系图和工作流程图2.1 界面功能一览（客户端）界面名称界面标识功能说明登录loginJFrame连接服务器，对用户的

9、身份进行验证主界面mainJFrame显示用户头像和好友列表，包含其他操作功能用户信息维护updateInfoJFrame更新用户的详细信息聊天chatJFrame与好友进行在线即时通信聊天记录chatRecordJFrame查看与某个好友聊天的历史记录好友信息userInfoJFrame查看好友的详细信息关于helpDialog本软件的版本信息、版权说明、开发小组信息表2-1 企业即时通客户端界面一览表2.2 界面功能一览（服务器端）界面名称界面标识功能说明主界面mainJFrame显示服务器状态和消息日志信息公司信息维护corperationJFrame更新公司的基本信息部门信息维护dep

10、artmentJFrame显示、更新、删除部门的基本信息添加部门信息departmentAddJFrame添加部门的基本信息用户信息维护userInfoJFrame显示、更新、删除用户的基本信息添加用户信息userInfoAddJFrame添加用户的基本信息在线用户查看onlineWatchJFrame查看在线用户的详细信息关于helpDialog本软件的版本信息、版权说明、开发小组信息表2-2 企业即时通服务器端界面一览表 2.3 界面关系及工作流程2.3.1 客户端界面关系图2-1 企业即时通客户端界面关系及工作流程图2.3.2 服务器端界面关系图2-1 企业即时通服务器端界面关系及工作流

11、程图3. 客户端界面3.1 客户端主界面3.1.1 主界面视图图3-1 企业即时通客户端主界面mainJFrame3.1.2 主界面组件命名及功能一览对象名类功能操作MainJFrameJFrame窗体mainJMnuBarJMenuBaruserJMnuJMenumyInfoUptJMnuItemJMenuItem信息维护点击logOutJmnuItemJMenuItem重新登陆点击userJMnuSeptJSeparator分隔线exitJMnuItemJMenuItem退出点击helpJMnuJMenuhelpContentJMnuItemJMenuItem帮助点击aboutJMnuIt

12、emJMenuItem关于点击onlineUserScrPaneJScrollPane显示用户面板userJTreeJTreeJTree控件视图点击nicknameJLabelJLabel用户昵称显示headPicPanelPicPanel头像显示mainJPopMnuJPopupMenuchatJMnuItemJMenuItemfriendinfoJMnuJMenuItem右键打开好友信息点击recordinfoJMnuJMenuItem右键打开聊天记录点击startchatJMnuJMenuItem右键打开聊天窗口点击3.2 好友信息界面3.2.1 好友信息视图图3-2 企业即时通客户端好

13、友信息界面UserInfoJFrame3.2.2 好友信息界面组件命名及功能一览对象名类功能操作UserInfoJFrameJFrame窗体userInfoJPanelJPanelnicknameJLabelJLabel用户昵称显示nameJLabelJLabel真实姓名显示sexJLabelJLabel性别显示phoneJLabelJLabel电话显示emailJlabelJLabel电子邮箱显示regionJLabelJLabel地址显示myInfoJLabelJLabel个人资料显示deptJLabelJLabel部门显示exitJButtonJButton退出按钮点击nicknameC

14、ontentJLabelJLabel运行时显示用户昵称显示nameContentJLabelJLabel运行时显示真实姓名显示sexContentJLabelJLabel运行时显示性别显示regionContentJLabelJLabel运行时显示地址显示phoneContentJLabelJLabel运行时显示常用电话显示emailContentJLabelJLabel运行时显示电子邮箱显示deptContentJLabelJLabel运行时显示部门显示myInfoJScrPaneJScrollPane滚动条myInfoJTxtAreaJTextArea个人资料文本框输入headPicPic

15、PanelPicPanel头像显示3.3 用户信息维护界面3.3.1 用户信息维护视图图3-3 企业即时通客用户端信息维护界面UpdateInfoJFrame3.3.2 用户信息维护界面组建及功能一览对象名类功能操作UpdateInfoJFrameJFrame窗体updateJPanelJPanelnicknameJLabelJLabel昵称显示nicknameJTxtFieldJTextField昵称文本框输入pwdJLabelJLabel密码显示pwdJPwdFieldJPasswordField密码文本框输入pwdConfirmJLabelJLabel确认密码显示pwdConfirmJP

16、wdFieldJPasswordField确认密码文本框输入nameJLabelJLabel真实姓名显示nameJTxtFieldJTextField真实姓名文本框输入sexJLabelJLabel性别显示phoneJLabelJLabel电话显示emailJLabelJLabel电子邮箱显示maleJRadioButtonJRadioButton性别选项1选择femailJRadioButtonJRadioButton性别选项2选择PhoneJTxtFieldJTextField电话文本框输入emailJTxtFieldJTextField电子邮箱文本框输入regionJLabel JLab

17、el地址显示regionsJComboBoxJComboBox地址选择框选择headpicJLabelJLabel头像显示headpicJComboBoxJComboBox头像选择框选择myInfoJLabelJLabel个人资料显示myInfoJScrPaneJScrollPane滚动条myinfoJTxtAreaJTextArea个人资料文本框输入exitJButtonJButton退出按钮点击updateJButtonJButton更新按钮点击limitJLabelJLabel字数限制标签显示deptJLabelJLabel部门显示deptNameJLabelJLabel部门名称显示sa

18、r1JLabelJLabel“*”标签显示sar2JLabelJLabel“*”标签显示sar3JLabelJLabel“*”标签显示sar4JLabelJLabel“*”标签显示sar5JLabelJLabel“*”标签显示headpicPanelPicPanel头像显示3.4 关于界面3.4.1 关于界面视图图3-4 企业即时通客户端关于界面HelpDialog3.4.2 关于界面组建及功能一览对象名类功能操作AboutPanelJPanelHelpDialogJDialogInfoPanelJPanelPicPanelJPanel3.5 登陆界面3.5.1 登陆界面视图图3-5 企业即时

19、通客户端登录界面LoginJFrame3.5.2 登陆界面组建及功能一览对象名类功能操作LoginJFrameJFrame窗体accountJLabelJLabel帐号显示jLblPwdJLabel密码显示pwdJPwdFieldJPasswordField密码文本框输入loginJButtonJButton登陆按钮点击exitJButtonJButton退出按钮点击ipJLabelJLabelIp显示portJLabelJLabel端口显示accountTxtFieldJTextField帐号文本框输入portJTxtFieldJTextField端口文本框输入ipJTxtFieldJTex

20、tFieldIp文本框输入3.6 聊天界面3.6.1 聊天界面视图图3-6 企业即时通客户端聊天界面ChatJFrame3.6.2 聊天界面组建及功能一览对象名类功能操作ChatJFrameJFrame窗体sendMsgJButtonJButton发送按钮点击exitJButtonJButton退出按钮点击chatRecordJButtonJButton聊天记录按钮点击friendJPaneJPanelfriendPicPanelPicPanel好友头像显示jScrollPane1JScrollPane滚动条1getMsgJTxtAreaJTextArea显示消息文本框输入userJPanel

21、JPaneljScrollPane2JScrollPane滚动条2sendMsgJTxtAreaJTextArea输入消息文本框输入userPicPanelPicPanel用户头像显示3.7 聊天记录界面3.7.1 聊天记录界面视图图3-7 企业即时通客户端聊天记录界面ChatRecordJFrame3.7.2 聊天记录界面组建及功能一览对象名类功能操作ChatRecordJFrameJFrame窗体chatReacordJScrPaneJScrollPane滚动条chatRecordJTxtAreaJTextArea聊天记录文本框输入clearJButtonJButton清除按钮点击exit

22、JButtonJButton退出按钮点击exportFileJFrameJButton导出文件按钮点击提示：（1）绘制主界面的视图；（2）说明主界面中所有对象的功能和操作方式；4. 服务器端界面4.1 主界面4.1.1 主界面视图4.1.2 主界面组件命名及功能一览对象名类功能操作MainJFrameJFrame窗体mainJMnuBarJMenuBarManageJMnuJMenucorpJMnuItemJMenuItem公司信息点击deptJMnuItemJMenuItem部门信息点击userJMnuItemJMenuItem用户信息点击onlineJMnuItemJMenuItem在线用

23、户点击manageJSeperJSaparator分隔线显示exitJMnuItemJMenuItem退出点击configJMnuJMenustartserverJMnuItemJMenuItem启动服务器点击stopserverJMnuItemJMenuItem停止服务器点击configinfoJMnuItemJMenuItem查看配置信息点击helpJMnuJMenuhelpContentJMnuItemJMenuItem帮助内容点击aboutJMnuItemJMenuItem关于点击mainJPanelJPanelmainJToolBarJToolBarstartJButtonJButt

24、on启动服务快捷按钮点击stopJButtonJButton停止服务快捷按钮点击configJButtonJButton配置信息快捷按钮点击useinfoJButtonJButton用户信息快捷按钮点击mainScrPanelJScrollPane滚动条logoinfoJTxtAreaJTextArea服务器日志文本框输入4.2 公司信息维护界面4.2.1 公司信息维护界面视图4.2.2 公司信息维护界面组件命名及功能一览对象名类功能操作CorperationJFrameJFrame窗体jPanelCorpJPanelsaveJButtonJButton保存按钮点击exitJButtonJBu

25、tton退出按钮点击jLblCmpNameJLabel名称显示jLblAdressJLabel地址显示jLblCmpDomainJLabel域名显示jLblEmailJLabel电子邮箱显示jLblPhoneJLabel电话显示jLblFaxJLabel传真显示corpNmeJTxtFieldJTextField名称文本框输入corpAddrJTxtFieldJTextField地址文本框输入corpDomainJTxtFieldJTextField域名文本框输入corpEmailJTxtFieldJTextField电子邮箱文本框输入corpPhoneJTxtFieldJTextField电

26、话文本框输入corpFaxJTxtFieldJTextField传真文本框输入star1JLabelJLabel“*”标签显示star2JLabelJLabel“*”标签显示4.3 部门信息维护界面4.3.1 部门信息维护界面视图4.3.2 部门信息维护界面组件命名及功能一览对象名类功能操作DepartmentJFrameJFrame窗体deptJPanelJPaneldeptNameJLabelJLabel部门名称显示deptsJScrPaneJScrollPane滚动条deptsJListJList部门列表框输入saveJButtonJButton保存按钮点击exitJButtonJBut

27、ton退出按钮点击deptNameJTxtFieldJTextField部门名称文本框输入addJButtonJButton添加按钮点击deptDescrJLabelJLabel部门描述显示deptDescrJScrPaneJScrollPanedeptDescrJTxtAreaJTextArea部门描述文本框输入delJButtonJButton删除按钮点击starJLabelJLabel“*”标签显示4.4 用户信息维护界面4.4.1 用户信息维护界面视图4.4.2 用户信息维护界面组件命名及功能一览对象名类功能操作UserInfoJFrameJFrame窗体jPanelUserJPane

28、luserAccountJLabelJLabel帐号显示jLblPwdJLabel密码显示jLblPwdInfoJLabel显示密码标签显示jLblDptJLabel部门显示jLblNameJLabel姓名显示jLblSexJLabel性别显示usersJScrPaneJScrollPane滚动条usersJListJList用户列表选择saveJButtonJButton保存按钮点击exitJButtonJButton退出按钮点击deptJComboBoxJComboBox部门选择列表选择userNameJTxtFieldJTextField姓名文本框输入maleJRadioButtonJB

29、utton性别单选按钮点击femaleJRadioButtonJButton性别单选按钮点击addJButtonJButton添加按钮点击initPwdJButtonJButton初始化按钮点击delJButtonJButton删除按钮点击userAccountContentJLabelJLabel显示帐号标签显示star1JLabelJLabel“*”标签显示star2JLabelJLabel“*”标签显示star3JLabelJLabel“*”标签显示4.5 添加部门信息维护界面4.5.1 添加部门信息维护界面视图4.5.2 添加部门信息维护界面组件命名及功能一览对象名类功能操作DepartmentAddJFrameJFrame窗体deptJPanelJPaneldeptNameJLabelJLabel部门名称显示exitJButtonJButton关闭按钮点击d