axure60交互原型設(shè)計(jì)詳細(xì)實(shí)例教程-資料下載頁
2024-11-01 16:32本頁面
【導(dǎo)讀】Axure交互原型設(shè)計(jì)詳細(xì)實(shí)例教程（一）。我們通常看到的切換形式為：。中”和“沒被選中”，內(nèi)容的狀態(tài)為“顯示”和“不顯示”，當(dāng)控件的狀態(tài)為“被。態(tài)為“不顯示”。下面我們來做一個(gè)實(shí)例，就以上面的圖為例子：。第一步，按照TAB切換原理，我們準(zhǔn)備好3個(gè)按鈕和3個(gè)內(nèi)容區(qū)，并為三個(gè)控。件命名，如下圖：。中”的狀態(tài)為默認(rèn)狀態(tài)，“被選中狀態(tài)”設(shè)置方式如下：。第三步，我們?yōu)閮?nèi)容區(qū)設(shè)定“顯示”和“不顯示”兩種狀態(tài)，并為三個(gè)內(nèi)容區(qū)。點(diǎn)擊左側(cè)的“將組件設(shè)置為選定狀態(tài)”，并在最右側(cè)勾選“控件A”、“控件B”。在右下角設(shè)定“控件A”的“Selectthevalue”值為“selected”、“控件B”。完成后將三個(gè)內(nèi)容區(qū)放到同一位置，同時(shí)將默認(rèn)不顯示的兩個(gè)內(nèi)容區(qū)預(yù)設(shè)為“隱。我們簡單點(diǎn)，包括郵箱、密碼、確認(rèn)密碼、驗(yàn)證碼、提交按鈕和錯(cuò)誤提示框，并?？?，且確認(rèn)密碼輸入框的值和密碼輸入框的值相等，且驗(yàn)證碼輸入框值等于。接下來依次寫上6個(gè)事件：。教程到這里就結(jié)束了，謝謝觀看，你可以下載源文件查看過程
【正文】 前面 6 條是錯(cuò)誤驗(yàn)證，最后 1 條是正確驗(yàn)證，成功則執(zhí)行之后的操作，只要理解了上面這個(gè)邏輯，下面的就簡單了。 第三步：在 axure 中添加判斷事件 注意了，所有的驗(yàn)證都是在點(diǎn)擊“快速注冊”按鈕的時(shí)候觸發(fā)的，因此我們事件應(yīng)該寫在“快速注冊”按鈕的“ onclick”操作上： 接下來依次寫上 6 個(gè)事件： 點(diǎn)擊上圖中的添加事件后彈出條件 1 的事件編輯框如下圖，然后我們點(diǎn)擊“ Add Condition”添加判斷條件，你可以理解成是在寫” if 條件”。 點(diǎn)擊“ Add Condition”彈出條件編輯框： 寫下如下條件： 好，條件 1 寫完了，點(diǎn)擊確定，然后設(shè)置在條件 1 下執(zhí)行的事件，應(yīng)該是“錯(cuò)誤提示”輸入框的值顯示“請輸入您的郵箱！” 然后點(diǎn)擊確定關(guān)掉所有彈窗，可以看到“ onclick”那里變成了這樣： 點(diǎn)擊添加事件，繼續(xù)添加條件，下面 6 步就不詳解了，最后的效果會(huì)是下面這樣（注意順序）： 教程到這里就結(jié)束了，謝謝觀看，你可以下載源文件查看過程
公司管理相關(guān)推薦
鄂ICP備17016276號-1