Axure高級互動設(shè)計1—設(shè)定邏輯條件

1、設(shè)定邏輯條件1.認(rèn)識 Condition ( 邏輯判斷 )2.認(rèn)識 Condition Builder ( 邏輯判斷編輯器 )3.用 Condition Builder 建立邏輯判斷4.秘技 (Quick Tips)1. 認(rèn)識 Condition ( 邏輯判斷 ) 雖然可以用文字來描述 Prototype 操作的動線或互動方式，但有的時候，您還是會需要一個更逼真 (High Fidelity) 、更互動、更有親和力的 Prototype 。比如，當(dāng)您在操作 Prototype ，模擬會員登入帳號，如 果能在按下登入按鈕時，直接顯示登入成功或失敗的訊息。是不是比您口頭解說或文字描述，還要來得清

2、楚明白呢？在 Axure RP 的互動設(shè)計中，邏輯判斷是最有挑戰(zhàn)性，但是也最有趣的一件事情。因為當(dāng)您在設(shè)計網(wǎng) 站 Prototype時，可以不用尋求程式設(shè)計師或 Flash 設(shè)計師的協(xié)助， 就可以獨立完成您想要表達的互動效 果。清楚的邏輯觀念勝過互動設(shè)計技巧學(xué)習(xí) Axure RP 的條件邏輯設(shè)計之前，您必須先知道一個重要的觀念： 成為稱職的網(wǎng)站企劃人員，不一定要學(xué)會 AxureRP 的高級互動設(shè)計技巧，卻一定 要有清楚的邏輯觀念 。 否則， 不只造成網(wǎng)站開發(fā)工作上的困擾， 更嚴(yán)重的還會造成糟糕的網(wǎng)站使用者經(jīng)驗。 只有清楚的邏輯觀念， 才能帶來準(zhǔn)確合理的互動設(shè)計 。如果您不想學(xué)這些高級互動設(shè)計技

3、巧，絕對無損于您利用 Axure RP 進行網(wǎng)站企劃及 Prototype 設(shè) 計。換言之，即使您學(xué)會 Axure RP 的高級互動設(shè)計，但是您的邏輯觀念如果不清楚，仍然無法成為一位 優(yōu)秀的網(wǎng)站企劃。要是您希望將 Prototype 拿來進行 Usability Test ，或者在各種溝通討論會議上， 讓大家更充分理解操作 的互動效果，那么透過 Axure RP 提供的邏輯判斷設(shè)定，可以讓 Prototype 更進一步接近真實完成的網(wǎng)站 介面與動線。物件值 (Value of Widget) / 變數(shù)值 (Value of Variable) 接下來，您要學(xué)習(xí)使用變數(shù)值 / 物件值，這兩種類型

4、的數(shù)值應(yīng)用于邏輯判斷：a.物件值(Value of Widget) -使用 Widget 本身的值來進行邏輯判斷，有 4 種不同的數(shù)值可供應(yīng)用：* Checkbox 或 Radio Button 的核取狀態(tài)* Droplist 或 Listbox 的選取值* Text Field或 Text Area 中的文字* Text Field或 Text Area 的文字的長度b.變數(shù)值(Value of Variable) -使用自定變數(shù)的值來進行邏輯判斷，有2 種：* value of variable -自定變數(shù)的值* length of variable value-自定變數(shù)值的長度附帶補充，

5、Axure RP 本身存在一個全域預(yù)設(shè)變數(shù)(Global Default Variable) - OnLoadVariable ，除此 之外，變數(shù)名稱可以自訂，最多可以有 25 個自訂變數(shù)。您可以透過主選單 Wireframe Manage Variables 來檢視并編輯所有的自訂變數(shù)。您可以在 Prototype 設(shè)計里，將物件值及變數(shù)值的邏輯判斷加入互動設(shè)計，在操作 Prototype 時，將 會根據(jù) WebForm Widget 所輸入的數(shù)值，或是變數(shù)的值來進行判斷。比如，當(dāng)使用者登入帳號時，自動 檢查輸入的帳號或密碼，登入成功則導(dǎo)到歡迎頁面，登入失敗則顯示錯誤訊息。表單型態(tài)的物件 (

6、Web Form Widgets) 由于邏輯判斷牽涉到不同物件值的判斷，因此經(jīng)常與表單型態(tài)的物件結(jié)合運用。Axure RP 的表單型態(tài)的物件 (Web Form Widgets) 如下圖。2.認(rèn)識如果您具有程式設(shè)計的基礎(chǔ)，要學(xué)習(xí)程式開發(fā)工具，并沒有太多的程式語言要學(xué)習(xí)。為了讓沒有程式設(shè)計基礎(chǔ)的Axure RP 使用者也可以設(shè)計邏輯判斷，因此視窗，來協(xié)助使用者設(shè)定變數(shù)以及邏輯判斷，這些功能視窗包括：* Condition Builder （邏輯判斷編輯器）這三個功能視窗的關(guān)連及開啟順序如下圖：為了讓沒有程式設(shè)計基礎(chǔ)的 Axure RP 使用者也可以設(shè)計邏輯判斷，因此 視窗，來協(xié)助使用者設(shè)定變數(shù)以

