起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：上下翻動效果制作步驟詳解
文章主要跟大家介紹，如何利用Axure制作上下翻動效果，一起來看看~
主要是用Axure做手機APP，內容翻動的效果如何實現：
- 讓內容在顯示區域滾動；
- 內容面板沒有接觸到頂部時，讓內容面板移動至頂部；
- 內容面板接觸到頂部，沒有接觸到底部時，把內容面板的底部定位到底部元件位置。
1. 元件布局
將頂部和底部矩形、動態面板顯示區域先放置好，設置相同的寬度，高度自定，無縫銜接在一起。
以頂部為例，從元件庫中選擇矩形1拉入畫板中，雙擊矩形編寫文字頂部，之后調整頂部的寬和高，如果寬和高固定了，你點擊上圖步驟4中箭頭所指位置的藍色小點，去除鎖定即可修改，最后在右下角頁面中雙擊矩形命名為頂部，同理可得底部。
顯示區域是動態面板同樣是從元件庫中選中拉入畫板中，命名方式有兩種，1種在面板選中的情況下，直接在右上角3的區域填寫；第2種則是在右下角頁面處雙擊動態面板彈框中命名，如右下角的3區域。
顯示區域除了長寬要設置，還有最左上端的坐標，要承接頂部最坐下端坐標，X軸為0，Y軸為頂部高。
內容區域也是動態面板，但是，生成方式跟顯示面板不同，敲黑板這部分是關鍵，初學看了其他的教程摸索很久才弄懂。內容區域是在顯示面板的state1里面實現的，雙擊state1進入，然后從元件庫拉入新的畫板中。設置內容畫板寬度同其他元件，高度比顯示區域大。圖中忘了截圖內容區域命名后的，別忘了要命名。
2. 填充內容面板
雙擊內容面板中的state1，填充一些元素，方便查看滾動效果，記得操作完要回到首頁。
3. 添加事件
1）讓內容在顯示區域滾動
2）內容面板沒有接觸到頂部時，讓內容面板移動至頂部；意思是你拉下來頁面，讓內容面板上部沒有接觸到頂部時，會自動回到頂部。
先編輯條件，內容面板未接觸頂部時；
讓內容面板移動到頂部，即絕對位置。
3）內容面板接觸到頂部，沒有接觸到底部時，把內容面板的底部定位到底部元件位置。
先編輯條件，內容面板接觸到頂部，但未接觸底部。
讓內容面板移動到底部，移動距離=顯示面板高度-內容面板高度（為負數）。
確認之后預覽即可。
本文由 @粉小妞Holly 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
看完一篇原型設計文章啦，感覺還是不太會？
想從0基礎開始學習Axure么？推薦你找Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：大禮包
?? 領取原型設計大禮包，多學多練，你也能成為原型設計高手哦！