心血来潮想做一个H5小游戏，考察人们的创造力和想象力，由于更复杂的交互形式（诸如移动、旋转）还没有学会，只能采用之前学习到的“测试类”游戏思维来做。

那么做测试类的H5第一步是找寻合适的测试题目，上百度找了下发现几乎很少有“测试创造力和想象力”类的题目，更多的都是国外很多年前遗留下的题目，还包括几个Google的面试题，最终筛选出了五个比较烧脑的题目。

比如H5中就包含以下两题：

里面藏着金色宝物，但没有活页、钥匙或盖子的盒子是什么？

实验对象会领到一根蜡烛，一盒图钉，一盒火柴，要解决的问题是：把点着的蜡烛固定到墙上，并且蜡不会滴到下面的桌子上。

题目确定后，需要确定合适交互方式，必须简单直接，但这些题目却不适合常用的“单选形式”的交互，因为这些题目更多的是考验思维的切入点，一但设置选项，就相当于给了用户者提示，很容易得出答案，那么这样的测试题就“形同虚设”了。

因此什么样的回答形式成了我要考虑的，最终我选择了“语音答题”的形式，因此我需要个平台可以提供微信语音识别技术的工具，最终选择个非常专业的IH5制作工具来完成这个H5小测试。

可真正开始执行的时候，我才发现这个工具需要考验的是我的“程序思维”。工具都提供很完整，但是如何识别“对应的语音”和识别成功后的交互却成了很大的问题，尤其是最后我要实现5道题测试完成给予分数和奖状的结果反馈，同时分享到朋友圈可以在标题显示自己的得分分数。。。这些提出目标后出现的问题让我好几次想放弃这个从0-1的H5，虽然我大学学过C语言，可惜那时候只知道玩谁还听课，都挂科了。

可我们公司没有程序员，也许最懂程序的就是我自己了（即使我是一条运营狗），无法逃避只能强逼着自己把这个游戏做出来。

不过好在IH5提供了简单的微信识别功能调用的视频课程，而且还提供了样例可以直接拿来使用的，我一边看视频一边在案例的基础上修改，但由于案例真的太简单，只能留下“微信语音识别”调用板块。

于是我按照之前做测试的顺序，开始设计这款“烧脑”游戏！

素材设计

任何H5都涉及到很多单独的素材用于交互设计，我们公司只有两个设计，都比较繁忙，同时负责公司三个产品线的设计需求，另外个还要负责APP产品的UI设计。因此我只能靠我自己“拙劣”的审美观来设计素材；

通过在千库网、千图网等素材网站上找到合适的素材，然后在这些素材是修改——删减元素、增添文字、整合元素。最终形成了如下的基本素材：

H5逻辑设计

微信语音识别的调用

这才是真正需要程序思维的难点，也是我花了最多时间的地方。按照视频讲解上的逻辑：点击按钮开始微信录音，离开手指微信停止录音并开始识别文本并进行文本匹配，一旦匹配成功，文本就会执行接下来的任务。

逻辑貌似很简单，但执行起来却花费了很多力气。第一你必须设计好反馈，不然用户点击语音图标后直接识别并跳到下一题，这样体验太差了。所以需要点击图片后出现显示正在录音状态的GIF图片，显如下图这种效果：

同时要让无法识别的语音提示用户“听不清楚，请再说一遍”，那么这些反馈的逻辑需要如何设计实现确实让我头疼，你可以看下最终实现这个效果设置了多少的逻辑。

第二，语音不是直接识别出文本，而是借助变量这个寄存器，所以是要五道题识别的结果都输入到一个变量还是每道题设置一个变量成了问题。刚开始嫌麻烦选择只设置一个公用变量，可测试后才发现第一题无法跳转到下一题，只能重新把每个题目都单独设置一个变量才解决了这个问题。

但测试发现错误，如何找出错误却是最难的，方法可以想到，但问题出在哪里却要一步步排查：我根据教程和对IH5的理解从头开始一个个查看事件属性（逻辑）是否存在问题，一个个排除然后扫码测试，最终发现在变量设置这一块。

语音的识别判断

我理解的语音匹配和智能输入法很像，都是利用贝叶斯定理，即出现最多的往往就是最可能正确的，比如你输入“鸡”那么输入法会自动推荐“蛋”，因此“蛋”在所有用户的输入数据中是紧随“鸡”后出现频率最高，因此可以假定“蛋”是正确的概率最大。

这对于简单的语音很容易，但比如下面的问题的答案需要输出整句话，如何提高语音识别的精确性成了另一个需要解决的问题；

所以我觉得把一句话拆解成最核心的关键词，比如“把图钉放到盒子里面”拆成“钉盒”这两次字，然后设置逻辑条件为“包含文本”——即只要识别到的语音包含“钉盒”二字则完成判断。

