大家好，從今天起，UI妹兒【每週一練】正式開始，U妹將和要學習的小夥伴們一起進行
AE、交互動效設計、插畫設計、2.5D插畫設計等方面的練習，想一起學習的小夥伴可以加入進來，我們一起學習！今天U妹先給大家做一個APP抽屜式導航交互動效設計練習，先來看來最終的交互效果
效果圖抽屜式導航交互效果
1、操作步驟
第1步：打開protopie，這個交互效果是用protopie軟件做的，軟件下載地址：http://www.protopie.cn/download/
Protopie軟件介紹：
第2步：點擊新建Pie文件按鈕，選擇界面尺寸（因為我的界面尺寸是1242x2208px，所以選擇8 Plus）
第3步：在菜單欄，點擊插入-圖層-圖片，插入所需要的圖片素材，並將圖片移動到相應的位置
第4步：先搞清楚交互原理：點擊導航圖標——導航頁面從左側進入，並且首頁呈現遮罩層，然後點擊遮罩層區域，導航頁面還原；知道交互原理後，可見我們需要新建一個遮罩層，填充為黑色，將透明度設置為0，並將遮罩層調整到導航圖標上層。
第5步：添加交互效果，為導航圖標添加交互點擊事件，添加觸發條件 ：選擇單擊（選擇導航按鈕圖標）—添加：移動（在屬性區域選擇：導航頁面，X軸移動設置為：0，持續事件：0.3S）—添加：透明度（選擇mask圖層，透明度設置為50%）
我們先來看下預覽：
第6步：再次添加交互效果，為遮罩層添加交互點擊事件，可以讓導航頁回位；點擊添加觸發條件：選擇單擊（選擇遮罩層）—添加：移動（在屬性區域選擇：導航頁面，X軸移動設置為：-250，持續事件：0.3S）—添加：透明度（選擇mask圖層，透明度設置為0）
添加完畢後整個效果就完成了，我們再來看下預覽效果：
第7步：我們也可以在手機上查看交互效果，安裝protopieplayerAPP，掃碼後即可在手機上預覽交互效果
我們也可以將交互效果，導出為MP4視頻格式，也可以將交互效果上傳到雲端，分享鏈接給團隊人員查看。
2、交作業方式
截止時間：5月5日（週六）22:00截止
3、 素材+源文件獲取
素材+源文件獲取方式：
當然你也可以用你自己做的設計稿，來完成這次作業。
#UI妹兒【每週一練】——每週進步一點點#
---------------------------------------------------------
UI妹兒——越努力，越幸運
閱讀更多 UI妹兒 的文章
