Axure教程:如何實現移動端屏幕中內容滾動效果

11 評論 21336 瀏覽 46 收藏 5 分鐘

Axure技巧中,APP端的內容滾動效果是一個很基礎的交互。之前也有很多大牛分享過如何操作,今天分享的是更為簡單的方法,希望對大家有用。

兩種實現方式

實現方式1

要點說明:使用兩個動態面板和兩個熱區實現的,外面的動態面板做移動端窗口,內嵌一個動態面板,里面要放的所有的內容(可以很長很長),窗口頂部和底部分別一個超小的熱區,然后通過鼠標的位置和熱區的位置判斷是否讀到了頁面的底部或頂部,一旦到了就移動內部的動態面板,從而實現看到第N屏的內容

實現過程:參考此鏈接:http://blog.csdn.net/qwsx789/article/details/46516153(找不到自己當初參考的鏈接了,基本就是這個方法,有興趣的可以進去看一下);還有個更復雜的辦法:https://www.zhihu.com/question/20417830(我沒有嘗試過,看著就蠻麻煩的)

缺點:方法真的蠻復雜的,我大概只實現了70%,有了基本的演示效果,就沒有實現全這個功能了。最大的缺點在于修改原型的時候真的蠻痛苦的,要點進窗口動態面板,再點進內嵌的動態面板,再點進對應的狀態,再修改。。。OH NO。。。

實現方式2(簡便)

方法來源:之前報了個起點學院的課程,里面的一個BAT大神級別的資深產品經理教的(大神都這么用,大公司都這么用,嗯,我們肯定也可以這么用。關鍵是? 這個方法真的是**的簡便?。?。

要點說明:直接使用(Axure8)動態面板的“自動顯示滾動條”功能,然后找個能跟你的原型想融合的矩形/圖片,把滾動條擋住就OK了。(我感覺我說完這個后面就不用寫了,真的是太簡便啦。你是不是已經會了?)

實現過程:

1.拖一個手機框、拖一個動態面板;

2.編輯動態面板的state1,往里面任性的塞內容吧;(注意寬度)

3.設置動態面板“自動顯示滾動條”

4.按F5預覽效果,發現有滾動條;

5.把手機的右邊框截圖,然后作為圖片素材;拉寬動態面板,讓滾動條區域到手機屏幕區域的右側,再把手機右邊框圖片素材置頂,蓋住會顯示滾動條的部分;

6.按F5預覽效果,“以假亂真”,又真又簡單。

好了,結束。

 

作者:淺若伊淚,一只仍然還在入門的產品小白~

本文由 @淺若伊淚 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Unsplash ,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 666~

    來自重慶 回復
  2. 如何自動滾動

    來自北京 回復
  3. 我一般都是用函數。。。 先是動態面板內嵌一個動態面板,然后里面的面板設置可沿Y軸拖動,當Y小于某個像素時,移動面板到那個像素,當Y大于當前像素時,移動回當前像素,然后就能用鼠標按住拖動了,在手機上也能用手指模擬劃屏。

    來自北京 回復
  4. 然而當動態面板有多個狀態時這個方法就不管用了

    來自廣東 回復
  5. 為什么我的預覽效果沒有那個滾動條啊

    來自廣東 回復
    1. 是不是因為內容沒用填充滿一頁,要內容夠長。會自動顯示出滾動條的。

      來自江蘇 回復
    2. 對的 謝謝

      來自廣東 回復
  6. 動態面板里再套一個動態面板,內容放在里層那個動態面板里。把里層的動態面板縱向滾動條點出來,然后滾動條的部分拉寬一些超出外層的動態面板預覽的時候就看不到了。為我打Call :mrgreen:

    來自北京 回復
    1. ?? 為你打call

      來自江蘇 回復
    2. 好棒

      來自廣東 回復
  7. ?? 厲害

    來自浙江 回復