同时我把“答案”拆成“答”和“案”两个字就是为了提高用户语言的识别精确性。

打分模块

打分模块原理非常简单，但想到最合适的办法确实花了点时间。起初的构思是每次识别出正确的语音跳转下一页时候同时完成打分，于是就和匹配文本一样设置了相同的关键字并把事件设置为“识别成功后计数器加20”，可完成后测试过程中一直出现问题，要么分数不显示，要么全是显示100。

但我无法找到问题出在哪，因为没有反馈就无法发现问题。所以为了做好反馈，我把之前隐藏的计数器和文本识别框显示出来，然后提交开始测试。

用手机开始做题的时候终于发现了问题：由于我之前设置的打分机制——“鸡蛋”中的“鸡”和“蛋”拆分开来，导致用户说“鸡蛋”的时候，自动给计数器加上了40而不是20，更别说那些我问题设置五六个关键字的题目了（完成一题就能得100分）。

由于分数超过100导致我当初设计的0、20、40、60、80、100分数段结果无法匹配，那接下来该如何巧妙的完成加分机制呢？我花了额外的十几分钟一直在思考如何合适的加分？想了几个策略但都被我否定了。因为每道题的运营识别的关键词数量不一，有的2个有的6个，所以我需要找寻统一的元素。

最终我发现每题出来的答案是单一的，因此我没必要让答案正确的时候加分而是答案错误的时候减分——即把计数器初始值设为100，答案页每出现一次就减去20分。就这样完美的解决了得分的问题！

不同机型出现不同问题

由于并不像程序一样直接面向对象编程，而且也缺乏机型和系统适配，导致安卓手机出现了未曾想到的问题，即点击图标后出现自动保存图片：

这样体验是非常差的，询问对方的技术后才知道需要加个透明按钮，但我不明白为什么要加，于是百度了透明按钮的含义：

因此我就明白了需要在底层背景图的上面加一层全屏透明按钮并保持默认显示，这样它可以阻止用户点击到背景图的时候显示保存图片。

然而不同机型的屏幕尺寸不一样，移动设备宽是固定的，那么只能设置高，长款机型（高1010）、短款机型（高832）、Ipad（横版高420）等，所以必须单独为每个机型设置个“测试题”，就变成了下面这样：

不过最大的危机是心理层面：昨天中午，花了一天半的时间好不容易完成H5，可测试的时候发现第三题永远被默认跳过，其他题目跳转都没问题。我截图问了对方的技术，并从头到尾捋了一遍，还是没发现问题。我最终打算放弃这个H5的制作，随便上网抄一个小游戏改个名字算了。

但我都已经付出了一天半了，不想努力屁都没有。秉承着“糟糕的完成远胜于完美的半途而废”的理念，我狠心把所有完成的删除，从0开始再重新做一遍。

由于有第一次失败的积累，第二次仅仅花了半天时间就完成了，而且在测试的时候发现可以完美的实现题目跳转。

这段设计测试类H5的经历给了我很多思考：

优化设计流程

应该采取先制定文案、图片素材和设计逻辑之后再开始执行操作，而不是一边执行一边设计一边想文案和逻辑，这确实是我事前不喜欢计划的原因。合理的设计流程应该如下图：

另外没个好看有意思的H5都需要花费很大的力气去执行，所以必须先要确定这个H5有没有必要做，如果这个游戏本身没意思为何要花这么大精力去完成，我这次做完这个就深有体会，这个测试类H5也许就不该开始。

因此我们更应该去想，目标用户想要什么？他们关心什么？怎么H5包含的信息，才容易被他们认为是“与我相关”的？其次，才是互动效果的设计。

规划好时间节点

根本原则只有一个：以发布时间最为最后时间节点，倒推策划、定稿（设计）、制作、测试所需工作时长，这样去推动整个项目的进程。尤其是测试，很多问题发生在测试期间。

反馈的重要性

如果不是把计时器中的数字和语音识别出的文字显示在手机里，我根本不可能发现原来设定的分数加20会变成加上40。所以要发现问题的基础还是需要结果可视化，能看到结果的变化才能够发现合适的问题所在。

推翻重来的勇气

如果测试了所有细节后仍然无法发现问题，那么最好的办法是推倒从0开始，由于之前的学习经验积累，你的下一次速度会比之前快很多，也更容易发现曾经没想到的问题。

推翻重来后我才发现，图片直接放在舞台下方确实会出现跳转错误问题，但是放到一个页面下面就不会存在这样的问题，毕竟题目之间的事件是“跳转页”，而不是跳转图片！

这就是这个H5给我带来的思考和启发，实践确实是最好的学习办法，点击下面的“开始测试”可以来测测你的创造力哦~