恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
腾讯爸爸的H5告诉你,他们都是假朋友!
0.0°
2017-03-17 原创文章 教程 举报 9610 119 117 33

天啦噜,刚过去的315打假..


俺的心情,比方舟子还方...


因为,居然测出了一群假朋友...


这罪该祸首,是腾讯爸爸在上周五推出了一个H5——《真假朋友大质检》,借315打假的势,让各路朋友来鉴别自己有没有撒谎,给网友自娱自乐的同时,也算是强化了手机管家“安全,不含假”的品牌调子吧...


Image title

http://sdi.3g.qq.com/v/2017022316563001128?uid=oKowes5CNbfbeTZtMfenb6XC4q7g&sdi_sc=57&sdi_from=1&from=timeline&isappinstalled=0

这个H5出乎意料地火呀,或许它捉住了朋友间想“相互了解”又不好意思亲口问的心理。比如女神发出这个H5,你肯定想打开进去多了解女神的方方面面嘛...所以嘛,这个带有“隐私性”问题的H5在朋友圈中一下子传开了。

Image title

话不多说,我们来看看这个H5到底是怎么玩的?

腾讯手机管家这个H5其实就是答题测试类H5的演变,只不过正确答案是由用户自主决定。用户打开H5后要先选择5道题进行回答,不想回答的题目可以换题,选好自己的答案后分享出去,然后坐等结果就好了。

题库大部分是相对隐私的问题,比如——

  • 你会不会裸睡
  • 你对内衣款式的看法
  • 你对婚前性行为的看法


腾讯爸爸管得可真多...当然这些越隐私的问题,转发给朋友时越能测出亲密度嘛~

其实呐,腾讯爸爸去年已经搞过一次了(怪不得叫第二季),当时的路子跟这次的一模一样,只是今年文案可能换来了个老司机,污力十足。

Image title

尽管过去一年,在百度上搜“真假朋友质检”,依然能搜到很多第一季的内容(各种媒体转载),可见当时有多火...

时隔一年,同样的套路,又火了一把,证明了一件大家心照不宣的事——【测试】在传播上真的管用。


而且呐,案例的最后赫然地放着一句话——“分享给朋友,马上有结果”,这个...会涉及...诱导分享吗?腾讯爸爸,还是那个爸爸!既然腾讯能这样做,我们以后就可以有理有据地“诱导分享”了~


咳咳..跑偏了,话说回来,这个H5,咱们能用H5制作工具复现吗?

能!以下赵四就使用iH5.cn给你奉上制作攻略:

Ps:因为涉及到数据库应用,案例体量有些大,教程分为发题(上期)、答题(下期)两Part,挑关键的功能点,做解决方案详述。


【发题页面制作】



发题页面主要涵括题库的抽取以及题目选中后的标记,逻辑会比一般交互稍微复杂...



1.准备工作


(1)准备你的题库,不怕多!

Image title

题库直接在Excel里做就可以了!题量越多,题目重复率越低,在准备好题库后,导入到数据库就OK。记住三点:


  1. 想导入数据,必须先有数据库
  2. Excel首行必须是数据库的各文本字段名称(用于系统匹配)
  3. 顶格


为了节省时间,俺只在原案例上码了20道题。考虑到对不同题目的区分&记录,建议大家事先给题目按1-20排上序号,方便后续识别。

待码完这些题后,将Excel上传到数据库(有些同学可能不会上传数据库,在编辑器内添加一个舞台,设置了四个文本字段后,回到编辑中栏目,进入数据库列表点上传就OK了),以下是数据上传后的界面——

Image title


(2)把基本的框架做出来!

Image title

这步没啥难度,按照原案例把素材排版好就行~哈?怎么扒素材?自行百度吧。


(特地声明,素材仅用于教学,无其他商业用途,版权归腾讯&原作者所有)


2.制作发题页面


(1)如何将题库里的题目拿出来?!



从数据库里提取数据通常有两种做法:


  1. 数据库下随机获取数据,文本绑定二维变量
  2. 用其他功能辅助提取(如计数器等),赋值到文本上


在操作难易程度上看,采取其他功能赋值提取,要比数据库随机获取简单得多(随机获取可能要涉及多行二维变量数据交接,对数据库不熟悉的不建议使用),这次我们用计数器来辅助取题——



为什么是计数器?计数器有一个好处,就是他每次随机生成是可控的。

Image title

利用随机生成1-20(最大值为题目数量)的计数器,当答题页面显示时,通过生成的随机数,筛选条件选为“序号”,值为题目本身的序号,这样就能抽取题目数据库下相应序号所在的整行数据,然后利用二维变量分别把题目、选项一、选项二赋值到三个不同的文本上。



二维变量怎么赋值?很简单,记住一个公式就OK了——


$aa[行数][列数],aa为二维变量名称。[][]这两个东西相当于是定位,通过行列坐标来定位数据库内相应的数据。



明白原理,操作起来就简单很多了。


以计数器生成随机数=1时的数据抽取作示范——

Image title

可以看到,我们先设了计数器=1的触发事件后,让数据库一行一列、一行二列、一行三列等值分别输出到二维变量上,因为文本是分别绑定了二维变量的一行一列、一行二列、一行三列,因此当输出完成后,文本就能自动获取到二维变量当前的三个值了。


如此类推,复制粘贴出剩余的事件(=2、=3...=20)即可~。紧接着在“换一题”处,也设置一个让计数器随机生成数的事件就OK了。


