起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：簡單易學免彈窗友好交互動效
在APP功能的設計中，一個功能頁面的跳轉最好不超過三個頁面，有時候為了設計更友好，就需要一些免彈窗設計交互，好，今日說法就到這里，教學開始！
看看效果：
通過本教學能學到什么？
- 圖層的應用
- 交互的回溯
- 動態面板遮罩的妙用
- 清奇的思路
第一步繪制所需元素
- 繪制中部區域，坐標（0,166），尺寸375*266，命名【分隔欄】
- 繪制圓形按鈕，坐標（300,360）,尺寸50*50，命名【按鈕】
第二步制作交互
點擊【按鈕】，移動【按鈕】到日志列表中心（163,525），動畫線性200ms。
等待200ms，設置【按鈕】文本為空；設置尺寸【按鈕】500*500動畫線性300，錨點中心（能覆蓋住日志列表就行）
看看效果：
效果看著還不錯，但我們發現【分隔欄】被擋住了，于是，添加動作，設置【分隔欄】置于頂層。
看看效果：
第三步、添加新建內容
畫出輸入框，按鈕，時間；組合這些元素命名【新建內容】組合，然后隱藏【新建內容】組合。
添加【按鈕】動作，顯示【新建內容】組合，動畫逐漸300ms
看看效果
添加取消按鈕交互
這個其實很簡單，直接復制圓形【按鈕】的交互，黏貼在【取消】按鈕上，然后理清反向回去的動效流程就可以了。
看看效果
第四步、美化最終效果
添加日志列表。
全選所有元件，創建尺寸375*667的動態面板，取消勾選自適應內容。
看看效果：
利用動態面板，完美的遮擋住按鈕放大的地方，好了今日說法就到這里，下期老司機帶你做社交軟件，翻一翻的交互動效，有點小難噢~
鏈接：https://pan.baidu.com/s/1JmJtc1wMW1Vlvri92rEReA
提取碼：qhug
本文由 @索大佩羅娜 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
產品經理客棧公眾號作者，8年產品girl
評論
產品小白沒看懂復雜的交互設計，想從基礎開始學，卻無從下手？
?? 可以找Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：禮物
領取原型設計大禮包，還有不定期的Axure免費視頻課程分享，老師在線答疑，多學多看多思考，你也能成為Axure原型設計大牛哦~
當我沒問過是啥軟件 哈哈哈
看起來很舒服，這個是啥軟件啊
好頂贊！
謝謝支持 ??
前面都沒問題，最后一步卻實現不了效果，轉化成動態面板，按鈕的移動位置也改變了 ??
哈哈 你一開始沒有把坐標放到0、0嗎
坐標規定（0，0）嗎？坐標都是按照我個人習慣設置的。
重新按照你的坐標做了一遍（沒設“狂日人記”這個矩形），在轉換成動態面板，按鈕的位置還是發生改變了。后來重新補了“狂日人記”這個矩形，就可以作出你這個效果。但是不是很明白其中的原因，有點懵。
不一定要規定坐標0,0呀，只是這樣比較好計算，或者用一個動態面板封裝也可以。有沒有狂日人記應該沒什么差吧 ?
如何能來一個axure 8.0的教程就好了 ??
差不多的呀 大兄弟