網站企劃顧問/專案/課程及Axure RP-悠識數位

分享

設定邏輯條件

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) 如下圖。
Axure Web Form Widget 表單型態的物件


2. 認識Condition Builder (邏輯判斷編輯器)

如果您具有程式設計的基礎,要學習Axure RP的變數或邏輯判斷,一點都不困難。畢竟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” 來連結。

Axure Condition Builder視窗

在邏輯判斷中,檢查值共有六種型態:

  • 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使用了邏輯判斷。
Axure Interaction OnClick Conditional Logic 條件判斷的設定

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

在預設的情況下,Prototype只會執行第一個標示為 ”True” 的Case。
Axure Interaction OnClick Conditional Logic 條件判斷ElseIf的設定

 
在Interactions 窗格中的案例上按下右鍵並選擇「Change to IF」,可以將 "Else If" 改為 "If" ,這麼做將可允許在多個狀況同時成立的情況下執行多個動作。


4. 秘技 Quick Tips

秘技 1. 為Widget命名:

為邏輯判斷使用到的Widget命名,可以方便在建立邏輯判斷時做識別。想要替Widget命名的話,只要選擇Widget 並在Annotations & Interactions 窗格中的「Label」欄位輸入名稱就可以了。

秘技 2. 繪製流程圖:

邏輯判斷和流程可以設計得十分複雜,建立一個流程圖(Flowchart)可以幫助您組織與傳達使用者可能涉及的各種動線。


(版權聲明:歡迎引用及複製Axure RP 中文教學內容,必須註明出處為悠識數位顧問有限公司及原始文章網址 UserXper.com)


訪客留言

  1. 黄国雄 2009/10/18 18:42:29

    如果我想做以下设定:
    现有2个Radio Button,当点击第一个Radio Button后,button处于填充状态,再点击第二个Radio Button时,第一个就会变会非填充状态,而第二个Radio Button就时填充状态,反之亦然,请问该如何设定逻辑判断呢?烦请高手释疑,谢谢!

  2. 桃子 2009/10/22 15:45:51

    只需要把2个radio button设个组合名称就行了。比如性别选择:男、女两个radio button,拖一个radio button到编辑区,右键选择“Edit radio botton">>"assign radio group",然后为这个取个组名就可以了。

  3. 黄国雄 2009/10/23 21:52:35

    Oh~thank you so much

  4. Lidia 2010/7/30 13:44:37

    請問一下,若我做了一個pop-up,想在popup中做點選不同radio button後,關閉popup並且將原畫面切換到不同畫面,要怎麼做?現在我只能做到關閉畫面,設定的[open 畫面 in Current Window]沒有用耶!
    [Close Current Window
    and Open 資料設定Link in Current Window]

張貼留言

* 為必填,您的email並不會被顯示
姓名

Email *