axure制作移動端產品原型時,會遇到很多難題,建議產品同事嘗試壹些諸如mockplus等更適合移動端的原型設計工具.當然,axure是完全能夠實現移動端交互的,只是我們需要利用動態模板、坐標定位等等方式靈活的實現目標.
接下來進入主題,跟小夥伴們分享壹下如何利用axure實現移動端頁面拖動展示效果
打開axure前,小夥伴們不妨先設想壹下任務的實現方法：
1、移動端顯示的頁面是固定尺寸的,裏面的整體頁面可能會超出固定尺寸範圍,所以我們需要建立壹個動態模板,使其成為固定尺寸的頁面,而把超長的整體頁面放入其中.
2、整體頁面必須能夠被拖拽,所以整體頁面又是壹個動態面板
3、在我們使用移動端產品,進入頁面後,向下拖拽,壹般頁面會被下拉,而且上方會出現放開刷新的提示；同理,我們手指上滑,頁面被拖至底部,再不停上滑,頁面會被上拉,手指放開後,頁面下滑至原位.所以我們axure中對整體頁面的動態模板需要設置離開頂部或者離開底部時,自動返回原位的交互
這三個實現方法,是我們實現拖動交互的主要思路.接著我們就具體看壹下如何在axure中實現目標.
1、準備工作：打開axure,新建文檔,添加壹張iphone的背景素材,頂部添加的wifi和電量的信息,以及頂部導航欄（這些素材百度都能夠找到,ios8 UIkit）,準備工作完畢
2、添加壹個動態面板,這個面板相當於我們的屏幕,所以名字能夠稱為“固定頁面”
3、動態面板內再添加壹個動態面板,這第二個面板相當於我們要展示的內容,需要拖動才能展示整個內容,長度自然也比“固定頁面”要長,能夠稱之為“長內容”
4、長內容的面板內添加正文內容,這裏我添加了壹張圖片
5、接下來先實現長面板的拖動功能,在固定頁面內對長內容面板添加onDrag交互,交互的內容是move,而且move with y,也就是長面只能沿著Y軸拖動
6、拖動功能已經實現,我們能夠先預先瀏覽壹下已經完成的效果（點擊axure操作欄的preview按鈕）,嘗試著上下拖動圖片,結果符合預期,只是拖動後,圖片不可以復位,那麽接下去就要實現復位的功能
7、為了實現復位,我們需要在固定頁面的頂部和底部添加兩個判斷用的矩形.頂部的矩形我們暫且稱之為“上離開判斷區域”,顧名思義,當長內容面板向下拖動,離開“上離開判斷區域”,長內容需要move到原始的"0,0"坐標,這個交互我們稱之為“下拉復位”.判斷區域能夠設置為透明,與長內容同寬,高度為象征性的2px
8、選擇長內容面板,在onDrag動作中添加新的交互“下拉復位”,增加觸發條件：當area of widget 長內容 is not over area of widget 上離開判斷區域.那麽首先wAIt 400ms,接著move 長內容,編輯結果 move to X：0 Y：0.
註意：編輯完下拉復位後,這裏有壹個很重要的改動,在交互欄中,右擊把“下拉復位”的else if條件修改為if.必須這樣做,不然下拉復位的動作沒有辦法實現.至於這樣做的原因,就留給小夥伴們思考吧.
9、上拉復位的動作完成後,我們還要實現下拉復位.首先我們添加壹個判斷框,邊框與填充均為透明,尺寸為長內容的寬度與象征性的2px,定位於固定頁的底部
10、在實現下拉復位的時候,我們給長內容的復原位定為X：0和Y：0,這個很容易理解,長面板向上復位時肯定移動到（0,0）的位置.但現在實現上拉復位,我們需要計算長面板的高度,這是由於長面板拖到底部後,固定頁面顯示的是長面板的下部分內容.這裏可能有些費解,看我的截圖也許能幫助理解
11、經過上壹步的操作,我們得知當整個長內容顯示到最底部時,整個長內容的定位為（0,-295）,接下去就和實現下拉復位壹樣了,在交互欄onDrag動作中添加交互“上拉復位”,添加觸發條件 當area of widget 長內容 is not over area of widget 下離開判斷區域.那麽首先wAIt 400ms,接著move 長內容,編輯結果 move to X：0 Y：-295.
編輯完上拉復位後,在交互欄中,右擊把“上拉復位”的else if條件修改為if.
12、全部條件編輯完畢,查看壹下交互欄onDrag動作中的全部交互
13、大功告成,趕緊運行壹下觀察效果
總結：
利用axure實現移動端最基本的上拉與下拉動作是如此復雜,所以我還是建議利用其它原型工具制作移動端原型.然而即便如此,axure還是有其優勢,實現靜態的頁面要比其它原型工具都要便利.
?