2024年4月2日发(作者：)
00
机构图标
企业即时通
00
用户界面设计报告
00
版 本 历 史
版本/状态
1.0
00
起止日期
2006-05-22
备注 作者
王鹏
参与者
0. 文档介绍
0.1 文档目的
00
0
本文用于指导软件分析和设计活动中用户界面的设计原则、设计步骤和设计方法。
0
0.2 文档范围
0
本文档包含以下几部分：
0
1. 应当遵循的界面设计规范
00
2. 界面的关系图和工作流程图
3. 主界面
4. 子界面
00
00
00
5. 美学设计
00
6. 界面资源设计
7. 其他
00
00
0.3 读者对象
料。
0
本文仅用于指导软件开发部用户界面设计工作，同时作为其他分析和设计工作的参考资
0
0
本文的预期读者是：设计员/软件工程师、程序员、界面设计员/美工。
0.4 参考文献
0
0
提示：列出本文档的所有参考文献（可以是非正式出版物），格式如下：
[标识符] 作者，文献名称，出版单位（或归属单位），日期
例如：
00
00
00
[AAA] 作者，《立项建议书》，机构名称，日期
[SPP-PROC-SD] SEPG，系统设计规范，机构名称，日期
00
0.5 术语与缩写解释
缩写、术语
UI
GUI
Frm
btn
lbl
txt
cmb
0
解 释
User Interface，用户界面。
Graphic User Interface，图形用户界面。
Form 的缩写
Button 的缩写
Label 的缩写
TextBox的缩写
ComboBox 的缩写
1. 应当遵循的界面设计规范
0
本系统坚持图形用户界面（GUI）设计原则，界面直观、对用户透明：用户接触软件后对
界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。
0
用户界面设计的总体原则：统一。这也是本规范遵循的最高原则，用户界面的设计，无
论是控件、信息提示措辞、界面配色等，都要遵循统一的标准，做到真正的一致。
0
本规范的施行方法：针对用户界面设计的特殊性，用户界面设计规范队某些方面只进行
原则性的规范，具体的内容（比如配色方案用暖色系还是冷色系等）应在每一个应用系统的
开发启动之前，由项目小组根据应用系统自身的特点、系统用户对象的特点等信息，确立每
一个部分的具体内容，然后在应用系统设计过程当中执行。
00
1.1 窗体控件布局
1.1.1 控件间距
0
0
窗体控件布局合理，绝对不能显得拥挤；拥挤的窗体控件布局让人难以理解，因而难以
使用。让人看上去，不能太拥挤，也不能太松散。控件对窗体的覆盖率以不高于75%为宜。
00
控件间隔（垂直）：组与组之间间隔15，组内控件间间间隔10。
控件间隔（水平）：组与组之间间隔15，组内控件间间间隔10。
00
00
注：控件间间隔应该根据窗体的覆盖率灵活进行调整，但以大于10为宜；而且在整个系
统内，采用统一的控件间隔。可以通过调整窗体大小达到一致，即使在窗体大小不变的情况
下，宁可留空部分区域，也不要破坏控件间的间隔。
00
1.1.2 控件对齐
00
控件水平排列成一行时，采用水平中对齐, 控件间隔按要求基本保持一致。行与行之间
间隔相同，靠窗体边界距离应大于行间间隔。当窗体中有多个编辑区域时，以视觉效果和效
率来分组组织这些区域。
0
1.1.3 文字对齐
0
界面文字（包括数字和英文字母），一般情况下都应垂直右对齐，并且使用中文全角标
点符号。
0
1.1.4 窗口缩放
00
窗体不可避免地会进行最小化、最大化等改变窗体大小的缩放操作，为了使窗体界面不
出现混乱，应该在窗体布局设计时考虑相应的解决方法：
出现混乱；
00
（1）固定窗口大小，不允许改变大小，也不允许最大化、最小化的操作，避免窗体界面
0
（2）使用控件的Dock（Fill、Top、Left等）属性，结合Panel、GroupBox等控件进行
设计，使窗体在缩放的时候，控件能自动进行大小调整。
事件进行相应处理。
00
（3）通过程序自行控制。在窗口大小改变的时候，捕捉窗体的Resize或SizeChanged
0
1.2 界面配色
0
1 如果使用经过设计的系列界面，则必须统一色调，针对软件类型以及用户工作环境选
择恰当色调。
0
注：如安全软件可以选取黄色；绿色表现环保，蓝色表现时尚，紫色表现浪漫等；淡色
背景可以使人舒适，暗色做背景使人不觉得累等。
00
2 如果不使用系列界面，采用标准界面则必须做到与操作系统统一 。
00
3 遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字。
0
注：如蓝色文字以白色为背景容易识别，而在红色背景下则不易分辨，原因是红色与蓝
色的对比度不够，而蓝色和白色的对比度很大，容易识别。除非特殊场合，杜绝使用对比强
烈，让人产生憎恶感的颜色。
0
4 整个界面色彩尽量不使用或少使用多种不同的颜色。
00
1.3 控件风格
1 命名
0
00
控件命名统一采用"简写_控件名称"的方式，其中"简写"由控件在系统中的默认英文名称
的大写字母组成，如TextBox控件则"简写"为"tb"；"控件名称"一般根据控件的用途或者控
件显示的内容进行命名，比如：LoginName，则整个控件可以命名为"tb_LoginName"。
00
2 系统中使用的控件，样式、前景色、背景色、功能、操作方式等尽量保持一致，并且
符合系统的整体配色风格，避免给用户造成混乱感觉。
00
3 当在某一特定条件下，某个控件用户不可用时，对控件Enabled属性设置为False而
不是将Visible属性设为False。
00
注：如用户显示文本的RichText控件有右键弹出菜单，则在系统内所有的RichText控
件都应该一致地有右键弹出菜单。
0
1.4 字体
00
一般情况下，中文字体使用的"宋体"，字号大小9号；英文字体使用标准Microsoft Sans
Serif字体。
00
注：在系统中，一定使用标准字体，不考虑特殊字体（隶书、草书等特殊情况使用图片
代替)，以保证每个用户使用系统时显示都正常
。
00
1.5 交互信息
0
在用户与计算机应用系统交互过程中，交互信息是极其重要的。它向用户提示有关系统
的操作、运行状态、系统错误等各个方面的信息，让用户更好地了解系统，更好地使用系统。
0
注：本规范中的交互信息主要包括系统提示信息（提示需要让用户注意的问题）、询问
信息（如是否继续某个操作）、警告信息（如提示某个安全问题）、错误信息（系统运行时
出现的错误信息）等。
0
系统中交互信息应遵循的原则有：
1 简洁易懂
00
0
尽量使用简单易懂的表述，如口语化，杜绝使用生涩难懂的专业术语；注意断句，正确、
合理的使用顿号、逗号等标点符号，内容有较大差别时，注意分段。
2 分类统一
00
00
按照提示信息、询问信息、警告信息、错误信息等进行分类，对每种信息提供的方式及
相关的窗体设计、布局进行统一，包括窗体标题，使用的提示图片、字体、字体颜色、字体
大小等。
0
注：如错误信息统一使用弹出窗口，并使用错误标记，只留下"确定"按钮，统一窗口标
题为"系统错误"，统一表述的语气及方式："系统出现错误：（错误内容）。请与系统管理员
联系。"。
3 合理使用
当用户的指令系统需要较长的时间进行处理时，系统应提供相应的提示信息，并在处理
完成后给与用户适当提示，以提示处理已经完成。
00
1.6 其他方面
0
1 Tab键（TabIndex）
00
按Tab激活控件的顺序一般按照从左至右、从上至下的顺序排列（注意设定TabIndex的
值）。
0
2 快捷键、加速键以及辅助菜单
00
（1）系统快捷键在菜单中进行描述，并在系统帮助中特别说明；避免使用与系统重复的
快捷键（如Ctrl + Alt + Del）。
0
00
00
（2）辅助菜单必须在可视化窗体界面上拥有对应的按钮或者菜单选项。
1.7帮助提示原则
一个设计优良的程序除了应该具备友好的界面，还应具备必要的帮助和提示性信息。因
此，对于本产品中界面上的按钮组件和工具栏组件在操作中必须提供相关信息的提示。
0
00
A 工具栏组件中的按钮添加ToolTip提示性信息。
B 具有重要功能的按钮组件在点击后或功能操作完毕后必须显示消息提示对话框，用来
确认用户执行的操作或者提示用户操作是否成功等等。消息提示语言应该友好，并尽量做到
简洁明确
00
2. 界面的关系图和工作流程图
2.1 界面功能一览（客户端）
界面名称
登录
主界面
用户信息维护
聊天
聊天记录
好友信息
关于
00
0
功能说明
连接服务器，对用户的身份进行验证
显示用户头像和好友列表，包含其他操作功能
更新用户的详细信息
与好友进行在线即时通信
查看与某个好友聊天的历史记录
查看好友的详细信息
本软件的版本信息、版权说明、开发小组信息
0
界面标识
UserLoginFrm
ClientMainFrm
MyInfoFrm
ChatFrm
ChatLogFrm
FridendInfoFrm
AboutFrm
表2-1 企业即时通客户端界面一览表
2.2 界面功能一览（服务器端）
界面名称
主界面
公司信息维护
部门信息维护
添加部门信息
用户信息维护
添加用户信息
在线用户查看
关于
0
功能说明 界面标识
ServerMainFrm
CorpInfoFrm
DeptManagerFrm
DeptAddFrm
UserInfoManagerFrm
UserInfoAddFrm
ShowOnlineUserFrm
AboutFrm
显示服务器状态和消息日志信息
更新公司的基本信息
显示、更新、删除部门的基本信息
添加部门的基本信息
显示、更新、删除用户的基本信息
添加用户的基本信息
查看在线用户的详细信息
本软件的版本信息、版权说明、开发小组信息
0
表2-2 企业即时通服务器端界面一览表
2.3界面关系及工作流程
00
2.3.1 客户端界面关系
好友信息
00
个人信息维护关于
用户登录主窗体聊天
维护聊天信息
图2-1 企业即时通客户端界面关系及工作流程图
0
2.3.2 服务器端界面关系
00
添加部门信息公司信息维护添加用户信息
部门信息维护主窗体用户信息维护
查看在线用户关于
图2-1 企业即时通服务器端界面关系及工作流程图
0
3. 客户端界面
3.1 客户端主界面
3.1.1 主界面视图
0
0
0
图3-1 企业即时通客户端主界面－ClientMainFrm
0
3.1.2 主界面控件命名及功能一览
对象名 类
00
操作 功能
ClientMainFrm
MainMenu
Imglist
RightMenu
modifyMenuItem
loginMnuItem
helpMenu
exitMenuItem
chatLogMenuItem
beginMenuItem
fridendMenuItem
MainTree
nicknameLabel
headPic
Form
MenuStrip
ImageList
ContextMenuStrip
MenuItem
MenuItem
MenuItem
MenuItem
MenuItem
MenuItem
MenuItem
TreeView
Label
PictureBox
窗体
主菜单栏
图片集合
右键快捷菜单
修改基本资料
重新登录
关于
退出
聊天记录
开始交谈
好友信息
TreeView控件视图
用户昵称
用户头像
3.2 好友信息界面
0
3.2.1 好友信息视图
0
图3-2 企业即时通客户端好友信息界面－FriendInfoFrm
00
3.2.2 好友信息界面组件命名及功能一览
对象名
FriendInfoFrm
nickNamelbl
namelbl
sexlbl
phonelbl
emaillbl
regionlbl
myInfolbl
deptlbl
exitbtn
myInfotxt
headPic
From
Label
Label
Label
Label
Label
Label
Label
Label
Button
TextBox
PictureBox
0
操作
类
功能
3.3 用户信息维护界面
00
3.3.1 用户信息维护视图
0
图3-3 企业即时通客用户端信息维护界面－MyInfoFrm
00
3.3.2 用户信息维护界面组建及功能一览
对象名
MyInfoFrm
nicknamelbl
nicknametxt
pwdlbl
pwdTwolbl
pwdtxt
pwdTwotxt
namelbl
nametxt
sexlbl
phoneLabel
emailLabel
Form
Label
TextBox
Label
Label
TextBox
TextBox
Label
TextBox
Label
Label
Label
0
操作
类
窗体
昵称
功能
昵称文本框
密码
确认密码
密码文本框
确认密码文本框
名称
名称文本框
性别
电话
电子邮件
sexmanrdb
sexwmanrdb
phonetxt
emailtxt
regionlbl
regioncmb
headpiclbl
headpiccmb
myInfolbl
myinfotxt
exitbtn
updatebtn
deptlbl
deptnamelnl
RadioButton
RadioButton
TextBox
TextBox
Label
ComboBox
Label
ComboBox
Label
TextBox
Button
Button
Label
Label
性别选项1
性别选项2
电话文本框
电子邮件文本框
来自那里
来自选项框
头像
头像选项框
个人说明
个人说明文本框
退出按钮
更新按钮
部门
部门名称
3.4 关于界面
0
3.4.1 关于界面视图
0
图3-4 企业即时通客户端关于界面－HelpFrm
0
3.4.2 关于界面组建及功能一览
对象名
AboutFrm Form
0
功能 操作
类
窗体
aboutTab
imgPic
infolbl
TabControl
PictureBox
Label
选项卡
图片
标签
3.5 登录界面
0
3.5.1 登陆界面视图
0
图3-5 企业即时通客户端登录界面－UserLoginFrm
0
3.5.2 登陆界面组建及功能一览
对象名
UserLoginFrm
useraccountlbl
userpwdlbl
useraccounttxt
Iplbl
Portlbl
pwdtxt
iptxt
porttxt
loginbtn
exitbtn
Form
0
功能 操作
类
窗体
用户帐号
用户密码
Label
Label
TextBox
Label
Label
TextBox
TextBox
TextBox
Button
Button
用户帐号文本框
IP
端口号
密码输入框
IP地址输入框
端口号输入框
登录按钮
退出按钮
3.6 聊天界面
0
3.6.1 聊天界面视图
0
图3-6 企业即时通客户端聊天界面－ChatFrm
0
3.6.2 聊天界面组建及功能一览
对象名
ChatFrm
Sendbtn
exitbtn
chatlogbtn
friendinfogroupbox
myinfogroupbox
chatLogtxt
chattxt
friendpic
mypic
Form
0
功能 操作
类
窗体
发送按钮
关闭按钮
Button
Button
Button
GroupBox
GroupBox
TextBox
TextBox
PictureBox
PictureBox
聊天记录按钮
好友信息框
当前用户信息框
聊天记录文本框
聊天信息框
好友头像
当前用户头像
3.7 聊天记录界面
0
3.7.1 聊天记录界面视图
0
图3-7 企业即时通客户端聊天记录界面－ChatLogFrm
0
3.7.2 聊天记录界面组建及功能一览
对象名
ChatLogFrm
chatlogtxt
clearButton
exitButton
exportFileJFrame
Form
TextBox
Button
Button
Button
0
功能 操作
类
窗体
聊天记录
清除按钮
关闭按钮
导出文件
4. 服务器端界面
4.1 主界面
0
00
4.1.1 主界面视图
0
4.1.2 主界面组件命名及功能一览
0
对象名
ServerMainFrm
serverMainMenu
infoModifyMenu
systemManagerMnuItem
helpMnuItem
corpManagerMenu
deptManagerMnuItem
Form
类
窗体
主菜单
功能
操作
MenuStrip
MenuItem
MenuItem
MenuItem
MenuItem
MenuItem
信息管理菜单
系统管理菜单
帮助菜单
公司信息维护
部门信息维护
用户信息维护
退出
启动服务器
停止服务器
查看配置信息
关于
工具栏
启动服务
停止服务
查看配置信息
查看在线用户
定时检测用户是否在线
userinfoManagerMnuItem MenuItem
exitMnu
startserverMnuItem
stopserverMnuItem
configinfoMnuItem
aboutMenu
serverMaintool
startServertool
stopServertool
configtool
useinfotool
checkusertimer
MenuItem
MenuItem
MenuItem
MenuItem
MenuItem
ToolStrip
ToolStripButton
ToolStripButton
ToolStripButton
ToolStripButton
Timer
4.2 公司信息维护界面
00
4.2.1 公司信息维护界面视图
0
4.2.2 公司信息维护界面组件命名及功能一览
对象名
CorpManagerFrm
saveButton
exitButton
corpNamelbl
addresslbl
domainlbl
emaillbl
phonelbl
faxlbl
corpnametxt
addresstxt
domaintxt
emailtxt
phonetxt
faxtxt
Form
Button
Button
Label
Label
Label
Label
Label
Label
TextBox
TextBox
TextBox
TextBox
TextBox
TextBox
0
操作
类
窗体
保存按钮
关闭按钮
公司名称
公司地址
域名
电子邮件
电话
传真
功能
公司名称文本框
地址文本框
域名文本框
电子邮件文本框
电话文本框
传真文本框
4.3 部门信息维护界面
00
4.3.1 部门信息维护界面视图
0
4.3.2 部门信息维护界面组件命名及功能一览
对象名
DeptManagerFrm
deptList
deptNamelbl
deptnametxt
deptDescrlbl
deptDescrtxt
addbtn
delbtn
savebtn
exitbtn
Form
ListBox
Label
TextBox
Label
TextBox
Button
Button
Button
Button
0
操作
类
窗体
功能
ListBox控件
部门名称
部门名称文本框
部门描述
部门描述文本框
添加
删除
保存
退出
4.4 用户信息维护界面
00
4.4.1 用户信息维护界面视图
0
4.4.2 用户信息维护界面组件命名及功能一览
对象名
UserManagerFrm
userList
useraccountlbl
pwdlbl
usernamelbl
sexlbl
useraccounttxt
pwdtxt
usernametxt
manrdb
wmanrdb
deptcmb
addbtn
delbtn
savebtn
initPwdbtn
exitbtn
Form
ListBox
Label
Label
Label
Label
TextBox
TextBox
TextBox
ReadioButton
ReadioButton
ComboBox
Button
Button
Button
Button
Button
0
操作
类
窗体
功能
ListBox控件
用户帐号
密码
用户名称
性别
用户帐号文本框
密码文本框
用户名称文本框
单选按钮
单选按钮
部门集合
添加
删除
保存
初始化密码
退出
4.5 添加部门信息维护界面
00
4.5.1 添加部门信息维护界面视图
0
4.5.2 添加部门信息维护界面组件命名及功能一览
对象名
DeptAddFrm
deptnamelbl
deptnametxt
deptdescrlbl
deptdescrtxt
savebtn
exitbtn
Form
Label
TextBox
Label
TextBox
Button
Button
0
操作
类
窗体
部门名称
功能
部门名称文本矿
4.6 添加用户信息界面
00
4.6.1 添加用户信息界面视图
0
4.6.2 添加用户信息界面组件命名及功能一览
对象名
UserAddFrm
useraccountlbl
pwdlbl
usernamelbl
sexlbl
deptlbl
useraccounttxt
usernametxt
manrdb
wmanrdb
deptcmb
savebtn
exitbtn
Form
Label
Label
Label
Label
Label
TextBox
TextBox
ComboBox
ReadioButton
ReadioButton
Button
Button
0
操作
类
窗体
帐号
密码
用户名称
性别
部门
用户帐号
用户名称
部门
性别1
性别2
保存
关闭
功能
4.7 在线用户查看界面
00
4.7.1 在线用户查看界面视图
0
4.7.2 在线用户查看界面组件命名及功能一览
对象名
ShowOnlineUserFrm
userInfoview
Form
DataGridView
0
操作
类
窗体
功能
DataGridView控件
Renovatebtn
exitbtn
Button
Button
刷新
关闭
4.8 关于界面
0
4.8.1 关于界面视图
0
4.8.2 关于界面组件命名及功能一览
对象名
AboutFrm
aboutTab
imgPic
infolbl
Form
TabControl
PictureBox
Label
0
功能 操作
类
窗体
选项卡
图片
标签
发布评论