某日，閑來(lái)無(wú)事，無(wú)聊的翻看著電腦中的APP圖標(biāo)，忽然萌生一個(gè)想法：用Axure原型制作一個(gè)連連看類型的游戲原型，于是說(shuō)做就做，打開(kāi)AxureRP 7，開(kāi)始搞。一天，兩天。。。（由于只有業(yè)余時(shí)間搞）。。。五天，原型終于搞定。期間經(jīng)過(guò)了不同實(shí)現(xiàn)方法的嘗試、邏輯的梳理、原型的測(cè)試等等等。。。。

原型展示

（點(diǎn)擊試玩）

開(kāi)始界面：點(diǎn)擊 PLAY 按鈕即可進(jìn)入游戲

游戲界面：點(diǎn)擊翻開(kāi)圖片，圖片等待將近1s的時(shí)間后自動(dòng)恢復(fù)，如果依次翻開(kāi)的兩個(gè)圖片如果相同，這兩個(gè)圖片則自動(dòng)消失，顯示 OVER 字樣

結(jié)束界面：點(diǎn)擊 REPLAY 可以重新開(kāi)始游戲

補(bǔ)充一些廢話，做事情要有始有終，所以原型設(shè)計(jì)也是這樣，要有頭有尾。

設(shè)計(jì)過(guò)程

這個(gè)過(guò)程真的不是那么順利，從開(kāi)始只是有一個(gè)大概的想法，到慢慢實(shí)現(xiàn)起來(lái)的時(shí)候發(fā)現(xiàn)很多細(xì)節(jié)上的問(wèn)題，從項(xiàng)目管理的角度來(lái)講，真的是漸進(jìn)明細(xì)的一個(gè)過(guò)程。下面我就從我不斷發(fā)現(xiàn)問(wèn)題不斷分析實(shí)踐的角度講一下這個(gè)原型的設(shè)計(jì)過(guò)程。

問(wèn)題-分析/嘗試-實(shí)現(xiàn)

把問(wèn)題放在最前面來(lái)說(shuō)并不代表這只是在最開(kāi)始的時(shí)候才有問(wèn)題，僅僅是為了表達(dá)任何事情都從一個(gè)想法開(kāi)始，但是整個(gè)設(shè)計(jì)的過(guò)程都擺脫不了問(wèn)題的存在。

問(wèn)題01：點(diǎn)擊圖片實(shí)現(xiàn)圖片翻轉(zhuǎn)，然后自動(dòng)恢復(fù)，如何實(shí)現(xiàn)？

分析/嘗試：

1. 通過(guò)動(dòng)態(tài)面便的不同狀態(tài)來(lái)顯示翻轉(zhuǎn)前和翻轉(zhuǎn)后的圖片（開(kāi)始采用，最終放棄）；
2. 通過(guò)圖片部件的 設(shè)置圖片動(dòng)作 實(shí)現(xiàn)（最終采用的實(shí)現(xiàn)方法）

問(wèn)題02：依次點(diǎn)擊兩個(gè)圖片，如果翻開(kāi)的圖片是一樣的，那么這兩個(gè)圖片應(yīng)該自動(dòng)消除，該如何實(shí)現(xiàn)？

分析/嘗試：

1. 使用配對(duì)的動(dòng)態(tài)面板（兩個(gè)動(dòng)態(tài)面板），如果動(dòng)態(tài)面板1和動(dòng)態(tài)面板2的狀態(tài)都是圖片翻開(kāi)的狀態(tài)，點(diǎn)擊動(dòng)態(tài)面板2的時(shí)候設(shè)置動(dòng)態(tài)面板1和2同時(shí)隱藏或置為狀態(tài)3。（該方案最終放棄）
2. 使用中繼器，該過(guò)程需要全局變量的配合使用，該過(guò)程邏輯比較復(fù)雜，暫時(shí)不講。（最終采用的實(shí)現(xiàn)方法）

問(wèn)題03：如何實(shí)現(xiàn)初始化的時(shí)候所有圖片的位置是隨機(jī)的？

分析/嘗試：

