Axure操刀微信H5页面之《人际沟通风格测试》的制作过程

在之前的文章中我就讲过用Axure制作H5页面（再次声明Axure输出的html文件可能并非基于html5），在H5制作工具满天飞的时代，Axure制作的H5虽然拼不过那些加过特效的酷炫页面，但Axure的强大在于它的思维能力，所以在某些方面，Axure完全不输其他H5制作工具，甚至它输出的高保真原型可以直接上线发布了。那本文就讲述一个性格测试类H5页面——《人际沟通风格测试》的制作过程，来为大家展示Axure到底能干啥（不要总认为它只是用来画那些无趣的线框图，只要你有idea，想怎么玩就怎么玩——吹个免税的牛）。

这个H5的功能其实很简单，在其中预置一些测试题目，然后通过测试者点击选项来选择答案，每个题目只有一次选择机会，并且答案选完之后会自动跳到下个题目，不允许修改答案，也不允许返回上个题目，所有题目回答完之后，会显示出测试者的沟通风格。

不能光说不练，小伙伴们可以通过原型预览地址    查看原型效果，扫描页面中的二维码，使用微信打开页面，效果更佳。

在设计测试类H5原型的时候，需要考虑以下几个方面：

1，页面布局：既然是定位是H5页面，可能大多时候是通过微信浏览器打开的，所以要考虑在手机端的布局问题

2，试题属性：要考虑题目是选择题还是填空题，是单选题还是多选题

3，题库设计：如何实现题库

3，出题方式：基于手机端的操作习惯，则需要考虑采用什么样的出题方式，所有题一起出还是一道题一道题的出？

4，答题过程：基于不同的试题属性，要考虑测试者如何答题，另外在该过程要考虑如何记录答案

5，结果展示：测试完成之后，展示测试结果

本案例中设计到的Axure中的重点内容包括以下几个方面：

1，中继器、动态面板、文本框

2，全局变量

3，判断条件、函数

1，题库设计（中继器）

本案例中所有测试题均为选择题，而且题目数量较多，因此采用中继器来实现题库功能，在中继器中存储题干，选项，每个选项对应的沟通风格。

中继器中的TITTLE，A，B，C，D不用解释，分别代表题干和A，B，C，D四个选项，而ATYPE，BTYPE，CTYPE，DTYPE则代表的是A，B，C，D四个选项锁代表的性格特点，比如第3题的B选项代表的是沟通风格A。之所以把每个选项所代表的沟通风格存储在中继器中，是为了方便最终对测试者的答案进行统计，这个后面再讲。

2，出题方式（中继器）

本案例采用的方式是按顺序逐一出题的方式，并且完成一个题目后，自动跳到下个题目。因此这需要中继器中存储的题目一项一项的显示，而且通过答题这个事件可以使题目进行跳转，在这里就需要用到中继器的一些相关功能。

（1）设置中继器的Pagination选项，勾选 Multiple pages，并且设置 Items per page 为“1”，Starting page 为“1”，意思是把中继器中的这些项分页显示，并且每页只显示一个项目，第一页显示第一项的内容。对应到案例中的题目，就是每页显示一个题目，第一页显示第一题。

（2）设置答题是，对中继器进行翻页操作，比如说回答完第一题后，直接跳到第二题，就是要实现这样的一个效果，这个功能的实现需要配合后面要讲到的答题方式那快来看。下面先说对中继器翻页的效果怎么实现：在答题的时间中增加一个 Set Current Page 的动作，操作对象是中继器，然后选择 Set the page 为“Next”，这个的意思就是设置中继器的当前页面显示中继器中下一项的内容，也就是当第一题回答完之后，在第一页显示第二题的内容。

3，答题过程、记录答案（全局变量、文本框）

对于本案例，答题是比较简单的，只需要点击对应的选项就可以完成答题，因此只需要为每个选项上增加点击事件即可，点击完之后使中继器的当前页显示下一项内容，也就是跳到第二题；另外还可在选项上增加一些点击的效果，比如点击的时候，选项的背景色发生变化等，从而达到一个表较好的交互体验。这些都是比较基础的操作，在此不做赘述。下面重点要讲的是在答题的过程中，如何记录测试者的答案，并能对答案进行统计分析，为最终的测试结果展示来提供依据。