Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具, 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。
免費下載Axure RP 優惠購買Axure RP
在本教程中,您將學習如何創建一個表單,該表單要求用戶選中一個復選框并輸入其名稱,然后再繼續。
小部件和頁面設置
第1頁–條款和條件表格

-
打開一個新的RP文件,然后在畫布上打開Page 1。
-
將復選框小部件,標簽小部件,文本字段小部件和按鈕小部件拖到畫布上。
-
將復選框上的文本設置為我同意條款和條件。
-
將標簽小部件上的文本設置為請在此處簽名,然后將其放在文本字段上方。
-
將按鈕上的文本設置為下一頁。
第2頁–成功頁面

-
在項目中添加一個新頁面,并在畫布上打開它。
-
將標題小部件拖到畫布上,并將其文本設置為Success。
取消選中復選框時禁用文本字段
使文本字段默認為禁用

-
打開第1頁,然后選擇文本字段小部件。
-
在交互窗格的右上角,單擊更多選項下拉列表,然后選中禁用框。
-
這將觸發文本字段的默認:disabled樣式效果,將其變為灰色。它還將阻止用戶與Web瀏覽器中的文本字段進行交互。
選中復選框時啟用文本字段
-
選擇復選框窗口小部件,然后在交互窗格中單擊新建交互。
-
在出現的列表中選擇Selected事件,然后選擇Enable / Disable操作。
-
在目標下拉列表中選擇文本字段小部件,然后在其下方保留啟用處于選中狀態。
-
單擊確定以保存操作。
取消選中復選框時,再次禁用文本字段
-
在復選框小部件仍處于選中狀態的情況下,再次在交互窗格中單擊新建交互。
-
在出現的列表中選擇未選定事件,然后選擇啟用/禁用操作。
-
在目標下拉列表中選擇文本字段小部件,然后在其下方選擇禁用。
-
單擊確定以保存操作。

取消選中復選框時清除文本字段的文本

-
在復選框小部件仍處于選中狀態的情況下,單擊未選中塊底部的插入動作圖標,然后在出現的列表中選擇設置文本動作。
-
在目標下拉列表中選擇文本字段小部件。
-
將值字段留為空白.(這將清除文本字段的文本。)
-
單擊確定以保存操作。
禁用下一頁按鈕,直到用戶簽名
使按鈕默認為禁用
-
選擇按鈕小部件。
-
在交互窗格的右上角,單擊更多選項下拉列表,然后選中禁用框。
使按鈕具有禁用的樣式效果
-
在仍選擇按鈕小部件的情況下,在交互窗格中單擊新建交互。
-
在出現的列表的底部,選擇:disabled樣式效果。
-
在出現的:disabled塊中,檢查填充顏色屬性,然后在顏色選擇器中選擇一種灰色。
-
單擊確定保存樣式效果。
當文本字段包含文本時啟用按鈕
-
選擇文本字段窗口小部件,然后在交互窗格中單擊新建交互。
-
在出現的列表中選擇文本更改事件,然后選擇啟用/禁用”操作。
-
在目標下拉列表中選擇下一頁按鈕,并在其下方保留啟用處于選中狀態。
-
單擊確定以保存操作。

-
在仍然選擇文本字段的情況下,將鼠標懸停在交互窗格中的文本已更改標題上,然后單擊右側的啟用案例。
-
在出現的條件構建器對話框中,單擊添加邏輯。
-
在出現的條件行中,中間的下拉列表中選擇不等于。
-
對話框底部的摘要應顯示為:If text on This does not equal ""。只要文本字段不是空白(一旦用戶在其中輸入文本),就將滿足此條件。
-
單擊確定關閉條件生成器對話框。
清除文本字段時,再次禁用按鈕

-
在仍然選擇文本字段小部件的情況下,將鼠標懸停在交互窗格中的文本已更改標題上,然后單擊右側的添加大小寫。
-
在出現的條件構建器對話框中,單擊確定而不添加任何邏輯。
-
單擊新案例標題下方的插入操作圖標,然后在出現的列表中選擇啟用/禁用操作。
-
在目標下拉菜單中選擇下一頁按鈕,然后在其下方選擇禁用。
-
單擊確定以保存操作。
注意:即使我們沒有為這種情況設置條件,它的條件為ELSE IF true。如果沒有通過第一種情況(如果清除了文本字段的文本),則將觸發這種情況(也稱為默認情況)。
將下一頁按鈕鏈接到頁面2
-
選擇下一頁按鈕,然后在交互窗格中單擊Click或Tap →Open Link 。
-
在出現的列表中選擇第2頁,然后單擊確定以保存操作。
預覽互動
-
預覽第1頁,然后嘗試單擊文本字段和下一頁按鈕。兩者都被禁用,因此什么也不會發生。
-
選中并取消選中復選框幾次。文本字段應交替啟用和禁用。
-
在文本字段中輸入一些文本,然后通過手動刪除文本或取消選中復選框再次將其清除。下一頁按鈕應啟用,然后再次禁用。
-
填寫表格,然后單擊下一頁按鈕。您應該轉到第2頁。
關注慧聚IT微信公眾號???,了解產品的最新動態及最新資訊。
標簽:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: