Axure教程:滑動鼠標頁面自動切換(一)

32 評論 30349 瀏覽 61 收藏 5 分鐘

瀏覽網頁時,尤其是互聯網產品介紹方面的網站,經??梢钥吹?,當你的鼠標停留在某些頁面時,只要輕輕滾動鼠標,頁面就會自動切換,相較于傳統頁面的手動切換可以給用戶更好的體驗。今天就利用Axure8.0向下滾動的交互動作實現滑動鼠標頁面自動切換效果跟大家分享一下。注意Axure7.0沒有向下滾動的交互動作,請大家使用8.0進行同步操作。另外,我將使用幾張圖片來代替頁面進行示范,當然你也可以直接使用頁面。

GIF2

原材料:

春夏秋冬四張動態面板以及向對應的tu1、tu2、tu3、tu4四張小圖作為圖示,注意四張小圖合并在一起的高度要比單張動態面板的高度小。

tu1

方法/步驟

第一步:設置圖示組和選中狀態

同時選中圖片tu1、tu2、tu3、tu4—屬性—設置選項組名稱輸入“示意圖”—選中—勾選線段顏色“黃色”—勾選線寬(選擇較大寬度)—點擊確定

選中tu1—屬性—勾選選中(表示tu1在頁面載入時默認狀態為選中)

tu2

第二步:設置動態面板交互動作

依次選中動態面板chun、xia、qiu、dong,設置其向下滾動時(不同漢化版本翻譯可能存在差異)的交互動作如下圖。

tu3

第三步:設置圖示的交互動作

依次選中圖示tu1、tu2、tu3、tu4,設置其鼠標單擊時的交互動作如下。也可以直接復制動態面板的向下滾動時的交互動作到圖示的鼠標單擊時,應用關系依次是chun—tu2;xia—tu3;qiu—tu4;dong—tu1.

tu4

第四步:調整元件大小和位置

依次選中動態面板chun、xia、qiu、dong,縮小其動態面板的高度,使其高度與四張小圖合并在一起的高度一致。

依次選中動態面板chun、xia、qiu、dong,單擊鼠標右鍵—滾動條—自動顯示垂直滾動條;完成后你就可以看到動態面板右邊有一條滾動條出現。

tu5

同時選中圖示tu1、tu2、tu3、tu4,單擊鼠標右鍵—順序—置于頂層。

tu6

將動態面板xia、qiu、dong置于chun的下面,使四張動態面板完全重合地疊加在一起。同時,移動圖示tu1、tu2、tu3、tu4到動態面板chun的右側將其滾動條完全遮蓋。至此,已經全部完成,如下圖。

tu7

本文有一個很遺憾的地方,就是只能實現向下滾動頁面自動切換,無法實現向上滾動頁面自動切換。筆者嘗試過使用同樣的方法設置向上滾動時的交互動作,但結果是失敗的,因為動態面板滾動條性質決定了在沒有進行向下滾動時是無法進行向上滾動的。

筆者希望本文能對大家學習Axure起到綿薄之力,另外,若有哪位大神知道如何同時實現上下滾動頁面自動切換的希望能告知一下,謝謝!

原型分享

鏈接:http://pan.baidu.com/s/1c2kI5AK密碼:2nf3

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 把事情搞復雜了點,說實話

    來自云南 回復
  2. 預覽時 滾動一下,他就不停的在無限循環滾動。。。 ? 求解釋,下載了你的發現也是同樣的問題,難道是我瀏覽器的問題?

    來自本機地址 回復
    1. 你是預覽我做的,還是你自己做的???我的應該不會出現這種情況才對,試過很多遍了。如果是我做的那個,那你換個瀏覽器試試。

      來自本機地址 回復
    2. 預覽了你的,換了谷歌瀏覽器,都一樣的結果, ??

      來自本機地址 回復
    3. 谷歌瀏覽器應該沒有問題,我得晚上回去才能試試。對了,你可以自己調一下,在動態面板顯示這個交互動作前面加一個等待300mm的動作。

      來自本機地址 回復
    4. 加上后效果,第一輪滾動正常,再滾動還是會出現,只是延遲了300mm ??

      來自本機地址 回復
  3. 7 里面其實也有向下滾動的交互動作 “[[Window.scrollY]]” ,打個比方,設置參數if “[[Window.scrollY]]” > “0”
    and “[[Window.scrollY]]” <= "500",改變面板狀態即可,用一個動態面板的不同狀態就可以實現了

    來自浙江 回復
    1. 你可以試一下,看一下效果,而且記得用四張圖片一起試。

      來自北京 回復
    2. 鏈接:http://pan.baidu.com/s/1nvReuCh 密碼:2xvn
      而且可以解決你的上滑問題

      來自浙江 回復
    3. 這個不是我想要的,你這種做法我也想過,但存在缺陷。1.它用了這個頁面去做這個效果,移植性很差,想在哪個高保真頁面(尤其是一些產品介紹)幾乎不能用;2.它的鼠標滾動體驗不好,你設計時500像素,經常容易發生滾動了但沒有進行切換,如果設置再小一點的話又容易一次滾動多張圖片;

      來自北京 回復
    4. 那樣子的話用你的方法是不能上滑的,是存在bug?

      來自浙江 回復
    5. 這是暫時想不到辦法解決,不過也只有這樣做,才可以把它當做一個模塊,那個頁面需要可以直接拿過去用。

      來自本機地址 回復
  4. 失效了~~求鏈接

    來自上海 回復
    1. 鏈接:http://pan.baidu.com/s/1sl5r3v3 密碼:mw1l

      來自北京 回復
  5. 是建立了四個春夏秋冬的動態面板?而不是一個動態面板的四個狀態?
    還有百度云盤里的原型不存在哎╮(╯▽╰)╭

    來自浙江 回復
    1. 四個動態面板

      來自北京 回復
  6. 為什么做出來就一個圖能滑 而且對比后都一樣 ?

    來自四川 回復
    1. 那你下載我的原型文件可以滑動嗎?如果可以,那肯定是一些細節漏了。

      來自北京 回復
    2. 可以的 我兩個對比了 都一樣 ??

      來自四川 回復
    3. 一個圖能滑?是從第一張圖直接滑動最后一張圖嗎?另外,你用的是Axure8.0嗎?你再認真對一下吧,不只是交互動作要對一下,那些元件名稱也要對一下。

      來自北京 回復
    4. 好吧 我是秋能滑到冬 我是8.0的

      來自四川 回復
    5. 那你比一下其他圖片跟秋這張的有什么不同的,應該很快就可以找到問題所在的。

      來自北京 回復
    6. ?? 一樣都是電腦里的 格式什么都一樣 只有一張比較大 所以優化了 不過也不是秋那張

      來自四川 回復
    7. ?? 那圖片比動態面板大一點嗎?如果一樣大的話就滑動不了。另外你檢查一下動態面板有沒有設置成自動調整大小,如果設置了就取消,然后把動態面板的高度縮小一點。

      來自北京 回復
    8. 好了 原因是圖片大小比動態模板小了 我拖出去后就對了 謝謝你 ?? ??

      來自四川 回復
    9. 還發現一個不足,就是無法點擊滾動到的上一張,比如秋滾動到冬,然后點擊就無法選定秋

      來自四川 回復
    10. 好像真的存在這樣一個bug,最近比較忙,你可以先思考著怎么解決。多謝提出~

      來自北京 回復
    11. 遇到了跟你一樣的問題,但是我不太懂前面說的要小圖片拼起來要比動態面板小,但是下面又說把動態面板大小調到跟小圖片一樣高。我解決不了。

      來自廣東 回復
  7. 我用的是火狐瀏覽器,華碩的本……其他都挺順暢,就是預覽那個卡……生無所戀的感覺!可能跟本本有關

    回復
    1. 你安裝的是正版嗎?到官網上從新下一個

      來自北京 回復
  8. 嗯,我最近也在用這個8.0,很多效果都比上一代有著進步,唯一的不足就是預覽太卡

    回復
    1. 預覽卡?應該不會吧,你可以換個瀏覽器試試。

      來自北京 回復