90企业即时通用户界面设计

企业即时通《用户界面设计报告》-1-书籍名称企业即时通用户界面设计报告文件状态：[√]草稿[]正式发布[]正在修改文件标识：Hands-On-企业即时通-SD-UI当前版本：1.0作者：完成日期：Year-Month-Day机构图标机构公开信息-2-企业即时通《用户界面设计报告》翰子昂实训教程系列版本历史版本/状态作者参与者起止日期备注1.02006-5-22至2006-5-22新建企业即时通《用户界面设计报告》-3-书籍名称目目录录0.文档介绍........................................................................................................................................40.1文档目的..............................................................................................................................40.2文档范围..............................................................................................................................40.3读者对象..............................................................................................................................40.4参考文献..............................................................................................................................40.5术语与缩写解释..................................................................................................................51.应当遵循的界面设计规范............................................................................................................62.界面的关系图和工作流程图........................................................................................................73.主界面............................................................................................................................................94.客户端登录界面..........................................................................................................................176.美学设计.........................................................................................................错误!未定义书签。7.界面资源设计.................................................................................................错误!未定义书签。-4-企业即时通《用户界面设计报告》翰子昂实训教程系列0.文档介绍0.1文档目的企业即时通《用户界面设计报告》以用户需求为基础制定窗体界面的设计规范和设计风格，其中包含窗体之间的调用关系，同时详细说明每个界面元素的属性及功能。该文档将作为界面设计与开发时的重要依据。0.2文档范围本文档主要包含以下几部分：1.文档介绍2.界面设计规范3.界面关系图和工作流程图4.主界面说明5.子界面说明6.美学设计7.界面资源设计0.3读者对象本文档的读者主要包含以下几类：1.界面设计人员2.美工人员3.编码人员4.测试人员0.4参考文献提示：列出本文档的所有参考文献（可以是非正式出版物），格式如下：[标识符]作者，文献名称，出版单位（或归属单位），日期例如：[AAA]作者，《立项建议书》，机构名称，日期[SPP-PROC-SD]SEPG，系统设计规范，机构名称，日期企业即时通《用户界面设计报告》-5-书籍名称0.5术语与缩写解释缩写、术语解释GIFGraphicsInterchangeFormat的缩写－图像交换格式的缩写-6-企业即时通《用户界面设计报告》翰子昂实训教程系列1.应当遵循的界面设计规范企业即时通软件的界面使用Sun公司提供的Swing组件设计开发，而目前行业对于Swing的开发并未形成统一的行业标准与规范。为此，我们以用户需求为基础，同时结合行业通用软件界面设计原则及所使用的开发工具[注]，总结制定出如下的界面设计规范：1.用户原则产品只有满足用户的需要才能得到用户认可。为了达到用户要求，并保证符合行业标准，还必须将两者结合起来进行综合考虑。用户针对本产品提出了以下界面需求：A为了避免引起视觉疲劳，程序运行界面以灰色、白色等冷色作为主色调。B为增加程序的易用性，客户端程序的主窗体应与主流聊天工具（比如QQ，MSN）的外观样式保持一致或相类似。C客户端主窗体的初始启动位置应位于屏幕的右上角。除客户端主窗体之外的其他所有窗体的初始启动位置应位于屏幕中心。2.一致性原则风格一致的界面，包括相近的颜色、统一的字体、类似的窗体布局等，这些都会带给用户统一的感觉，不会使他们感到混乱，从而使产品的支持度增加。不仅如此，界面的一致性同时也增强了用户对产品界面的理解与认知度，当用户在不同的界面进行切换时，不会产生陌生甚至困惑的感觉。为了做到真正的一致，制定如下要求：A窗体布局：统一采用开发工具提供的自由布局管理器，该布局管理器提供了最佳的视觉外观。位于窗体上的每个Swing组件距离窗体边缘的距离，组件之间的距离均采用默认大小，并保证组件间的垂直距离均等、水平距离均等。组件左右边缘在垂直方向上保证左对齐或右对齐，组件在水平方向上保证组件显示文本基线对齐。B字体样式：统一采用开发工具提供的默认字体样式：正常；黑色；宋体；12，对于提示性、警告性的文本，应加粗显示。C组件颜色：根据用户的需求，窗体背景颜色采用灰白色作为主色调。组件颜色采用开发工具提供的默认背景色和前景色。D组件大小：组件的高度均为开发工具提供的默认高度。宽度依照控件显示文本的长度可自动调整，同时兼顾窗体整体布局的要求。3.对比性原则对比性原则主要适用组件彼此间颜色差异的规定。该原则应符合行业通用规范的要求或工业标准，例如选用黄色代表安全，绿色体现环保，蓝色表现时尚，紫色蕴含浪漫，淡色可以使人舒适，暗色做背景使人不觉得累等等。设计组件颜色时应避免使用反差大，对比强烈，让人产生憎恶感的颜色，除非组件使用的场合具有特殊要求。企业即时通《用户界面设计报告》-7-书籍名称根据以上原则，本产品界面组件颜色选择开发工具提供的默认颜色（浅蓝色）。其中，工具栏按钮的图标尺寸根据实际窗体的大小建议选择32×32、48×48，为了与窗体主色调保证协调一致，图标颜色优先选择以黑色、浅蓝色、白色为底色的图像，图像文件格式一律为GIF格式。3.规律性原则规律性原则主要考虑以下几个方面的要求：A对于常用的可操作性控件，应根据用户的实际情况安排在相对固定的位置。比如按钮控件，按操作习惯，应放置在窗体的右下方。如果有多个按钮，还要考虑他们排放时的顺序。本产品在开发中规定：增加、删除、保存、关闭按钮作为一组按钮出现时，应位于窗体的右下方，排列顺序以上述顺序为准。B功能相近的一组控件应有效的组合在一起，比如可以放在一个带边框的面板中，并为该边框指定功能性说明文字。C按Tab键的访问顺序，按照从上向下，从左向右的顺序访问窗体上的每个组件。D对于每个菜单和菜单项必须指定合适的访问键。访问键的形式为(Key),例如用户(U)4.帮助提示原则一个设计优良的程序除了应该具备友好的界面，还应具备必要的帮助和提示性信息。因此，对于本产品中界面上的按钮组件和工具栏组件在操作中必须提供相关信息的提示。A工具栏组件中的按钮添加ToolTip提示性信息。B具有重要功能的按钮组件在点击后或功能操作完毕后必须显示消息提示对话框，用来确认用户执行的操作或者提示用户操作是否成功等等。消息提示语言应该友好，并尽量做到简洁明确。[注]：本产品的开发工具采用Sun公司提供的NetBeans5.0＋JDK1.5.02.界面的关系图和工作流程图2.1界面功能一览（客户端）界面名称界面标识功能说明登录loginJFrame连接服务器，对用户的身份进行验证主界面mainJFrame显示用户头像和好友列表，包含其他操作功能用户信息维护updateInfoJFrame更新用户的详细信息聊天chatJFrame与好友进行在线即时通信聊天记录chatRecordJFrame查看与某个好友聊天的历史记录好友信息userInfoJFrame查看好友的详细信息关于helpDialog本软件的版本信息、版权说明、开发小组信息表2-1企业即时通客户端界面一览表-8-企业即时通《用户界面设计报告》翰子昂实训教程系列2.2界面功能一览（服务器端）界面名称界面标识功能说明主界面mainJFrame显示服务器状态和消息日志信息公司信息维护corperationJFrame更新公司的基本信息部门信息维护departmentJFrame显示、更新、删除部门的基本信息添加部门信息departmentAddJFrame添加部门的基本信息用户信息维护userInfoJFrame显示、更新、删除用户的基本信息添加用户信息userInfoAddJFrame添加用户的基本信息在线用户查看onlineWatchJFrame查看在线用户的详细信息关于helpDialog本软件的版本信息、版权说明、开发小组信息表2-2企业即时通服务器端界面一览表2.3界面关系及工作流程2.3.1客户端界面关系图2-1企业即时通客户端界面关系及工作流程图企业即时通《用户界面设计报告》-9-书籍名称2.3.2服务器端界面关系图2-1企业即时通服务器端界面关系及工作流程图3.客户端界面3.1客户端主界面3.1.1主界面视图-10-企业即时通《用户界面设计报告》翰子昂实训教程系列图3-1企业即时通客户端主界面－mainJFrame3.1.2主界面组件命名及功能一览对象名类功能操作MainJFrameJFrame窗体mainJMnuBarJMenuBaruserJMnuJMenumyInfoUptJMnuItemJMenuItem信息维护点击logOutJmnuItemJMenuItem重新登陆点击userJMnuSeptJSeparator分隔线exitJMnuItemJMenuItem退出点击helpJMnuJMenuhelpContentJMnuItemJMenuItem帮助点击aboutJMnuItemJMenuItem关于点击onlineUserScrPaneJScrollPane显示用户面板userJTreeJTreeJT