近一段時間以來工作的重心開始轉(zhuǎn)向產(chǎn)品方向，也學(xué)習(xí)了一些入門的Axure技術(shù)。今天自己動手用動態(tài)面版做了一個滾動頁面，正好以此為契機寫下我在簡書的第一篇文章，希望開始紀錄一下我的產(chǎn)品進階過程。廢話就不多說了，直接進入實操。

1、在Axure中添加兩個方框、一個動態(tài)面板分別命名為“頂部菜單”、“底部菜單”、“內(nèi)容”。這個名為“內(nèi)容”的動態(tài)面板就是我們接下來要操作的可拖動頁面。具體界面如下圖

2、接著雙擊“內(nèi)容”動態(tài)面板彈出“面板狀態(tài)管理”，選中“State1”確定進入面板編輯頁面：

3、然后我們在“內(nèi)容”面板的“State1”里面添加一個叫“拖動面板”的動態(tài)面板。說直白點就是一個動態(tài)面板嵌套另一個動態(tài)面板。用操作“內(nèi)容”動態(tài)面板的方法給“拖動面板”的其中一個狀態(tài)添加需要顯示卻又超出界面的長內(nèi)容，在這里我用方框隨便擺了個版面，最終得到的效果：

這時候我們回到最開始的頁面，看到的效果是這樣的：

4、選中“內(nèi)容”動態(tài)面板，給他添加交互：拖動時。給用例添加動作“移動”，配置動作選擇“拖動面板”，在配置動作的下方移動選項選擇“垂直拖動”，最后確定保存設(shè)置。點擊預(yù)覽已經(jīng)可以拖動內(nèi)容上下移動。

5、接著我們繼續(xù)完善拖動的功能，當(dāng)上下拖動時如果“內(nèi)容”面板不能拖離“頂部菜單”或“頂部菜單”，應(yīng)該是挨在一起的，如果拖遠了，當(dāng)鼠標松開時應(yīng)該彈回至“頂部菜單”或“頂部菜單”的邊上。我們給“內(nèi)容”添加“拖動結(jié)束時”的交互，打開用例編輯，點擊“編輯條件”

條件按下圖這樣選：遠件范圍 拖動面板 未接觸 元件范圍 頂部菜單。這些中文已經(jīng)很明顯，當(dāng)“拖動面板”沒有接觸“頂部菜單”時觸發(fā)下一個動作。

返回用例編輯，添加動作“移動”

配置動作選擇“拖動面板”，移動選擇“到達”，x坐標與y坐標都設(shè)為0。動畫選擇“線性”，時間這里設(shè)為200毫秒。確定保存。這時返回主界面點擊預(yù)覽我們已經(jīng)可以看到往下拖動時如果內(nèi)容已經(jīng)見頂，都會自動彈回到“頂部菜單”位置。

附上RP文件：
鏈接：http://pan.baidu.com/s/1mic2lwG 密碼：p3qe