软件测试用户界面设计.docx

1、软件测试用户界面设计学生综合测评管理系统项目用户界面设计报告文件状态： 草稿 正式发布 正在修改文件标识：FH-SCAMS-UIDR DESIGN当前版本：1.0作 者：完成日期：西南科技大学计算机科学与技术学院第三届卓越工程师班第七组版 本 历 史版本/状态作者参与者起止日期备注1.0目录0. 文档介绍 40.1 文档目的 40.2 文档范围 40.3 读者对象 40.4 参考文献 40.5 术语与缩写解释 41. 应当遵循的界面设计规范 52. 界面的关系图和工作流程图 53. 登录界面 63.1 登录界面效果图 63.2 登录界面介绍 64. 主界面 74.1 主界面效果图 74.2 主

2、界面介绍 75. 子界面 个人信息界面 85.1 个人信息界面效果图 85.2 个人信息界面介绍 86. 美学设计 86.1 界面布局 86.2 界面色彩搭配 97. 界面资源设计 90. 文档介绍0.1 文档目的本文档阐述“学生综合测评管理系统”的界面设计。0.2 文档范围 本文档主要介绍了学生综合测评管理系统的用户界面之间的关系和设计流程。0.3 读者对象 本系统的开发人员和管理人员。0.4 参考文献1. 面向用户的管理信息系统界面设计 苏子林 徐群叁 孙中红 鲁东大学计算机科学与技术学院 2005年11期2. 基于WEB的人员管理信息系统的界面设计与实现 高远 福州大学福建省空间信息工程

3、研究中心空间数据挖掘与信息共享教育部重点实验室2009年09期3. 计科学院 计科学院2012年本科生综合测评评定细则 20124. 枫火组 学生综合测评管理项目开发计划 2013/9/85. 枫火组 学生综合测评管理项目需求规格说明书 2013/10/70.5 术语与缩写解释缩写、术语解 释FH枫火SCAMS学生综合测评管理系统，Students comprehensive assessment management systemUIDR用户界面设计报告，User Interface Design Report1. 应当遵循的界面设计规范好的用户界面：符合用户需求，易用，美观。在设计上需功能

4、合理、易于理解、反馈及时、防错处理、布局合理、色彩合理、风格一致、必要适应用户群体和国际化、最高效率、可复用。2. 界面的关系图和工作流程图3. 登录界面3.1 登录界面效果图3.2 登录界面介绍 此界面对用户名和密码做了错误和空白提示，不同的用户分为三类：学生、辅导员、管理员，用户可以根据用户名的不同权限登录系统，即系统会跳转到不同的网页。4. 主界面4.1 主界面效果图4.2 主界面介绍主界面主要分为三类：学生主界面、辅导员主界面、管理员主界面。其中学生界面包括：信息管理，信息查看，加分申请，关于系统；辅导员主界面包括信息管理，信息查看，审核申请，关于系统；管理员主界面包括信息管理、用户管

5、理、关于系统。部分选项分出了几个子项，点击不同的模块选项，会进入不同的子界面。5. 子界面 个人信息界面5.1 个人信息界面5.1.1个人信息界面效果5.1.2个人信息界面介绍此界面从属于信息管理里的子界面，包括：查看用户自身信息、查看自己综合测评结果、更换头像的功能，用户可以直观地查看自己的相关信息。5.2 测评规则界面5.2.1测评规则界面效果5.2.2测评规则界面介绍 该界面显示了学生综合测评管理系统规则部分的内容，给出了老师的制定的详细规则的内容。6. 美学设计6.1 界面布局在界面布局上，采用div分块；主体都是用了两列浮动，一列上下自适应分块。一列主框突出页面主体内容，上下两个分块引进了新的信息内容，增加的信息的摄入。总体看上去简约大方，易于上手。在边框处理上采用圆角边框，给人以柔和亲近的感觉。6.2 界面色彩搭配登录界面采用了水晶效果的蓝色背景，蓝色代表深邃、内在、智慧，能给使用者带来宁静致远的感觉，使之心情舒畅。 系统界面主要采用淡蓝色，作为信息系统没有花哨的背景色，看上去更加清晰、直观。7. 界面资源设计界面设计的系列图片、图标