第一步:請使用矩形部件、文本輸入框和標簽部件制作如圖4所示的會(huì )員登錄模塊,并分別給用戶(hù)名、密碼、登錄按鈕和錯誤提示4個(gè)部件命名為name、password、login和warning,然后將 warning部件設置為隱藏。
(圖4)
第二步:選中登錄按鈕,在部件【屬性】面板中雙擊【鼠標單擊時(shí)】事件,在彈出的【用例編輯器】頂部單擊【添加條件】,在彈出的【條件編輯器】中新增兩個(gè)條件,見(jiàn)圖5。
條件1:如果部件name中的文字等于 Axure。
條件2:如果部件 password中的文字等于 Axure。
(圖5)
當這兩個(gè)條件都為true時(shí),也就是同時(shí)滿(mǎn)足兩個(gè)條件時(shí),會(huì )員登錄成功,在當前窗口打開(kāi)page1;當這兩個(gè)條件中的任意一個(gè)不為true 時(shí),也就是兩個(gè)條件中的任何一個(gè)未滿(mǎn)足時(shí),會(huì )員登錄失敗,顯示warning提示。
在A(yíng)xure的【條件編輯器】中,默認選項是符合【全部】以下條件,見(jiàn)圖6,點(diǎn)擊下拉列表可以選擇符合【任何】以下條件,也就是滿(mǎn)足條件中的任意一個(gè)時(shí)。
(圖6)
根據之前昆明網(wǎng)站建設小編對該案例的描述,此處選擇符合【全部】以下條件,單擊【確定】按鈕關(guān)閉【條件編輯器】。
第三步:在【用例編輯器】中新增【當前窗口】動(dòng)作,在【配置動(dòng)作】中勾選page1,見(jiàn)圖7,單擊【確定】按鈕關(guān)閉【用例編輯器】。
此時(shí),當用戶(hù)名和密碼輸入框中的值都等于“Axure”時(shí),就在當前窗口打開(kāi)page1的交互就設置完畢了,下面繼續設置條件不滿(mǎn)足時(shí)的交互。
(圖7)
第四步:選中login部件,在部件【屬性】面板中再次雙擊【鼠標單擊時(shí)】事件,或者單擊右側的小加號,繼續添加用例,如圖8。在彈出的【用例編輯器】中新增【顯示】動(dòng)作,在右側【配置動(dòng)作】中勾選warning,并設置其可見(jiàn)性為【顯示】,動(dòng)畫(huà)【淡入淡出】,時(shí)間【500】毫秒,見(jiàn)圖9,單擊【確定】按鈕關(guān)閉【用例編輯器】。
(圖8)
(圖9)
第五步:在頂部的工具欄中單擊【預覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預覽交互效果。
在此,昆明網(wǎng)站制作小編需要提醒注意:Axure中的用例是自上至下按順序執行的,例如在案例20中,單擊登錄按鈕時(shí),先執行Case1判斷用戶(hù)名和密碼輸入框中的值是不是等于A(yíng)xure,如果等于A(yíng)xure就執行在當前窗口打開(kāi)page1的動(dòng)作;如果用戶(hù)名或密碼輸入框中的值不等于A(yíng)xure,就執行Case2,見(jiàn)圖10。
(圖10)
當前文章標題:案例20:會(huì )員登錄條件判斷
當前URL:http://amzcoolest.com/news/wzzz/3439.html
上一篇:高級交互——條件邏輯概述
下一篇:交互和條件邏輯