大家好,從今天起,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妹兒 的文章