1. 認識Condition (邏輯判斷)
2. 認識Condition Builder (邏輯判斷編輯器)
3. 用Condition Builder建立邏輯判斷
4. 秘技(Quick Tips)
1. 認識Condition (邏輯判斷)
雖然可以用文字來描述Prototype操作的動線或互動方式,但有的時候,您還是會需要一個更逼真(High Fidelity)、更互動、更有親和力的Prototype 。比如,當您在操作Prototype,模擬會員登入帳號,如果能在按下登入按鈕時,直接顯示登入成功或失敗的訊息。是不是比您口頭解說或文字描述,還要來得清楚明白呢?
在Axure RP的互動設計中,「邏輯判斷」是最有挑戰性,但是也最有趣的一件事情。因為當您在設計網站Prototype時,可以不用尋求程式設計師或Flash設計師的協助,就可以獨立完成您想要表達的互動效果。
清楚的邏輯觀念勝過互動設計技巧
學習Axure RP的條件邏輯設計之前,您必須先知道一個重要的觀念:
成為稱職的網站企劃人員,不一定要學會Axure RP的高級互動設計技巧,卻一定要有清楚的邏輯觀念。否則,不只造成網站開發工作上的困擾,更嚴重的還會造成糟糕的網站使用者經驗。只有清楚的邏輯觀念,才能帶來準確合理的互動設計。
如果您不想學這些高級互動設計技巧,絕對無損於您利用Axure RP進行網站企劃及Prototype 設計。換言之,即使您學會Axure RP的高級互動設計,但是您的邏輯觀念如果不清楚,仍然無法成為一位優秀的網站企劃。
要是您希望將Prototype拿來進行Usability Test,或者在各種溝通討論會議上,讓大家更充分理解操作的互動效果,那麼透過Axure RP提供的邏輯判斷設定,可以讓Prototype更進一步接近真實完成的網站介面與動線。
物件值 (Value of Widget) / 變數值(Value of Variable)
接下來,您要學習使用變數值/物件值,這兩種類型的數值應用於邏輯判斷:
a. 物件值 (Value of Widget) - 使用Widget本身的值來進行邏輯判斷,有4種不同的數值可供應用:
- Checkbox或Radio Button的核取狀態
- Droplist 或 Listbox的選取值
- Text Field或Text Area中的文字
- Text Field或Text Area的文字的長度
b. 變數值(Value of Variable) - 使用自定變數的值來進行邏輯判斷,有2種:
- value of variable - 自定變數的值
- length of variable value - 自定變數值的長度
附帶補充,Axure RP本身存在一個全域預設變數 (Global Default Variable) - OnLoadVariable,除此之外,變數名稱可以自訂,最多可以有25個自訂變數。您可以透過主選單Wireframe > Manage Variables來檢視並編輯所有的自訂變數。
您可以在Prototype設計裡,將物件值及變數值的邏輯判斷加入互動設計,在操作Prototype時,將會根據Web Form Widget所輸入的數值,或是變數的值來進行判斷。比如,當使用者登入帳號時,自動檢查輸入的帳號或密碼,登入成功則導到歡迎頁面,登入失敗則顯示錯誤訊息。
表單型態的物件 (Web Form Widgets)
由於邏輯判斷牽涉到不同物件值的判斷,因此經常與表單型態的物件結合運用。Axure RP的表單型態的物件 (Web Form Widgets) 如下圖。

2. 認識Condition Builder (邏輯判斷編輯器)
如果您具有程式設計的基礎,要學習Axure RP的變數或邏輯判斷,一點都不困難。畢竟Axure RP不是程式開發工具,並沒有太多的程式語言要學習。
為了讓沒有程式設計基礎的Axure RP使用者也可以設計邏輯判斷,因此Axure RP透過三個不同的功能視窗,來協助使用者設定變數以及邏輯判斷,這些功能視窗包括:
- Annotation and Interactions (互動設計)
- Interaction Case Properties (互動狀況設定器)
- Condition Builder (邏輯判斷編輯器)
這三個功能視窗的關連及開啟順序如下圖:

