原型設(shè)計(jì)工具Axure RP入門教程（一）：賬戶登錄教程

---

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

免費(fèi)下載Axure RP 優(yōu)惠購(gòu)買Axure RP

---

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

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

第1頁(yè)–登錄表單

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

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

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

第2頁(yè)–成功登錄頁(yè)面

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

成功登錄案例

鏈接到第二頁(yè)

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

添加驗(yàn)證文本字段的條件

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

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

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

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

錯(cuò)誤的登錄情況

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

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

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

預(yù)覽互動(dòng)

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

附加信息和提示

文本字段為焦點(diǎn)時(shí)隱藏錯(cuò)誤消息

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

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