做到这步,已经可以实现随机出题,以及换一题的效果。

Image title

“下一题”的逻辑也是照版煮碗的。



3.选中的问题和答案要记录清楚


作为问题发出方,选定的题目&答案都必须要记录下来。这就涉及到题目&答案的标记以及用户识别范畴了。



(1)得把发题者选的题目&答案记录下来啊!



好在这次的案例是单向分享(A做完分享,BCD能做A的题,但B不能给C发A的题),这时“提交素材”这个功能就派上用场了,可以利用发题者“提交素材”取得的初始序号,匹配他选择的题目&答案。



*提交素材的作用,在于分享时,舞台会保留前用户设置的属性。比方说有一个初始值为0的计数器,用事件把计数器赋值为1,并提交素材,这时这个H5转发出去后,用户打开时,计数器的数值此时会显示为1。

Image title

以我们需要做两步,先给用户排序号,再把序号当做标签,将问题&答案连同序号一同提交到“一行三列”的数据库上。



怎么给用户做标签?很简单,先新预设一个计数器(用于标记序号),在最后题目(第五题)的【完成按钮】上,添加一个让计数器+1的事件,接着让舞台提交素材。这时,这个H5在转发出去被打开的同时,计数器会处于不断+1的循环(在答题提交后)。



简单地说,在每一个用户打开时,他都有一个代表的序号(1.2.3...n+1),比如序号为1的用户A做完题分享出去时,会提交一组识别用的数据到数据库上,此时数据库上的列表应该是这样的——

Image title

于是,当用户A分享给用户B做题时,我们只需设置筛选输出事件,将序号作为筛选字段,筛选值为$a(a为序号计数器绑定的变量名称,即筛选当前序号)将五个问题连同正确答案输出到二维变量,然后让二维变量扮演桥梁的作用,将问题&答案赋值到相应的文本里。



文本通过二维变量赋值的步骤在上面有提到,这里就不再赘述了。



(2)用户识别机制必须够细化!


因为用户识别机制涉及到体验流程,我们回过头来看整体流程,大概是这样的——

Image title

所以这大概能分为两个部分,一是判断当前打开的H5是新开的,还是已经有题目的;二是判断H5当前是发题者本人打开,还是别人打开。



①判断当前打开的H5是不是有题目


还记得前面提到的不断循环+1的计数器吧?如果它一打开时,这个计数器有数值的,那就说明他是被转发出来的呀!


所以呢,我们可以设定一个固定的值(比如-1),用这个值跟计数器的值作匹配,会出现两个情况——


  1. 匹配结果=-1——这个H5是新打开的,不是经过转发出来的。
  2. 匹配结果≠-1——这个H5是有被提交&转发过的。


OK,那么这个匹配的过程怎么做呢?我们要用到输入框(有现有的匹配事件,不需要动用其他变量),我们直接在舞台下设置一个初始化完成的事件,让输入框获取“序号”计数器当前的值,接着让输入框匹配即可——

Image title

Image title

给输入框匹配数值时需要注意,一定要勾选“仅当前用户”(相当于执行这个事件的是当前打开者本人)当这个值等于-1时,可以判断出当前打开的H5来源是新的(一手扫码打开,里面没人发题);反之,就是别人做题后转发出来的。



那么,此时输出序号的目的是啥?



②判断当前H5的来源(自己/别人转发的)


因为做完题提交数据库是转发出来的前提,所以我们完全是可以根据问题&答案数据库中的数据,在数据库中输出用户代表值(上面的序号),假如可以输出(输出完成),则证明数据库内有记录,当前打开的H5是该用户自己转发出来的,反之(输出结果为空),则证明是别人转发出来的。



因此,我们街上上面的输出步骤,对数据库输出,然后在数据库下增设判断输出结果的两个事件——

Image title

根据两个不同的结果,跳转到不同的页面即可~


  1. 输出完成——结果页
  2. 输出为空——开始做题页面



以上就是发题页面的几个关键逻辑讲解了,由于篇幅有限,而且大家消化也需要事件,【答题页面】的关键逻辑就放在下一期给大家推送吧...



最后来回顾一下三个关键点:


(1)记得事先在Excel里给题库标序号

(2)题目由计数器随机抽取,通过二维变量赋值到文本而来

(3)在做题完成按钮上,除了提交数据库,还要给舞台“提交素材”



下期预告:


  1. 【答题页面】的制作教程
  2. 得分机制的拟定
  3. 排行榜制作方法
  4. 完整版H5效果预览
  5. 说不定还有超详细的视频教程!!!

呼...终于码完了,数据库的应用是有点玄乎,可能我讲得不够到位,如果大家有疑问,可以留言呀!


另,感谢晓舒&羊菌童鞋对交互逻辑上的大力协助~


赵四,2017.03.16

更新:2017-03-17

收藏

119人已收藏

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

  • 27

    作品

  • 2292

    粉丝

  • 8

    关注

  • 震惊!这个H5居然是在线聊天室!(内附完整教程)
  • 网易的爆款H5,手把手教你做!
  • 3个小时150万UV!网易的童年 H5刷屏了!
  • 视觉逼格指南:几何抽象风格神器

    猜你喜欢

      2017-03-17 原创文章 教程 举报 9610 119 117 33

      腾讯爸爸的H5告诉你,他们都是假朋友!

      0.0°

      你确定要举报腾讯爸爸的H5告诉你,他们都是假朋友!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年03月16日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      117
      119
      33

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录