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

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

《软件测试用户界面设计.docx》由会员分享，可在线阅读，更多相关《软件测试用户界面设计.docx（9页珍藏版）》请在冰点文库上搜索。

软件测试用户界面设计

学生综合测评管理系统项目

用户界面设计报告

文件状态：

[√]草稿

[]正式发布

[]正在修改

文件标识：

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

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

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

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

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

0.5术语与缩写解释

缩写、术语

解释

FH

枫火

SCAMS

学生综合测评管理系统，Students'comprehensiveassessmentmanagementsystem

UIDR

用户界面设计报告，UserInterfaceDesignReport

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

好的用户界面：

符合用户需求，易用，美观。

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

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

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

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