如何用 Axure 製作類似的手機滑屏效果原型？

在一款APP的原型設計時需要進行模擬手機滑動屏幕的效果，所以在網上搜到了這樣一篇文章《

Axure表達android手機的劃屏操作 》，連接：

http://blog.sina.com.cn/brotherhu111

但是博主給出的步驟太簡單了，並且附件也沒法下載，所以這個問題一直沒有解決，知道知乎里高手特多，特來請教！

如有做好rp文件希望能夠給發一份，萬分感謝！

郵箱：316wangfei@sina.com

---

hello~被抓過來回答問題，正好閑來無事（呸，一堆項目積壓著呢），就自己做了一個模型，下邊來介紹一下流程咯~

看提問的意思應該是想做類似手機桌面上的那個劃屏效果吧，所以我姑且就認為你問的是這個，開始介紹實現方法：

1. 新建一個動態面板，一個狀態就夠了，也不用添加任何動作，尺寸的話就是你的APP的尺寸咯，可以給他命個名，如圖：

   

2. 在剛才建立的動態面板內部再添加一個動態面板，這個動態面板也是只需要一個狀態，尺寸根據你的需求來定，比如你劃屏的內容有兩屏，那這個面板的尺寸就是剛才那個面板的兩倍大（橫向尺寸），我在模型里用三屏舉例，如圖：

   

3. 然後還是在這個頁面，添加一個圖像熱區，位置的話就放在第一級動態面板的中軸線上（就是這個頁面的藍色框的中軸線），熱區的形狀盡量小一些，防止之後在拖動的時候會不小心點到了，如圖：

   

4. 然後在第二步建立的那個比較大的動態面板內部，再添加三個動態面板，這三個動態面板就是要滑屏的不同頻幕了，我這裡以123來區分（其實上邊兩張圖大家都已經能看見了，就是那三個動態面板），所以就不上圖了；
5. 到這裡，部件的建立就完成了，部件的層級關係給大家看下，如圖：

   

6. 然後就是在第二步建立的比較大的動態面板上添加動作了~ 第一個是先在OnDrag動作下添加移動這個比較大的動態面板的動作，方向的話就是沿著X軸；然後就是在OnDragDrop下添加動作：這裡需要三個用例來分別區分下當拖動停止時，屏幕停留在第幾屏，具體的如圖：

   

關於拖動停止時的動作再詳細說下，就是通過第四步建立的那三個動態面板的位置來判斷當前的屏幕應該停留在第幾屏，然後來執行移動的命令來把他們精確的停在那個位置，位置的判斷是通過條件里的「部件的範圍」來實現的，具體如圖：

這個就是判斷位置的條件，翻譯一下就是看，動態面板「1」（就是第一屏）的範圍是不是和之前那個添加的熱區重疊，如果是重疊的狀態就說明當前應該停留在第一屏；所以就執行下圖的動作，移動較大的動態面板到指定的位置（0,0）因為是第一屏，所以就是初始位置，同理第二屏和第三屏就是最後的位置不同。

以上，另外rp文件已經發送到郵箱地址了~

PS.只是我個人的解決辦法，提供參考而已~

---

不要太複雜：

1.設置2個動態面板 外面的是窗口 裡面的是內容

圖1：2個動態面板展示，記住這只是展示你不要放在一個層面上，應該是包含關係

圖2：包含關係目錄示意

2.設計交互事件

接下來看一下設計交互事件的界面

3.按F5 演示

源文件下載：http://www.iamue.com/7427

---

直接ondrag y軸的移動即可

---

略微麻煩了些，其實可以設置一個主面板，一個次面板嵌套，次面板設計滑動頁面；此外根據設置的hot spot 來判斷定位到第個頁面。

---

axure 7可以實現手機上的左滑右滑手勢操作，效果早有基本的一些移動了。但是建議別太在意做這些效果，細節方面溝通比較高效。

---

axure 6.5已經支持了，動態面板，ondrag

---

試試我們團隊專門針對移動應用的在線原型工具墨刀吧，在線編輯，實時手機查看，一鍵分享，還有多種手勢及頁面切換支持，5分鐘快速上手。

網站地址： https://modao.io

界面大概是下面的樣子：

---

推薦閱讀：