XX系统用户界面设计说明

1、XX系统 用户界面设计报告 文件状态： 文件标识： XX系统-SD-UI V草稿 当前版本： 1.0 正式发布 作者： 正在修改 完成日期： 10-03-14 机构公开信息版本历史 版本/状态 作者 参与后 起止日期 备注 1.0 新建 0.1文档目的4 0.2文档围4 0.3读者对象4 0.4参考文献4 0.5术语与缩写解释4 1 .应当遵循的界面设计规4 1.1 :易用性：5 1.2 易用性细则5 2 .界面的关系图和工作流程图5 2.1 前台管理完成界面功能一览5 1 界面关系及工作流程6 1 前台管理界面关系6 2 .界面关系6 登录界面6 页面说明6 页面迁移图6 页面说明7 前置条

2、件8 关联数据表8 补充说明：8 前台管理主界面8 页面说明8 页面迁移图9 页面说明9 入网登记单界面11 页面说明11 页面迁移图11 页面说明12 .总后总结：140.文档介绍 0.1文档目的 XX系统用户界面设计报告。是为了开发XX系统而编写，主要面向系统分析员、程序员、测试员、实施员和最终用户。 本说明书是整个软件开发的依据，它对以后阶段的工作起指导作用。本文也是项目完成后系统验收的依据。 0.2文档围 本文档主要包含以下几部分： .文档介绍 .界面设计规 .界面关系图 .主界面说明 0.3读者对象 本文档的读者主要包含以下几类： .界面设计人员 .美工人员 .编码人员 .测试人员

3、0.4参考文献 提示：列出本文档的所有参考文献（可以是非正式出版物），格式如下： 标识符作者，文献名称，出版单位（或归属单位），日期 例如： AAA作者，立项建议书，机构名称，日期 SPP-PROC-SDSEPG,系统设计规，机构名称，日期 0.5术语与缩写解释 缩写、术语 解释 GIF GraphicsInterchangeFormat的缩写一图像交换格式的缩写 .应当遵循的界面设计规 界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。 用户原则： :易用性： 按钮名称应该易懂，用词准确，屏弃模棱两可的字眼

4、，要与同一界面上的其他按钮易于区分，能望文知意最好，理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。 易用性细则： 1):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 2):按功能将界面划分局域块，用Frame框括起来，并要有功能说明或标题。 3):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前，位置也应放在窗口上较醒 目的位置。 4):同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。 5):复选框和选项框按选择几率的高底而先后排列。 6):复选框和选项框要有默认选项，并支持Tab选择。 7):选项数相同时多用选项框而不

5、用下拉列表框。 8):界面空间较小时使用下拉框而不用选项框。 9):选项数叫少时使用选项框，相反使用下拉列表框。 10):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。 .界面的关系图和工作流程图 前台管理完成界面功能一览 界囿名称 界面标识 功能说明 宽带互联网入网登记单 accept_innet.aspx 填写客户的入网信息，提交客户入网信息。 前台管理首界面 Default.aspx 显示前台管理中的全部功能菜单。 缴费受理 fee.aspx. 提供缴费的条件。 缴费登记单 fee_print.aspx 显示对应客户的信息及余额，填写客户缴费金额。 业务受理单 pr

6、int.aspx 对驳回的业务受理进行信息修改。 业务受理单 print_result.aspx 显示搜索结果。 修改密码 user_manage.aspx 对用户的密码进行修改。 界面关系及工作流程 前台管理界面关系 （修改布及搜索斯业务询缴晨理）dUniQ （查询果）（1|迥沁_）（缴费衿记。羊细料）（详细设料）新客户黑 图2-1XX系统客户端界面关系及工作流程图 .界面关系 登录界面 页面说明 登录页面为系统入口页面，只有通过登录方可使用系统，不同用户对应不同权限，权限不同的用户进入系统后的界面菜单项是不同的。 登录成功，转向主界面main.jsp。 权限信息参见3.XX权限设置页面。

7、补充说明: 登录对象 标识 功能 操作 前台管理用户 Login.aspx 是非锁定的经过审核的注册用户登录到新闻管理页面，管登录 XX系统前台管理一览表 停机申请 3.1.2页面迁移图 前台管理主界面 后台管理主界面 施工管理主界面 施工管理用户 Login.aspx 理员则登录到管 后台管理用户 Login.aspx 理员管理页面. 3.1.3页面说明 3.1.3,1界面原型 册司 图3-1XX系统登录界面login.aspx 3.1.3.2输入 控件名称 控件类型 栏目名称 必填 约束 初值 Username text 用户名 V 最小值10000 Password password 密

