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

学生综合测评管理系统项目 用户界面设计报告 文件标识 FH SCAMS UIDR DESIGN 当前版本 1 0 作 者 文件状态 草稿 正式发布 正在修改 完成日期 版 本 历 史 版本 状态作者参与者起止日期备注 1 0 西南科技大学计算机科学与技术学院 第三届卓越工程师班第七组 学生综合测评管理系统 用户界面设计报告 枫火 2013Page 2 of 10 目录目录 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 学生综合测评管理系统 用户界面设计报告 枫火 2013Page 3 of 10 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 comprehensive assessment management system UIDR用户界面设计报告 User Interface Design Report 学生综合测评管理系统 用户界面设计报告 枫火 2013Page 4 of 10 1 应当遵循的界面设计规范应当遵循的界面设计规范 好的用户界面 符合用户需求 易用 美观 在设计上需功能合理 易于理解 反馈及 时 防错处理 布局合理 色彩合理 风格一致 必要适应用户群体和国际化 最高效率 可复用 2 界面的关系图和工作流程图界面的关系图和工作流程图 学生综合测评管理系统 用户界面设计报告 枫火 2013Page 5 of 10 3 登录界面登录界面 3 13 1 登录界面效果图登录界面效果图 3 23 2 登录界面介绍登录界面介绍 此界面对用户名和密码做了错误和空白提示 不同的用户分为三类 学生 辅导员 管理 员 用户可以根据用户名的不同权限登录系统 即系统会跳转到不同的网页 学生综合测评管理系统 用户界面设计报告 枫火 2013Page 6 of 10 4 主界面主界面 4 1 主界面效果图主界面效果图 4 24 2 主界面介绍主界面介绍 主界面主要分为三类 学生主界面 辅导员主界面 管理员主界面 其中学生界面包括 信息管理 信息查看 加分申请 关于系统 辅导员主界面包括信息管理 信息查看 审核 申请 关于系统 管理员主界面包括信息管理 用户管理 关于系统 部分选项分出了几个 子项 点击不同的模块选项 会进入不同的子界面 5 子界面子界面 个人信息界面个人信息界面 5 15 1 个人信息界面个人信息界面 5 1 1 个人信息界面效果个人信息界面效果 学生综合测评管理系统 用户界面设计报告 枫火 2013Page 7 of 10 5 1 2 个人信息界面介绍个人信息界面介绍 此界面从属于信息管理里的子界面 包括 查看用户自身信息 查看自己综合测评结果 更换头像的功能 用户可以直观地查看自己的相关信息 5 25 2 测评规则界面测评规则界面 5 2 1 测评规则界面效果测评规则界面效果 学生综合测评管理系统 用户界面设计报告 枫火 2013Page 8 of 10 5 2 2 测评规则界面介绍测评规则界面介绍 该界面显示了学生综合测评管理系统规则部分的内容 给出了老师的制定的详细规则的 内容 学生综合测评管理系统 用户界面设计报告 枫火 2013Page 9 of 10 6 美学设计美学设计 6 16 1 界面布局界面布局 在界面布局上 采用 div 分块 主体都是用了两列浮动 一列上下自适应分块 一列主框 突出页面主体内容 上下两个分块引进了新的信息内容 增加的信息的摄入 总体看上去简 约大方 易于上手 在边框处理上采用圆角边框 给人以柔和亲近的感觉 6 26 2 界面色彩搭配界面色彩搭配 登录界面采用了水晶效果的蓝色背景 蓝色代表深邃 内在 智慧 能给使用者带来宁静 致远的