一、需求沟通

“我是管理商场消防安全的嘛，做这个的作用呢，1是商场的所有商户员工可以看平面或者视频随时自学，

2是我们定期培训必修课程、考试，这个需要留存他们的手签字的签到表确认我们讲给他们听了（免责很重要），然后考试可以多次反复考，考完只要不是满分都告诉商户员工错题是哪个，直到全都满分，同时我得知道哪些商户的那些人员没考试和没签名，

3是重要检查时的全员通知，重大节假日的全员通知，重大活动的全员通知；

4.是我们公司人员的培训，和商户流程基本一样，指示讲的课程不一样。”

二、需求分析

经过一轮的沟通，了解到他们想做个公司内部用的消防安全培训的小程序。大体上实现功能如下：

1.重要消防相关信息发布提醒；

2.培训课程库播放，文档的，加视频的；

3.题库、考试单选、多选、判断三类题 ；

4.考试成绩查询、输出表单 ；

5.单次培训：限时内完成，签到（手签名），限时内完成考试；

三、系统设计与搭建

1. 首页设计

首页采用卡片式布局，顶部为通知栏:

• 消防安全通知轮播横幅
• 重要信息提醒红点标识
• 未读消息数量提示主要功能区分为四大模块:
• 培训课程：展示最新/必修课程
• 在线考试：显示待完成考试
• 培训记录：个人培训完成情况
• 成绩查询：考试成绩汇总

2. 培训课程页面

课程库采用列表式布局:

• 顶部搜索栏
• 课程分类标签筛选
• 课程卡片展示（包含封面图、课程名称、时长、类型图标）
• 支持三种形式课程：文档、视频、外部链接
• 课程进度显示条
• 完成状态标识

3. 考试系统页面

考试页面分为两个部分:

• 考试列表： * 未完成考试提醒
  • 考试时间倒计时 * 考试类型标识 * 及格分数线显示

• 试题界面：
  • 顶部进度条
  • 题型分类标签
  • 单选/多选/判断题展示区 * 答题卡浮动按钮 * 提交按钮

 

4. 签到考勤页面

单次培训签到界面:

• 培训信息展示
• 电子签名板
• 签到时间记录
• 培训倒计时提示
• 考试入口（限时开放）

5. 成绩查询页面

成绩管理采用表格式布局:

• 时间筛选器
• 考试记录列表
• 成绩详情展示
• 导出表单按钮
• 成绩分析图表

其他作品集