Axure RP是一套專門為網(wǎng)站或應(yīng)用程序所設(shè)計的快速原型設(shè)計工具， 可以讓應(yīng)用網(wǎng)站策劃人員或網(wǎng)站功能界面設(shè)計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規(guī)格。

免費下載Axure RP 優(yōu)惠購買Axure RP

在本教程中，您將學(xué)習(xí)如何制作一個使用條件邏輯來驗證用戶憑據(jù)的登錄表單。

頁面和小部件設(shè)置

第1頁–登錄表單

• 打開一個新的RP文件，然后在畫布上打開Page 1。
• 將兩個文本字段小部件拖動到畫布上。命名一個文本字段電子郵件字段，另一個命名密碼字段。 （您可以選擇使用標(biāo)簽小部件為每個標(biāo)簽添加標(biāo)簽。）

提示：要屏蔽Password（密碼）字段的文本，請將其輸入類型設(shè)置為密碼。

• 將按鈕小部件拖到畫布上，并將其文本設(shè)置為登錄。
• 將標(biāo)題3小部件拖到畫布上。將其文本設(shè)置為無效的電子郵件和/或密碼，并將其命名為錯誤消息。
• 將錯誤消息的字體顏色更改為紅色，然后通過單擊樣式工具欄或Style（樣式）窗格中的Hidden（隱藏）圖標(biāo)將其隱藏。

第2頁–成功登錄頁面

• 在項目中添加一個新頁面，并在畫布上打開它。
• 將標(biāo)題1小部件拖到畫布上，并將其文本設(shè)置為感謝您登錄！。

成功登錄案例

鏈接到第二頁

• 選擇登錄按鈕，然后在Interactions（交互）窗格中單擊Click（單擊）或Tap（點擊）→Open Link （打開鏈接）。在出現(xiàn)的下拉菜單中選擇第2頁，然后單擊確定。

• 將鼠標(biāo)懸停在Click或Tap標(biāo)題上，然后單擊右側(cè)的Enable Cases。在出現(xiàn)的條件構(gòu)建器對話框中，將案例命名為成功登錄，然后單擊Add Logic（添加邏輯）。

• 在出現(xiàn)的條件行中，在第二個下拉列表中選擇Email（電子郵件）文本字段，然后在右側(cè)的字段中輸入test@domain.com。
• 單擊添加行以添加另一個條件語句。在第二個下拉列表中選擇Password（密碼）字段文本字段，然后在右側(cè)的字段中輸入123456。

對話框底部的摘要應(yīng)顯示為：If text on Email Field equals "test@domain.com" and text on Password Field equals "123456". 僅當(dāng)單擊Login（登錄）按鈕時兩個語句都為true時，才滿足此條件。

• 單擊確定關(guān)閉條件生成器。

錯誤的登錄情況

• 選中Login（登錄）按鈕后，將鼠標(biāo)懸停在Click（單擊）或Tap（點擊）標(biāo)題上，然后單擊右側(cè)的Add Case（添加案例）。在出現(xiàn)的條件構(gòu)建器對話框中，將新案例命名為 Incorrect Login，然后單擊確定而不添加任何邏輯。

• 在Interactions（交互）窗格中，單擊新案例標(biāo)題下方的Insert Action（插入操作）圖標(biāo)。在出現(xiàn)的列表中選擇Show/Hide（顯示/隱藏），然后定位Error Message（錯誤消息）小部件。保持顯示處于選中狀態(tài)，然后單擊確定。

注意：即使我們沒有為這種情況設(shè)置條件，它的條件為ELSE IF true。如果沒有通過第一種情況（如果表單中提供了錯誤的電子郵件和/或密碼），則將觸發(fā)此情況（也稱為默認(rèn)情況）。

預(yù)覽互動

• 預(yù)覽頁面，然后單擊Login（登錄）按鈕。由于您尚未提供正確的登錄信息，因此將出現(xiàn)錯誤消息。
• 現(xiàn)在，在Email（電子郵件）字段中輸入test@domain.com，在Password（密碼）字段中輸入123456，然后再次單擊Login（登錄）按鈕。您應(yīng)該進(jìn)入原型的第2頁。

附加信息和提示

文本字段為焦點時隱藏錯誤消息

如果您希望用戶單擊文本字段之一時再次隱藏錯誤消息，請為每個文本字段在Got Focus（獲得焦點）事件下設(shè)置Show/Hide（顯示/隱藏）操作。

關(guān)注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。