其中,Annotation and Interactions,以及,Interaction Case Properties,這二個視窗在學習初級互動設計就使用到了。只有Condition Builder對話窗對於學習高級互動設計的人是陌生的,我們就來認識一下這個特殊的功能。
Condition Builder邏輯判斷編輯器的操作介面
Condition Builder是用來設定邏輯判斷的工具,只要透過下拉選單及一些按鍵,就可以完成一長串複雜的邏輯判斷敘述,不需記憶,也不用自行撰寫邏輯判斷程式。
您可以在Interactions Case Properties視窗的右上角,點一下Add Condition (或 Edit Condition)的文字連結,就會開啟「Condition Builder」視窗。
在「Condition Builder」視窗中,可以建立一行或多行的邏輯判斷,只要按下右方的「+」鈕,就可以增加一行,按下「-」鈕,則會移除一行。
如果所有的邏輯判斷都必須滿足, 可以在「Satisfy」下拉選單中選擇「Satisfy all of the following」,就會以”and”來連結各個邏輯判斷;若是選擇「any」,則會以”or” 來連結。
![]()
在邏輯判斷中,檢查值共有六種型態:
- check state of - Checkbox或Radio Button Widget的核取狀態
- selected option of - Droplist 或 Listbox Widget的選取值
- value of variable - 自定變數的值
- length of variable value - 自定變數值的長度
- text on widget - 輸入在Text Field或Text Area中的文字
- length of widget value - 輸入在Text Field或Text Area中的文字長度
3. 以Condition Builder建立邏輯判斷
您可以自行建立一個 Case的邏輯判斷,比如:
If text on Widget 帳號欄位equals 'guest' and text on Widget 密碼欄位 equals '12345' "
(如果「帳號欄位」輸入的是 ‘guest’,而且「密碼欄位」輸入的是 “12345”)
這個邏輯判斷將會在您操作Prototype時,自動判斷是否要執行Case所指定的 動作。
完成邏輯判斷的設定之後,按下【OK】鈕回到「Interaction Case Properties」視窗,就能指定當符合這個Case的邏輯判斷時,要執行哪些動作。
注意:當您增加Case的邏輯判斷,Interactions窗格中的Case名稱後面會自動加入一個以 "If" 開頭的邏輯判斷描述。同時,這個Case的圖示會變成綠色,強調這個Case使用了邏輯判斷。

一旦在Case中定義了邏輯判斷,同一個觸發事件的其他Case名稱後面,也會自動加入以 "Else If” 開頭的邏輯判斷描述。如果這些Case沒有另外設定邏輯判斷的話,那麼就會直接標示 "Else If True"。
在預設的情況下,Prototype只會執行第一個標示為 ”True” 的Case。

在Interactions 窗格中的案例上按下右鍵並選擇「Change to IF」,可以將 "Else If" 改為 "If" ,這麼做將可允許在多個狀況同時成立的情況下執行多個動作。
4. 秘技 Quick Tips
秘技 1. 為Widget命名:
為邏輯判斷使用到的Widget命名,可以方便在建立邏輯判斷時做識別。想要替Widget命名的話,只要選擇Widget 並在Annotations & Interactions 窗格中的「Label」欄位輸入名稱就可以了。
秘技 2. 繪製流程圖:
邏輯判斷和流程可以設計得十分複雜,建立一個流程圖(Flowchart)可以幫助您組織與傳達使用者可能涉及的各種動線。
(版權聲明:歡迎引用及複製Axure RP 中文教學內容,必須註明出處為悠識數位顧問有限公司及原始文章網址 UserXper.com)
如果我想做以下设定:
现有2个Radio Button,当点击第一个Radio Button后,button处于填充状态,再点击第二个Radio Button时,第一个就会变会非填充状态,而第二个Radio Button就时填充状态,反之亦然,请问该如何设定逻辑判断呢?烦请高手释疑,谢谢!
只需要把2个radio button设个组合名称就行了。比如性别选择:男、女两个radio button,拖一个radio button到编辑区,右键选择“Edit radio botton">>"assign radio group",然后为这个取个组名就可以了。
Oh~thank you so much
請問一下,若我做了一個pop-up,想在popup中做點選不同radio button後,關閉popup並且將原畫面切換到不同畫面,要怎麼做?現在我只能做到關閉畫面,設定的[open 畫面 in Current Window]沒有用耶!
[Close Current Window
and Open 資料設定Link in Current Window]