7、及邏輯判斷，這些功能視窗包括：Annotation nnd Interactions互動設(shè)計窗格Footnote and Labelm( InteractionsAdd1=弋OnClick卜啟匚386廣護Open Link in CTixrerrt WiitdoKv* OnMoHseEnter一一OnMouseCuitCondtddii BulldeiI選輯判斷編箱器Interaction Cate Properties I互動狀況設(shè)定器)一一 Open LmtuXunreiIMQVOxn. LeJkm阪呼WndwQ|RUIlodtiLP iurEi WucLcrr匚曲CMhJ Rublw Q

8、|m I wt Cij RnaiitQ SriFuElMiCOlQA SlsZiOButtonRbcTTextFfeld TwtDiapLstLid Box Checkbox RaJia ButtonButton ShajeCondition Builder （邏輯判斷編輯器）Axure RP 的變數(shù)或邏輯判斷，一點都不困難。畢竟Axure RP 不是Axure RP 透過三個不同的功能* Annotation and Interactions* Interaction Case Properties（互動設(shè)計）（互動狀況設(shè)定器）Axure RP 透過三個不同的功能n也乂：【Iy”皿對;Add

9、 Snditi皿Annotations包InteractionsJiilratofi CKr pFritrriCjiDdibaftltaillwDe ft*OX其中，Annotation and Interactions，以及，Interaction Case Properties ，這二個視窗在學(xué)習(xí)初級互動設(shè)計就使用到了。只有Condition Builder對話窗對于學(xué)習(xí)高級互動設(shè)計的人是陌生的，我們就來認(rèn)識一下這個特殊的功能。Condition Builder邏輯判斷編輯器的操作介面Condition Builder是用來設(shè)定邏輯判斷的工具，只要透過下拉選單及一些按鍵，就可以完成一長串復(fù)

10、雜的邏輯判斷敘述，不需記憶，也不用自行撰寫邏輯判斷程式。您可以在 Interactions Case Properties視窗的右上角，點一下Add Condition ( 或 Edit Condition)的文字連結(jié)，就會開啟 Condition Builder 視窗。在Condition Builder 視窗中，可以建立一行或多行的邏輯判斷，只要按下右方的鈕，就可以增加一行，按下-鈕，則會移除一行。如果所有的邏輯判斷都必須滿足，可以在Satisfy下拉選單中選擇Satisfy all of the following ，就會以” and”來連結(jié)各個邏輯判斷；若是選擇any，則會以” or

11、”來連結(jié)。在邏輯判斷中，檢查值共有六種型態(tài)：* check state of - Checkbox 或 Radio Button Widget的核取狀態(tài)* selected option of - Droplist 或 Listbox Widget的選取值* value of variable -自定變數(shù)的值* length of variable value-自定變數(shù)值的長度* text on widget -輸入在 Text Field 或 Text Area 中的文字* length of widget value-輸入在 Text Field 或 Text Area 中的文字長度3.以

12、 Condition Builder 建立邏輯判斷您可以自行建立一個 Case 的邏輯判斷，比如： | |ImidVfcnaDbTF |vthHDIf text on Widget帳號欄位 equals guest and text on Widget 密碼欄位 equals 12345 “(如果帳號欄位輸入的是guest而且密碼欄位輸入的是“12345)這個邏輯判斷將會在您操作Prototype 時，自動判斷是否要執(zhí)行Case 所指定的動作。完成邏輯判斷的設(shè)定之后，按下【 0K】鈕回到Interaction Case Properties 視窗，就能指定當(dāng)符合 這個 Case 的邏輯判斷時，

13、要執(zhí)行哪些動作。注意：當(dāng)您增加 Case 的邏輯判斷，Interactions窗格中的 Case 名稱后面會自動加入一個以“If 開頭的邏輯判斷描述。同時，這個 Case 的圖示會變成綠色，強調(diào)這個Case 使用了邏輯判斷。LabelSubm itB LittonLnt屯Fattit) ntAck c：至已.Edit cssfi. Delele cate弓OnClick- 人匚案色1 If tent on widget UsernameField equals asfljre and tewt on fidget PasswoidField equals 12?45bH；/ Open Acea

14、urtt Ovetvieu ih Cnrerit V/hdc一旦在 Case 中定義了邏輯判斷，同一個觸發(fā)事件的其他 Case 名稱后面，也會自動加入以“Else If ”開頭的邏輯判斷描述。如果這些Case 沒有另外設(shè)定邏輯判斷的話，那么就會直接標(biāo)示“Else If True ”在預(yù)設(shè)的情況下，Prototype只會執(zhí)行第一個標(biāo)示為” True”的 Case。-“ On Click 謝Cae 1 pf teNt on fidget UemanieField aure arid歸on fidget Pai/MrdField equals 12345Open Account Oveiview in Cuiient Window- 為Case 2 (Else H True)v Set Lcigi n r rarPanel state t a E ncrhl ess age在 Interactions窗格中的案例上按下右鍵并選擇 Change to IF，可以將“Else If 改為“If”，這么做將可允許在多個狀況同時成立的情況下執(zhí)行多個動作。4.秘技 Quick Tips秘技 1.為 Widget 命名：為邏輯判斷使用到的 Wid