8、码 V 非空 6-10位 LoginButton submit 提交 补充说明 3.1.3.3处理 动作 步骤 处理说明 填写信息 1 输入用户名、密码 点击登录 2 单击“登录按钮” 进行验证 3 判断用户是否输入，若无，提示输入 判断资料 4 判断用户名、密码是否合法 返回信息 5 显示提示信息“您的登录尝试不成功。请重试。” 控件名称 控件类型 栏目名称 说明 3.1.4前置条件 前置条件 说明 3.1.5关联数据表 数据表 说明 BBC_EMPLOYEE 存储用户的用户编号和密码 补充说明 读写数据表时的注意事项，若简单读取，可空白 3.1.6补充说明: 对于此界面的其他补充说明。 前

9、台管理主界面 页面说明 显示前台管理中的全部功能菜单。 通过功能菜单进入相应得的功能界面， 主显示区域显示主要业务申请一入网申请，停机申请，故障申请。 单击入网申请按钮，进入新客户入网登记单界面。 补充说明： 宽带受理和业务受理是同一个界面。 页面说明 金/宽带收费管理系统 3北4受理I域费摄理Iat费亶*）1业务查询I暹曲 美千葡门I联良程flIEklish|用尸如外|站直地用 配于=翼调伸系版桃聃芭CcpjrigjLX电20D5AHlights凯 力丁汉置恚福豹iM览处里,建过用户便用m&岬心为必里粕力当$用尸秋落 用尸根 W：10D0D WffiSSlWffiSSl：前自营生 注

10、峰双落岩 S业/记询 |N辛 #每专珅|入网万萧|照机方诺|班申嘴| 业当iEiHthi, 空屋骗:慢一 选界韩 E 的韭彝类型，屋引申谄 v 需户 F 竞如 6 6 号 等尸机S 业贵普型 Bfk 10043 10D24 111 人阿 能改 1 1 口皿 10026 111 K网 LQ007LQ007 10333 111 入区 帏淳 LOOLOO 10K510K5 翼飞 是阿 韩理 皿加 im 射费 入网 幡/ L0L07 1OTM Af*C 睥学 （前台管/界面） 3.2.3.1界面原型 控件名称 控件类型 栏目名称 必填 约束 初值 txtAid TextBox 业务记录查询 最小值10

11、000 ddlTpye DropDownList “回的业务类型 设定值： 入网申请/停机申请/故障申请。 入网申请 btnInNet nput 业务受理 入网申请 btnStop nput 业务受理 停机申请 btnTrouble nput “务受理 故障申请 补充说明 界面中和还有些相同的功能，其控件基本上相似就不在这里一一列出。 3.2.3.3处理 业务记录查询处理: 动作 步骤 处理说明 填写受理编号 1 输入受理编号，非空 点击搜索 2 单击“搜索” 进行验证 3 判断用户是否输入，若无，提示输入 打开页面 4 打开处理结果页面 选择业务类型处理: 动作 步骤 处理说明 选择下拉 1

