本篇文章介紹如何用Axure制作購票選座模板，作者提供了詳細(xì)的流程操作，讓我們一起來學(xué)習(xí)吧，希望能對(duì)你有所幫助。

購票選座是指在購買電影、演唱會(huì)、體育賽事等活動(dòng)的門票時(shí)，顧客可以在購票過程中自主選擇自己喜歡的座位位置。

這種購票方式通常通過在線平臺(tái)或手機(jī)應(yīng)用實(shí)現(xiàn)，顧客可以在座位圖上查看場館的座位分布情況，并根據(jù)自己的喜好和需求選擇心儀的座位。

今天作者就教大家在Axure中如何制作高保真購票選座的原型模板。

一、效果展示

• 選擇座位：點(diǎn)擊可選座位，可以選擇對(duì)應(yīng)座位；再次點(diǎn)擊已選座位，可以取消選擇該座位
• 購票限制：可以規(guī)定一次最多選擇的座位數(shù)，案例中是5次
• 座位明細(xì)：選擇座位后，下方會(huì)出現(xiàn)已選座位的明細(xì)，可以左右拖動(dòng)查看，也可以點(diǎn)擊關(guān)閉按鈕取消選中該座位
• 計(jì)算金額：可以設(shè)置不同區(qū)域的座位為不同的價(jià)格，選擇座位后計(jì)算出需要支付的總額
• 推薦座位：沒有選擇座位時(shí)，可以選擇推薦座位，根據(jù)選擇的人數(shù)，選擇對(duì)應(yīng)的座位
• 隨機(jī)座位：每次進(jìn)入時(shí)，隨機(jī)生成可選、已售、不可售的座位

二、制作教程

1. 選擇座位

我們要先用中繼器制作出作為表，中繼器里面需要放在一個(gè)動(dòng)態(tài)面板，動(dòng)態(tài)面板里有3個(gè)state（分別命名為可選、不可售、已售），里面分別放置可選、已售、不可售3種圖標(biāo)素材。

中繼器布局為網(wǎng)格分布，案例種是水平布局，每行項(xiàng)目數(shù)為10，大家也可以根據(jù)自身需要設(shè)置。

中繼器表格里面有三列，no列填寫對(duì)應(yīng)座位的信息幾排幾列；state列填寫狀態(tài)，不可售狀態(tài)填寫不可售，已售填寫已售，可選填寫可選或者不填即可；price列填寫對(duì)應(yīng)座位的金額：

在中繼器每項(xiàng)加載時(shí)，我們用設(shè)置面板狀態(tài)的交互，設(shè)置動(dòng)態(tài)面板進(jìn)入到和state同樣的頁面即可。

然后我們用2根垂直線和水平線，將最佳觀影區(qū)圈起來，用矩形和數(shù)字，將排數(shù)顯示出來，如下圖所示效果：

鼠標(biāo)單擊可選里面的圖標(biāo)時(shí)，我們用更新行的交互，將中繼器當(dāng)前行state的值更新為已選：

鼠標(biāo)單擊已選里面的圖標(biāo)時(shí)，我們用更新行的交互，將中繼器當(dāng)前行state的值更新為可選：

這樣就可以點(diǎn)擊選中和取消選中座位了。

2. 購票限制

一般的app會(huì)有購票限制，一次只能選中購買多少張票這樣，所以我們這里也做一個(gè)限制，限制一次最多只能選擇5個(gè)座位。

這里我們首先要增加一個(gè)隱藏文本，用于記錄已選座位數(shù)。

在中繼器每項(xiàng)加載第一行的時(shí)候，我們用設(shè)置文本的交互，將選中數(shù)設(shè)置為0，這相當(dāng)于重置的操作，如果state列的值為選中，那我們就設(shè)置選中數(shù)為它原來的數(shù)+1，這樣就可以記錄選中了多少個(gè)。

然后我們回到鼠標(biāo)單擊可選里面的圖標(biāo)時(shí)的交互，這里我們要增加一個(gè)條件，就是如果選中數(shù)小于5，案例中是5，當(dāng)然我們也可以增加一個(gè)文本，用來控制最大選中數(shù)。

將文本變成變量，后續(xù)修改文本就可以控制最大選中數(shù)了，這個(gè)條件成立，我們才用更新行，否則我們就用顯示的交互，將提示的元件顯示出來。

這里提示元件用矩形制作就可以了，如果想固定定在頁面中部，也可以轉(zhuǎn)為動(dòng)態(tài)面板固定在中部。

3. 座位明細(xì)

在下方我們用中繼器來制作一個(gè)座位明細(xì)，里面包含一個(gè)矩形背景，兩個(gè)文本標(biāo)簽，分別對(duì)應(yīng)座位號(hào)和價(jià)格，一個(gè)刪除按鈕，如下圖所示：

中繼器表格里no和price兩列，分別對(duì)應(yīng)座位號(hào)和價(jià)格。

在中繼器每項(xiàng)加載時(shí)，將no列和price列的值分別設(shè)置到座位號(hào)和價(jià)格的文本標(biāo)簽里。

然后我們這里的值，要通過前面座位中繼器傳遞過來。

首先我們?cè)诩虞d第一行的時(shí)候，要做一個(gè)還原的處理，我們可以先用標(biāo)記行的交互標(biāo)記座位明細(xì)中繼器的所有行，然后用刪除行的交互將所有行刪除。

如果state里的值等于選中，我們就用添加行的交互，將該行no列和price列的值設(shè)置添加到座位明細(xì)中繼器里。

鼠標(biāo)單擊座位明細(xì)中繼器里的刪除按鈕時(shí)，我們用更新行的交互，將座位中繼器里對(duì)應(yīng)的行的state列的值更新為未選。

