企业即时通用户界面设计.docx
- 文档编号:5750729
- 上传时间:2022-12-31
- 格式:DOCX
- 页数:26
- 大小:172.33KB
企业即时通用户界面设计.docx
《企业即时通用户界面设计.docx》由会员分享,可在线阅读,更多相关《企业即时通用户界面设计.docx(26页珍藏版)》请在冰豆网上搜索。
企业即时通用户界面设计
机构图标
企业即时通
用户界面设计报告
文件状态:
[√]草稿
[]正式发布
[]正在修改
文件标识:
Hands-On-企业即时通-SD-UI
当前版本:
1.0
作者:
完成日期:
Year-Month-Day
机构公开信息
版本历史
版本/状态
作者
参与者
起止日期
备注
1.0
2006-5-22至2006-5-22
新建
目录
0.文档介绍4
0.1文档目的4
0.2文档范围4
0.3读者对象4
0.4参考文献4
0.5术语与缩写解释5
1.应当遵循的界面设计规范6
2.界面的关系图和工作流程图7
3.主界面9
4.客户端登录界面10
6.美学设计10
7.界面资源设计10
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,系统设计规范,机构名称,日期
0.5术语与缩写解释
缩写、术语
解释
GIF
GraphicsInterchangeFormat的缩写-图像交换格式的缩写
1.应当遵循的界面设计规范
企业即时通软件的界面使用Sun公司提供的Swing组件设计开发,而目前行业对于Swing的开发并未形成统一的行业标准与规范。
为此,我们以用户需求为基础,同时结合行业通用软件界面设计原则及所使用的开发工具[注],总结制定出如下的界面设计规范:
1.用户原则
产品只有满足用户的需要才能得到用户认可。
为了达到用户要求,并保证符合行业标准,还必须将两者结合起来进行综合考虑。
用户针对本产品提出了以下界面需求:
A为了避免引起视觉疲劳,程序运行界面以灰色、白色等冷色作为主色调。
B为增加程序的易用性,客户端程序的主窗体应与主流聊天工具(比如QQ,MSN)的外观样式保持一致或相类似。
C客户端主窗体的初始启动位置应位于屏幕的右上角。
除客户端主窗体之外的其他所有窗体的初始启动位置应位于屏幕中心。
2.一致性原则
风格一致的界面,包括相近的颜色、统一的字体、类似的窗体布局等,这些都会带给用户统一的感觉,不会使他们感到混乱,从而使产品的支持度增加。
不仅如此,界面的一致性同时也增强了用户对产品界面的理解与认知度,当用户在不同的界面进行切换时,不会产生陌生甚至困惑的感觉。
为了做到真正的一致,制定如下要求:
A窗体布局:
统一采用开发工具提供的自由布局管理器,该布局管理器提供了最佳的视觉外观。
位于窗体上的每个Swing组件距离窗体边缘的距离,组件之间的距离均采用默认大小,并保证组件间的垂直距离均等、水平距离均等。
组件左右边缘在垂直方向上保证左对齐或右对齐,组件在水平方向上保证组件显示文本基线对齐。
B字体样式:
统一采用开发工具提供的默认字体样式:
正常;黑色;宋体;12,对于提示性、警告性的文本,应加粗显示。
C组件颜色:
根据用户的需求,窗体背景颜色采用灰白色作为主色调。
组件颜色采用开发工具提供的默认背景色和前景色。
D组件大小:
组件的高度均为开发工具提供的默认高度。
宽度依照控件显示文本的长度可自动调整,同时兼顾窗体整体布局的要求。
3.对比性原则
对比性原则主要适用组件彼此间颜色差异的规定。
该原则应符合行业通用规范的要求或工业标准,例如选用黄色代表安全,绿色体现环保,蓝色表现时尚,紫色蕴含浪漫,淡色可以使人舒适,暗色做背景使人不觉得累等等。
设计组件颜色时应避免使用反差大,对比强烈,让人产生憎恶感的颜色,除非组件使用的场合具有特殊要求。
根据以上原则,本产品界面组件颜色选择开发工具提供的默认颜色(浅蓝色)。
其中,工具栏按钮的图标尺寸根据实际窗体的大小建议选择32×32、48×48,为了与窗体主色调保证协调一致,图标颜色优先选择以黑色、浅蓝色、白色为底色的图像,图像文件格式一律为GIF格式。
3.规律性原则
规律性原则主要考虑以下几个方面的要求:
A对于常用的可操作性控件,应根据用户的实际情况安排在相对固定的位置。
比如按钮控件,按操作习惯,应放置在窗体的右下方。
如果有多个按钮,还要考虑他们排放时的顺序。
本产品在开发中规定:
增加、删除、保存、关闭按钮作为一组按钮出现时,应位于窗体的右下方,排列顺序以上述顺序为准。
B功能相近的一组控件应有效的组合在一起,比如可以放在一个带边框的面板中,并为该边框指定功能性说明文字。
C按Tab键的访问顺序,按照从上向下,从左向右的顺序访问窗体上的每个组件。
D对于每个菜单和菜单项必须指定合适的访问键。
访问键的形式为(Key),例如用户(U)
4.帮助提示原则
一个设计优良的程序除了应该具备友好的界面,还应具备必要的帮助和提示性信息。
因此,对于本产品中界面上的按钮组件和工具栏组件在操作中必须提供相关信息的提示。
A工具栏组件中的按钮添加ToolTip提示性信息。
B具有重要功能的按钮组件在点击后或功能操作完毕后必须显示消息提示对话框,用来确认用户执行的操作或者提示用户操作是否成功等等。
消息提示语言应该友好,并尽量做到简洁明确。
[注]:
本产品的开发工具采用Sun公司提供的NetBeans5.0+JDK1.5.0
2.界面的关系图和工作流程图
2.1界面功能一览(客户端)
界面名称
界面标识
功能说明
登录
loginJFrame
连接服务器,对用户的身份进行验证
主界面
mainJFrame
显示用户头像和好友列表,包含其他操作功能
用户信息维护
updateInfoJFrame
更新用户的详细信息
聊天
chatJFrame
与好友进行在线即时通信
聊天记录
chatRecordJFrame
查看与某个好友聊天的历史记录
好友信息
userInfoJFrame
查看好友的详细信息
关于
helpDialog
本软件的版本信息、版权说明、开发小组信息
表2-1企业即时通客户端界面一览表
2.2界面功能一览(服务器端)
界面名称
界面标识
功能说明
主界面
mainJFrame
显示服务器状态和消息日志信息
公司信息维护
corperationJFrame
更新公司的基本信息
部门信息维护
departmentJFrame
显示、更新、删除部门的基本信息
添加部门信息
departmentAddJFrame
添加部门的基本信息
用户信息维护
userInfoJFrame
显示、更新、删除用户的基本信息
添加用户信息
userInfoAddJFrame
添加用户的基本信息
在线用户查看
onlineWatchJFrame
查看在线用户的详细信息
关于
helpDialog
本软件的版本信息、版权说明、开发小组信息
表2-2企业即时通服务器端界面一览表
2.3界面关系及工作流程
2.3.1客户端界面关系
图2-1企业即时通客户端界面关系及工作流程图
2.3.2服务器端界面关系
图2-1企业即时通服务器端界面关系及工作流程图
3.客户端界面
3.1客户端主界面
3.1.1主界面视图
图3-1企业即时通客户端主界面-mainJFrame
3.1.2主界面组件命名及功能一览
对象名
类
功能
操作
MainJFrame
JFrame
窗体
mainJMnuBar
JMenuBar
userJMnu
JMenu
myInfoUptJMnuItem
JMenuItem
信息维护
点击
logOutJmnuItem
JMenuItem
重新登陆
点击
userJMnuSept
JSeparator
分隔线
exitJMnuItem
JMenuItem
退出
点击
helpJMnu
JMenu
helpContentJMnuItem
JMenuItem
帮助
点击
aboutJMnuItem
JMenuItem
关于
点击
onlineUserScrPane
JScrollPane
显示用户面板
userJTree
JTree
JTree控件视图
点击
nicknameJLabel
JLabel
用户昵称
显示
headPicPanel
PicPanel
头像
显示
mainJPopMnu
JPopupMenu
chatJMnuItem
JMenuItem
friendinfoJMnu
JMenuItem
右键打开好友信息
点击
recordinfoJMnu
JMenuItem
右键打开聊天记录
点击
startchatJMnu
JMenuItem
右键打开聊天窗口
点击
3.2好友信息界面
3.2.1好友信息视图
图3-2企业即时通客户端好友信息界面-UserInfoJFrame
3.2.2好友信息界面组件命名及功能一览
对象名
类
功能
操作
UserInfoJFrame
JFrame
窗体
userInfoJPanel
JPanel
nicknameJLabel
JLabel
用户昵称
显示
nameJLabel
JLabel
真实姓名
显示
sexJLabel
JLabel
性别
显示
phoneJLabel
JLabel
电话
显示
emailJlabel
JLabel
电子邮箱
显示
regionJLabel
JLabel
地址
显示
myInfoJLabel
JLabel
个人资料
显示
deptJLabel
JLabel
部门
显示
exitJButton
JButton
退出按钮
点击
nicknameContentJLabel
JLabel
运行时显示用户昵称
显示
nameContentJLabel
JLabel
运行时显示真实姓名
显示
sexContentJLabel
JLabel
运行时显示性别
显示
regionContentJLabel
JLabel
运行时显示地址
显示
phoneContentJLabel
JLabel
运行时显示常用电话
显示
emailContentJLabel
JLabel
运行时显示电子邮箱
显示
deptContentJLabel
JLabel
运行时显示部门
显示
myInfoJScrPane
JScrollPane
滚动条
myInfoJTxtArea
JTextArea
个人资料文本框
输入
headPicPicPanel
PicPanel
头像
显示
3.3用户信息维护界面
3.3.1用户信息维护视图
图3-3企业即时通客用户端信息维护界面-UpdateInfoJFrame
3.3.2用户信息维护界面组建及功能一览
对象名
类
功能
操作
UpdateInfoJFrame
JFrame
窗体
updateJPanel
JPanel
nicknameJLabel
JLabel
昵称
显示
nicknameJTxtField
JTextField
昵称文本框
输入
pwdJLabel
JLabel
密码
显示
pwdJPwdField
JPasswordField
密码文本框
输入
pwdConfirmJLabel
JLabel
确认密码
显示
pwdConfirmJPwdField
JPasswordField
确认密码文本框
输入
nameJLabel
JLabel
真实姓名
显示
nameJTxtField
JTextField
真实姓名文本框
输入
sexJLabel
JLabel
性别
显示
phoneJLabel
JLabel
电话
显示
emailJLabel
JLabel
电子邮箱
显示
maleJRadioButton
JRadioButton
性别选项1
选择
femailJRadioButton
JRadioButton
性别选项2
选择
PhoneJTxtField
JTextField
电话文本框
输入
emailJTxtField
JTextField
电子邮箱文本框
输入
regionJLabel
JLabel
地址
显示
regionsJComboBox
JComboBox
地址选择框
选择
headpicJLabel
JLabel
头像
显示
headpicJComboBox
JComboBox
头像选择框
选择
myInfoJLabel
JLabel
个人资料
显示
myInfoJScrPane
JScrollPane
滚动条
myinfoJTxtArea
JTextArea
个人资料文本框
输入
exitJButton
JButton
退出按钮
点击
updateJButton
JButton
更新按钮
点击
limitJLabel
JLabel
字数限制标签
显示
deptJLabel
JLabel
部门
显示
deptNameJLabel
JLabel
部门名称
显示
sar1JLabel
JLabel
“*”标签
显示
sar2JLabel
JLabel
“*”标签
显示
sar3JLabel
JLabel
“*”标签
显示
sar4JLabel
JLabel
“*”标签
显示
sar5JLabel
JLabel
“*”标签
显示
headpicPanel
PicPanel
头像
显示
3.4关于界面
3.4.1关于界面视图
图3-4企业即时通客户端关于界面-HelpDialog
3.4.2关于界面组建及功能一览
对象名
类
功能
操作
AboutPanel
JPanel
HelpDialog
JDialog
InfoPanel
JPanel
PicPanel
JPanel
3.5登陆界面
3.5.1登陆界面视图
图3-5企业即时通客户端登录界面-LoginJFrame
3.5.2登陆界面组建及功能一览
对象名
类
功能
操作
LoginJFrame
JFrame
窗体
accountJLabel
JLabel
帐号
显示
jLblPwd
JLabel
密码
显示
pwdJPwdField
JPasswordField
密码文本框
输入
loginJButton
JButton
登陆按钮
点击
exitJButton
JButton
退出按钮
点击
ipJLabel
JLabel
Ip
显示
portJLabel
JLabel
端口
显示
accountTxtField
JTextField
帐号文本框
输入
portJTxtField
JTextField
端口文本框
输入
ipJTxtField
JTextField
Ip文本框
输入
3.6聊天界面
3.6.1聊天界面视图
图3-6企业即时通客户端聊天界面-ChatJFrame
3.6.2聊天界面组建及功能一览
对象名
类
功能
操作
ChatJFrame
JFrame
窗体
sendMsgJButton
JButton
发送按钮
点击
exitJButton
JButton
退出按钮
点击
chatRecordJButton
JButton
聊天记录按钮
点击
friendJPane
JPanel
friendPicPanel
PicPanel
好友头像
显示
jScrollPane1
JScrollPane
滚动条1
getMsgJTxtArea
JTextArea
显示消息文本框
输入
userJPanel
JPanel
jScrollPane2
JScrollPane
滚动条2
sendMsgJTxtArea
JTextArea
输入消息文本框
输入
userPicPanel
PicPanel
用户头像
显示
3.7聊天记录界面
3.7.1聊天记录界面视图
图3-7企业即时通客户端聊天记录界面-ChatRecordJFrame
3.7.2聊天记录界面组建及功能一览
对象名
类
功能
操作
ChatRecordJFrame
JFrame
窗体
chatReacordJScrPane
JScrollPane
滚动条
chatRecordJTxtArea
JTextArea
聊天记录文本框
输入
clearJButton
JButton
清除按钮
点击
exitJButton
JButton
退出按钮
点击
exportFileJFrame
JButton
导出文件按钮
点击
提示:
(1)绘制主界面的视图;
(2)说明主界面中所有对象的功能和操作方式;
4.服务器端界面
4.1主界面
4.1.1主界面视图
4.1.2主界面组件命名及功能一览
对象名
类
功能
操作
MainJFrame
JFrame
窗体
mainJMnuBar
JMenuBar
ManageJMnu
JMenu
corpJMnuItem
JMenuItem
公司信息
点击
deptJMnuItem
JMenuItem
部门信息
点击
userJMnuItem
JMenuItem
用户信息
点击
onlineJMnuItem
JMenuItem
在线用户
点击
manageJSeper
JSaparator
分隔线
显示
exitJMnuItem
JMenuItem
退出
点击
configJMnu
JMenu
startserverJMnuItem
JMenuItem
启动服务器
点击
stopserverJMnuItem
JMenuItem
停止服务器
点击
configinfoJMnuItem
JMenuItem
查看配置信息
点击
helpJMnu
JMenu
helpContentJMnuItem
JMenuItem
帮助内容
点击
aboutJMnuItem
JMenuItem
关于
点击
mainJPanel
JPanel
mainJToolBar
JToolBar
startJButton
JButton
启动服务快捷按钮
点击
stopJButton
JButton
停止服务快捷按钮
点击
configJButton
JButton
配置信息快捷按钮
点击
useinfoJButton
JButton
用户信息快捷按钮
点击
mainScrPanel
JScrollPane
滚动条
logoinfoJTxtArea
JTextArea
服务器日志文本框
输入
4.2公司信息维护界面
4.2.1公司信息维护界面视图
4.2.2公司信息维护界面组件命名及功能一览
对象名
类
功能
操作
CorperationJFrame
JFrame
窗体
jPanelCorp
JPanel
saveJButton
JButton
保存按钮
点击
exitJButton
JButton
退出按钮
点击
jLblCmpName
JLabel
名称
显示
jLblAdress
JLabel
地址
显示
jLblCmpDomain
JLabel
域名
显示
jLblEmail
JLabel
电子邮箱
显示
jLblPhone
JLabel
电话
显示
jLblFax
JLabel
传真
显示
corpNmeJTxtField
JTextField
名称文本框
输入
corpAddrJTxtField
JTextField
地址文本框
输入
corpDomainJTxtField
JTextField
域名文本框
输入
corpEmailJTxtField
JTextField
电子邮箱文本框
输入
corpPhoneJTxtField
JTextField
电话文本框
输入
corpFaxJTxtField
JTextField
传真文本框
输入
star1JLabel
JLabel
“*”标签
显示
star2JLabel
JLabel
“*”标签
显示
4.3部门信息维护界面
4.3.1部门信息维护界面视图
4.3.2部门信息维护界面组件命名及功能一览
对象名
类
功能
操作
DepartmentJFrame
JFrame
窗体
deptJPanel
JPanel
deptNameJLabel
JLabel
部门名称
显示
deptsJScrPane
JScrollPane
滚动条
deptsJList
JList
部门列表框
输入
saveJButton
JButton
保存按钮
点击
exitJButton
JButton
退出按钮
点击
deptNameJTxtField
JTextField
部门名称文本框
输入
addJButton
JButton
添加按钮
点击
deptDescrJLabel
JLabel
部门描述
显示
deptDescrJScrPane
JScrollPane
deptDescrJTxtArea
JTextArea
部门描述文本框
输入
delJButton
JButton
删除按钮
点击
starJ
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 企业 即时通 用户 界面设计