如何在 Axure 中設置動態的數值

今天來介紹 Axure 一個大概比較少有人會用的功能：在 Prototype 中設置動態的數值

在 Prototype 中設定動態的數值

首先來看看效果

或許你會說這不過是個 Prototype 而已，有必要做到這個程度嗎？  其實說真的，大部分的情境確實是不需要，不過提供你2個這麼做的理由：

1. 你需要做開發前的使用者測試，想要更真實的模擬使用者的操作
2. 你跟老闆 / 客戶之間有原因不明的鴻溝，怎麼溝通都會有誤差

好啦，那來看看實際上到底怎們做吧~

製作畫面元素

1. 製作顯示畫面
   以蛙目前的例子來說，畫面上包含標題、加減按鈕各一、金額(需要產生變化的部分)、元(不變的部分)
2. 幫金額命名
   為了方便等下我們需要針對金額做動作，因此先幫這個部分命名，待會比較好找

新增變數

1. 選擇互動
   這個效果是在點選按鈕時，要增減數字，因此這邊選擇 OnClick 點選時
2. 要產生的互動請選擇 Variable Value 變數
3. 點選 Add variable 新增變
4. 數點選綠色+號新增
5. 新增一筆變數
   變數的命名隨意、只要方便辨認即可，但不支援中文、符號、空白等，需要在25個字元以內
   記得除了新增變數的名稱之外，也可以設定一個數字的預設值

這樣子設定完了之後， Axure 就可以新增一筆變數，依照這個步驟所產生的變數是 Global variables 全域變數，意思是這個變數在整個 Axure 檔中都會生效，比如說，你可以讓User在第一步驟設定數字，第二個步驟取出同一個變數讓 User 確認設定值是否正確。

設定動作-每次點擊後，變數+1000

變數新增完了之後，繼續1.2設定動作

1. 選擇剛剛新增完成的變數
2. Set variable to 區塊，選擇 value，後方可輸入計算公式
   Axure 的公式需要用[[]] 雙層的中括弧包起來
   我們現在需要讓每次點擊時，變數 Money 加 1000，因此輸入 [[Money+1000]]

設定動作-每次點擊後，金額=變數

1. 選擇 Set Text 設定文字這個動作
2. 選擇需要設定文字的標的，也就是剛剛命名為 "金額" 的元件
3. Set variable to 區塊，選擇 value，後方公式直接輸入[[Money]]

如此這般，按下OK鈕，右邊+號按鈕就設定好了，現在預覽一下，就可以看到右側加號的效果已經完美的設定好囉~

那麼左邊的減號怎麼辦呢? 其實簡單點處理的話，直接把+號的動作設定複製到-號，然後再把[[Money+1000]]改為[[Money-1000]]即可，但這麼做有個小問題，那就是一直點擊減號時，金額會不停的變小，變成-1000、-2000...，可是這個欄位明明就是刷卡金額，刷卡金額沒辦法小於0（難不成銀行還退你錢），因此左側的減號需要再做一個特殊處理。

設定數值下限

1. 打開 Case Editor 介面，雙擊點選 Case Name 欄位可打開 Condition Builder 工具視窗
   此工具視窗可以更進一步的設定動作的發動條件
2. 選擇 value of variable - Money - is greater than - value - 0
   意思是 "當 Money 這個變數的值大於 0 時"
   這樣子設定完成之後，-號case1的發動條件就變成 "點擊後（當 Money 這個變數的值大於 0 時）"
   也就是說，當 Money 這個變數=0的時候，點擊-號按鈕就不會產生作用

噹噹噹噹~這樣子就終於全部完成囉~~~ 是不是很辛苦很麻煩很變態呢~ 其實，習慣了就好囉~

~再來看一次效果啊~