Axure教程:簡單易學(xué)免彈窗友好交互動效

12 評論 4275 瀏覽 33 收藏 5 分鐘

在APP功能的設(shè)計(jì)中,一個(gè)功能頁面的跳轉(zhuǎn)最好不超過三個(gè)頁面,有時(shí)候?yàn)榱嗽O(shè)計(jì)更友好,就需要一些免彈窗設(shè)計(jì)交互,好,今日說法就到這里,教學(xué)開始!

看看效果:

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

通過本教學(xué)能學(xué)到什么?

  1. 圖層的應(yīng)用
  2. 交互的回溯
  3. 動態(tài)面板遮罩的妙用
  4. 清奇的思路

第一步繪制所需元素

  1. 繪制中部區(qū)域,坐標(biāo)(0,166),尺寸375*266,命名【分隔欄】
  2. 繪制圓形按鈕,坐標(biāo)(300,360),尺寸50*50,命名【按鈕】

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

第二步制作交互

點(diǎn)擊【按鈕】,移動【按鈕】到日志列表中心(163,525),動畫線性200ms。

等待200ms,設(shè)置【按鈕】文本為空;設(shè)置尺寸【按鈕】500*500動畫線性300,錨點(diǎn)中心(能覆蓋住日志列表就行)

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

看看效果:

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

效果看著還不錯(cuò),但我們發(fā)現(xiàn)【分隔欄】被擋住了,于是,添加動作,設(shè)置【分隔欄】置于頂層。

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

看看效果:

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

第三步、添加新建內(nèi)容

畫出輸入框,按鈕,時(shí)間;組合這些元素命名【新建內(nèi)容】組合,然后隱藏【新建內(nèi)容】組合。

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

添加【按鈕】動作,顯示【新建內(nèi)容】組合,動畫逐漸300ms

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

看看效果

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

添加取消按鈕交互

這個(gè)其實(shí)很簡單,直接復(fù)制圓形【按鈕】的交互,黏貼在【取消】按鈕上,然后理清反向回去的動效流程就可以了。

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

看看效果

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

第四步、美化最終效果

添加日志列表。

全選所有元件,創(chuàng)建尺寸375*667的動態(tài)面板,取消勾選自適應(yīng)內(nèi)容。

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

看看效果:

Axure教學(xué)之簡單易學(xué)免彈窗友好交互動效

利用動態(tài)面板,完美的遮擋住按鈕放大的地方,好了今日說法就到這里,下期老司機(jī)帶你做社交軟件,翻一翻的交互動效,有點(diǎn)小難噢~

鏈接:https://pan.baidu.com/s/1JmJtc1wMW1Vlvri92rEReA

提取碼:qhug

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 產(chǎn)品小白沒看懂復(fù)雜的交互設(shè)計(jì),想從基礎(chǔ)開始學(xué),卻無從下手?

    ?? 可以找Axure實(shí)戰(zhàn)班的助教小可愛@CC-起點(diǎn)學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:禮物

    領(lǐng)取原型設(shè)計(jì)大禮包,還有不定期的Axure免費(fèi)視頻課程分享,老師在線答疑,多學(xué)多看多思考,你也能成為Axure原型設(shè)計(jì)大牛哦~

    來自廣東 回復(fù)
  2. 當(dāng)我沒問過是啥軟件 哈哈哈

    回復(fù)
  3. 看起來很舒服,這個(gè)是啥軟件啊

    回復(fù)
  4. 好頂贊!

    來自四川 回復(fù)
    1. 謝謝支持 ??

      來自福建 回復(fù)
  5. 前面都沒問題,最后一步卻實(shí)現(xiàn)不了效果,轉(zhuǎn)化成動態(tài)面板,按鈕的移動位置也改變了 ??

    來自廣東 回復(fù)
    1. 哈哈 你一開始沒有把坐標(biāo)放到0、0嗎

      來自福建 回復(fù)
    2. 坐標(biāo)規(guī)定(0,0)嗎?坐標(biāo)都是按照我個(gè)人習(xí)慣設(shè)置的。

      來自廣東 回復(fù)
    3. 重新按照你的坐標(biāo)做了一遍(沒設(shè)“狂日人記”這個(gè)矩形),在轉(zhuǎn)換成動態(tài)面板,按鈕的位置還是發(fā)生改變了。后來重新補(bǔ)了“狂日人記”這個(gè)矩形,就可以作出你這個(gè)效果。但是不是很明白其中的原因,有點(diǎn)懵。

      來自廣東 回復(fù)
    4. 不一定要規(guī)定坐標(biāo)0,0呀,只是這樣比較好計(jì)算,或者用一個(gè)動態(tài)面板封裝也可以。有沒有狂日人記應(yīng)該沒什么差吧 ?

      來自福建 回復(fù)
  6. 如何能來一個(gè)axure 8.0的教程就好了 ??

    來自北京 回復(fù)
    1. 差不多的呀 大兄弟

      來自福建 回復(fù)