Axure實現(xiàn)兩種滑動的方式(附源文件下載)
最近在計劃連載一下關(guān)于axure中繼器的一些教程,通過動態(tài)面板,函數(shù),中繼器來強化和交流一下對產(chǎn)品的一些看法。我個人的觀點是動態(tài)面板對應(yīng)產(chǎn)品的交互設(shè)計、產(chǎn)品架構(gòu);函數(shù)對應(yīng)產(chǎn)品的業(yè)務(wù)邏輯,判定等;中繼器對應(yīng)數(shù)據(jù)結(jié)構(gòu),數(shù)據(jù)類型等。
光說理論多沒意思,跟我一起吧,通過一邊看教程一邊加深對產(chǎn)品的理解吧。
其實這一篇和中繼器關(guān)系不大,主要是通過動態(tài)面板來設(shè)置兩種滑動方式。
第一種:偏PC端,用滾動條的方式,滑動鼠標(biāo)滑輪就可以實現(xiàn)(注意觀察圖中的光標(biāo)位置沒有變化)。
滑動鼠標(biāo)滑輪
第二種:偏移動端,準(zhǔn)確來說應(yīng)該叫拖動。按住鼠標(biāo)左鍵,上下拖動。(注意看光標(biāo)一直在移動)
按住鼠標(biāo)左鍵拖動
OK,廢話不多少。一步一步來吧,畢竟滑動效果在日常的工作中是經(jīng)常會用到的。
一、PC滑動效果的實現(xiàn)
首先,我們有了一個很長很長的中繼器(320*868),小伙伴也可以用一張很長很長的圖代替,其實是一個道理。我用的是iphone5的頁面尺寸(320*568),超過了頁面尺寸,所以我們要來做一個滑動效果。
中繼器
然后我們在中繼器的旁邊,拖入一個動態(tài)面板(320*568),就像下面一樣:
中繼器+面板
接著,我們來設(shè)置一下動態(tài)面板的屬性,滾動條——自動顯示垂直滾動條(圖片為初始值)
設(shè)置滾動條
面板就變成了下面這樣:因為滾動條占據(jù)了一定的寬度,我們就把面板拉寬一點點(具體多少后面可以調(diào)整)
右側(cè)有滾動條的面板
然后將中繼器放入動態(tài)面板(中繼器坐標(biāo)為0,0)中,如下圖:
中繼器進入了動態(tài)面板
然后我們F5看看效果,試著將鼠標(biāo)指針移入頁面內(nèi),上下滑動鼠標(biāo)滑輪:
實現(xiàn)了滾動
這樣就實現(xiàn)了滾動,但是有個滾動條是不是很丑?沒關(guān)系,看最后一步:
在這個裝有中繼器的面板旁邊,再放一個面板(320*568),這個面板作用就是遮住滾動條,如下,
兩個面板
最后再將右邊裝有中繼器的面板放到左邊的面板內(nèi),再點擊F5:
沒有滾動條了
OK,學(xué)一種滑動的伙伴們就可以看到這里了,這種比較簡單,也能模擬出常規(guī)的滑動效果,而且可以在手機端演示。還有一種滑動,有興趣的一起看看吧。
第二種:手機端,拖動滑動效果
首先我們在中繼器的旁邊,拖入一個大小相同的動態(tài)面板。(我的中繼器大小為320*868),如圖所示:
左側(cè)面板,右側(cè)中繼器,大小相等(面板尺寸也為320*868):
然后將面板命名為:content,再將中繼器拖入面板中,如下圖:(動態(tài)面板的狀態(tài)一修改為repeat)
中繼器放入面板中
然后在裝有中級器的動態(tài)面板旁,拖入一個動態(tài)面板,尺寸為顯示界面的大小(320*568),命名為view。如下:
兩個面板
再將裝有中繼器的面板,放入到view(320*568)中,如下:
套入面板
然后需要我們來添加用例:
解釋:為view(320*568)面板添加用例,拖動時,移動面板content(裝中繼器的面板320*868),設(shè)置移動方向為垂直移動。
這樣就有了拖動的效果,我們再為它添加邊界:
添加邊界
解釋:在拖動view(320*568)的過程中其實是拖動content(320*868),所以我們要為content面板移動的距離添加邊界。上邊界下滑不能離開頂部,所以我們設(shè)置邊界(頂部小于等于0),即上邊界只能往上滑;下邊界上滑的界限是content面板和view面板的底部在同一y軸,則其頂部的最高位置為(868-568),因為在負軸所以是-300。
總結(jié):兩種滑動各有優(yōu)劣,個人認為第一種更簡單,第二種更逼真。
源文件下載:
作者鏈接:http://pan.baidu.com/s/1c1KIia??密碼: dfec
官方鏈接:http://pan.baidu.com/s/1eSwmW18 密碼: hatx
作者:浩程君。簡書:七光年。
本文由 @浩程君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
樓主,鏈接失效了,求原型材料 1204880964@qq.com
謝謝,找了半天終于解決了
樓主,源文件,麻煩分享一下,935612434@qq.com
沒看懂,希望有個視頻分享
還是不會 ?
我覺得用不著中繼器,就動態(tài)面板就夠了。主要是選擇自動顯示滾動條!然后為了不看到輪動條,用矩形擋住輪動條就可以了!
感謝分享,學(xué)習(xí)了~
非常詳細,已經(jīng)學(xué)會,感謝分享!
贊!期待教程~
我閑的時候會這么做原型,不是創(chuàng)新型的交互樣式建議直接給范例給程序。做產(chǎn)品有一個問題,以為自己做了一個原型就是原創(chuàng)一樣的。以項目推進效率為第一位。另外用小樓的組建直接貼圖進去就可以拖動了,如果是滾動,直接做用 frame去掉側(cè)邊欄就好了
哦,造輪子的事我盡量少做,但是輪子是怎么造出來的我還挺好奇的。
非常棒,期待連載~!
不錯不錯
搓搓搓是我的搓