12、 选择不同的业务受理类型 显示记录 2 显示选择的驳回业务受理记录 业务受理：|人风申请停机鞫|旅障申请 业务受理处理: 动作 步骤 处理说明 单击按钮 1 单击需要受理的处理按钮 打开新界面 2 显示进行的业务受理记录单 3.2.3.4输出 控件名称 控件类型 栏目名称 说明 gvList GridView 驳回业务受理记录 显示被审核驳回的受理记录 3.2.3.4前置条件 条件 说明 成功登录系统 用户使用合法的成功登陆宽带管理系统 3.2,3.5关联数据表 数据表 说明 客户信息 (BBC_CUSTOMER表 表 存储客户信息的表 业务受理 (BBC_ACCEPT) 表 用业务受理表进行

13、保存。 实际工作的流程中， 业务受理需要业务受理号，受理人编号，时间日期，审核人编号，要求等字段容 服务类型 (BBC_SERVICE) 表 业务的种类控制也需要进行管理 业务受理类别表 (BBC_ACCEPT_TYPE) 在业务受理的时候对业务信息进行区分 补充说明 暂无 3.2.3.6补充说明: 对于此界面的其他补充说明。 入网登记单界面 页面说明 入网登记单界面显示了入网客户需要填写的各项信息，并且对填写的信息做基本的验证, 同时提供了入网登记单的打印功能。 入网登记单提交完成以后，自动生成业务受理记录。 客户入网成功以后弹出提示信息，失败同样显示提示信息。 页面迁移图 (业务受理新客户

14、入网*府 f 提示信息 补充说明： 用户填写客户填写基本资料，提交通过脚本检测：通过验证提交服务器程序处理，同时显示提示信息。验证没有通过，返回页面同时显示各项提示信息。 3.3.3,1界面原型 宽带互联网入网登记单 业晶提示：枷底标号的表项尚感多电埴写 空军窈号： 2U582U58 客尸幡号; 10D6610D66 俄人方式： 广皿，捋入LAfLAf入* 1,1,容户资料 4 4 客户墙写） | | |* * 万敏证件; 易符证广至官江广法殿）尸匚海口工商营也出骐* 证廿号玛二 1 1* * 用尸变初二 个人广当他 r r 网唔r单位局晡网 容尸荽事二 dzldzl 单位: 通信地*二 4

15、4 戴虻码二 1 1O O MA- 族茎电法！ 邺 揩用. 1 1 宏肇博址二 * 工根嘛小目 t t 谙寻 F F 优译埴 M,在嫌看要&TI&TI 喧前画选撵） 蛆网方式二 虎找按岩专嫩_r_r 且自 透平二 广也 K K 广 1M1MLiNLiN讨4M4M 广 G G 海 苣工方至二 广电诏插装配 3L3L装电话和 U UL L笨 MISLMISL0 01313 口敝帖配 5L*5L* 是否需姿调试二 是否* 用尸就卷卷二 用厂自备厂租用档用厂免费提实 r r 其它 ，费同期： 广等月半年广隹季度广一用 是否曲惠二 是舌* 寿奥生： 1 1* * 3.3.笛芷 1 1 i

16、 i申谙声明 K 人邹市声时；，上埴 WF1WF1金库雪并习已运法并同意本登记中芍面附布的工互评网服筠的心 日叫时间：却叫121225152515：9595：4545 一|一申琴单打卬吴阳登记单 3.3.3.2输入 控件名称 控件类型 栏目名称 必填 约束 初值 RBL_innet RadioButtonList 接入方式 V 定制（注释1） TbName TextBox 客户 V 最多8字符 RBLPaper RadioButtonList 有效证件 V 定制（注释2） TBPapern TextBox 证件 V 最长字符数18 RBLUser_type RadioButtonList 客户

17、类别 V 定制（注释3） TBAddress TextBox 通信地址 V 最长字符数50 TBPastalcode TextBox 邮政编码 X 6位 Tblinkman TextBox 联系人 V 最多8字符 TBEmail TextBox 常用Email X 电子地址 TBUnits TextBox 单位 V 最多50字符 TBSetAdd TextBox 安装地址 V 最多50字符 TBphone TextBox 联系 V 最多5位区号一最多8 RBLService_content1 RadioButtonList 组网方式 V 定制（注释4） RBLService_content2

18、RadioButtonList 速率 V 定制（注释5） RBLService_content3 RadioButtonList 施工方式 V 定制（注释6） RBLService_content4 RadioButtonList 是否调试 V 定制（注释7） RBLService_content5 RadioButtonList 用户端设备 V 定制（注释8） RBLService_content6 RadioButtonList 缴费周期 V 定制（注释9） DDLServerType DropDownList 服务类别 V 定制（注释10） RBLService_content7 Rad

19、ioButtonList 是否优惠 定制（注释11） TBMemo TextBox 备注 V 最多100字符 TBUserRequre TextBox 客户要求 X 最多100字符 注释说明表: 编号 项目 定制容 1 接入方式 ADSL接入DLAN接入 2_ 有效证件 口口军官证口护照户口簿工商营业执照 3_ 客户类别 口个人口单位口网吧口单位局域网 4_ 组网方式 口虚拟拨号口专线口其它 5_ 速率 512KD1MD1.5MD2MD4MD6M 61 施工方式 力装ADSL口装和ADSL装ADSL口ISDN改装ADSL 7 是否需要调试 口是否 8 用户端设备 口用户自备口租用口借用免费提供口其它