在H5er中，小白和大神最明显的差距往往不在于设计，而是在逻辑。

逻辑处理得好，意味着案例运算少，不卡顿，用户体验好；而且制作时间短，效率高。逻辑处理得不好，可能无法实现关键功能点，只能退而求其次，影响最终效果。

今天就来简单说说，做一个H5的逻辑是怎样的。

一个H5，可以分为两部分，一部分是内容，包括文案，图片，音频等素材；一部分是事件，包括各种交互动作，条件判断等。所以，小伍把H5的逻辑分为两条线索去处理：内容逻辑和事件逻辑。

先上一个案例：

这是小伍之前做的一个简单的抽签案例，接下来我们结合这个案例来说明如何处理H5的内容逻辑和事件逻辑。

内容逻辑

内容逻辑主要用于决定素材以及素材的位置。

制作H5时，怎么分析一个H5的内容逻辑？

先按视觉上的顺序列举出对应的画面，再将每个画面上的元素细分。

以上面抽签的H5为例：

（这是按内容划分流程）

（这是按界面划分元素）

当这两张图画出来后，有哪些信息是我可以确定的呢？

首先，我可以确定我需要准备哪些素材，包括文案，背景图，按钮等等。

其次，我可以确定这些素材的摆放次序。结果页肯定要放在开始页之后，后来显示的元素要放在前面显示的元素上层。还有，按钮要放在最上层，否则被盖住的按钮无法被用户“点击”，自然也无法触发交互效果。

最后，案例完成后，我可以根据内容图检查，哪一步的显示效果不对应，都能方便地找出是缺少了什么元素。

事件逻辑

事件逻辑主要用于用户交互动作设计以及关键条件判断。

那么，怎么分析一个H5的事件逻辑呢？

先按用户动作或者画面变化来列举对应的效果，再细分每个效果的实现方案。

同样我们看上面的例子：

（这是按效果列出流程）

（这是列出实现方案）

由于上面已经把内容相关的部分整理好了，那么现在我们可以：

首先，将效果分类，把关键的、较难处理的部分先做好，而不是按顺序加事件。比如这个案例中，抽签事件是比较关键的，那我们可以先把这部分做好。

这样做的好处是，我们把关键部分的逻辑优先处理好了，在做剩余的判断时，就可以尽量避免对已设置好的关键部分的事件造成影响。否则有可能造成“做到一半发现前后设置事件冲突”这种悲催的情况。

然后，根据脑图（第二张），我们可以区分出需要单独设置事件的元素以及不需要添加的元素。对于不需要单独加交互效果的元素，可以尽量合并、压缩，对案例进行优化。

最后，同样，有完整的思路图解，方便检查对应的事件设置，排除问题。

好了，逻辑梳理好，我们就可以——开始做案例了。

对于小白来说，对着这个方法练习，也许要花掉大半天甚至更长时间；而对于大神来说，上面这么多内容，可能只是脑子里几分钟的判断。

所以，别怕麻烦，思维上的提升是受益终身的。前期一点学习的时间，换来后期大幅度提高效率，是相当划算的投入。