在APP功能的設(shè)計(jì)中，一個(gè)功能頁面的跳轉(zhuǎn)最好不超過三個(gè)頁面，有時(shí)候?yàn)榱嗽O(shè)計(jì)更友好，就需要一些免彈窗設(shè)計(jì)交互，好，今日說法就到這里，教學(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，命名【按鈕】

第二步制作交互

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

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

看看效果：

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

看看效果：

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

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

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

看看效果

添加取消按鈕交互

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

看看效果

第四步、美化最終效果

添加日志列表。

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

看看效果：

利用動態(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é)議