原型設計工具Axure RP入門教程(二):自動選項卡字段教程
Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具, 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。
在本教程中,您將學習如何創建一組文本字段,這些文本字段將在當前字段完成后自動使光標前進。 我們將使用的示例是生日日期表格。
小部件設置
- 打開一個新的RP文件,然后在畫布上打開Page 1。
- 將三個文本字段拖到畫布上。命名為一天字段,一個月字段和一年字段。(您可以選擇使用標簽小部件為每個標簽添加標簽。)
- 使文本字段變窄,然后按以下順序排列它們: [Month Field] [Day Field] [Year Field]
注意:隨意對文本字段進行排序,以匹配您的區域日期格式。 只要記住,您還需要在以下步驟中創建一個不同的游標流。
自動從月到日字段前進
將重點放在日間字段上
- 選擇月份字段,然后在Interactions(交互)窗格中單擊New Interactions(新建交互)。
- 在出現的列表中選擇Text Changed(文本更改)事件,然后選擇Focus (焦點)動作。
- 在目標下拉列表中選擇日期字段。 然后,單擊確定以保存操作。
僅在用戶輸入兩個數字后前進
-
將鼠標懸停在Text Changed(文本更改)標題上,然后單擊右側的Enable Cases(啟用案例)。 在出現的條件構建器對話框中,單擊Add Logic(添加邏輯)。
-
在出現的條件行中,在第一個下拉列表中選擇小部件值的長度,然后在右側的字段中輸入2。
-
對話框底部的摘要應顯示為:如果此值的長度等于2。當文本字段的文本長度達到兩個字符時,將滿足此條件。
-
單擊確定關閉條件生成器。
自動從“日”字段前進到“年”字段
在日期字段文本字段中重復步驟2。為它提供與月字段相同的Text Changed(文本更改)交互,但是在Focus (焦點)操作中定位年字段。
預覽互動
- 預覽頁面,然后單擊月份字段。
- 用兩位數格式輸入您的出生月份-01表示一月,02表示二月,依此類推-光標應自動前進到Day字段。
- 輸入兩位數的出生日期,光標將自動前進到“年份”字段。
關注慧聚IT微信公眾號???,了解產品的最新動態及最新資訊。