在之前的文章中我就講過用Axure制作H5頁面（再次聲明Axure輸出的html文件可能并非基于html5），在H5制作工具滿天飛的時代，Axure制作的H5雖然拼不過那些加過特效的酷炫頁面，但Axure的強(qiáng)大在于它的思維能力，所以在某些方面，Axure完全不輸其他H5制作工具，甚至它輸出的高保真原型可以直接上線發(fā)布了。那本文就講述一個性格測試類H5頁面——《人際溝通風(fēng)格測試》的制作過程，來為大家展示Axure到底能干啥（不要總認(rèn)為它只是用來畫那些無趣的線框圖，只要你有idea，想怎么玩就怎么玩——吹個免稅的牛）。

國際慣例，上圖

這個H5的功能其實(shí)很簡單，在其中預(yù)置一些測試題目，然后通過測試者點(diǎn)擊選項(xiàng)來選擇答案，每個題目只有一次選擇機(jī)會，并且答案選完之后會自動跳到下個題目，不允許修改答案，也不允許返回上個題目，所有題目回答完之后，會顯示出測試者的溝通風(fēng)格。

原型預(yù)覽地址

不能光說不練，小伙伴們可以通過原型預(yù)覽地址 ?http://raedme.cn/axurelab/003_goutongceshi/ ?查看原型效果，掃描頁面中的二維碼，使用微信打開頁面，效果更佳。

原型設(shè)計(jì)要點(diǎn)

在設(shè)計(jì)測試類H5原型的時候，需要考慮以下幾個方面：

1，頁面布局：既然是定位是H5頁面，可能大多時候是通過微信瀏覽器打開的，所以要考慮在手機(jī)端的布局問題

2，試題屬性：要考慮題目是選擇題還是填空題，是單選題還是多選題

3，題庫設(shè)計(jì)：如何實(shí)現(xiàn)題庫

3，出題方式：基于手機(jī)端的操作習(xí)慣，則需要考慮采用什么樣的出題方式，所有題一起出還是一道題一道題的出？

4，答題過程：基于不同的試題屬性，要考慮測試者如何答題，另外在該過程要考慮如何記錄答案

5，結(jié)果展示：測試完成之后，展示測試結(jié)果

Axure知識重點(diǎn)

本案例中設(shè)計(jì)到的Axure中的重點(diǎn)內(nèi)容包括以下幾個方面：

1，中繼器、動態(tài)面板、文本框

2，全局變量

3，判斷條件、函數(shù)

原型制作過程

1，題庫設(shè)計(jì)（中繼器）

本案例中所有測試題均為選擇題，而且題目數(shù)量較多，因此采用中繼器來實(shí)現(xiàn)題庫功能，在中繼器中存儲題干，選項(xiàng)，每個選項(xiàng)對應(yīng)的溝通風(fēng)格。

中繼器中的TITTLE，A，B，C，D不用解釋，分別代表題干和A，B，C，D四個選項(xiàng)，而ATYPE，BTYPE，CTYPE，DTYPE則代表的是A，B，C，D四個選項(xiàng)鎖代表的性格特點(diǎn)，比如第3題的B選項(xiàng)代表的是溝通風(fēng)格A。之所以把每個選項(xiàng)所代表的溝通風(fēng)格存儲在中繼器中，是為了方便最終對測試者的答案進(jìn)行統(tǒng)計(jì)，這個后面再講。

2，出題方式（中繼器）

本案例采用的方式是按順序逐一出題的方式，并且完成一個題目后，自動跳到下個題目。因此這需要中繼器中存儲的題目一項(xiàng)一項(xiàng)的顯示，而且通過答題這個事件可以使題目進(jìn)行跳轉(zhuǎn)，在這里就需要用到中繼器的一些相關(guān)功能。

（1）設(shè)置中繼器的Pagination選項(xiàng)，勾選 Multiple pages，并且設(shè)置 Items per page 為“1”，Starting page 為“1”，意思是把中繼器中的這些項(xiàng)分頁顯示，并且每頁只顯示一個項(xiàng)目，第一頁顯示第一項(xiàng)的內(nèi)容。對應(yīng)到案例中的題目，就是每頁顯示一個題目，第一頁顯示第一題。

（2）設(shè)置答題是，對中繼器進(jìn)行翻頁操作，比如說回答完第一題后，直接跳到第二題，就是要實(shí)現(xiàn)這樣的一個效果，這個功能的實(shí)現(xiàn)需要配合后面要講到的答題方式那快來看。下面先說對中繼器翻頁的效果怎么實(shí)現(xiàn)：在答題的時間中增加一個 Set Current Page 的動作，操作對象是中繼器，然后選擇 Set the page 為“Next”，這個的意思就是設(shè)置中繼器的當(dāng)前頁面顯示中繼器中下一項(xiàng)的內(nèi)容，也就是當(dāng)?shù)谝活}回答完之后，在第一頁顯示第二題的內(nèi)容。

3，答題過程、記錄答案（全局變量、文本框）

