編輯導語：隨著商業(yè)的發(fā)展，在ToC系統(tǒng)中，抽獎是必備的一項功能。那么，對于這么高頻使用的功能，如何用Axure做一個既美觀且復用性又強的抽獎原型？作者分享了相關步驟，希望對你有所幫助。

隨著商業(yè)的進步與發(fā)展，在To C的系統(tǒng)里面，抽獎可以說是必備的功能。

所以我們今天來學習，在Axure里面做一個最一個既美觀，而且復用性又強的抽獎原型，完成后效果如下圖所示：

原型地址：https://br9e4z.axshare.com/#g=1

一、材料準備

1. 中繼器

這次教程主要是通過中繼器制作，因為中繼器有很強的復用性，制作完成之后，只需要再中繼器表格中維護獎品信息，既可以自動生成交互效果

布局：為水平分布，每行項目數(shù)為5；

中繼器內(nèi)部所需元件：

內(nèi)部矩形：設置選中樣式為藍色（抽獎過程中閃爍效果），禁用樣式的為橙色（抽完成后抽中的效果）。

圖片元件：獎品的圖片內(nèi)容，后續(xù)通過設置圖片的交互，將中繼器里的圖片設置到該元件里。

文本標簽：獎品的文字內(nèi)容，后續(xù)通過設置文本的交互，將中繼器里的獎品文字設置到該元件里。

將內(nèi)部矩形、圖片元件和文本標簽組合在一起，如下圖所示放置在中繼器內(nèi)。

中繼器內(nèi)部表格設置：

中繼器表格內(nèi)共需要設置5列，如效果所示：

no列：序號列，為按12345……填寫，后續(xù)隨機抽取的時候會用到序號；

text列：文字列，對應的是文本標簽的內(nèi)容，這里填寫獎品信息即可；

pic列：圖片列，右鍵導入本地圖片，或者填寫圖片的在線地址均可；

xuanzhong列：默認為空即可，只用于抽獎過程中的邏輯處理。

jinyong列：默認為空即可，只用于抽獎完成后獎品背景變色的邏輯處理。

2. 按鈕

抽獎的按鈕，按鈕樣式你們根據(jù)自身需求設計即可。

3. 文本標簽

需要增加兩個文本，只用于邏輯處理，默認隱藏

• 次數(shù)文本：用于記錄抽簽是閃爍效果的次數(shù)
• 記錄文本：用于記錄閃爍的位置，默認值為1

二、交互制作

1. 中繼器每項加載時交互

首先我們要將中繼器里關于獎品的信息（文字和圖片）設置到對應的元件里

設置文本：將item.text的內(nèi)容設置的中繼器里的文本標簽（獎品的文字內(nèi)容）

設置圖片：將item.pic的內(nèi)容設置的中繼器里的圖片元件（獎品的圖片）

然后我們需要分情況來設置，如果xuanzhong的值為1：

設置選中：那么我們就需要選擇背景矩形讓他變色，我們是通過中繼器的值來控制背景矩形的狀態(tài)的，如果xuanzhong列的值為1，即選中變色，如果不等于1，就不會選中

設置文本：這里我們還需要設置記錄文本，設置為item.no+1，item.no是當前的序號，加一代表我這個已經(jīng)閃爍完成了，記錄下一個要閃爍的獎品的no

接下來我們設置禁用的事件，和選中的事件差不多，如果jinyong的值為1，那么就禁用背景矩形，如果不是1的情況，我們可以不用寫，因為本來默認就不是1的情況，當然了你也可以寫上如果禁用不等于1，啟用背景矩形，不過這里寫不寫都是一樣的，沒必要浪費時間。

最后，我們還要做一個循環(huán)，需要考慮的是，如果是在最后一行，選中的時候設置記錄文本為序號+1那肯定是錯誤的，最后一行的時候應該設置記錄文本為1，這樣才能循環(huán)閃爍。

如果tem.isLast為真，而且xuanzhong的值=1，我們就是設置記錄文本的值為1。

那這樣，中繼器內(nèi)的交互就完成了，接下來，我們制作抽獎循環(huán)的交互。

2. 次數(shù)文本載入時交互

次數(shù)文本是用來控制抽獎過程中閃爍的次數(shù)，因為抽獎的隨機的，所以我們在元件載入時，設置次數(shù)文本為隨機數(shù)。這里我們用到隨機函數(shù)math.random，他可以從0到1中任意取一個數(shù)，然后我們希望控制閃爍的次數(shù)在20到40次之間所以我們用隨機函數(shù)的結果*20+20，就可以控制了，最后記得需要用fixed函數(shù)來四舍五入。

3. 抽獎按鈕鼠標單擊時交互

這里是需要分兩種情況，第一種是次數(shù)文本>0的情況：

鼠標單擊按鈕以后，我們要首先禁用掉當前按鈕，為了防止重復點擊而出現(xiàn)的問題

然后我們標記中繼器里的所有行，然后更新已標記的行，即更新所有行，將所有行里面的xuanzhong列和jinyong列的值都改為0，這里可以理解成全部獎品的背景設置為默認顏色。

然后我們再更新行，更新的邏輯是no列的序號==記錄文本，將這一行的xuanzhong列的值更新為1。這樣我們就可以保證每次只會選中1個，而且選中這個之后又會自動設置記錄文本+1，從而實現(xiàn)循環(huán)。

這里我們設置一個等待的時間，就是每個獎品選中顯示藍色背景的時間，案例中是0.1秒，大家可以根據(jù)實際來設置。

這樣完成以后，我們設置次數(shù)文本為他原來的值-1，然后在觸發(fā)當前按鈕鼠標單擊時事件。例如剛開始隨機出來的數(shù)字是20，那么他就會一直不斷的循環(huán)在轉(zhuǎn)，20到19到18……到0，才會停止

當次數(shù)文本變成0的時候，我們進入下一中情況：

首先我們也是通過標記所以行，更新所有行，將所有行里面的xuanzhong列和jinyong列的值都改為0，這一步和前面的都是一樣的。

然后我們再更新行，更新的邏輯是no列的序號==記錄文本，這里注意，這次更新是將這一行的jinyong列的值更新為1。這樣就會有一個變成橙色，就是抽中的鍵盤了。

按道理來說這樣就完成了整個抽獎的流程，后面我們就要為下一次抽獎準備

因為開始抽獎的時候禁用了按鈕，所以這里我們要重新啟用抽獎按鈕。

然后我們重新隨機抽取閃爍的次數(shù)，因為之前是次數(shù)文本在載入時通過隨機函數(shù)來設置的，所以這個我們直接觸發(fā)隨機文本觸發(fā)時事件即可。

樣，我們就完成了隨機抽獎的原型模板了，以后使用的話，我們可以直接在中繼器表格中維護獎品信息，就能自動生成交互，是不是很方便快捷呢？

那以上就是本期的全部內(nèi)容了，感謝您的閱讀，我們下期見，88~~~

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

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