Axure RP 原型工具教學 — 如何根據選項，顯示對應的畫面？
Axure RP 是蠻知名的 prototype 軟體，相信在軟體業的產品經理都知道。2022 年 Axure RP 已經出到第 10 版，雖然聲名遠播也有許多中文教學，但我自己還是踩到一個雷，不知道如何依據不同選項顯示對應的畫面，這個情境相當常見，官方文件稱之為 condition logic，下面我用付款結帳的畫面來說明設定步驟。
步驟 1：設定元件名稱
在 Axure RP 裡的每個元件、按鈕和文字都是物件而且有層級的概念，想依據選項顯示不同畫面，就必須設定物件的名稱。
以下圖為例，今天用戶在結帳的時候必須選擇電信帳單或信用卡，選擇後點下付款按鈕跳到對應的畫面。因此我們要將電信帳單和信用卡兩個選項分別命名，由於我的選項有分上下層，上層是整個選項，下層則是前面的點點和後面的文字兩個物件，如果你的選項只有一層那是最單純的。我將上層稱為「電信帳單」，下層則是「電信帳單value」和「電信帳單文案」，信用卡的選項也是一樣的邏輯進行命名。
步驟 2：設定元件的互動事件
此案例中，用戶按下畫面上的「付款」按鈕後會顯示對應的畫面，因此我們要設定付款按鈕的行為。請點選畫面上的付款按鈕並點擊右側的 New interaction 新增事件，此案例裡我們設定 Click or tap 事件，設定好用戶點擊後的行為。
步驟 3：建立情境(Case)，設定觸發條件(Conditions)
按下 Click or tap 後接著按下旁邊的 Add Conditions 在跳出的 Condition Builder 視窗建立情境與條件，在此案例的情境是選擇電信帳單或信用卡，一共有兩個情境，請在按下 Add Conditions 後跳出的 Condition Builder 視窗設定(如下方右圖)，視窗上方的 CASE NAME 欄位用來命名此情境的名稱。
Condition Builder 中間會有常用的情境，像是當用戶選擇某個選項的時候或是選項空白，此案例我們直接點選 if a widget is selected 的情境(如下方左圖)。
點選之後找到步驟1設定的「電信帳單value」物件(如下方右圖)，如果你選到「電信帳單文案」或是上層的「電信帳單」會設定失敗，跳不到對應畫面，我自己就卡在這邊 1 個小時。如果你的元件層級更複雜，請先手工測試確認哪個元件會讓你的畫面動起來。
選擇完成後，Condition Builder 就會像下面的畫面，接著按下右下角的 OK，完成這個情境的設定。
步驟 4：選擇對應畫面
設定好情境後，就是設定對應的行為。我們希望用戶選擇「電信帳單」選項會跳到電信帳單的結帳畫面，因此我們的 action 設成 Open Link，最後選擇我要開啟的頁面，按下 OK 就完成設定了。
步驟 5：用相同方式設定其他情境
設定完第一個情境後，用一樣的方式設定其他情境，像我的案例除了電信帳單的選項還有信用卡的選項，我就新增信用卡的情境，稱為 Case 2，設定用戶選擇信用卡選項時會跳到信用卡的結帳畫面，這樣就大功告成了。
設定完成後，請透過右上角的預覽進行檢查，這邊也將此案例的 prototype 放上來，歡迎玩玩看，感謝閱讀。
