原型設(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)惠購買Axure RP

---

在本教程中，您將學(xué)習(xí)如何制作使用條件邏輯的注冊(cè)表單，以確保用戶已完成所有必填字段。

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

創(chuàng)建注冊(cè)表單

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

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

• 將按鈕小部件拖到畫布上，并將其文本設(shè)置為Sign Up。
• 將Heading 3小部件拖到畫布上。 將其文本設(shè)置為“請(qǐng)輸入電子郵件地址和密碼，并將其命名為錯(cuò)誤消息”。
• 將錯(cuò)誤消息的字體顏色更改為紅色，然后通過單擊樣式工具欄或樣式窗格中的隱藏圖標(biāo)將其隱藏。

添加成功的注冊(cè)頁面

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

成功的注冊(cè)案例

鏈接到第二頁

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

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

• 將鼠標(biāo)懸停在Interaction（交互）窗格中的Click（單擊）或Tap（點(diǎn)擊）標(biāo)題上，然后單擊右側(cè)的Enable Cases（啟用案例）。
• 在出現(xiàn)的條件構(gòu)建器對(duì)話框中，將案例命名為成功注冊(cè)，然后單擊Add Logic（添加邏輯）。
• 在出現(xiàn)的條件行中，在第二個(gè)下拉列表中選擇電子郵件字段文本字段，然后在第三個(gè)下拉列表中選擇不等于。
• 單擊添加行以添加另一個(gè)條件語句。 在第二個(gè)下拉列表中選擇密碼字段文本字段，然后在第三個(gè)下拉列表中選擇不等于。
• 對(duì)話框底部的摘要應(yīng)顯示為：If text on Email Field does not equal "" and text on Password Field does not equal ""。 僅當(dāng)單擊注冊(cè)按鈕時(shí)兩個(gè)文本字段都包含一些文本時(shí)，才能滿足此條件。
• 單擊確定關(guān)閉條件生成器。

注冊(cè)申請(qǐng)失敗

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

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

注意：即使我們沒有為這種情況設(shè)置條件，它的條件為ELSE IF true。如果第一種情況的條件不成立（如果一個(gè)或兩個(gè)文本字段為空），則將觸發(fā)此情況（也稱為默認(rèn)情況）。

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

• 預(yù)覽頁面，然后單擊注冊(cè)按鈕。 由于文本字段為空，因此將出現(xiàn)錯(cuò)誤消息。
• 在文本字段之一中輸入一些文本，然后再次單擊注冊(cè)按鈕。由于文本字段之一仍為空白，因此錯(cuò)誤消息仍應(yīng)可見。
• 最后，在第二個(gè)文本字段中輸入一些文本，然后再次單擊注冊(cè)按鈕。 現(xiàn)在，您應(yīng)該將注冊(cè)成功的信息定向到第2頁。

附加信息和提示

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

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

---

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