基于web的教育机构交互式网站的设计与开发

本网站面向某教育机构的交互功能, 充分研究该平台的界面设计方案, 研究实现的设计流程和开发手段, 设计出一款教育机构可交互式的网站。

一、用户界面分析

本网站的用户分为学生、老师和管理员三种, 以下将从三类用户的角度出发, 去深入研究他们的功能需求以及界面设计需求。

(一) 学生用户界面分析

学生用户的登录界面背景以爱国主义、积极向上的图片及色调为主, 选用适宜的背景图片作为整体设计, 整体结构简洁, 清晰明了, 通过登录按钮将用户的具体信息上交给服务器端, 由学生用户Servlet文件进行响应处理。

学生用户登录到信息平台后, 呈现的界面有两个区域, 分别是指示域与操作域, 同时背景的设计符合整体界面的基本色调, 又要能将各个显示域很好地分隔开来。

(二) 教师用户界面分析

老师用户的登录界面基本与学生登录界面一致。由于教师用户在该信息平台中具有一定的管理权限, 为了防止总界面中的分支太多, 界面繁杂, 本系统将老师用户界面和管理员用户界面进行了合并, 以Com Box控件来区别老师身份与管理员身份, 这样就可以节省总界面的区域分支, 从而使总界面看上去更加清晰明了。功能交互界面也分为两个区域, 即指示域和操作域, 但其指示域中的功能项目要比学生域中的多, 而且操作域中需要读取与输入数据等, 操作功能也会有所增加。

(三) 管理员用户界面分析

管理员用户与教师用户在同一登录界面下, 使用控件Com Box区别开来。相比于学生用户与老师用户的交互界面设计, 管理员界面在指示域上的功能项目要更多, 而且是具有很高权限的功能项目, 比如可以管理学生用户和老师用户, 在操作域上, 管理员用户界面所需的操作类型要求更高而且更复杂, 因此管理员界面是本系统的核心界面。

(四) 平台共享界面分析

信息平台的共享界面具有总体指向性作用, 本系统的共享界面设计要基于学生用户、老师用户和管理员用户的共同体验, 其背景设计既要突出主题, 又要符合教育平台的内容。

本系统的共享界面分类明确, 引导性强, 用户接纳度高, 并且界面整体设计规范、整洁。

二、网站场景设计

(一) 学生用户场景设计

学生用户场景设计特点为信息充分、引导性强、结构清新, 此外其共享界面还设有发帖区域, 以供学生进行课程的分享、信息的交流和对于该机构信息平台的评价等。最后, 若需要教师互动答疑, 则教师的答疑内容也将在该区域中显示。

(二) 教师用户场景设计

教师用户场景包含课程信息发布, 通知通告, 发帖回帖等部分, 更重要的是可以管理学生交流论坛上的帖子, 从而保证论坛内容的合理合法性。

(三) 管理员用户场景设计

管理员用户是整个用户中权限最高的用户, 可以管理另外两种用户的发布内容, 以控制网站整体内容向好。管理员用户的功能界面除囊括了教师用户的所有功能之外, 还包括以下功能:允许用户修改密码, 并查询、显示用户密码;创建新的教师用户、修改老师用户基本信息等。

三、网站的设计与实现

通过利用JSP技术, 再结合Html (超文本标记语言) 、Css (层叠样式表) 以及Javascript相关界面设计技术, 首先做出共享界面中的整体框架的顶部界面与底部界面, 并将两者作为固定界面结构存储在不同的JSP文件下。以下仅列出网站具有交互功能的部分页面。

(一) 共享界面设计

首先是共享界面上的首页区域界面设计, 该界面在顶部固定界面与底部固定界面之间需要有图片显示区与表格显示区, 且图片显示区需要用Jquery (一种Javascript框架) 实现圆点图片轮播效果, 表格区既有非编辑文本, 用于显示课程名称、学习信息、发布时间等, 又有特殊文本, 即可用于连接的文本, 具体界面设计如图1所示。

在共享界面上选择“交流论坛”或“问题解答”选项区域, 便可实现交互功能。

在数据库的相应表中返回的回帖数据存储情况如图2所示。

(二) 交互实现流程

交互功能体现在系统管理员或教师发布的主题内, 学生可以在交流论坛区进行发帖互动。教师与管理员发帖的界面与实现过程与学生操作类似, 这里不再一一列出。

四、结语

本交互式网站是针对某教育机构设计的服务平台, 通过界面分析、用户场景设计及交互功能设计, 实现了学生与教师的在线交流, 及管理员对系统的总体管理等功能。

摘要：伴随着信息科技的飞速发展, 拥有一个令用户满意且具有相应功能的交互式信息界面, 是每个公司的网站和系统都必须具备的基本条件, 因此基于用户体验的交互式界面的设计就显得尤为重要。本网站以html5+css3+javascript为基本前端技术, 配合jquery、boostrap等框架, 并使用Java、MySQL等后台程序, 实现了界面友好的适用于教育培训机构的交互式网站。

关键词：教育机构,交互,网站