Axure與iPhone應用程序原型創建(五)

在設計iPhone應用程序原型時,常常需要通過一個滑動的動畫從一個屏幕切換到另一個屏幕。使用Axure RP進行設計時,可以將屏幕設計到動態面板裏面,通過設置面板狀態事件來實現。在下文中作者將通過一個示例來詳細講解。

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

添加圖像映射區域

打開AxureiPhoneApp.zip,打開裏面的iPhoneApp-StateChangeNavigationTutorial.rp文件。
在返回箭頭按鈕和正在播放按鈕上面添加圖像映射區域,因這些按鈕都是由多個組件組成,所以我們要爲整個區域添加交互。

第二步:將第一個屏幕轉換到動態面板

:將第一個顯示轉換到動態面板

接下來,我們將需要切換的屏幕嵌入到一個動態面板中。
選中第一個屏幕的所有組件,右擊選擇轉換>轉換到動態面板。將此面板標記爲InterfacePanel。

第三步:添加“Stations”狀態

添加

在動態面板管理器中右擊面板,選擇添加狀態,爲面板添加兩個新的狀態。
將第一個狀態標記爲“正在播放”,將第二個狀態標記爲“Stations”。

第四步:將組件粘貼到“Stations” 狀態下

將組件粘貼到

選中Station列表中的屏幕組件,剪切並粘貼到“Stations”狀態下。將粘貼的組件移動到0,0位置。

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

添加OnClick 到圖像映射區域

選中“正在播放”的圖像映射區域,雙擊OnClick事件打開事件編輯器。

第六步:設置面板到“正在播放”狀態

設置面板到

添加一個設置面板狀態事件,查看InterfacePanel複選框。 “現在播放”狀態是默認爲選擇狀態的。爲動畫進和動畫出選擇“向左滑動”。
點擊確定,關閉事件編輯器。

第七步:打開“正在播放”狀態, 添加OnClick

添加OnClick

導航到“正在播放”狀態,選中返回按鈕的圖像映射區域,並雙擊OnClick打開事件編輯器。

第八步:設置面板狀態到“Stations”

選擇設置面板狀態事件,查看InterfacePanel複選框。從下拉列表中選擇“Stations”狀態,爲動畫進和動畫出選擇“向右滑動”。點擊“確定”。

測試:創建完成後,可通過生成到你的桌面或在iPhone上查看進行測試。

>>下載本文Axure iPhone App模板  http://image.evget.com//images/article/FileDownload/AxureiPhoneApp.zip

>>下載原型設計工具Axure RP         http://www.evget.com/product/2978/download

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章