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

向上滑動面板

第一步：添加圖像映射區(qū)域

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

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

第二步：將菜單轉(zhuǎn)換到動態(tài)面板

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

第三步：在“SlideUpMenu”下添加狀態(tài)“Menu”和“Empty”

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

將第一個狀態(tài)標記為“菜單”，第二個狀態(tài)標記為“空白”。

第四步：設(shè)置面板為隱藏

現(xiàn)在，設(shè)置動態(tài)面板默認為隱藏。因為即使狀態(tài)為空白，透過可見的動態(tài)面板也不能實現(xiàn)單擊或點擊。

第五步：添加 OnClick到圖像映射區(qū)域

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

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

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

點擊確認關(guān)閉實例編輯器。

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

向下滑動面板

第一步：打開Menu狀態(tài)，添加OnClick到按鈕

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

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

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

添加一個設(shè)置面板事件，選擇面板，并設(shè)置狀態(tài)為Empty。添加一個向下滑動動畫為飛出。

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

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

第四步：移動SlideUpMenu到位

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

生成你的原型并測試。上傳到AxShare網(wǎng)站或者在你自己的設(shè)備中查看。

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

>>

>>

擴展閱讀

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