作為一名互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)人員，相信很多同行每天上班電腦上都會(huì)運(yùn)行著一個(gè)軟件——Axure，她能幫助網(wǎng)站需求設(shè)計(jì)者，快捷而簡(jiǎn)便的創(chuàng)建基于網(wǎng)站構(gòu)架圖的帶注釋頁(yè)面示意圖、操作流程圖、以及交互設(shè)計(jì)，并可自動(dòng)生成用于演示的網(wǎng)頁(yè)文件和規(guī)格文件，以提供演示與開(kāi)發(fā)。
隨著互聯(lián)網(wǎng)展品的發(fā)展，交互元素越來(lái)越多的在頁(yè)面中體現(xiàn)，常見(jiàn)的就有很多的彈出框，大家在使用微波的時(shí)候就會(huì)深有體會(huì)。
（新浪微博的各種彈出框）
隨之而來(lái)的問(wèn)題就是產(chǎn)品設(shè)計(jì)師如何在原型設(shè)計(jì)或者demo中制作出這樣的彈出效果呢？不要緊，今天抽空來(lái)和大家分享一下在Axure中添加動(dòng)態(tài)彈出框的方法。筆者以家居寶的商品詳細(xì)頁(yè)面為例，首先我們來(lái)看一下現(xiàn)在的效果。
下面筆者用最快的速度告訴大家這樣特效的制作方法。
步驟一：打開(kāi)Axure，為了更加形象我直接利用圖片來(lái)制作，加入原型基本內(nèi)容元素。
步驟二：加入彈出框，在這里我還是使用圖片來(lái)制作（正常情況下可以用矩形工具在制作，原理都是一樣的），鼠標(biāo)右擊：<轉(zhuǎn)換>—<轉(zhuǎn)換為動(dòng)態(tài)面板>。
步驟三：因?yàn)樵搫?dòng)態(tài)面板是需要點(diǎn)擊后彈出顯示，因此我們需要在默認(rèn)情況下把它設(shè)置為隱藏，在轉(zhuǎn)換為動(dòng)態(tài)面板以后我們?cè)俅芜x中后鼠標(biāo)右擊<編輯動(dòng)態(tài)面板>—<設(shè)為隱藏>。這時(shí)你會(huì)發(fā)現(xiàn)該動(dòng)態(tài)面板就會(huì)被隱藏了，此時(shí)的隱藏不是完全意義上的隱藏，為了方便使用軟件默認(rèn)在其位置上顯示成為一個(gè)背景色為黃色的透明圖層。
步驟四：一個(gè)頁(yè)面中可能會(huì)出現(xiàn)多個(gè)動(dòng)態(tài)面板，因此我們可以將它命名，方便我們使用時(shí)方便辨認(rèn)。命名的方式也很簡(jiǎn)單選中雙擊黃色透明區(qū)域在<動(dòng)態(tài)面板標(biāo)簽>后的輸入框內(nèi)填寫(xiě)標(biāo)簽名稱。（此步驟同樣可以在步驟二結(jié)束后進(jìn)行操作）。
步驟五：做好以上的準(zhǔn)備工作以后就需要將按鈕和動(dòng)態(tài)面板關(guān)聯(lián)起來(lái)因此該步驟也最為重要，該步驟總共分為六個(gè)小步驟。第一步：選中（鼠標(biāo)左鍵點(diǎn)擊一下）點(diǎn)擊彈出事件的觸發(fā)元素，這里當(dāng)然就是如下圖中的“點(diǎn)我就彈出”的按鈕了，第二步：在Axure右邊的工具欄上找到交互一欄，點(diǎn)擊OnClick（其實(shí)這個(gè)就是一個(gè)鼠標(biāo)點(diǎn)擊的觸發(fā)事件。如果需要實(shí)現(xiàn)彈出后再點(diǎn)擊按鈕關(guān)閉彈出框的操作話直接點(diǎn)擊交互下面的添加事件），第三步：在彈出框中選中<顯示動(dòng)態(tài)面板>，第四步：點(diǎn)擊下面的“Show Panel”，第五步：勾選我們剛才命名的動(dòng)態(tài)面板，第六步：點(diǎn)擊確定按鈕完成操作。
總結(jié)，至此我們就完成了添加動(dòng)態(tài)面板的交互操作，是不是很簡(jiǎn)單，簡(jiǎn)簡(jiǎn)單單的增加互動(dòng)元素會(huì)讓你在演示原型的時(shí)候給觀看者帶去生動(dòng)的演示，還等什么趕緊一起來(lái)試一下吧。祝大家工作愉快。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。