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

國際慣例，上圖

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

原型預覽地址

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

原型設計要點

在設計測試類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，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 原創發布于人人都是產品經理?，未經許可，禁止轉載。