摘 要

随着计算机技术和通讯技术的飞速发展，要处理的报表、报告等信息越来越多，办公自动化系统的应用范围越来越广。但是大多数办公系统往往更加注重后台的实现，而忽视了前端在系统中的重要性，而一个好的界面和交互设计，能使用户更加容易的掌握系统的操作方法，轻松的了解页面想传达的重要信息，给用户带来非常舒适的体验，从而提高办公效率。

本文以华中科技大学院系办公系统为例，以用户为中心，结合院系办公系统的实际情况，进行功能梳理、需求分析。并根据梳理分析的结果，以简洁明了为基本设计目标，站在用户的角度，设计出一套简洁明了、易于操作的院系办公系统。最后在根据设计图，通过基础的前端语言和一些辅助性的框架和插件，基于HTML5，将包括登录页面、主页、个人中心、毕设选题系统、会议室预约系统和教师考核子系统在内的完整的院系办公系统实现出来。

本文首先阐述了院系办公系统的现状和背景意义，HTML5的优点和采用HTML5开发的必要性，然后站在用户的角度，完成了一个界面简洁美观、易于操作、维护性好的院系办公系统。但本系统采用了HTML5和CSS3等比较新的特性和ES6的一些语法，浏览器的兼容性上没有考虑的很周全，在之后的开发中，会针对浏览器的兼容性进行进一步的研究，进一步的完善院系办公系统。

关键词：院系办公系统；HTML5；用户体验；界面设计；

Abstract

With the rapid development of computer and communication,there is more and more information such as reports and forms should be processed,and the application of the office automation system is becoming wider and wider.But most office automation systems tend to pay more attention to the development of back-end and the processing of data,while ignoring the importance of the front-end in the whole system.However,an excellent interface design is also an inseparable part of an excellent system.An excellent system can make users master the method of operating system more easily, and people can gain the important information that page wants to convey to users more easily.Users can enjoy a very comfortable experience that the page gives them,so as to improve the efficiency.

This paper will take the office automation system of Huazhong University of Science and Technology as an example, taking the user as the center,combining the actual situation, aiming to design an elegant simplicity and easy to operate office automation system.Firstly,we should card the function of system.Secondly,we should and analyze the demand based on the users.Finally, in accordance with design drawings accomplished by the above two steps,through the front-end language foundation and some auxiliary framework and plug-in,based on HTML5,achieve a system including the log-in page,home page,personal center,the subsystem of selecting the graduation design,the subsystem of appointing the room and the subsystem of assessing teacher.

This paper describes the current status and background of office automation system the advantages of HTML5 and the necessity of applying HTML5 firstly.And then from the user's point of view, complete an office automation system having simple and beautiful interface, easy operation and maintenance. However,in case of using some new features of HTML5 and CSS3 and syntax of ES6 , browser compatibility is not considered very well.In the subsequent development, we will make a further research of the browser compatibility, and make the office automation system more perfect.

Key Words：Office Automation system; HTML5; Interaction design; User Experience; Interface Design

目 录

1 绪论 1

1.1 课题研究背景及意义

1.2 国内外研究现状

1.3 本文组织架构

2 办公自动化系统的分析 5

2.1 办公自动化系统应用HTML5的必要性

2.2 办公自动化系统功能梳理

2.3 办公自动化系统需求分析

2.4 本章小结

3 办公自动化系统界面及交互设计 13

3.1 系统界面设计的整体规划

3.2 登录页面

3.3 导航栏

3.4 毕设选题子系统

3.4.1 学生毕设选题页面

3.4.2 教师毕设选题页面 23

3.4.3 管理员毕设选题页面

3.5 会议室预约子系统

3.6 教师考核子系统

3.7 本章小结

4 办公自动化系统前端实现 33

4.1 办公页面模板的实现

4.2 多功能表格的实现

4.3 步骤条的实现

4.4 可模糊匹配的下拉选择菜单

4.5 基于HTML5的表单

4.6 Ajax同服务器交换数据

4.7 小结

5 总结与展望 38

5.1 总结

5.2 展望

致 谢 39

参考文献 40

1 绪论

本课题研究的是华科自动化学院办公系统，完成包括毕设选题、会议室预约、教师考核等功能。在Visual Studio 2015中，基于以MVC模式为基础的ASP.NET应用程序框架，采用B/S（Browser/Server，浏览器/服务器模式）架构开发模式进行开发。这种模式下，系统分为前端和后台两部分，后台包括控制器，业务逻辑和数据库的处理，前端包括视图，样式表和脚本的编写，两部分独立进行代码编写，由于各功能的实现都需要两部分联合调试成功，所以两部分进度保持相同。本课题对前端部分进行研究。本章将对办公自动化系统和HTML5研究背景及意义进行简要介绍，并对HTML5国内外研究现状和不足进行概述，最后对本文的组织结构及研究内容进行简要概述。