對于本案例，答題是比較簡單的，只需要點(diǎn)擊對應(yīng)的選項(xiàng)就可以完成答題，因此只需要為每個選項(xiàng)上增加點(diǎn)擊事件即可，點(diǎn)擊完之后使中繼器的當(dāng)前頁顯示下一項(xiàng)內(nèi)容，也就是跳到第二題；另外還可在選項(xiàng)上增加一些點(diǎn)擊的效果，比如點(diǎn)擊的時候，選項(xiàng)的背景色發(fā)生變化等，從而達(dá)到一個表較好的交互體驗(yàn)。這些都是比較基礎(chǔ)的操作，在此不做贅述。下面重點(diǎn)要講的是在答題的過程中，如何記錄測試者的答案，并能對答案進(jìn)行統(tǒng)計(jì)分析，為最終的測試結(jié)果展示來提供依據(jù)。

（1）使用全局變量來記錄每種溝通風(fēng)格得分，比如測試者第一題的答案為風(fēng)格A，那么就為A記1分，一次類推，并且對分值進(jìn)行累加。最終根據(jù)每種風(fēng)格得分的高低來匹配最終的測試結(jié)果（這個在后面的結(jié)果展示部分會講解）。本案例中用到5個全局變量：OnLoadVariable（默認(rèn)），A（風(fēng)格A得分），B（風(fēng)格B得分），C（風(fēng)格C得分），D（風(fēng)格D得分）。

（2）測試者答題時把每個題的的答案對應(yīng)的溝通風(fēng)格得分累計(jì)到對應(yīng)的全局變量上，例如第一題測試者選擇的溝通風(fēng)格為A，那么就給全局變量A的值+1，以此類推。要實(shí)現(xiàn)這個功能，我采用了兩步走的方法：

第一步是獲取測試者答題時選擇的選項(xiàng)對應(yīng)的溝通風(fēng)格，也就是，在前面講題庫設(shè)計(jì)的時候，A，B，C，D對應(yīng)的ATYPE，BTYPE，CTYPE，DTYPE的值。方法就是每做一次選擇，就把選項(xiàng)對應(yīng)的 TYPE 值賦值加在 OnLoadVariable 變量值字符串的首位（比如開始的時候 OnLoadVariable 的值是空，當(dāng)答案對應(yīng)的 TYPE 為 A 的時候，OnLoadVariable 的值就變成“A”，當(dāng)下一題的答案對應(yīng)的 TYPE 為 B 的時候，OnLoadVariable 的值就變成了“BA”，就是把 B 放在了 A 的前面）。然后再把 OnLoadVariable 的值賦值給一個文本框daan。
?第二步就是要根據(jù)每道題的答案，分別給A，B，C，D四種溝通風(fēng)格計(jì)分。我實(shí)現(xiàn)這一步的方法是通過文本框的文本改變事件，當(dāng)觸發(fā)這一事件時，判斷文本框中的值的首字母是A，B，C，D的哪一個，然后再給對應(yīng)的全局變量A，B，C，D的值+1，因此這個文本改變事件中會設(shè)計(jì)到4個判斷條件，分別判斷取到的文本框中值的首字母的是哪個。
這個過程可能聽起來比較復(fù)雜，舉例說明一下，如果文本框的值變成 A ，那么就給全局變量 A 的值+1；如果文本框的值變成了 BA，那么久給全局變量 B 的值+1；如果文本框的值又變成了 ABA，那么就再給全局變量 A 的值+1，以此類推。

4，結(jié)果展示

當(dāng)上面的過程完成之后，也就是測試者答完了所有的題，并且我也記錄下了每個題的答案，以及對應(yīng)的溝通風(fēng)格A，B，C，D的累計(jì)得分。那么在結(jié)果展示這個過程中，我就要根據(jù)A，B，C，D得分的高低來判斷測試者屬于那種溝通風(fēng)格。比如說測試者最后的得分是A：3分，B：5分，C：6分，D：5分，那么我就判斷該測試者的溝通風(fēng)格為 C ，因?yàn)榇孙L(fēng)格的分?jǐn)?shù)最高。

所以在這個過程中，最主要的問題就是如何比較全局變量A，B，C，D四個值的大小，也就是如何知道得分最高的是哪個。這里我采取了最笨的判斷方法，也就是根據(jù)比較結(jié)果的5中可能（A最大，B最大，C最大，D最大，沒有最大）來讓A，B，C，D互相比較。比如在A最大的時候，那么肯定滿足 A>B 且 A>C 且 A>D，因此我就可以把這幾個不等式作為結(jié)果展示時候的判斷條件。B，C，D 同理。

另外針對大小值比較這個問題，在此也向小伙伴們請教更好的實(shí)現(xiàn)方法（驗(yàn)證可行的思路）。

5，頁面布局

之所以把頁面布局這方面放在最后來說，是因?yàn)閷Υ宋也⒉粚I(yè)，不要誤導(dǎo)大家。但是值得一提的是，在構(gòu)思整個頁面的時候，還是要考慮到一個大概的框架的，然后思考在框架中如何安排內(nèi)容，另外也有可能在頁面制作過程中會不斷的進(jìn)行調(diào)整，這也是無可厚非的。

總結(jié)

本文講述的原型制作過程并不是特別詳細(xì)，主要還是講解該案例核心功能的實(shí)現(xiàn)思路以供各位參考，以及Axure中部分元件的實(shí)際作用。最后再說一點(diǎn)，Axure其實(shí)真的很好玩，另外大家如果想把自己的原型文件放到外網(wǎng)上，隨時隨地都能訪問，但是又不想用 Axure Share（訪問太慢）的話，可以租用一個web服務(wù)器（年費(fèi)100以內(nèi)），自己再注冊一個域名，然后再稍微配置一下，就OK啦！

本文由 @W.YiFAN 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。