用户界面设计模板.docx
《用户界面设计模板.docx》由会员分享，可在线阅读，更多相关《用户界面设计模板.docx（17页珍藏版）》请在冰点文库上搜索。
用户界面设计模板
宽带收费管理系统
用户界面设计报告
文件状态：
[√]草稿
[]正式发布
[]正在修改
文件标识：
宽带收费管理系统-SD-UI
当前版本：
作者：
完成日期：
07-03-14
机构公开信息
版本历史
版本/状态
作者
参与者
起止日期
备注
新建
0.文档介绍
文档目的
宽带收费管理系统《用户界面设计报告》。
是为了开发宽带收费管理系统而编写，主要面向系统分析员、程序员、测试员、实施员和最终用户。
本说明书是整个软件开发的依据，它对以后阶段的工作起指导作用。
本文也是项目完成后系统验收的依据。
文档范围
本文档主要包含以下几部分：
1.文档介绍
2.界面设计规范
3.界面关系图
4.主界面说明
读者对象
本文档的读者主要包含以下几类：
1.界面设计人员
2.美工人员
3.编码人员
4.测试人员
参考文献
提示：
列出本文档的所有参考文献（可以是非正式出版物），格式如下：
[标识符]作者，文献名称，出版单位（或归属单位），日期
例如：
[AAA]作者，《立项建议书》，机构名称，日期
[SPP-PROC-SD]SEPG，系统设计规范，机构名称，日期
术语与缩写解释
缩写、术语
解释
GIF
GraphicsInterchangeFormat的缩写－图像交换格式的缩写
1.应当遵循的界面设计规范
界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。
而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。
用户原则:
：
易用性：
按钮名称应该易懂，用词准确，屏弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好,理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
易用性细则：
1）:
完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
2）:
按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。
3）:
界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
4）:
同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。
5）:
复选框和选项框按选择几率的高底而先后排列。
6）:
复选框和选项框要有默认选项，并支持Tab选择。
7）:
选项数相同时多用选项框而不用下拉列表框。
8）:
界面空间较小时使用下拉框而不用选项框。
9）:
选项数叫少时使用选项框，相反使用下拉列表框。
10）:
专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。
2.界面的关系图和工作流程图
前台管理完成界面功能一览
界面名称
界面标识
功能说明
宽带互联网入网登记单
填写客户的入网信息，提交客户入网信息。
前台管理首界面
显示前台管理中的全部功能菜单。
缴费受理
.
提供缴费的条件。
缴费登记单
显示对应客户的信息及帐户余额，填写客户缴费金额。
业务受理单
对驳回的业务受理进行信息修改。
业务受理单
显示搜索结果。
修改密码
对用户的密码进行修改。
宽带收费管理系统前台管理一览表
界面关系及工作流程
2.3.1前台管理界面关系
图2-1宽带收费管理系统客户端界面关系及工作流程图
3.界面关系
登录界面
3.1.1页面说明
登录页面为系统入口页面，只有通过登录方可使用系统，不同用户对应不同权限，权限不同的用户进入系统后的界面菜单项是不同的。
登录成功，转向主界面。
权限信息参见权限设置页面。
3.1.2页面迁移图
补充说明：
登录对象
标识
功能
操作
前台管理用户
是非锁定的经过审核的注册用户登录到新闻管理页面，管理员则登录到管理员管理页面.
登录
施工管理用户
后台管理用户
3.1.3页面说明
3.1.3.1界面原型
图3-1宽带收费管理系统登录界面
3.1.3.2输入
控件名称
控件类型
栏目名称
必填
约束
初值
Username
text
用户名
√
最小值10000
Password
password
密码
√
非空
6-10位
LoginButton
submit
提交
补充说明
3.1.3.3处理
动作
步骤
处理说明
填写信息
1
输入用户名、密码
点击登录
2
单击“登录按钮”
进行验证
3
判断用户是否输入，若无，提示输入
判断资料
4
判断用户名、密码是否合法
返回信息
5
显示提示信息“您的登录尝试不成功。
请重试。
”
3.1.3.4输出
控件名称
控件类型
栏目名称
说明
3.1.4前置条件
前置条件
说明
3.1.5关联数据表
数据表
说明
BBC_EMPLOYEE
存储用户的用户编号和密码
补充说明
读写数据表时的注意事项，若简单读取，可空白
3.1.6补充说明：
对于此界面的其他补充说明。
前台管理主界面
3.2.1页面说明
显示前台管理中的全部功能菜单。
通过功能菜单进入相应得的功能界面，主显示区域显示主要业务申请—入网申请，停机申请，故障申请。
单击入网申请按钮，进入新客户入网登记单界面。
3.2.2页面迁移图
补充说明：
宽带受理和业务受理是同一个界面。
3.2.3页面说明
3.2.3.1界面原型
3.2.3.2输入
控件名称
控件类型
栏目名称
必填
约束
初值
txtAid
TextBox
业务记录查询
最小值10000
ddlTpye
DropDownList
驳回的业务类型
√
设定值：
入网申请/停机申请/故障申请。
入网申请
btnInNet
Input
业务受理
入网申请
btnStop
Input
业务受理
停机申请
btnTrouble
Input
业务受理
故障申请
补充说明
界面中和还有些相同的功能，其控件基本上相似就不在这里一一列出。
3.2.3.3处理
业务记录查询处理：
动作
步骤
处理说明
填写受理编号
1
输入受理编号，非空
点击搜索
2
单击“搜索”
进行验证
3
判断用户是否输入，若无，提示输入
打开页面
4
打开处理结果页面
选择业务类型处理：
动作
步骤
处理说明
选择下拉
1
选择不同的业务受理类型
显示记录
2
显示选择的驳回业务受理记录
业务受理处理：
动作
步骤
处理说明
单击按钮
1
单击需要受理的处理按钮
打开新界面
2
显示进行的业务受理记录单
3.2.3.4输出
控件名称
控件类型
栏目名称
说明
gvList
GridView
驳回业务受理记录
显示被审核驳回的受理记录
3.2.3.4前置条件
前置条件
说明
成功登录系统
用户使用合法的帐号成功登陆宽带管理系统
3.2.3.5关联数据表
数据表
说明
客户信息表（BBC_CUSTOMER表）
存储客户信息的表
业务受理表（BBC_ACCEPT）
用业务受理表进行保存。
实际工作的流程中，业务受理需要业务受理号，受理人编号，时间日期，审核人编号，要求等字段内容
服务类型表（BBC_SERVICE）
业务的种类控制也需要进行管理
业务受理类别表（BBC_ACCEPT_TYPE）
在业务受理的时候对业务信息进行区分
补充说明
暂无
3.2.3.6补充说明：
对于此界面的其他补充说明。
入网登记单界面
3.3.1页面说明
入网登记单界面显示了入网客户需要填写的各项信息，并且对填写的信息做基本的验证，同时提供了入网登记单的打印功能。
入网登记单提交完成以后，自动生成业务受理记录。
客户入网成功以后弹出提示信息，失败同样显示提示信息。
3.3.2页面迁移图
补充说明：
用户填写客户填写基本资料，提交通过脚本检测：
通过验证提交服务器程序处理，同时显示提示信息。
验证没有通过，返回页面同时显示各项提示信息。
3.3.3页面说明
3.3.3.1界面原型
3.3.3.2输入
控件名称
控件类型
栏目名称
必填
约束
初值
RBL_innet
RadioButtonList
接入方式
√
定制（注释1）
TbName
TextBox
客户姓名
√
最多8字符
RBLPaper
RadioButtonList
有效证件
√
定制（注释2）
TBPapern
TextBox
证件号码
√
最长字符数18
RBLUser_type
RadioButtonList
客户类别
√
定制（注释3）
TBAddress
TextBox
通信地址
√
最长字符数50
TBPastalcode
TextBox
邮政编码
×
6位
Tblinkman
TextBox
联系人
√
最多8字符
TBEmail
TextBox
常用Email
×
电子邮件地址
TBUnits
TextBox
单位
√
最多50字符
TBSetAdd
TextBox
安装地址
√
最多50字符
TBphone
TextBox
联系电话
√
最多5位区号—最多8号码
RBLService_content1
RadioButtonList
组网方式
√
定制（注释4）
RBLService_content2
RadioButtonList
速率
√
定制（注释5）
RBLService_content3
RadioButtonList
施工方式
√
定制（注释6）
RBLService_content4
RadioButtonList
是否调试
√
定制（注释7）
RBLService_content5
RadioButtonList
用户端设备
√
定制（注释8）
RBLService_content6
RadioButtonList
缴费周期
√
定制（注释9）
DDLServerType
DropDownList
服务类别
√
定制（注释10）
RBLService_content7
RadioButtonList
是否优惠
定制（注释11）
TBMemo
TextBox
备注
√
最多100字符
TBUserRequre
TextBox
客户要求
×
最多100字符
注释说明表：
编号
项目
定制内容
1
接入方式
□ADSL接入□LAN接入
2
有效证件
□身份证□军官证□护照□户口簿□工商营业执照
3
客户类别
□个人□单位□网吧□单位局域网
4
组网方式
□虚拟拨号□专线□其它
5
速率
□512K□1M□1.5M□2M□4M□6M
6
施工方式
□电话加装ADSL□装电话和ADSL□装ADSL□ISDN改装ADSL
7
是否需要调试
□是□否
8
用户端设备
□用户自备□租用□借用□免费提供□其它
9
缴费周期
□每月□半年□每季度□一年
10
是否优惠
□是□否
11
服务类别
□60元包月，2M□600元包年，2M□计时2元/小时
12
受理类别
□入网□停机□故障
13
审核状态
□等待□通过□驳回
3.3.3.3处理
动作
步骤
处理说明
填写客户资料
1
输入受理编号，非空
点击提交申请
2
单击“提交申请”按钮
进行验证
3
判断用户输入是否合法，若无后非法，提示输入
显示提示信息
4
服务器程序进行处理，返回提示信息
3.3.3.4输出
控件名称
控件类型
栏目名称
说明
LB_C_ID
Label
客户帐号
显示客户提交成功以后的客户帐号
LB_A_ID
Label
受理编号
显示客户提交成功以后的受理编号
3.2.3.4前置条件
前置条件
说明
成功登录系统
用户使用合法的帐号成功登陆宽带管理系统
3.2.3.5关联数据表
数据表
说明
客户信息表（BBC_CUSTOMER表）
存储客户信息的表
业务受理表（BBC_ACCEPT）
用业务受理表进行保存。
实际工作的流程中，业务受理需要业务受理号，受理人编号，时间日期，审核人编号，要求等字段内容
服务类型表（BBC_SERVICE）
业务的种类控制也需要进行管理
业务受理类别表（BBC_ACCEPT_TYPE）
在业务受理的时候对业务信息进行区分
补充说明
暂无
3.2.3.6补充说明：
对于此界面的其他补充说明。
升级会员 