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

honghu2

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常识重点
本案例中设计到的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，答题进程、记实谜底（全局变量、文本框）

对付本案例，答题是比力简略的，只必要点击对应的选项便可以完成答题，是以只必要为每一个选项上增长点击事务便可，点击完以后使中继器确当前页显示下一项内容，也就是跳到第二题；此外还可在选项上增长一些点击的结果，好比点击的时辰，选项的布景色产生变革等，从而到达一个表较好的交互体验。这些都是比力根本的操作，在此不做赘述。下面重点要讲的是在答题的进程中，若何记实测试者的谜底，并能对谜底举行统计阐发，为终极的测试成果展现来供给根据。

（1）利用全局变量来记实每种沟通气概得分，好比测试者第一题的谜底为气概A，那末就为A记1分，一次类推，而且对分哈喽交友值举行累加。终极按照每种气概得分的凹凸来匹配终极的测试成果（这个在后面的成果展现部门会讲授）。本案例顶用到5个全局变量：OnLoadVariable（默许），A（气概A得分），B（气概B得分），C（气概C得分），D（气概D得分）。



（2）测试者答题时把每一个题的的谜底对应的沟通气概得分累计到对应的全局变量上，比方第一题测试者选择的沟通气概为A，那末就给全局变量A的值+1，以此类推。要实现这个功效，我采纳了两步走的法子：

第一步是获得测试者答题时选择的选项对应的沟通气概，也就是，在前面讲题库设计的时辰，A，B，C，D对应的ATYPE，BTYPE，CTYPE，DTYPE的值。法子就是每做一次选择，就把选项对应的 TYPE 值赋值加在 OnLoadVariable 变量值字符串的首位（好比起头的时辰 OnLoadVariable 的值是空，当谜底对应的 TYPE 为 A 的时辰，OnLoadVariable 的值就酿成“A”，当下一题的谜底对应的 TYPE 为 B 的时辰，OnLoadVariable 的值就酿成了“BA”，就是把 B 放在了 A 的前面）。然后再把 OnLoadVariable 的值赋值给一个文本框daan。 第二步就是要按照每道题的谜底，别离给A，B，C，D四种沟通气概计分。我实现这一步的法子是经由过程文本框的文本扭转事务，当触发这一事务时，果断文本框中的值的首字母是A，B，C，D的哪个，然后再给对应的全局变量A，B，C，D的值+1，是以这个文本扭转事务中会设计到4个果断前提，别离果断取到的文本框中值的首字母的是哪一个。这个进程可能听起来比力繁杂，举例阐明一下，若是文本框的值酿成 A ，那末就给全局变量 A 的值+1；若是文本框的值酿成了 BA，那末久给全局变量 B 的值+1；若是文本框的值又酿成了 ABA，那末就再给全局变量 A 的值+1，以此类推。

4，成果展现

当上面的进程完成以后，也就是测试者答完了所有的题，而且我也记实下了每一个题的谜底，和对应的沟通气概A，B，C，D的累计得分。那末在成果展现这个进程中，我就要按照A，B，C，D得分的凹凸来果断测试者属于那种沟通气概。好比说测试者最后的得分是A：3分，B：5分，C：6分，D：5分，那末我就果断该测试者的沟通气概为 C ，由于此气概的分数最高。

以是在这个进程中，最重要的问题就是若何比力全局变量A，B，C，D四个值的巨细，也就是若何晓得得分最高的是哪一个。这里我采纳了最笨的果断法子，也就是按照比力成果的5中可能（A最大，B最大，C最大，D最大，没有最大）来让A，B，C，D相互比力。好比在A最大的时辰，那末必定知足 A>B 且 A>C 且 A>D，是以我便可以把这几个不等式作为成果展现时辰的果断前提。B，C，D 同理。



此外针对巨细值比力这个问题，在此也向小火伴们就教更好的实现法子（验证可行的思绪）。
5，页面结构
之以是把页面结构这方面放在最厥后说，是由于对此我其实不专业，不要误导大师。可是值得一提的是，在构想全部页面的时辰，仍是要斟酌到一个大要的框架的，然后思虑在框架中若何放置内容，此外也有可能在页丰景下载网面建造进程中会不竭的举行调解，这也是无可厚非的。
总结
本文讲述的原型建造进程其实不是出格具体，重要仍是讲授该案例焦点功效的实现思绪以供列位参考，和Axure中部门元件的现实感化。最后再说一点，Axure实在真的很好玩，此外大师若是想把本身的原型文件放到外网上，随时随地都能拜候，可是又不想用 Axure Share（拜候太慢）的话，可以租用一个web办事器（年费100之内），本身再注册一个域名，然后再略微设置装备摆设一下，就OK啦！

本文由 @W.YiFAN 原创公布于人人都是产物司理 ，未经允许，制止转载。