不做交互你也配说是H5作品？

很多PPT做得还不错的H5新手容易意淫——我PPT做得好，我用PPT的思路就可以把H5做好——诚然在动效设计上，PPT老手有一定优势，但是这类H5往往存在着用户自发转发率较低的问题，我们这里抛开营销和投放的因素不谈，那么问题到底出现在哪里？

首先，从内容上来讲，展示类的H5往往带有比较强烈的主观性，其中的话题也缺乏足够的趣味性，在运营喵之前的文章中，我们多次强调过H5的综合感官体验十分重要，优秀的H5利用的各种艺术形式不需要很极致，不少广为流传的H5在单一艺术表现上仅为一般水平，但是H5最后的整体体验要非常好，只有将视觉（设计）、听觉（音乐）、触觉（交互）融为一体的H5才具备吸引力。

我们谈交互设计，那么到底什么是交互设计？

交互设计是指设计人和产品或服务互动的一种机制,以用户体验为基础进行的人机交互设计要考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。

而人机交互说的通俗直白一点就是你的每一步操作，你的设备会对应做出怎样的反应。

最近行业内涌现出的一批测试类H5以其较高的趣味性和良好的交互性受到越来越多用户的青睐。今天我们就来看下测试类H5究竟如何寻求灵感和差异性。

这个案例以现代社会由于科技的飞速发展造成人们的“懒”为切入点，以QQ浏览器的宣传和推广为最终诉求，精心选择了五道与产品特性高度相关的题目，话题十分贴近生活，并且从结尾的产品宣传视频中可以看出题目设置的巧妙之处。

题目的设置属于随机类型，即：无对错的反馈，最终给出判断结果，答题过程流畅自然，并且搭配触发选项后出现的搞怪音效，让用户感觉到趣味盎然。这种类型的题目要注意题目数量要控制到足够少，题数过多很容易造成用户的烦躁心理。

题目的设置属于随机类型，即：无对错的反馈，最终给出判断结果，答题过程流畅自然，并且搭配触发选项后出现的搞怪音效，让用户感觉到趣味盎然。这种类型的题目要注意题目数量要控制到足够少，题数过多很容易造成用户的烦躁心理。

这个案例以用户对导演姜文的了解程度为切入点，以大众点评的宣传和推广为最终诉求，精心选择了六个姜文电影作品中的经典场景，搭配了精美的设计和让人叹为观止的动效，趣味性十足，我们今天不谈H5的设计和动效，只看相关的交互。

题目的设置属于即时反馈类型，由于题目的性质及选项之间非此即彼的关系，作出选择点击“接着往下走”就提示对错，并且不能反悔更改。在交互上：由于选项之间距离很近，在你作出点击的动作时，会出现一条绿色的横线帮助用户确定其选择，防止误触造成不愉快的用户体验，值得我们借鉴，在交互上对用户确定的选择要有明确的反馈，可以通过改变颜色、透明度、改变选项面积、添加辅助线等方式来实现。

这个案例以学生回答老师问题的场景为切入点，以腾讯动漫的宣传和推广作为最终诉求，可以看到以上三个案例均为相关APP的宣传与推广为诉求，均与生活场景密切相关，使用户感到十分亲切，而评判这类H5是否成功的标准自然就是对应APP的下载量而不是单纯的pv。

这个案例非常有趣，选材独特，既然是测试类肯定离不开课堂，在表现形式上采用了多格动漫的手法，让人不禁回忆起童年看过的动漫书，好感陡增。在交互上，点击选项出现对应的过渡画面而不是直接显示对错，在确认继续之后，老师的形象出现即反馈选择是否正确，同样不可更改。虽然只有五道题，但由于每道题从选择到最后的反馈中间经历了过渡画面，中间的动效和画面切换均需要时间，造成整个过程较长，故添加题号，使用户可以对整个答题进程心中有数，避免产生厌烦情绪。

这款H5和之前的几款有所不同，是在nice上线两周年的时间，联合《新周刊》，公布了业界首份基于90后自主贡献标签及关注数据分析所得的《90后生活方式报告》。以90后的生活方式为切入点，其最终诉求为活动宣传及扩大公司影响力。

题目设置也属于即时反馈类，虽然选项不存在非此即彼的对错关系，但由于这款H5是以基于APP用户贡献的标签及海量关注数据产生，为了展示其涵盖范围广，故每个选项都有对应的分析数据，用户对这些数据感兴趣并且感觉到其专业性，自然会形成转发动力。

通过以上案例分析，运营喵在这里总结出几点对于制作测试类H5来说比较重要的建议。

控制题量

对于点击选项即翻页的H5来说五至十题为宜，对于设置了翻页组件的H5，尽量控制在五题左右。不过如果你的题目设置得足够精彩，可以适当增加，没有绝对的标准。

标明题号

不是标1、2、3等，而是要标1/5，3/10这样可以表明整体进度的题号。曾经小编遇到过一份三十多题的测试类H5，还没有标明进度的题号，答得非常痛苦。如果不想添加这样的题号，在页面中添加答题进度条，减少用户焦躁的心理。

提炼文案

每一道题务必精挑细选，尽量通过较少的题目围绕主题进行展开。注意每题的选项在内容上要具有足够的区分度，不要出现模棱两可的情况，不要出现多选的题目，以免用户困惑。如果题目相对较多，注意出题顺序保证一定的诱导性。最后的判断结果同样需要仔细斟酌，尽量以比较活泼有趣的文字给用户一个答题结果。结果页同样是你可以直接表明最终诉求的页面，产品的宣传海报，logo，slogan等均要在这一页上展现，重要程度可想而知。

注重交互

合理的触发交互可以采取：

1.点击选项直接跳转页面，优点是迅速直接，单个页面停留时间短，如果题量适当，整个测试短时间内就能完成。缺点是若触发区域过小，并且触发反馈不明显，易造成误触现象，影响整个H5的体验。

2.页面内设置跳转组件，如“下一步”“继续测试”等，优点是给用户修改选项的机会，避免点击之后突然切换的突兀感。缺点是单个页面停留时间长，无论是静态设计还是动效设计，对细节部分要更加讲究，一般来说，当用户发现选项可以更改时，往往会尝试点击不同选项，如果此时页面内对应出现不同的反馈，会给用户带来愉悦的感受，但会显著增加整个H5的工作量及制作周期。

在完成这种测试类H5的制作后，上线前一定要做上线测试，往往制作者会陷入到自己的逻辑中，只关注题目的内容，难以发现题目在交互上的不合理之处，此时往往更需要普通用户对其进行体验，制作者通过用户反馈及时进行调整。

文章来源：JZ多媒体解决方案

延伸阅读：H5案例赏析：淘宝数据里没说的那些事儿【重磅干货】如何在1周内做出100w+传播的H5？让运营狗望尘莫及的5大冷门微信H5成功案例解析2015年10大经典H5案例赏析：如何亮瞎用户眼球？不容错过的8款H5营销广告案例H5传播新趋势：别炫技了，给用户一个使用场景吧