Axure操刀微信H5頁面之《人際溝通風(fēng)格測試》的制作過程

5 評論 27376 瀏覽 556 收藏 13 分鐘

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

國際慣例,上圖

ceshi

這個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)格。

1

中繼器中的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

(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

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得分)。

4

(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。
5?第二步就是要根據(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,以此類推。
QQ截圖20160310140219

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 同理。

QQ截圖20160310140455

另外針對大小值比較這個問題,在此也向小伙伴們請教更好的實(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)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 剛?cè)腴T的我一直以為axure就是畫線框圖的

    回復(fù)
  2. 牛逼啊

    來自上海 回復(fù)
  3. 哇,這個思路好!感謝分享

    來自上海 回復(fù)
  4. 簡直太贊了 原來中繼器這么強(qiáng)大 不用Dynamic Panel就可以實(shí)現(xiàn)啦~

    來自廣東 回復(fù)
  5. ??

    來自湖南 回復(fù)