概述
距離上一篇更新也過去了比較久的時間，因為公司最近一段時間的核心業務在于推廣，因此自己也會時不時跳出產品參與到推廣工作中來，再回到產品中來也有了不同的認識。因此最近這段時間的文章就簡單介紹下自己在近期利用Axure實現的一些簡單的功能以及實現方法。本篇是介紹利用Axure實現移動端頁面的拖動效果。
問題描述
我們在用Axure實現網頁端頁面原型設計時我們往往不用太擔心一個網頁的頁面很多很長怎么辦，因為到時候預覽原型的時候我們只需要用鼠標滾輪滾動便可以查看原型的全部內容而不用擔心它的顯示效果。
而當涉及到移動端原型設計的時候，就沒有這么簡單了。當我們想要在一個固定高度的手機殼中展示很多的內容的時候，如果碰到簡單粗暴的設計者，那我們的設計圖往往會變成下面這樣。
固定高度的手機殼里需要放很多的內容，于是我們就把手機殼一拉伸就好了。這很粗暴，能解決問題，但卻不那么美觀。如果能像我們真實使用手機一樣在一個固定高度的手機殼里用鼠標拖動頁面就好了。就像下面這樣的效果。
解決方案
我想這樣的問題應該很常見，所以相信Axure必然是有提供解決方案的。搜索后發現解決方法還是有很多的，我也參考了一些資料，就自己所采用的方法的操作步驟做一個簡單介紹。
核心思路
- 移動端顯示的頁面是固定尺寸的，因此我們需要使用一個動態面板，使它展示固定高度的內容。
- 我們需要展示的頁面的高度是超長的，因此我們需要把這個頁面放到第一點所提及到的動態面板中。
- 由于需要展示的頁面需要能被拖動，所以整個超長的頁面也需要是一個動態面板。
- 所以整體的實現方案是一個固定高度的動態面板中嵌套了一個包含整體展示頁面的動態面板。
- 我們拖拽移動端的頁面的時候，如果一直往下拖動直到脫離頂部再松手的時候，它一般會“彈”回到最上面的位置。同理，如果一直往上拖動直到脫離底部的話，它也會“彈”回到最下面的位置。所以我們需要設置離開頂部或底部時，自動返回原位的交互。
準備工作
我們需要準備一個固定高度的iPhone手機素材，一個頂部導航欄以及一個底部導航欄。這是基本的手機app的結構。
步驟一
我們需要添加一個固定高度的動態面板，這個面板相當于我們的屏幕，因此取名為「固定頁面」。
步驟二
編輯這個動態面板的State1狀態，在State1狀態中再添加一個動態面板，這個動態面板就需要展示所有的內容，我們就命名為「展示內容」，所以它的高度會超過「固定頁面」這個動態面板的高度。
步驟三
編輯展示內容這個動態面板的State1狀態，然后在編輯頁面中添加好相應的展示內容。
步驟四
在做好了上述的工作之后我們會發現手機的屏幕不足以展示所有的內容，所以我們接下來需要為我們的原型添加拖動事件。
首先為「固定頁面」這個動態面板添加拖動事件。
這樣的四步完成之后，我們的展示內容已經可以進行拖動了，只是和手機上的真實體驗還有些差距，離開頂部或底部后并不會回到相應的位置，我們接下來需要對其進行優化。
步驟五
為頁面添加離開頂部或底部后，松開拖拽后自動恢復到正確位置的效果。
首先需要為「固定頁面」這個動態面板添加拖拽施放(OnDragDrop)事件，并且設置這個事件發生的條件，如下圖所示。
接下來則是為這個事件添加相應的執行結果，需要將「展示內容」這個動態面板恢復到相應的位置。
這樣子設置完成之后當我們拖拽頁面脫離頂部導航欄的時候頁面已經能夠自動回復到正確位置。展示效果如下圖所示。
步驟六
接下來需要設置拖拽頁面脫離底部導航欄的時候頁面自動回復到正確的位置。設置的原理和上面的相似。
設置相應事件的條件
設置相應事件觸發的結果，值得一提的是，-115為「固定頁面」這個動態面板的高度減去「展示內容」這個動態面板的高度，我這里為316-431 = -115。
步驟七
非常細節的一小步，需要右鍵點擊Case2，將Else If轉換為If
總結
完成之后的Axure面板設置大概是下圖這樣子。
實現的效果如下圖所示。
個人感觸
這只是一個利用Axure實現了一個很簡單的功能，也就是移動端頁面的拖動效果，在實現過程中用到了動態面板，也利用到了一些基本事件的設置，包括條件的設置等等。我想雖然實現的功能并不復雜，但對于初學者來說這也是一個比較好的實戰案例。
