Axure教程:banner輪播最簡單的實(shí)現(xiàn)方法
本文給大家講一種banner輪播最簡單的實(shí)現(xiàn)方法,一起來看看~
前段時(shí)間做一個(gè)開放平臺(tái)的原型,大家討論完需求就希望,快點(diǎn)出原型(第二天),而且要求“高保真”。
于是在“快速”“高保真”的要求下,自己對(duì)于所有的頁面交互都要求是,對(duì)需要使用原型的用戶(產(chǎn)品、研發(fā)、測(cè)試)而言,達(dá)到對(duì)應(yīng)的效果,而自己在實(shí)現(xiàn)時(shí)采用最簡單的方法。
正巧今天看到網(wǎng)站上有教程教如何做一個(gè)輪播banner ,點(diǎn)開略看了一下,教程做的很復(fù)雜。其實(shí)使用axure做交互一般都比較簡單,但由于其各種小窗口太多了,各種截圖放一起,看上去很容易亂。之前小樓老師發(fā)布的一個(gè)教程,居然也被人吐槽講的這么亂怎么做產(chǎn)品(扶額)。
原型鏈接:http://eta1id.axshare.com/
1. 首先看下輪播banner的組成
上圖中,左邊是頁面 展現(xiàn)的 banner輪播的圖,右側(cè)則是對(duì)應(yīng)的兩個(gè)動(dòng)態(tài)面板。
可以看到右側(cè)動(dòng)態(tài)面板命名非常簡單(根本起不到提示作用,但這說明此處面板命名不太重要,自己能區(qū)分就可以)。
2. 接下來看一下兩個(gè)面板的交互效果
如上是對(duì)于 輪播圖片banner的 動(dòng)態(tài)面板設(shè)置。
設(shè)置面板在 【載入時(shí)】有交互,基本就是兩個(gè)動(dòng)作:
- 面板不是在一加載就開始切換的,我設(shè)置的先等待1000毫秒。
- 設(shè)置面板狀態(tài) 為【NEXT】(即按照1、2、3的順序進(jìn)行切換);
勾選從最后一個(gè)到第一個(gè)自動(dòng)跳轉(zhuǎn);勾選圖像輪播間隔。具體時(shí)間間隔可自己設(shè)置。
為了讓banner輪播看上去更逼真,可以加個(gè) 進(jìn)入和退出的動(dòng)畫。此處選擇的時(shí)向左滑動(dòng),用時(shí)500毫秒。
以上是banner 面板的全部交互。
做完這個(gè)切換之后其實(shí)基本算是banner做完了,但是總覺得缺點(diǎn)什么——缺我們常見的banner切換時(shí)的頁面指示導(dǎo)航按鈕。
依然是采用很簡單的方式 很暴力的加上的。
首先面板中的1、2、3狀態(tài)內(nèi)容如下圖:
其對(duì)應(yīng)的交互面板,基本和banner面板的設(shè)置是一樣的。唯一的不同是,在面板切換間的效果,這里不再是向左滑動(dòng),而是淡入淡出(畢竟三個(gè)指示按鈕滑來滑去,是很滑稽的)。
具體交互頁面如下:
額,說到這里,其實(shí)就沒了。
瀏覽最后再PO一下原型鏈接:http://eta1id.axshare.com/
本文由 @科大訊飛 小八原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
考古學(xué)家來了哈哈
還要加上鼠標(biāo)移上去,出現(xiàn)左右按鈕。 點(diǎn)擊小圓點(diǎn),立即跳到某個(gè)狀態(tài)
哈哈哈,這個(gè)帖子是重置更新了么?底下還有15年的評(píng)論
是的= =幾年沒登,前些天上來發(fā)現(xiàn)封面圖片被系統(tǒng)替換成了一張沙拉圖。申請(qǐng)修改了一下,結(jié)果就翻新了
整個(gè)輪播圖是由兩個(gè)動(dòng)態(tài)面板完成,都是自動(dòng)輪播,很簡單,很實(shí)用。
這個(gè)有代碼嗎
初級(jí)的表示看不懂
請(qǐng)問一下,AXURE 7 預(yù)覽時(shí)設(shè)置的淡出淡入效果無效,是軟件問題還是系統(tǒng)或?yàn)g覽器的問題?假設(shè)設(shè)置某個(gè)原件1秒淡入,則不顯示淡入效果,且等1秒后原件會(huì)突然出現(xiàn)。
鼠標(biāo)點(diǎn)擊某個(gè)圓點(diǎn),圓點(diǎn)點(diǎn)亮,圖片輪播到圓點(diǎn)對(duì)應(yīng)順序的圖片?
為同事鼓掌?。?!
對(duì)呀 這個(gè)做法明明有bug
沒有設(shè)置點(diǎn)擊事件
簡單易懂,真是非常感謝!
如果要加點(diǎn)擊效果的話應(yīng)該怎么弄啊?
我是菜鳥,想問問這種交互都是用什么實(shí)現(xiàn)的
大神,能給我郵箱一份嗎 657497137@qq.com
跪謝大神
也可以在對(duì)banner在做循環(huán)用例時(shí)一并把縮略圖或小圓點(diǎn)帶上,這樣就省得再單獨(dú)對(duì)小圓點(diǎn)添加用例了
恩恩吶,是的。 ?? 確實(shí)這樣更方便了。 ?? ??
看來自己以后在設(shè)計(jì)的思路上需要調(diào)整。因?yàn)楸容^習(xí)慣一邊做頁面呈現(xiàn),一邊添加交互效果。所以導(dǎo)致自己的動(dòng)效都是分離的。之前有看到一位大神的文章,說先畫頁面然后一把添加交互效果,恩這樣可能,很多效果實(shí)現(xiàn)起來會(huì)更高效。
謝謝你么么噠(*  ̄3)(ε ̄ *)
一看這圖片就是淘寶開放平臺(tái)的,樓主是淘寶的?
也可以把banner和縮略圖(或者小圓點(diǎn))合并為一個(gè)動(dòng)態(tài)面板做切換,當(dāng)然,這樣一來,動(dòng)畫效果也得一致
?? 這個(gè)之前腦補(bǔ)過,感覺banner 本身常用的還是左右滑動(dòng)之類的效果。但圓點(diǎn)滑動(dòng)就比較逗
小圓點(diǎn)在同一個(gè)動(dòng)態(tài)面板的話,小圓點(diǎn)得就必須跟著banner的圖一起左滑,這不太好吧。
這個(gè)還可以更簡單更完善,輪播圓點(diǎn)用選中方式實(shí)現(xiàn),而非動(dòng)態(tài)面板,好處是做一個(gè)圓點(diǎn),剩下的需要幾個(gè)復(fù)制幾個(gè),很快,另外就是可以添加點(diǎn)擊事件,即點(diǎn)擊圓點(diǎn)跳轉(zhuǎn)到相應(yīng)的banner
嗯吶是的,最開始的時(shí)候,我也是用選中做的 ?? ?? 。不過后來感覺動(dòng)態(tài)面板實(shí)現(xiàn)起來效果會(huì)比較好看。因?yàn)槭褂妹姘蹇梢宰鰣A點(diǎn)的淡入淡出效果。而且使用選中,需要設(shè)置選中和未選中的狀態(tài)。
我覺得這個(gè)還蠻重要的,因?yàn)槲液芏鄷r(shí)候獲取需要的界面就去戳那個(gè)小圓點(diǎn)
恩恩吶。 ?? 下次改進(jìn),加上手動(dòng)控制的交互
undefined
嗯吶,自己再重新去看也覺得沒有講的很清楚。axure軟件布局分塊比較多,一截圖就容易 讓人覺得看不明白 ??
第一次發(fā)表帖子。以后會(huì)注意 ??