软件测试用户界面设计

学生综合测评管理系统项目用户界面设计报告

版本历史

西南科技大学计算机科学与技术学院

第三届卓越工程师班第七组

目录

0. 文档介绍 (3)

0.1文档目的 (3)

0.2文档范围 (3)

0.3读者对象 (3)

0.4参考文献 (3)

0.5术语与缩写解释 (3)

1. 应当遵循的界面设计规范 (4)

2. 界面的关系图和工作流程图 (4)

3. 登录界面 (5)

3.1登录界面效果图 (5)

3.2登录界面介绍 (5)

4. 主界面 (6)

4.1主界面效果图 (6)

4.2主界面介绍 (6)

5. 子界面–个人信息界面 (6)

5.1个人信息界面效果图 (6)

5.2个人信息界面介绍 (7)

6. 美学设计 (9)

6.1界面布局 (9)

6.2界面色彩搭配 (9)

7. 界面资源设计 (9)

0. 文档介绍

0.1 文档目的

本文档阐述“学生综合测评管理系统”的界面设计。

0.2 文档范围

本文档主要介绍了学生综合测评管理系统的用户界面之间的关系和设计流程。

0.3 读者对象

本系统的开发人员和管理人员。

0.4 参考文献

1.面向用户的管理信息系统界面设计苏子林徐群叁孙中红鲁东大学计算机科学与技术学院 2005年11期

2.基于WEB的人员管理信息系统的界面设计与实现高远福州大学福建省空间信息工程研究中心空间数据挖掘与信息共享教育部重点实验室2009年09期

3. 计科学院计科学院2012年本科生综合测评评定细则 2012

4. 枫火组学生综合测评管理项目开发计划2013/9/8

5. 枫火组学生综合测评管理项目需求规格说明书 2013/10/7

0.5 术语与缩写解释

1. 应当遵循的界面设计规范

好的用户界面：符合用户需求，易用，美观。在设计上需功能合理、易于理解、反馈及时、防错处理、布局合理、色彩合理、风格一致、必要适应用户群体和国际化、最高效率、可复用。

2. 界面的关系图和工作流程图

3.1 登录界面效果图

3.2 登录界面介绍

此界面对用户名和密码做了错误和空白提示，不同的用户分为三类：学生、辅导员、管理员，用户可以根据用户名的不同权限登录系统，即系统会跳转到不同的网页。

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. 界面资源设计

界面设计的系列图片、图标