Axure高保真教程:鼠標(biāo)滾動上下翻頁效果
鼠標(biāo)滾動上下翻頁效果是一種常見的網(wǎng)頁交互設(shè)計(jì),它使得用戶可以通過鼠標(biāo)滾輪的滾動來實(shí)現(xiàn)頁面的上下翻頁操作。本文作者分享了如何在Axure中制作一鼠標(biāo)滾動上下翻頁的效果,一起來學(xué)習(xí)一下吧。
鼠標(biāo)滾動上下翻頁效果是一種常見的網(wǎng)頁交互設(shè)計(jì),它使得用戶可以通過鼠標(biāo)滾輪的滾動來實(shí)現(xiàn)頁面的上下翻頁操作。這種效果通常應(yīng)用于多圖片、或長頁面分頁瀏覽的情況,使得用戶可以方便地快速瀏覽內(nèi)容,提高用戶的交互體驗(yàn)。
今天作者就教大家如何在Axure中制作一鼠標(biāo)滾動上下翻頁的效果,我們會以鼠標(biāo)滾動切換圖片為案例。
一、效果展示
鼠標(biāo)向上滾動時(shí),切換查看上一張圖片;
鼠標(biāo)向下滾動時(shí),切換查看下一張圖片;
循環(huán)效果,如果在最后一張圖片繼續(xù)向下滾動,就會循環(huán)至第一張圖片;如果在第一張圖片繼續(xù)向上滾動,就會循環(huán)值最后一張圖片。
二、制作教程
1. 材料準(zhǔn)備
這個(gè)模板我們主要用到中繼器、圖片元件、文本標(biāo)簽、矩形來制作。
1)圖片的動態(tài)面板
我們先導(dǎo)入一張圖片,導(dǎo)入后鼠標(biāo)右鍵將圖片轉(zhuǎn)為動態(tài)面板,然后復(fù)制動態(tài)面板的狀態(tài),有幾張圖片就復(fù)制幾個(gè)狀態(tài),在每個(gè)狀態(tài)里一次打入對應(yīng)的圖片,這樣圖片的動態(tài)面板就完成了。
2)鼠標(biāo)滾動的動態(tài)面板
因?yàn)槲覀円獙?shí)現(xiàn)鼠標(biāo)滾動的交互,一般的元件沒有鼠標(biāo)向上滾動和向下滾動的交互,所以我們要用動態(tài)面板來制作,只有動態(tài)面板有這個(gè)交互。
我們在動態(tài)面板里增加一個(gè)矩形,填充顏色為透明色,這樣就不會遮擋與圖片了。因?yàn)槲覀円鰸L動的效果,所以動態(tài)面板里面的元件尺寸,一定要比動態(tài)面板高,這樣才會出現(xiàn)滾動條。所以我們把矩形的尺寸設(shè)置為19998,2萬是axure的極限,反正就是拉到最長,這樣可以讓他有足夠的滾動空間。
動態(tài)面板調(diào)出滾動條,高度和圖片一致,這里會默認(rèn)看到滾動條,案例中的滾動條是默認(rèn)隱藏的,所以我們需要用一個(gè)特殊的操作來隱藏,我們把動態(tài)面板寬拉大,直到滾動條在圖片右側(cè),然后我們再次將動態(tài)面板轉(zhuǎn)為動態(tài)面板,這樣就多了一個(gè)外面板,外面板選擇不顯示滾動條,寬高和圖片設(shè)置為一樣,放在圖片動態(tài)面板上方。這要就即可以有滾動效果,但是又不出現(xiàn)滾動條。
2. 設(shè)置交互
1)向下滾動的交互
鼠標(biāo)向下滾動時(shí),按理來說,我們只需用設(shè)置面板狀態(tài)的交互,就能將圖片設(shè)置到下一個(gè)頁面。
但是我們在這中間遇到了問題,這樣寫了之后會發(fā)現(xiàn),鼠標(biāo)向下滾動,會有很多張圖片切換,整個(gè)頁面很亂。這里面的原因是因?yàn)槭髽?biāo)向下滾動是一個(gè)持續(xù)值,有些人滾動一下可能持續(xù)0.1秒,有些人滾動一下可能1秒,就是沒有辦法一瞬間完成這個(gè)操作,導(dǎo)致這途中觸發(fā)了多次事件。
為了解決這個(gè)問題,我們就要做一個(gè)開關(guān)來控制,我們用個(gè)隱藏的文本標(biāo)簽就可以了,默認(rèn)值為0,如果值為0的時(shí)候,就是可以滾動切換的狀態(tài),一開始切換的時(shí)候,我們就要把開關(guān)的值設(shè)為1,然后在用設(shè)置面板狀態(tài)的交互,設(shè)置到下一頁,這里需要增加向上滑動的動畫,動畫時(shí)間可以自己設(shè)置,案例中是1秒。然后等待1秒時(shí)間,這里等待時(shí)間和動畫時(shí)間應(yīng)該一致。我們在把開關(guān)的值設(shè)置為0,這樣就相當(dāng)于重新打開開關(guān)可以繼續(xù)滾動切換圖片。
2)向上滾動的交互
鼠標(biāo)向上滾動是的思路和交互和上面向上滾動是的交互基本是一致的,唯一需要改的就是設(shè)置動態(tài)面板從下一項(xiàng)變成上一項(xiàng),動畫效果從向上滾動變成向下滾動。
然后我們會發(fā)現(xiàn)有一個(gè)問題,就是一開開始進(jìn)入,如果直接向上滾動時(shí)沒有效果的,因?yàn)闈L動條已經(jīng)在頂部沒辦法向上滾動,只有先向下滾動后才能繼續(xù)向上滾動。那如果一開始我們就想向上滾動該怎么辦呢?因?yàn)樵O(shè)置了循環(huán),理論上是可以向上滾動的。
這里我們要在動態(tài)面板內(nèi)矩形上增加一個(gè)錨點(diǎn),可以用透明的矩形去中,把錨點(diǎn)放在矩形中間的位置就是高10000點(diǎn)的位置,然后讓滾動條默認(rèn)滾動到中間錨點(diǎn)的位置,這樣向上向下滾動都沒有問題了。
3)動態(tài)面板載入時(shí)
前面講到我們設(shè)置了中部錨點(diǎn),要讓滾動條默認(rèn)滾動到中間錨點(diǎn)的位置。所以在載入時(shí),我們要用滾動到錨點(diǎn)的交互,讓滾動條滾動到中部的位置。這里也有一個(gè)問題,因?yàn)橄蛳聺L動的時(shí)候,就會觸發(fā)向下滾動的交互,導(dǎo)致圖片會不停滾動。
為了防止這種情況,我們可以默認(rèn)把開關(guān)控制值設(shè)置為1,這樣圖片就不會切換了,然后我們等待1毫秒,等待滾動到中部結(jié)束,然后用在開關(guān)控制值設(shè)置為0,打開開關(guān)。
這樣我們就制作完成了鼠標(biāo)滾動上下翻頁效果的原型模板了,下次使用時(shí),只需要在動態(tài)面板里修改頁面信息,替換圖片,如果需要增加文字或者其他內(nèi)容的話,也可以在動態(tài)面板對應(yīng)狀態(tài)里添加,添加完成后預(yù)覽時(shí)就會自動生成效果了,是不是很方便呢?
那以上就是本期教程的全部內(nèi)容,感興趣的同學(xué)們可以動手試試哦,感謝您的閱讀,我們下期見。
本文由 @AI產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
真實(shí)畫原型基本不需要這樣,簡單一個(gè)圖形就可以代表了