學(xué)習(xí)Axure的時候覺得中繼器與函數(shù)很枯燥？本文教你一個趕走枯燥的方法——設(shè)計游戲！讓你感覺學(xué)習(xí)Axure原來可以這么有趣！

Axure是產(chǎn)品經(jīng)理工作中最重要的軟件之一，除此之外對PS、Visio也應(yīng)該有所了解。不過就產(chǎn)品經(jīng)理而言，Axure是最有代表性的軟件。大多數(shù)人都可以做到使用Axure畫一些簡單的原型圖，但是到了交互方面則捉襟見肘，中繼器和函數(shù)是不少產(chǎn)品經(jīng)理面前的兩座大山。

有趣的內(nèi)容能夠減少人在學(xué)習(xí)中的抵觸心理，Axure的函數(shù)無疑是十分枯燥的，且一般用不到的特點容易讓人沒有動力進行學(xué)習(xí)。這種情況下，自己制作一些有意思的東西對于技能的鍛煉以及娛樂身心都有很大的益處。

一、制作結(jié)果

主要交互：

• 小魚會來回循環(huán)的游泳且會轉(zhuǎn)身；
• 小魚的速度實際上是隨機的，即不是勻速運動；
• 可以設(shè)置難度完成小魚速度的切換；
• 點擊魚鉤可以進行捕魚，捕捉成功后得分且小魚將會回到原來的位置。

體驗地址：點擊此處

二、制作方法

1.用Axure畫背景元件

這一步很簡單，圖片就是由幾個矩形，一個橢圓，一個小魚組成的。其中值得注意的是小魚的圖片需要png不帶背景的圖片，否則會有一個背景框的存在。

png的制作方式很簡單，可以在網(wǎng)絡(luò)上下載一個背景比較純凈的小魚圖片，然后使用PS進行摳圖，最后去掉背景頁然后保存為png格式即可。

因為小魚是需要轉(zhuǎn)身的，所以可以將方向相反的小魚分別儲存為動態(tài)面板的兩種狀態(tài)。當(dāng)然，圖片的水平翻轉(zhuǎn)需要PS的幫助。這樣，只要改變動態(tài)面板的狀態(tài)就可以實現(xiàn)小魚的轉(zhuǎn)身。

2.魚鉤動作

魚鉤動作的設(shè)置如上圖所示，魚鉤是由魚鉤以及魚線兩部分組成的，魚鉤的動畫為移動，而魚線的動畫則為尺寸的改變。因為還需要收回，所以移動后再設(shè)置反向的移動即可。這一步的觸發(fā)方式設(shè)置為鼠標(biāo)點擊魚鉤。

3.釣魚動作

通過上述兩步可以實現(xiàn)釣魚的動作。這里主要的知識點是接觸操作，可以在條件中進行設(shè)置，被掉的魚運動是垂直的，故而其移動的坐標(biāo)中x值為0。

此處設(shè)置的難點是：注意移動設(shè)置中的相對位置和絕對位置，如果不慎弄反可能導(dǎo)致交互出錯。

到這里看起來已經(jīng)實現(xiàn)很多功能了，但實際上還差很多，比如現(xiàn)在的魚是不動的，且將魚掉走之后就沒有可以掉的魚了，游戲無法繼續(xù)進行。

4.全局變量的定義

接著為了實現(xiàn)魚的往復(fù)運動，得分的計算，以及難度調(diào)節(jié)功能，需要設(shè)置三個全局變量。

• dx：應(yīng)用于方向的改變；
• score：用于記錄游戲得分；
• level：用于游戲等級的調(diào)節(jié)。

此處可以先將其默認(rèn)值設(shè)定一下，dx為1即不反向，score為0即初試分?jǐn)?shù)是0，level為1即初始難度為1。

5.魚的移動

魚的移動是水平不勻速移動，不勻速為了增加釣魚預(yù)判的難度。其設(shè)置方式如上圖所示，其中用了隨機函數(shù)math.random。dx是為了改變其方向，默認(rèn)值為1，level則是為了改變其難度，默認(rèn)值同樣也是1。

6.魚的轉(zhuǎn)身

魚不可能朝向一個方向一直運動下去，這樣無法完成游戲，所以可以設(shè)置其邊界條件，讓其超出邊界的時候dx的數(shù)值變?yōu)?1實現(xiàn)反向移動。此外還需要在邊界的時候修改魚的狀態(tài)，否則就會出現(xiàn)魚是倒著游泳的樣子。

反向由dx數(shù)值的改變來完成，而魚的狀態(tài)則是由state的改變來完成。

7.魚的復(fù)位以及得分判定

這是比較有難度的地方，為了能夠讓游戲成為無限模式，魚被釣走之后必須回到原來的地方且分?jǐn)?shù)增加。被掉走的魚不能夠在魚鉤上繼續(xù)移動。

因此設(shè)置如上圖所示，其中dx為0限制了繼續(xù)移動，移動魚to（440，398）讓魚可以復(fù)位，設(shè)置dx為1、yu為state1讓魚可以繼續(xù)游動，score相關(guān)則是統(tǒng)計用戶的游戲得分。

三、可以改進的地方

本游戲的制作還是很粗糙的，所有可以改進的地方很多，有興趣的讀者可以嘗試自己做一做。這里作者提幾個很簡單就可以改進的點：

• 讓畫面效果好一些，直接找更好的圖片就可以實現(xiàn)；
• 多個魚同時游動，重復(fù)上述操作，多幾種魚的類型；
• 增加魚雷，即設(shè)置幾個移動的魚雷，魚鉤碰到之后即宣布游戲結(jié)束或者得分清零；
• 魚的y方向增加移動特效，這一點也很好實現(xiàn)，即y軸方向增加隨機數(shù)位移即可；
• 增加暫停功能，設(shè)置條件讓魚的速度變?yōu)?即可以實現(xiàn)這一點。

上圖是稍微美化了的結(jié)果，是不是好看很多呢，其實只要用心還是可以做出不錯的作品的。

四、總結(jié)

本實例難度中等，相信對于axure有一定基礎(chǔ)的讀者可以直接重復(fù)出來，對于axure的認(rèn)識僅停留在畫原型上的讀者，可以先學(xué)習(xí)相關(guān)的內(nèi)容再進行練習(xí)。

#專欄作家#

馬璐，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品設(shè)計以及用戶體驗，力求在技術(shù)一定的情況下將產(chǎn)品做到極致，充分發(fā)揮技術(shù)的潛能。

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

題圖來自 Unsplash ，基于 CC0 協(xié)議