在H5er中,小白和大神最明显的差距往往不在于设计,而是在逻辑。
逻辑处理得好,意味着案例运算少,不卡顿,用户体验好;而且制作时间短,效率高。逻辑处理得不好,可能无法实现关键功能点,只能退而求其次,影响最终效果。
今天就来简单说说,做一个H5的逻辑是怎样的。
一个H5,可以分为两部分,一部分是内容,包括文案,图片,音频等素材;一部分是事件,包括各种交互动作,条件判断等。所以,小伍把H5的逻辑分为两条线索去处理:内容逻辑和事件逻辑。
先上一个案例:
这是小伍之前做的一个简单的抽签案例,接下来我们结合这个案例来说明如何处理H5的内容逻辑和事件逻辑。
内容逻辑
内容逻辑主要用于决定素材以及素材的位置。
制作H5时,怎么分析一个H5的内容逻辑?
先按视觉上的顺序列举出对应的画面,再将每个画面上的元素细分。
以上面抽签的H5为例:
(这是按内容划分流程)
(这是按界面划分元素)
当这两张图画出来后,有哪些信息是我可以确定的呢?
首先,我可以确定我需要准备哪些素材,包括文案,背景图,按钮等等。
其次,我可以确定这些素材的摆放次序。结果页肯定要放在开始页之后,后来显示的元素要放在前面显示的元素上层。还有,按钮要放在最上层,否则被盖住的按钮无法被用户“点击”,自然也无法触发交互效果。
最后,案例完成后,我可以根据内容图检查,哪一步的显示效果不对应,都能方便地找出是缺少了什么元素。
事件逻辑
事件逻辑主要用于用户交互动作设计以及关键条件判断。
那么,怎么分析一个H5的事件逻辑呢?
先按用户动作或者画面变化来列举对应的效果,再细分每个效果的实现方案。
同样我们看上面的例子:
(这是按效果列出流程)
(这是列出实现方案)
由于上面已经把内容相关的部分整理好了,那么现在我们可以:
首先,将效果分类,把关键的、较难处理的部分先做好,而不是按顺序加事件。比如这个案例中,抽签事件是比较关键的,那我们可以先把这部分做好。
这样做的好处是,我们把关键部分的逻辑优先处理好了,在做剩余的判断时,就可以尽量避免对已设置好的关键部分的事件造成影响。否则有可能造成“做到一半发现前后设置事件冲突”这种悲催的情况。
然后,根据脑图(第二张),我们可以区分出需要单独设置事件的元素以及不需要添加的元素。对于不需要单独加交互效果的元素,可以尽量合并、压缩,对案例进行优化。
最后,同样,有完整的思路图解,方便检查对应的事件设置,排除问题。
好了,逻辑梳理好,我们就可以——开始做案例了。
对于小白来说,对着这个方法练习,也许要花掉大半天甚至更长时间;而对于大神来说,上面这么多内容,可能只是脑子里几分钟的判断。
所以,别怕麻烦,思维上的提升是受益终身的。前期一点学习的时间,换来后期大幅度提高效率,是相当划算的投入。
手机版
电脑版