轉載自：老二牛車教育???【axure手機原型】Axure實現iPhone推動切換效果

我們在產品原型設計時，經常需要制作高保真原型，在視覺效果及交互體驗上盡量與最終產品相近，以便向別人展示或者供用戶調研時使用。

移動平臺的交互方式非常豐富，下面就像大家介紹幾種iPhone上常用的交互動作在Axure中的實現方式。

我們首先在Axure中建立一個iPhone的外殼模型作為主模擬界面。白色區域為屏幕顯示區域，大小為320px*480px（iPhone屏幕的1/4大小，方便瀏覽）

推動切換

推動切換經常用于層級轉換時，當點擊操作完成后需要切換至下一層級界面時，當前界面向左推出，新界面從右側推入。此操作多用于有層級關系的界面之間的切換。

實現步驟：

1.建立一個動態面板，尺寸320*480，命名為“屏幕”，放置在iPhone框架中的白色區域。此動態面板的作用是將可見內容限制在屏幕顯示范圍內。

2.進入動態面板“屏幕”中，再建立一個動態面板，位置（0,0），尺寸640*480，命名為“推動切換”。此動態面板的作用是控制界面切換的動作。

3.進入動態面板“推動切換”，在有效區域繪制兩個320*480的色塊（給色塊設置不同顏色以方便區分）及按鈕。

4.選中“點擊切換”按鈕，為其添加單擊時的交互動作：當單擊該按鈕時，動態面板“推動切換”向左移動320px，即顯示屏幕由左側白色屏幕切換至右側灰色屏幕。

移動位置有兩種方式：（絕對 左：-320 上：0）或者（相對 左：-320 上：0）可以達到同樣的效果。

絕對移動是將動態面板移動到一個固定的坐標，相對移動是將動態面板沿左/上移動相應距離。若動態面板移動到一個固定的位置或者可以獲取準確的位置數據，推薦使用絕對移動，因為相對移動較容易出現多次點擊會連續移動的bug。二者區別及適用情況需要在交互動作制作過程中多多體會。

動畫中有“揮動”“線性”“緩慢結束”“彈跳”等多種動作方式可供選擇，可根據實際需要進行設置。

5.同理，為“點擊返回”按鈕添加交互動作，點擊該按鈕后切換回之前的狀態

至此，推動切換效果制作完成.

轉載請注明：老二牛車教育???【axure手機原型】Axure實現iPhone推動切換效果

總結

以上是生活随笔為你收集整理的【axure手机原型】Axure实现iPhone推动切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。