Axure教程:長頁或長圖滾動效果

0 評論 29999 瀏覽 50 收藏 5 分鐘

如何利用Axure快速實現長頁手動拖拽特效呢?本文在這里為大家奉上了詳細教程,enjoy~

很久之前在一篇文章中通過文字回復過,利用Axure快速實現長頁手動拖拽特效的方式。后續陸續有私信問具體怎么做,光靠文字有人成功有人失敗。

說實話自己也好久沒有動手制作原型,這里將特效以詳細教程方式發出來,順便重溫下。

Axure版本8.0.0.3293。

成品展示

元件準備

  1. 首先在網上隨便找個手機框圖或者下個組件庫,再不濟就畫個框。
  2. 準備你的長頁內容,一張長海報、一個設計好的長頁面、一個簡單的矩形。

話不多開動

1. 上框,沒錯我是最不濟的框;

2. 上長頁;

emmmmmm,太水了我們換一個做的頁面吧~

好像也差不多,就這么著吧!

3. 設置固定區域:創建動態面板,長頁在這個區域內滑動。(長度要固定并記住,她=435)

4. 放入長頁

長頁可以在動態面板內直接寫,也可以引入其他做好的頁面。

我直接把他放到動態面板的State1中。(記住長頁的長,他=1116)

PS:你的長頁如果不是圖片而是頁面,一定要將其轉為動態面板,并且自動調整尺寸。這個位置可能會是你最終失敗的原因,留個坑,如果失敗了多看兩遍這句話。

5. 召喚你的小學數學老師

還記得她和他嗎?

她=435;他=1116;

他往上最高可以到=1116-435=681;

他往下最低可以到=1116(沒錯就是他自己)。

6. 給他上限制

a. 點到你的長頁上

b. 雙擊交互中的“拖動時”

第一步:添加動作“移動”;

第二步:選擇原件“你的長頁”;

第三步:移動選擇“存執拖動”;

第四步:點擊“添加邊界”;

第五步:設置頂部邊界:>= -681? (負數哈);

第六步:設置底部邊界:<= 1116;

完成,試試效果。

進階案例

做出滑到底部提示沒有內容后,頁面自動彈回的效果。下次有空再聊~

 

本文由@周關利 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!