在設計iPhone應用程序原型時,常常需要通過一個滑動的動畫從一個屏幕切換到另一個屏幕。使用Axure RP進行設計時,可以將屏幕設計到動態面板裏面,通過設置面板狀態事件來實現。在下文中作者將通過一個示例來詳細講解。
第一步:添加圖像映射區域
打開AxureiPhoneApp.zip,打開裏面的iPhoneApp-StateChangeNavigationTutorial.rp文件。
在返回箭頭按鈕和正在播放按鈕上面添加圖像映射區域,因這些按鈕都是由多個組件組成,所以我們要爲整個區域添加交互。
第二步:將第一個屏幕轉換到動態面板
接下來,我們將需要切換的屏幕嵌入到一個動態面板中。
選中第一個屏幕的所有組件,右擊選擇轉換>轉換到動態面板。將此面板標記爲InterfacePanel。
第三步:添加“Stations”狀態
在動態面板管理器中右擊面板,選擇添加狀態,爲面板添加兩個新的狀態。
將第一個狀態標記爲“正在播放”,將第二個狀態標記爲“Stations”。
第四步:將組件粘貼到“Stations” 狀態下
選中Station列表中的屏幕組件,剪切並粘貼到“Stations”狀態下。將粘貼的組件移動到0,0位置。
第五步:添加OnClick到圖像映射區域
選中“正在播放”的圖像映射區域,雙擊OnClick事件打開事件編輯器。
第六步:設置面板到“正在播放”狀態
添加一個設置面板狀態事件,查看InterfacePanel複選框。 “現在播放”狀態是默認爲選擇狀態的。爲動畫進和動畫出選擇“向左滑動”。
點擊確定,關閉事件編輯器。
第七步:打開“正在播放”狀態, 添加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