在之前的兩篇文章中，作者分別為大家介紹了如何使用iPhone應用程序頁面模板在原型設計工具Axure中設計程序，以及如何在iPhone上查看iPhone應用程序原型。接下來，作者將為大家講解如何使用Axure在iPhone中設置顯示和隱藏滑動菜單。

向上滑動面板

第一步：添加圖像映射區域

首先，打開 AxureiPhoneApp.zip，打開 iPhoneApp-SlidingMenuTutorial.rp文件。

因為底部的導航現在只是一個單一的圖像，添加一個圖像映射區域到的大拇指向上/向下按鈕之間的選項按鈕。此外，在“添加書簽”按鈕上也添加一個圖像映射區域，因它是由兩個組件創建，我們希望整個區域都可以點擊。

第二步：將菜單轉換到動態面板

為創建滑動動畫，我們將用到設置面板狀態事件。首先，將整個滑動菜單轉入到一個動態面板，具體操作為：選擇組件，右擊，轉換>裝換到動態面板。為面板標注“SlideUpMenu"”。

第三步：在“SlideUpMenu”下添加狀態“Menu”和“Empty”

現在，添加第二個狀態到面板，留作空白，有了這一步，我們后面才會有一個向下滑動的動畫。

將第一個狀態標記為“菜單”，第二個狀態標記為“空白”。

第四步：設置面板為隱藏

現在，設置動態面板默認為隱藏。因為即使狀態為空白，透過可見的動態面板也不能實現單擊或點擊。

第五步：添加 OnClick到圖像映射區域

添加交互：添加一個實例到選項按鈕的OnClick事件，就是我們在第一步中添加的圖像映射區域。雙擊OnClick以添加實例。

第六步：設置面板到“Menu”，向上滑動

添加設置面板狀態事件到狀態，選擇 SlidingMenu 面板復選框。菜單狀態就被默選。從動畫的下拉列表中選擇“向上滑動”動畫。

點擊確認關閉實例編輯器。

注意：設置面板狀態時面板將會自動顯示，因此就不需要另外添加一個顯示面板事件了。

向下滑動面板

第一步：打開Menu狀態，添加OnClick到按鈕

在動態面板管理中雙擊Menu狀態打開，在我們之前添加的“添加書簽”映射區域給OnClick事件添加一個實例。

第二步：設置面板為“None”、“向下滑動”

為隱藏面板，我們將用到設置面板狀態事件，這樣我們就可以使用“向下滑動”動畫。使用“自行隱藏面板”就可隱藏面板，但不隱藏動畫。

添加一個設置面板事件，選擇面板，并設置狀態為Empty。添加一個向下滑動動畫為飛出。

第三步：添加事件——等待500毫秒和隱藏面板事件

添加一個等待事件并將等待時間定為500毫秒。在等候事件后面添加一個隱藏面板事件。這里添加等待事件，保證動畫在面板隱藏之前得以完成。跟上面一樣，面板需要隱藏起來，這樣面板下面的的組件才可以點擊。

第四步：移動SlideUpMenu到位

最后，將SlideUpMenu移動到位，你可以按住Shift鍵，同時沿著一個軸拖動它。

生成你的原型并測試。上傳到AxShare網站或者在你自己的設備中查看。

若隱藏菜單沒有正常運行，檢查所有事件的順序是否有誤。

>>

>>

擴展閱讀

• 八個面向移動開發的免費扁平化UI設計工具
• 2014年十大最佳網站創建工具（網站）推薦
• 11個激發開發者靈感的用戶界面設計資源網站
• 2014馬上有HTML5！大波帶PSD的HTML5網站模版賀新年