Axure RP - 高階互動

到目前為止，我們已經瞭解了 Axure 中用於互動的基本功能。但是，在許多現實場景中，原型需要具備智慧性。所謂智慧性，指的是原型需要檢測特定元件的狀態，以便執行操作/觸發特定行為。

這種互動的一個典型示例是設定按鈕的顏色。這要求 UX 工程師戴上思考帽，將原型設計提升到一個新的水平。

在 Axure 中使用變數

變數，根據定義，代表一個可能變化或改變的因素。在 Axure 中，我們可以使用變數來表示或識別元件/互動的狀態。

一個典型的例子是在從一個頁面傳輸資料到另一個頁面時儲存資料值。為了使示例簡單明瞭，讓我們考慮一個需要顯示特定元件狀態的場景。

繼續我們上一個示例，讓我們考慮一下我們想顯示影像顯示了多少次。

以下是我們的操作方法：

對於此示例，我們將在動態面板下方建立一個文字。文字將顯示為 - 影像已顯示 0 次。

關鍵 - 標籤必須分成三個部分。請按照表格中列出的標籤名稱和文字進行操作。

這是必需的，因為我們希望控制每次單擊“顯示影像”按鈕時 countLabel 的值。

讓我們首先定義一個變數。

我們需要一個變數，該變數將在單擊按鈕時進行控制。在 Axure 的術語中，這個變數稱為 - 全域性變數。要定義全域性變數，請單擊選單欄中的“專案”，然後單擊“全域性變數”。將開啟一個對話方塊，如下面的螢幕截圖所示。

單擊綠色加號 (+) 圖示以新增全域性變數。讓我們將全域性變數命名為 - varDynamicPanel。其預設值為0。

在“顯示影像”按鈕互動中，雙擊“案例 1”。新增另一個操作。如以下螢幕截圖所示，操作為將 countLabel 上的文字設定為 [[varDynamicPanel + 1]]。

將文字標籤選擇為某個值非常簡單。讓我們看看如何從動態面板獲取值。

如上圖螢幕截圖中步驟 4 所示，單擊fx按鈕，將開啟以下對話方塊。

在第一個文字區域中，輸入以下字串。

[[varDynamicPanel + 1]]

單擊“確定”。

現在，我們需要確保每次單擊按鈕後變數都會更新。

在案例編輯器對話方塊中，在操作下，選擇變數→設定變數值。

選擇 varDynamicPanel 作為變數。

將變數設定為從可用選項中的元件 countLabel 上的文字獲取值。

單擊“確定”關閉案例編輯器。然後，單擊“預覽”按鈕。

在顯示/隱藏影像四次後，以下是預覽螢幕上的結果。

列印頁面