我們生活中經(jīng)常會遇到需要通過抓鬮（或抽簽）來做決定的問題。有些問題甚至上升到世界難題的高度，比如今晚吃什么，比如和對象如何分配家務(wù)活。今天手把手教你用Axure來設(shè)計(jì)這樣一款居家旅行，泡妞撩妹必備神器！

效果如下，也歡迎【在線試玩】：

一、主要需求

1、需要提供一個(gè)錄入抓鬮項(xiàng)的入口。

2、搖一搖手機(jī)隨機(jī)抽取一個(gè)選項(xiàng)作為本次抓鬮的結(jié)果，并將選項(xiàng)內(nèi)容和序號顯示出來。

3、抓取過的選項(xiàng)從列表里刪除，用戶可繼續(xù)抓鬮，直到每個(gè)選項(xiàng)都被抓到為止。

二、素材準(zhǔn)備

1、找一張好看的開機(jī)啟動頁面。

2、找?guī)讖埡猛娴谋砬閳D片（圖片尺寸大小要求一致），無需其他素材。

三、頁面流程

啟動頁、首頁、選項(xiàng)添加頁、搖一搖頁面、抓鬮結(jié)果頁、關(guān)于頁面。

流程圖如下所示：

四、主要思路

添加一個(gè)中繼器，用戶添加抓鬮選項(xiàng)的時(shí)候：在中繼器里新增一行數(shù)據(jù)，新增數(shù)據(jù)的時(shí)候?yàn)槊恳恍袛?shù)據(jù)添加一個(gè)隨機(jī)數(shù)。用戶開始抓鬮的時(shí)候：對中繼器按該隨機(jī)數(shù)進(jìn)行排序并讀取中繼器排序最靠前（或靠后）的一條數(shù)據(jù)，并將這兩個(gè)數(shù)據(jù)通過局部變量傳輸并呈現(xiàn)給用戶。這就是核心要義說起來很簡單，也很容易想到，其他一些細(xì)節(jié)上的體驗(yàn)就需要慢慢雕琢了。

五、重點(diǎn)解說

（1）中繼器字段設(shè)計(jì)

• cover：作為每一條數(shù)據(jù)的封面，用戶每添加一個(gè)數(shù)據(jù)位會按序生成一個(gè)選項(xiàng)的編號，并按序排列。
• id：存儲隨機(jī)數(shù)的字段，也是抓鬮的秘密武器。
• detail：存儲抓鬮選項(xiàng)的詳細(xì)內(nèi)容的字段。

為了在初始狀態(tài)列表里有一個(gè)添加選項(xiàng)的按鈕，將cover的默認(rèn)值設(shè)置為“+”（保存數(shù)據(jù)的時(shí)候中繼器將根據(jù)cover字段進(jìn)行升序排列，而“+”會被排在所有自然數(shù)之后，因此“+”始終排在最后）。

為了讓用戶在抓鬮的時(shí)候永遠(yuǎn)不會抽到這條默認(rèn)的數(shù)據(jù)，id默認(rèn)值也要確保足夠大（這里將id的默認(rèn)值設(shè)置為1000），每次都會被排列在最后一個(gè)。用戶抽簽的時(shí)候，根據(jù)id進(jìn)行升序。

（2）中繼器樣式設(shè)置

1、這三個(gè)字段在正式抓鬮前只有cover顯示給其他用戶看的。因此在新建中繼器的時(shí)候，id和detail對應(yīng)的矩形的邊框、填充、字體顏色都需要設(shè)置成全透明的。

2、本案例中樣式是每3個(gè)數(shù)據(jù)自動換行，因此中繼器設(shè)置為：橫向排列，每行3個(gè)數(shù)據(jù)。具體設(shè)置如下圖所示：

（3）添加抓鬮選項(xiàng)

在【選項(xiàng)添加頁】的添加按鈕增加以下事件：

• 在中繼器增加一行數(shù)據(jù)，其中cover以全局變量“cover”為基準(zhǔn)價(jià)1遞增，id添加一個(gè)隨機(jī)函數(shù)，detail讀取用戶錄入的數(shù)據(jù)。
• 將動態(tài)面板從“添加選項(xiàng)”的狀態(tài)切換到“默認(rèn)首頁”。
• 清空文本輸入框，并將中繼器根據(jù)cover字段進(jìn)行排序。

具體用例如下圖所示：

（4）搖一搖抓鬮

• 模擬搖動手機(jī)的動畫。
• 對中繼器根據(jù)隨機(jī)數(shù)“id”進(jìn)行排序，并將第一行數(shù)據(jù)標(biāo)記。
• 將第一行數(shù)據(jù)的cover和detail傳遞到【抽簽結(jié)果頁】，并將已標(biāo)記的數(shù)據(jù)刪除（確保不會重復(fù)抽到）。
• 如果抓鬮完畢，跳轉(zhuǎn)至首頁，并做相應(yīng)提醒。

六、美化原型

1、為了看上去更新APP，讓原型啟動的時(shí)候增加一個(gè)【啟動頁面】播放5秒廣告后自動跳轉(zhuǎn)到首頁，當(dāng)然允許用戶跳過廣告的。增加【關(guān)于頁面】再次打廣告！

2、為了讓抓鬮結(jié)果顯得不要那么死板，在【抓鬮結(jié)果頁】增加2個(gè)動態(tài)面板，存放表情庫，一個(gè)存放提示語庫。在每次傳送抓鬮結(jié)果的時(shí)候，隨機(jī)顯示（具體函數(shù)見上圖）。

本著開放交流原則，為大家提供【源文件】供大家學(xué)習(xí)、研究和優(yōu)化。

作者源：http://pan.baidu.com/s/1kUCAJ0F

官方源：http://pan.baidu.com/s/1gfPQyzx

作者：@陳濱淋，國內(nèi)某知名電商公司產(chǎn)品總監(jiān)，起點(diǎn)學(xué)院北京1508期優(yōu)秀學(xué)員。

本文由人人都是產(chǎn)品經(jīng)理專欄作家 @陳濱淋（微信公眾號：iambin） 獨(dú)家發(fā)布于人人都是產(chǎn)品經(jīng)理?。未經(jīng)人人都是產(chǎn)品經(jīng)理許可，禁止轉(zhuǎn)載。違者追究責(zé)任，謝謝合作。