切換 IF / ELSE IF

添加條件到 OnClick 用例

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

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

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

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

添加一個(gè)動(dòng)作來顯示

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

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

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

添加第二個(gè)用例為隱藏 OK

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

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

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

添加第三個(gè)用例來檢查密碼字段

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

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

在編輯器中選擇“顯示”，然后單擊“密碼信息錯(cuò)誤”復(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會(huì)發(fā)生，即使用例1或2執(zhí)行。重新生成原型和測試它吧。把兩個(gè)文本字段留空將會(huì)有兩個(gè)面板顯示錯(cuò)誤信息。

添加第四用例為隱藏

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

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

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

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

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

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

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

添加動(dòng)作來鏈接到第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è)為一個(gè) IF 語句，所以它總是不管上面用例的執(zhí)行情況便進(jìn)行評(píng)估的。右擊用例5并選擇切換 IF / ELSE IF。

預(yù)覽原型

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

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

總結(jié)

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