今天要推荐一支比较典型的趣味调查H5《测测你是哪种动物系买买精》,通过该案例,帮助大家理解这类统计H5的主要制作逻辑。

一、案 例 体 验

测测你是哪种动物系买买精??

m.creatby.com

类型:测试题+统计总结+合成海报

m.creatby.com/v2/manage (二维码自动识别)

二、案 例 评 析

①简介:通过一个与好友的旅行场景假设,目标定位不同消费能力的人群,穿插多个消费场景,用户自行选择符合自己的消费习惯或生活方式,最终帮每个用户定义一个动物系,并生成海报,或点击链接申请信用卡。

②风格:卡通风格,制作精良,色彩丰富,大量的序列帧帮助多场景过渡,自然流畅。

③主要逻辑:判断用户选择动物数量的最大值,并获得该最大值的动物名称。

④难点:逻辑嵌套。即当满足条件1的时候再去判断是否满足条件2,当满足条件2时再去判断是否满足条件3,以此类推。这个是逻辑判断嵌套的常规用法。

接下来,小派将根据该案例需求分析下制作思路。

三、需 求 分 析

该案例一共有8种动物系:狐系,松鼠系,企鹅系,狮子系,孔雀系,猫头鹰系,河马系,猴系。

一共有6道题目全部为单选题,要选择6个答案。每个选项对应不同的动物系,根据下方的答案对应动物系,我们可以推断,会有动物会被重复选择;也可能会有动物不被选择;我们需要统计动物被选择次数最高的即可。

每个答案实际对应到的动物
每个动物可能被选择最多次数统计

四、制 作 思 路

如果用意派Epub360来做该H5,有以下3种方式供选择:

(一)资料库

如果用资料库来做,门槛相对较高。这里简单介绍下思路:

1.用户每选择一项答案,都要到后台数据表新建1条对应到指定动物的数据,包括动物名称跟选择次数具体值,如1。

2.如果有动物再次被选择,需要去修改对应动物的数据中的次数,正常是给次数+1。

3.最后用选择次数栏位,由大到小去排序每个动物被选择的次数,最大值排在第1行,可以用设置参数值的方式拿到这个最大值及其名称。

或者各位派友有更佳的统计方式,欢迎在留言区留言哦~

(二)逻辑判断

1. 所有动物被选择的次数,用类型为【数值】的参数变数来记录:共8个参数变数,为方便,分别用8个字母A、B、C、D、E、F、G、H命名。用Nmax记录每次比较后的较大值。

2.所有动物的名称,用类型为【文本】的参数变数来记录,用Mmax表示上面8个变数较大值的名称。

主要逻辑解析:将数值逐一比较,用Nmax记录每次比较的较大值;用Mmax记录每次比较的较大值名称。如遇到两个值相等的情况,只能优先赋值前一个为最大值或后一个为最大值,根据个人需求设置(如遇到A=B,我们设置当Nmax≥A时,让Nmax=变数A,Mmax=「A」;或当Nmax≤B时,让Nmax=变数B,Mmax=「B」)。

在编辑器里的设置示例:

1.参数及条件判断设置
2.条件判断具体设置

案例拷贝学习网址【电脑端谷歌浏览器打开】

(三)用户最终选择的方式

因为该用户在设计的时候很清楚用户选择的最大值可能是2或3,所以做了一个比较简单的判断,这个方式更高效一些。

五、制 作 小 结

1.除了逻辑是难点,序列帧的优化也是关键,可以保证用户体验。

2.通过这个作品帮助大家理解这种类似统计的H5该怎么做,遇到同样的问题,就可以考虑用逻辑嵌套的方式来处理。

推荐阅读:

相关文章