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

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

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

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

一、效果展示

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

二、制作教程

1. 選擇座位

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

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

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

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

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

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

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

這樣就可以點擊選中和取消選中座位了。

2. 購票限制

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

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

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

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

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

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

3. 座位明細(xì)

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

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

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

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

首先我們在加載第一行的時候，要做一個還原的處理，我們可以先用標(biāo)記行的交互標(biāo)記座位明細(xì)中繼器的所有行，然后用刪除行的交互將所有行刪除。

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

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

這里我們還需要考慮到左右拖動查看更多的問題，因為頁面只能顯示4張票，如果選擇了5張，我們就要增加一個左右拖動查看更多的效果。

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

因為在重新選擇座位后，如果選擇小于4張，如果有拖動過，就要做一個還原，移動到0.0.的初始位置，所以在前面還原操作的時候，就是中繼器加載第一行的時候，我們要增加一個移動時間，將他移動的原來的位置

4. 計算金額

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

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

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

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

5. 推薦座位

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

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

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

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

推薦1個座位的交互如下：

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

6. 隨機座位

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

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

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

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

如果隨機數(shù)等于0時，我們再次抽取兩組，座位不可售的座位，同樣是用設(shè)置文本的交互，利用random事件隨機出作為編號，然后用更新行的交互，將符合條件的座位的state值設(shè)置為不可售

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

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

案例中寫的是更新為1，這是因為作為為了方便，因為前面設(shè)置面板狀態(tài)是根據(jù)值來的，只要不是已售和不可售，你輸入其他的值都會默認(rèn)進(jìn)入第一個狀態(tài)，就是可選的狀態(tài)。

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

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