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

向上滑動(dòng)面板

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

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

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

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

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

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

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

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

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

現(xiàn)在，設(shè)置動(dòng)態(tài)面板默認(rèn)為隱藏。因?yàn)榧词範(fàn)顟B(tài)為空白，透過(guò)可見的動(dòng)態(tài)面板也不能實(shí)現(xiàn)單擊或點(diǎn)擊。

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

添加交互：添加一個(gè)實(shí)例到選項(xiàng)按鈕的OnClick事件，就是我們?cè)诘谝徊街刑砑拥膱D像映射區(qū)域。雙擊OnClick以添加實(shí)例。

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

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

點(diǎn)擊確認(rèn)關(guān)閉實(shí)例編輯器。

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

向下滑動(dòng)面板

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

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

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

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

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

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

添加一個(gè)等待事件并將等待時(shí)間定為500毫秒。在等候事件后面添加一個(gè)隱藏面板事件。這里添加等待事件，保證動(dòng)畫在面板隱藏之前得以完成。跟上面一樣，面板需要隱藏起來(lái)，這樣面板下面的的組件才可以點(diǎn)擊。

第四步：移動(dòng)SlideUpMenu到位

最后，將SlideUpMenu移動(dòng)到位，你可以按住Shift鍵，同時(shí)沿著一個(gè)軸拖動(dòng)它。

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

若隱藏菜單沒(méi)有正常運(yùn)行，檢查所有事件的順序是否有誤。

>>

>>

擴(kuò)展閱讀

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