大家好， UI妹兒公眾號【每週一練】已經正式開始，U妹將和要學習的小夥伴們一起進行
交互動效設計、插畫設計、2.5D插畫設計、C4D、一些技法等方面的練習，想一起學習的小夥伴可以加入進來，我們一起學習！請點擊查看往期詳情，前幾期大家的作業都已經收到，我也在公眾號後臺進行了點評，今天，我們的主題是：製作App頁面交互導航動效，先來看一下最終的效果圖：
App 導航頁面交互動效展示
1、 操作步驟
第1步：打開protopie，這個交互效果是用protopie軟件做的，軟件下載地址：http://www.protopie.cn/download/
Protopie軟件介紹：
《交互動效原型設計其實並沒有你想象的那麼難》
第2步：點擊新建Pie文件按鈕，選擇界面尺寸（iPhone 8-375x667@2x，默認尺寸也是這個）
第3步：在菜單欄，點擊插入-圖層-圖片，插入所需要的圖片素材，並將圖片移動擺放到相應的位置：
第4步：先搞清楚交互原理：有3個導航，隨著手勢左右滑動，當前頁面導航條隨著頁面的切換而切換，這個交互效果相信大家也很熟悉了將導入的圖片素材擺放如下：
第5步：調整圖層順序，添加滾頁容器層（容器層即為承載交互效果的圖層），調整滾頁容器層大小到如下圖，然後將wallet_01圖層拖入滾頁容器層裡，然後將
容器層組置於底層，預覽效果如下：
大家可以看看滾頁容器層的具體屬性：
第6步：添加滑頁容器層（容器層即為承載交互效果的圖層），調整滾頁容器層大小到如下圖，然後將wallet_01圖層拖入滾頁容器層裡，然後將容器層組置於底層，預覽效果如下：
第7步：添加導航條聯動效果，添加交互事件：
聯動，選擇 “huaye容器圖層”，屬性：滾頁；再次添加交互事件：移動，選擇“Rectangle”圖層（該圖層為導航條），移動屬性：scrolloffset（滾動偏移）設置為：第一行（初始數值）：scrolloffset:0，X:0，Y:空
第二行（偏移數值）：scrolloffset:750，X:250，Y:空；預覽效果如下：
我們先來看下預覽：
第8步：我們也可以將交互效果，導出為MP4視頻格式，也可以將交互效果上傳到雲端，分享鏈接給團隊人員查看。
第9步：或者也可以在手機上查看交互效果，安裝protopie player APP，掃碼後即可在手機上預覽交互效果
我們來看看導出的MP4視頻預覽效果：
最後，我們也可以將做好的交互效果，稍加調整，上傳到你的Dribbble，分享給全球的設計師欣賞，如下圖：
2、 素材+源文件獲取
素材+源文件獲取方式：
當然你也可以用你自己做的設計稿，來完成這次作業。
#UI妹兒【每週一練】——每週進步一點點#
閱讀更多 UI妹兒 的文章
