软件测试-用户界面设计.docVIP

学生综合测评管理系统项目 用户界面设计报告 文件状态： [√] 草稿 [ ] 正式发布 [ ] 正在修改 文件标识： FH-SCAMS-UIDR –DESIGN 当前版本： 1.0 作 者： 完成日期： 版 本 历 史 版本/状态 作者 参与者 起止日期 备注 1.0 目录 0. 文档介绍 4 0.1 文档目的 4 0.2 文档范围 4 0.3 读者对象 4 0.4 参考文献 4 0.5 术语与缩写解释 4 1. 应当遵循的界面设计规范 5 2. 界面的关系图和工作流程图 5 3. 登录界面 6 3.1 登录界面效果图 6 3.2 登录界面介绍 6 4. 主界面 7 4.1 主界面效果图 7 4.2 主界面介绍 7 5. 子界面 – 个人信息界面 8 5.1 个人信息界面效果图 8 5.2 个人信息界面介绍 8 6. 美学设计 8 6.1 界面布局 8 6.2 界面色彩搭配 9 7. 界面资源设计 9 0. 文档介绍 0.1 文档目的 本文档阐述“学生综合测评管理系统”的界面设计。 0.2 文档范围 本文档主要介绍了学生综合测评管理系统的用户界面之间的关系和设计流程。 0.3 读者对象 本系统的开发人员和管理人员。 0.4 参考文献 1. 面向用户的管理信息系统界面设计 苏子林 徐群叁 孙中红 鲁东大学计算机科学与技术学院 2013/10/7 0.5 术语与缩写解释 缩写、术语 解 释 FH 枫火 SCAMS 学生综合测评管理系统，Students comprehensive assessment management system UIDR 用户界面设计报告，User Interface Design Report 1. 应当遵循的界面设计规范 好的用户界面：符合用户需求，易用，美观 3. 登录界面 3.1 登录界面效果图 3.2 登录界面介绍 此界面对用户名和密码做了错误和空白提示，不同的用户分为三类：学生、辅导员、管理员，用户可以根据用户名的不同权限登录系统，即系统会跳转到不同的网页。 4. 主界面 4.1 主界面效果图 4.2 主界面介绍 主界面主要分为三类：学生主界面、辅导员主界面、管理员主界面。其中学生界面包括：信息管理，信息查看，加分申请，关于系统；辅导员主界面包括信息管理，信息查看，审核申请，关于系统；管理员主界面包括信息管理、用户管理、关于系统。部分选项分出了几个子项，点击不同的模块选项，会进入不同的子界面。 5. 子界面 – 个人信息界面 5.1 个人信息界面 5.1.1个人信息界面效果 5.1.2个人信息界面介绍 此界面从属于信息管理里的子界面，包括：查看用户自身信息、查看自己综合测评结果、更换头像的功能，用户可以直观地查看自己的相关信息。 5.2 测评规则界面 5.2.1测评规则界面效果 5.2.2测评规则界面介绍 该界面显示了学生综合测评管理系统规则部分的内容，给出了老师的制定的详细规则的内容。 6. 美学设计 6.1 界面布局 在界面布局上，采用div分块；主体都是用了两列浮动，一列上下自适应分块。一列主框突出页面主体内容，上下两个分块引进了新的信息内容，增加的信息的摄入。总体看上去简约大方，易于上手。 在边框处理上采用圆角边框，给人以柔和亲近的感觉。 6.2 界面色彩搭配 登录界面采用了水晶效果的蓝色背景，蓝色代表深邃、内在、智慧，能给使用者带来宁静致远的感觉，使之心情舒畅。 系统界面主要采用淡蓝色，作为信息系统没有花哨的背景色，看上去更加清晰、直观。 7. 界面资源设计 界面设计的系列图片、图标 学生综合测评管理系统，《用户界面设计报告》 ( 枫火，2013 Page 10 of 10 西南科技大学计算机科学与技术学院 第三届卓越工程师班第七组