切換 IF / ELSE IF

添加條件到 OnClick 用例

http://wiki.jikexueyuan.com/project/axure/images/advanced-required-fields-tutorial1.png" alt="image" />

首先，打開AxureRequiredFields.rp 并打開“必填字段”頁面。

選擇提交按鈕，并添加一個用例到 OnClick 事件。在用例編輯器中，單擊添加條件按鈕。

在條件生成器中，設(shè)置條件為“文本小部件：用戶名文本字段為空白“，留著文本字段為空白。單擊 OK，并關(guān)閉條件生成器。

添加一個動作來顯示

http://wiki.jikexueyuan.com/project/axure/images/advanced-required-fields-tutorial2.png" alt="image" />

在用例編輯器中，單擊“顯示”，選擇用戶名信息錯誤復(fù)選框。單擊 OK，并關(guān)閉用例編輯器。

生成原型和測試它吧。如果你用戶名文本字段為空白并單擊提交按鈕，將顯示錯誤消息。

添加第二個用例為隱藏 OK

http://wiki.jikexueyuan.com/project/axure/images/advanced-required-fields-tutorial3.png" alt="image" />

通過雙擊 OnClick，添加第二個用例到提交按鈕。點擊“隱藏”并勾選用戶名信息錯誤復(fù)選框。單擊 OK，并關(guān)閉用例編器。

使用工具欄中的“預(yù)覽”和在瀏覽器中刷新原型來測試新的用例。如果你把用戶名文本字段留空，然后點擊提交，錯誤面板將會顯示。如果你輸入文本到用戶名文本框并單擊提交按鈕，錯誤消息將會被隱藏。

添加第三個用例來檢查密碼字段

http://wiki.jikexueyuan.com/project/axure/images/advanced-required-fields-tutorial4.png" alt="image" />

通過雙擊 OnClick 添加第三個用例。這一次，添加條件為“如果文本小部件密碼文本字段為空白”，把文本字段值留空。單擊 OK，并關(guān)閉條件生成器。

在編輯器中選擇“顯示”，然后單擊“密碼信息錯誤”復(fù)選框。然后，單擊 OK，并關(guān)閉用例編輯器。

為用例3切換IF / ELSE IF

http://wiki.jikexueyuan.com/project/axure/images/advanced-required-fields-tutorial5.png" alt="image" />

右擊用例3并選擇切換 IF / ELSE IF 。這將“如果其他”改為“如果”?，F(xiàn)在用例3會發(fā)生，即使用例1或2執(zhí)行。重新生成原型和測試它吧。把兩個文本字段留空將會有兩個面板顯示錯誤信息。

添加第四用例為隱藏

http://wiki.jikexueyuan.com/project/axure/images/advanced-required-fields-tutorial6.png" alt="image" />

現(xiàn)在我們可以添加第四個用例為隱藏錯誤消息，如果一個值已經(jīng)輸入到密碼文本字段。雙擊 OnClick 創(chuàng)建用例4 。選擇“隱藏”并選擇密碼錯誤面板。

單擊 OK，并關(guān)閉用例編輯器。

添加最后的用例，其條件為“成功”

http://wiki.jikexueyuan.com/project/axure/images/advanced-required-fields-tutorial7.png" alt="image" />

最后一用例將包含條件和動作為成功登錄。通過雙擊 OnClick 添加用例5 。單擊添加條并和設(shè)置第一行條件條件讀為“能見度小部件用戶名信息值為錯誤”。然后，單擊+圖標(biāo)以添加第二個行條件。設(shè)置這行都為“能見度小部件密碼的值為錯誤”。

單擊 OK，并關(guān)閉條件生成器。

添加動作來鏈接到第1頁

http://wiki.jikexueyuan.com/project/axure/images/advanced-required-fields-tutorial8.png" alt="image" />

在用例編輯器的當(dāng)前窗口單擊打開鏈接，并選擇第1頁。

單擊 OK，并關(guān)閉用例編輯器。

切換 IF / ELSE IF

http://wiki.jikexueyuan.com/project/axure/images/advanced-required-fields-tutorial9.png" alt="image" />

我們想把成功用例設(shè)為一個 IF 語句，所以它總是不管上面用例的執(zhí)行情況便進(jìn)行評估的。右擊用例5并選擇切換 IF / ELSE IF。

預(yù)覽原型

http://wiki.jikexueyuan.com/project/axure/images/advanced-required-fields-tutorial10.png" alt="image" />

就是這樣了，預(yù)覽原型和測試它吧。

總結(jié)

這個教程有一點小難度。如果你能很容易的看懂它，你可以說你是一個有很強邏輯性的人。
還需要其他幫助嗎？查看論壇或聯(lián)系我們 support@axure.com