一、需求沟通

"我是管理商场消防安全的嘛,做这个的作用呢,1是商场的所有商户员工可以看平面或者视频随时自学,
2是我们定期培训必修课程、考试,这个需要留存他们的手签字的签到表确认我们讲给他们听了(免责很重要),然后考试可以多次反复考,考完只要不是满分都告诉商户员工错题是哪个,直到全都满分,同时我得知道哪些商户的那些人员没考试和没签名,
3是重要检查时的全员通知,重大节假日的全员通知,重大活动的全员通知;
4.是我们公司人员的培训,和商户流程基本一样,指示讲的课程不一样。"
二、需求分析
经过一轮的沟通,了解到他们想做个公司内部用的消防安全培训的小程序。大体上实现功能如下:
1.重要消防相关信息发布提醒;
2.培训课程库播放,文档的,加视频的;
3.题库、考试单选、多选、判断三类题 ;
4.考试成绩查询、输出表单 ;
5.单次培训:限时内完成,签到(手签名),限时内完成考试;
三、系统设计与搭建
1. 首页设计
首页采用卡片式布局,顶部为通知栏:
- 消防安全通知轮播横幅
- 重要信息提醒红点标识
- 未读消息数量提示主要功能区分为四大模块:
- 培训课程:展示最新/必修课程
- 在线考试:显示待完成考试
- 培训记录:个人培训完成情况
- 成绩查询:考试成绩汇总
2. 培训课程页面
课程库采用列表式布局:
- 顶部搜索栏
- 课程分类标签筛选
- 课程卡片展示(包含封面图、课程名称、时长、类型图标)
- 支持三种形式课程:文档、视频、外部链接
- 课程进度显示条
- 完成状态标识
3. 考试系统页面
考试页面分为两个部分:
-
考试列表: * 未完成考试提醒
- 考试时间倒计时 * 考试类型标识 * 及格分数线显示
-
试题界面:
- 顶部进度条
- 题型分类标签
- 单选/多选/判断题展示区 * 答题卡浮动按钮 * 提交按钮
4. 签到考勤页面
单次培训签到界面:
- 培训信息展示
- 电子签名板
- 签到时间记录
- 培训倒计时提示
- 考试入口(限时开放)
5. 成绩查询页面
成绩管理采用表格式布局:
- 时间筛选器
- 考试记录列表
- 成绩详情展示
- 导出表单按钮
- 成绩分析图表

其他作品集