1. 使用隨機(jī)數(shù)函數(shù)，然后隨機(jī)出符合條件的坐標(biāo)值。（該方案最終放棄，原因是該方案是基于構(gòu)思02中使用動(dòng)態(tài)面板的方案，根本原因是很難避免隨機(jī)出的坐標(biāo)值是不重復(fù)的，該方案放棄也必然需要放棄動(dòng)態(tài)面板方案，因此兩個(gè)方案是互相制約的）
2. 使用隨機(jī)函數(shù)+中繼器，比如初始的時(shí)候給中繼器的A列賦值隨機(jī)數(shù)，然后再根據(jù)A列的值進(jìn)行排序，因?yàn)槊看坞S機(jī)數(shù)都不一樣，因此每次排序的結(jié)果都不一樣，這樣就間接的實(shí)現(xiàn)了圖片隨機(jī)顯示的需求，實(shí)際是圖片的順序隨機(jī)，這里就不考慮坐標(biāo)了（最終采用的實(shí)現(xiàn)方法）。

階段總結(jié)：以上三個(gè)問(wèn)題可以說(shuō)是這個(gè)小游戲最核心的問(wèn)題，經(jīng)過(guò)上述的分析和嘗試，基本確定了最終了整體實(shí)現(xiàn)方法，那么接下來(lái)就按照上面的方式告訴大家如何操作。

實(shí)操01：使用中繼器建好游戲區(qū)域的整體框架

1）添加“中繼器”部件，雙擊進(jìn)入設(shè)置Dataset，清空中繼器的默認(rèn)內(nèi)容，分別設(shè)置列：SortID-用于存放隨機(jī)數(shù)和排名，URL1-用于存放游戲初始時(shí)顯示的圖片URL，URL2-用于存放點(diǎn)擊翻開(kāi)后顯示的圖片的URL，IMGID1-翻開(kāi)后圖片的唯一ID，IMGID2-翻開(kāi)后的相同圖片的ID

2）設(shè)置 Repeater Style中的Layout，本案例是8*5的圖片矩陣，橫向8張，縱向5張，因此需要如下圖的設(shè)置，Items per row 設(shè)置為8

實(shí)操02：中繼器中添加一個(gè)“圖片”部件，設(shè)置圖片的點(diǎn)擊事件以實(shí)現(xiàn)翻轉(zhuǎn)和消除等

1）在中繼器中添加“圖片”部件，設(shè)置高寬均為100，x,y坐標(biāo)均為0

2）添加點(diǎn)擊事件/全局變量

①點(diǎn)擊圖片實(shí)現(xiàn)圖片翻開(kāi)效果：點(diǎn)擊顯示圖片2（即翻開(kāi)），等待1000ms后，顯示圖片1（即恢復(fù)）。Item.URL1/2即是之前設(shè)置的中繼器的對(duì)應(yīng)的列值。

②依次點(diǎn)開(kāi)兩個(gè)相同的圖片后，兩個(gè)圖片自動(dòng)消除，首先考慮如何判斷依次點(diǎn)開(kāi)的兩個(gè)圖片是相同的？我們可以通過(guò)之前 中繼器 中設(shè)置的 IMGID2 的值，如果兩個(gè)圖片的IMGID2 是相同的，那么就認(rèn)為這兩個(gè)圖片是相同的，這時(shí)候需要設(shè)置一個(gè)全局變量 IMGID2（設(shè)置全局變量的方法此處不講），然后再添加點(diǎn)擊事件，當(dāng)點(diǎn)擊圖片的時(shí)候，將當(dāng)前圖片的IMGID2的值賦值全局變量IMGID2，這樣當(dāng)點(diǎn)擊下一張圖片的時(shí)候用下一張圖片的IMGID2跟全局變量IMGID2中存儲(chǔ)的值進(jìn)行比較，如果相同則消除這兩個(gè)圖片。

下面我先把判斷條件以及給全局變量賦值添加到點(diǎn)擊事件中，如下：

