Axure與iPhone應用程式原型建立（三）

在之前的兩篇文章中，作者分別為大家介紹了如何使用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網站或者在你自己的裝置中查看。

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

下載本文Axure iPhone App模板

下載原型設計工具Axure RP