本文主要是采用 HTML5和CSS3进行页面布局、通过JavaScript实现各个元素相应的效果和交互、以H-Builder作为开发平台，完成的一个信息采集系统前端的设计与开发。目的是通过网络实现对单位和个人的信息采集和处理，为用户提供一个简明便捷的信息采集平台。本系统包含了用户登录页面、问卷管理员注册页面、用户管理页面、问卷设计页面、问卷修改页面、问卷管理页面、问卷填写页面和答题者管理页面等，是一个功能比较完善的系统。

本系统前端设计与开发的特色在于，对移动端页面自适应显示的研究以及JSON数据格式的应用。

本文主要阐述了信息采集系统的前端从设计到开发完成的过程。信息采集系统致力于为广大用户服务，提供方便会快捷的信息采集方式。为突出系统的特色，系统首页嵌入百度地图，既增添了网站的交互性，又使各个地域的信息采集情况一目了然的呈现在用户面前。系统开发中综合应用了如下技术：B/S 架构设计技术、Bootstrap框架、JSON数据传输。

系统用户分析

每个用户的身份不同，所获权限以及执行范围也不同。根据需求，可将本系统设计分为三类用户：系统管理员、问卷管理员、答题用户。

其中，系统管理员属于高级用户，可以查看所有用户的基本信息，以及对信息采集问卷进行管理；问卷管理员使用本系统前需要注册，在注册成功后即可登录后进入本系统，管理其自创的信息采集问卷以及管理参与其信息采集的答题用户；答题用户与问卷管理员类似，注册成功后方可登录系统，进行作答操作。

问卷管理员设计问卷活动图

问卷管理员先登录进入本系统，然后选择问卷设计的方式：自行起草或导入已有的Excel问卷模板。选择自行起草问卷，则进入问卷编辑模式，自行添加问卷标题及说明，并选择自己所需的题型，编辑完成后提交，进入问卷待审核状态；若选择导入Excel问卷模板，则问卷编辑立即完成，直接提交进入问卷待审核状态。

答题用户填写问卷活动图

答题用户通过问卷管理员给予的问卷答题链接，填写个人基本信息（姓名、性别、生日、电话），待注册成功后登录进入本系统，进入问卷填写界面，开始作答。问卷填写完成后，若必答题目无空白，则直接提交问卷；若必答题目空白，则出现错误提示，需用户重新作答。