原型設(shè)計(jì)工具Axure RP入門教程(二):自動(dòng)選項(xiàng)卡字段教程
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í)如何創(chuàng)建一組文本字段,這些文本字段將在當(dāng)前字段完成后自動(dòng)使光標(biāo)前進(jìn)。 我們將使用的示例是生日日期表格。
小部件設(shè)置
- 打開一個(gè)新的RP文件,然后在畫布上打開Page 1。
- 將三個(gè)文本字段拖到畫布上。命名為一天字段,一個(gè)月字段和一年字段。(您可以選擇使用標(biāo)簽小部件為每個(gè)標(biāo)簽添加標(biāo)簽。)
- 使文本字段變窄,然后按以下順序排列它們: [Month Field] [Day Field] [Year Field]
注意:隨意對(duì)文本字段進(jìn)行排序,以匹配您的區(qū)域日期格式。 只要記住,您還需要在以下步驟中創(chuàng)建一個(gè)不同的游標(biāo)流。
自動(dòng)從月到日字段前進(jìn)
將重點(diǎn)放在日間字段上
- 選擇月份字段,然后在Interactions(交互)窗格中單擊New Interactions(新建交互)。
- 在出現(xiàn)的列表中選擇Text Changed(文本更改)事件,然后選擇Focus (焦點(diǎn))動(dòng)作。
- 在目標(biāo)下拉列表中選擇日期字段。 然后,單擊確定以保存操作。
僅在用戶輸入兩個(gè)數(shù)字后前進(jìn)
-
將鼠標(biāo)懸停在Text Changed(文本更改)標(biāo)題上,然后單擊右側(cè)的Enable Cases(啟用案例)。 在出現(xiàn)的條件構(gòu)建器對(duì)話框中,單擊Add Logic(添加邏輯)。
-
在出現(xiàn)的條件行中,在第一個(gè)下拉列表中選擇小部件值的長(zhǎng)度,然后在右側(cè)的字段中輸入2。
-
對(duì)話框底部的摘要應(yīng)顯示為:如果此值的長(zhǎng)度等于2。當(dāng)文本字段的文本長(zhǎng)度達(dá)到兩個(gè)字符時(shí),將滿足此條件。
-
單擊確定關(guān)閉條件生成器。
自動(dòng)從“日”字段前進(jìn)到“年”字段
在日期字段文本字段中重復(fù)步驟2。為它提供與月字段相同的Text Changed(文本更改)交互,但是在Focus (焦點(diǎn))操作中定位年字段。
預(yù)覽互動(dòng)
- 預(yù)覽頁(yè)面,然后單擊月份字段。
- 用兩位數(shù)格式輸入您的出生月份-01表示一月,02表示二月,依此類推-光標(biāo)應(yīng)自動(dòng)前進(jìn)到Day字段。
- 輸入兩位數(shù)的出生日期,光標(biāo)將自動(dòng)前進(jìn)到“年份”字段。
關(guān)注慧聚IT微信公眾號(hào)???,了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊。