昨天遇到了恩师陈教官,聊了一下移动端在线考试的话题,他提到想优化一下培训时的测试,希望能做出一个“驾考宝典”式手机考试工具。我一听就来劲了,难得遇到喜欢探索培训新事物的良师益友,于是立马推荐了几个方案,其中一个成本最低的方案就是用表单工具设计。
当晚,我在宿舍用表单做了两个小模板,一个是测评工具,即可用于培训测试的山寨“驾考宝典”,另一个是评选工具,可用于活动投票或内部讲师打分,今天正好借助这两个模板讲一讲进阶版表单制作。
先看案例,请点击蓝色标题进入链接进行体验,要答题才会看到效果哦:
案例1 读书活动知识竞赛复习自测题
案例2 格力五星奋斗者评选
案例1——读书活动知识竞赛复习自测题
这个模板是用金数据做的, 涉及的要点有3个:表单标签的选择、UI设计、表单规则。
1、表单标签的选择
要实现案例1的“自测题”功能,用到的标签有选择(标题+选项)、分节(标题+提示)、提交按钮,标签种类比较单一,所以内容的填充不复杂,只需要按部就班地编辑。
但是如果考试题型较多,则需要用到一些别的标签,例如下拉框、矩阵填空等。操作方法很简单,点击选择标签,然后编辑标签文字内容和选项模板即可。
金数据常见的表单标签如下图所示,非常丰富,绝对能满足日常所需,当然,组合使用口味更佳哦。
2、UI设计
UI(user interface)是表单给人的第一印象,在一定程度上决定了受众会不会好好填表,所以做一个好的UI非常重要。
这个案例是用空白模板直接新建的,我在网上找了一张书籍的图片做页眉填充,背景采用和图片相似色系的系统背景,这样避免了纯色的单调和页眉图片的突兀。在文字的处理上,采用咖啡色作为主题色,再调整大小,让整体趋于和谐。
3、表单规则
这是实现选择答案后出现提示的关键,也是这套“答题系统”的核心所在。
内容区域完成编辑后,在“规则”栏选择“字段规则”,针对每个问题的每个选项分别设置对应规则(本质其实就是超链接),若问题较多的话设置起来有点麻烦,但设置完成后效果还是不错的。用字段规则可以实现不同选项出现不同结果的提示,也就实现了答题后显示是否正确以及出现答案解析的功能。
案例2——格力五星奋斗者评选
这是我YY出来的一个评选,仅作模板使用。制作工具是兔展,涉及的要点依然是3个:H5排版、UE优化、表单按钮使用。
1、H5排版
H5可以理解为手机上的PPT,排版思想也和PPT排版类似,只是由横向变为纵向,而且动画更加丰富和重要。用H5做表单的好处在于可以将表单的背景环境(situation)生动地演绎出来,让受众能够更好地理解将要填写的表单。
和PPT制作一样,事先准备好素材(图片、文案),然后再根据你设置的故事,将素材以恰当的方式填充于其中,再调整动画即可。需要注意的是,由于目的是让受众填表,H5的引入部分不能太长,否则就喧宾夺主了。
2、UE优化
其实用H5做背景导入就是UE(user experience)优化的一种,这里想要说明的是细节的改善。从受众的角度考虑,他们既然要填这个表,首先需要知道填表的意义所在(H5故事导入),知道怎么填(适当的文字说明,文字颜色大小合适),填写时的注意事项(提交提醒,提交之后的提示语提醒),填写完成后的感谢。做好这些就已经脱离屌丝表单的行列了。
3、表单按钮的使用
这个案例是一个评分案例,我采用的是星级评定,其实还有一些可替代的个性化方式,比如点赞、直接点选等,虽然H5中的表单种类较少,但可以适当组合,经过组合的表单会非常新颖有趣,吸引受众。操作方法是点选表单工具,选择表单按钮,编辑相关内容。
除此之外,利用H5平台还可以实现交互的效果,做法是设置一个超链接,调整透明度为100%,与按钮组合,就可以愉快地跳来跳去了。如果愿意花时间进一步优化,还可以自制H5小游戏,以游戏的形式导入表单,这是高阶的玩法了。
介绍了半天,其实都是形式上的东西。表单要想吸引人,关键还在于表单内容的撰写,有优质内容,永远不怕没有受众。