③接下來(lái)要考慮如何實(shí)現(xiàn)消除的效果，經(jīng)過(guò)大量的嘗試（Hide，Disabled等均無(wú)法實(shí)現(xiàn)）后，最后通過(guò)中繼器的Delete Rows動(dòng)作來(lái)實(shí)現(xiàn)將相同的圖片消除，可是這樣又會(huì)導(dǎo)致中繼器的數(shù)據(jù)項(xiàng)越來(lái)越少，而且圖片的位置會(huì)隨著刪除的圖片而改變（類似Excel中上面的行刪除，下面的行就自動(dòng)上移了），這樣其實(shí)也是可以的，然后如何判斷刪除那些rows，于是需要給rows添加標(biāo)記，通過(guò)Mark Rows來(lái)實(shí)現(xiàn)。

④由于上面的結(jié)果不是我想要的理想效果，于是乎繼續(xù)研究如何解決這個(gè)問(wèn)題。然后想到Delete Rows之后，再Add Rows，這樣就補(bǔ)齊了，可是默認(rèn)Add的Rows總是排在最后面，如何讓其插入到圖片消除的位置？于是想到SortID（前面中繼器講到），通過(guò)給Add的rows添加和之前消除的圖片相同的SortID，通過(guò)初始時(shí)的排序規(guī)則（后面講），就會(huì)自動(dòng)插入到相應(yīng)的位置，這其實(shí)是兩步，先是插到了組后，然后通過(guò)SortID的排序，使后插入的rows調(diào)整到消除圖片的位置，驗(yàn)證可行。

增加全局變量SortID

到這里基本上完成了點(diǎn)擊翻轉(zhuǎn)圖片，圖片消除的功能，但是需要仔細(xì)思考點(diǎn)擊事件的邏輯，在什么點(diǎn)擊翻開(kāi)圖片，什么時(shí)候點(diǎn)擊翻開(kāi)圖片后使圖片消除等等。。。具體的邏輯在這里不做詳細(xì)分析。

實(shí)操03：初始時(shí)候的圖片隨機(jī)顯示。給 PLAY 按鈕增加點(diǎn)擊事件，事件的動(dòng)作是Add Rows 和 Add Sort。

1）Add Rows，SortID設(shè)置為隨機(jī)數(shù)（該隨機(jī)數(shù)為0~1之間的數(shù)，且小數(shù)位有十七八位，因此基本不會(huì)重復(fù)），總共添加40 rows。

2）Add Sort，因?yàn)?0個(gè)rows里的IMG2是固定的，但是SortID是隨機(jī)的，因此每次初始進(jìn)行一次SortID排序，就保證了每次出現(xiàn)的圖片都在不同的位置。

實(shí)操04：其他的按鈕、隱藏/顯示等效果比較基礎(chǔ)，在此就不做詳細(xì)教程了。

階段總結(jié)：到這里記憶連連看這個(gè)小游戲的核心功能以及難點(diǎn)部分基本講完了，上述過(guò)程比較粗糙，只講到了光簡(jiǎn)單，無(wú)法完全根據(jù)上面的步驟完成一個(gè)可以正常使用的原型，還需要大家加入自己的思考與理解，去完善更多細(xì)節(jié)的部分。

經(jīng)驗(yàn)總結(jié)

相信大家對(duì)Axure原型設(shè)計(jì)的理念已經(jīng)了解了很多，我在這里在強(qiáng)點(diǎn)至關(guān)重要的一點(diǎn)：就是要盡可能的熟悉AxureRP 的操作，包括部件、事件、動(dòng)作、函數(shù)、變量等等，只有足夠的熟悉，才能盡快的實(shí)現(xiàn)自己腦海中的想法。

另外不要進(jìn)入一個(gè)誤區(qū)，讓AxureRP限制了你的發(fā)揮，畢竟AxureRP的功能還是有限的，當(dāng)無(wú)法實(shí)現(xiàn)IDEA的時(shí)候，靈活變通。

花了半天的時(shí)間，終于碼完了上面的字，歡迎交流！

本次教程游戲體驗(yàn)地址：http://raedme.cn/axurelab/001_lianliankan/

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