這里我們還需要考慮到左右拖動(dòng)查看更多的問題，因?yàn)轫撁嬷荒茱@示4張票，如果選擇了5張，我們就要增加一個(gè)左右拖動(dòng)查看更多的效果。

這里我們用中繼器的項(xiàng)目數(shù)來判斷，如果大于等于5，在拖動(dòng)時(shí)，我們就用移動(dòng)事件，讓座位明細(xì)中繼器組合隨著鼠標(biāo)水平移動(dòng)，這里我們根據(jù)需要給他增加一個(gè)左右邊界

因?yàn)樵谥匦逻x擇座位后，如果選擇小于4張，如果有拖動(dòng)過，就要做一個(gè)還原，移動(dòng)到0.0.的初始位置，所以在前面還原操作的時(shí)候，就是中繼器加載第一行的時(shí)候，我們要增加一個(gè)移動(dòng)時(shí)間，將他移動(dòng)的原來的位置

4. 計(jì)算金額

首先我們要增加一個(gè)支付按鈕的動(dòng)態(tài)面板，有兩個(gè)狀態(tài)，一個(gè)是未選擇座位的狀態(tài)，文字為請(qǐng)選擇座位，第二個(gè)狀態(tài)是已選中座位，文字問總金額+確認(rèn)座位。

我們要增加一個(gè)文本來計(jì)算已選座位的總金額，這里和上面記錄選中數(shù)的邏輯是一樣的。

在中繼器每項(xiàng)加載第一行的時(shí)候，我們用設(shè)置文本的交互，將總金額的文本設(shè)置為0，這相當(dāng)于重置的操作，如果state列的值為選中，那我們就設(shè)置選中數(shù)為它原來的數(shù)+price列的價(jià)格，這樣就可以記錄總金額，然后在將總金額設(shè)置到已選座位的按鈕文本上就可以了。

加載到最后一行的時(shí)候，我們可以要判斷選中數(shù)，如果選中數(shù)為0，就是沒有選擇座位，就用設(shè)置面板狀態(tài)的交互，將按鈕設(shè)置到第一種未選擇座位的狀態(tài)，否則就設(shè)置到第二種已選擇座位的狀態(tài)。

5. 推薦座位

前面座位明細(xì)中繼器要組合放入按鈕動(dòng)面板為已選座位的狀態(tài)。

然后在未選擇座位的狀態(tài)里面增加推薦座位5個(gè)小按鈕，我們用矩形制作即可。

鼠標(biāo)單擊按鈕時(shí)，我們用更新行的交互，將符合條件的座位的state值更新為選中。

一般我們會(huì)選擇在推薦區(qū)域的并排的座位，案例中我們固定了推薦7排中部的座位

推薦1個(gè)座位的交互如下：

推薦多個(gè)座位時(shí)，我們用||將條件隔開即可，下面就是推薦5個(gè)座位的交互

6. 隨機(jī)座位

為了模擬實(shí)際情況，不同場次的座位情況不同，或者說就算同一個(gè)場次的座位情況也能分分鐘變化，所以我們做了一個(gè)隨機(jī)事件，讓座位的狀態(tài)可選、不可售、已售隨機(jī)出現(xiàn)。

首先我們?cè)谳d入時(shí)，我們要先將所有行更新為未選的狀態(tài)，然后抽取一個(gè)隨機(jī)數(shù)，我們可以用設(shè)置文本的交互，抽取一個(gè)隨機(jī)數(shù)，抽到的這個(gè)隨機(jī)數(shù)就是已售座位的數(shù)量，我們可以用randow函數(shù)來抽取，案例中是抽取1-6個(gè)，你們也可以根據(jù)實(shí)際情況設(shè)置，因?yàn)橄旅嬗醒h(huán)事件，抽取太多可能會(huì)卡頓哦

然后我們做一個(gè)循環(huán)事件，如果隨機(jī)數(shù)的值不等于0，我們先用隨機(jī)數(shù)，來抽取一個(gè)幾行幾列的值，然后用更新行的交互，將對(duì)應(yīng)行state列的值更新為已售，更新完成之后，用設(shè)置文本的交互，將隨機(jī)數(shù)的值設(shè)置為它原來的值-1。

完成之后，我們用等待事件和觸發(fā)事件，等在1毫秒后觸發(fā)該事件鼠標(biāo)單擊時(shí)，這樣相當(dāng)于做了一個(gè)循環(huán)，隨機(jī)數(shù)會(huì)慢慢遞減一直到0。

如果隨機(jī)數(shù)等于0時(shí)，我們?cè)俅纬槿山M，座位不可售的座位，同樣是用設(shè)置文本的交互，利用random事件隨機(jī)出作為編號(hào)，然后用更新行的交互，將符合條件的座位的state值設(shè)置為不可售

然后復(fù)制這兩個(gè)事件，需要隨機(jī)多少個(gè)不可售作為就復(fù)制基礎(chǔ)，案例中是2次。

最后還需要考慮上面推薦座位的功能，因?yàn)樯厦嫱扑]的座位時(shí)寫死的，所以這里我們要防止隨機(jī)事件將推薦的座位更新成已售或者不可售，所以我們用更新行的交互，將對(duì)應(yīng)推薦的座位的state值更新為可選。

案例中寫的是更新為1，這是因?yàn)樽鳛闉榱朔奖?，因?yàn)榍懊嬖O(shè)置面板狀態(tài)是根據(jù)值來的，只要不是已售和不可售，你輸入其他的值都會(huì)默認(rèn)進(jìn)入第一個(gè)狀態(tài)，就是可選的狀態(tài)。

這樣我們就完成了購票選座原型模板的制作了，后續(xù)我們也可以增加根據(jù)不同電影的來傳遞不同的值的交互，讓整個(gè)原型變得更加高保真。

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。