Axure9原型教程:實(shí)現(xiàn)彈框、彈出窗口等

3 評(píng)論 41577 瀏覽 14 收藏 4 分鐘

今天要講的是如何用axure做出彈出框的效果,不限于當(dāng)前窗口所彈出的提示、警告、帶遮罩層的彈窗等,可以參考本教程,實(shí)用性非常強(qiáng),應(yīng)用的場(chǎng)景比較多。

想象一下場(chǎng)景,無(wú)論web端還是移動(dòng)端,點(diǎn)擊某個(gè)按鈕,系統(tǒng)會(huì)提示相關(guān)提交信息、系統(tǒng)提示是否確認(rèn)刪除某條信息、確認(rèn)關(guān)閉或退出當(dāng)前界面諸如此類等等等。

原型設(shè)計(jì)

這個(gè)某個(gè)APP界面,當(dāng)點(diǎn)擊登錄時(shí),會(huì)彈出輸入賬號(hào)密碼的登錄框,這時(shí)候我們的設(shè)計(jì)就能派上用場(chǎng)了哈哈!

我有兩種方案,供大家參考。

1. 動(dòng)態(tài)面板

全選當(dāng)前首頁(yè),在全選頁(yè)面上右鍵單擊“轉(zhuǎn)換為動(dòng)態(tài)面板”,如圖,雙擊動(dòng)態(tài)面板就到這個(gè)頁(yè)面來(lái)了。

然后在上方添加一個(gè)狀態(tài);雙擊狀態(tài)更改狀態(tài)名,如果元件多的話不加名字會(huì)很麻煩哦~,我這里增加一個(gè)“輸入賬號(hào)密碼”;

給輸入賬號(hào)密碼畫一個(gè)界面~有點(diǎn)丑,大家不要介意啊~

開始設(shè)置交互,選擇“登陸”元件,右側(cè)交互選擇“單擊時(shí)”-“設(shè)置面板狀態(tài)”-選擇動(dòng)態(tài)面板-選擇跳轉(zhuǎn)的那一頁(yè)動(dòng)態(tài)-選擇相關(guān)的效果,點(diǎn)擊確定,交互完成。點(diǎn)擊預(yù)覽就可以看到所繪制的原型了~

2. 隱藏

照例,先創(chuàng)建一個(gè)首頁(yè),另外創(chuàng)建一個(gè)登陸窗口,如圖

全選登錄框,“合并”這個(gè)組合-隱藏。

選中“登陸”右側(cè)交互選擇“單擊時(shí)”-“顯示/隱藏”-選擇元件-上一步隱藏的組合-選擇交互方式,確定,大功告成~

#演示鏈接#

https://lanhuapp.com/url/mAsJ6

 

作者:妖怪口袋;微信公眾號(hào):妖怪口袋,不定時(shí)更新axure9原型案例。

本文由 @妖怪口袋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 第一種方法 根本實(shí)現(xiàn)不了

    來(lái)自北京 回復(fù)
  2. 演示鏈接看不了,提示:你沒(méi)有此項(xiàng)目的訪問(wèn)權(quán)限

    來(lái)自北京 回復(fù)
    1. 鏈接:https://pan.baidu.com/s/13uOL9X1M6QL5ksxDywXq_w
      提取碼:wdfv
      不好意思~

      來(lái)自廣東 回復(fù)