原型設計工具Axure RP入門教程（一）：賬戶登錄教程

---

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

免費下載Axure RP 優惠購買Axure RP

---

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

頁面和小部件設置

第1頁–登錄表單

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

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

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

第2頁–成功登錄頁面

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

成功登錄案例

鏈接到第二頁

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

添加驗證文本字段的條件

• 將鼠標懸停在Click或Tap標題上，然后單擊右側的Enable Cases。在出現的條件構建器對話框中，將案例命名為成功登錄，然后單擊Add Logic（添加邏輯）。

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

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

• 單擊確定關閉條件生成器。

錯誤的登錄情況

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

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

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

預覽互動

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

附加信息和提示

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

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

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。