中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

國(guó)際慣例，上圖

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

原型預(yù)覽地址

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

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

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

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

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

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

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

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

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

Axure知識(shí)重點(diǎn)

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

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

2，全局變量

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

原型制作過(guò)程

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

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

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

2，出題方式（中繼器）

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

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

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

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

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

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

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

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

4，結(jié)果展示

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

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

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

5，頁(yè)面布局

之所以把頁(yè)面布局這方面放在最后來(lái)說(shuō)，是因?yàn)閷?duì)此我并不專(zhuān)業(yè)，不要誤導(dǎo)大家。但是值得一提的是，在構(gòu)思整個(gè)頁(yè)面的時(shí)候，還是要考慮到一個(gè)大概的框架的，然后思考在框架中如何安排內(nèi)容，另外也有可能在頁(yè)面制作過(guò)程中會(huì)不斷的進(jìn)行調(diào)整，這也是無(wú)可厚非的。

總結(jié)

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

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