Axure RP8 教程:實現高逼格的面板切換效果
如何利用Axure RP8 教程實現高逼格的面板切換效果呢?一起來文中看看~
瀏覽網頁時,我們經常看到整屏滾動效果的首頁設計,如招商銀行首頁:當鼠標上下滾動時,不同頁面進行翻頁展示。
此教程將講解如何實現此效果:
一、界面元件搭建
首先,拉入一個動態面板,命名為“內容”,再為其添加2個動態,為這三個狀態面板的添加一些元件,(狀態里面的元件內容隨大家喜好自行添加,主要是演示面板的切換效果),本教程的動態面板界面效果如下:
預覽效果如下:
二、交互事件實現
起初的想法,是想在【內容】動態面板上,添加【向上滾動時】和【向下滾動時】的交互事件;但是,由于面板的內容寬高是自適應的,沒有出現滾動條,因此,鼠標的滾動事件無法觸發。
最后想到通過添加另一個動態面板,命名為【控制面板】,設置寬高與內容面板一致,為其內容添加一個長高度的熱區,即能使面板出現滾動條。再添加【向上滾動時】和【向下滾動時】的交互事件來控制【內容】動態面板的切換。效果如下:
接下來,我們只需要將此這控制面板的滾動條隱藏即可,實現方法為:將此動態面板再轉化為動態面板,將此動態面板的寬度減少20,即少去滾動條的寬度。最終的實現效果如下:
作者:火星人~艾斯,公眾號:艾斯的Axure峽谷
本文由 @火星人~艾斯 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
評論請登錄
產品小白沒看懂復雜的交互設計,想從基礎開始學,卻無從下手?
可以找Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包
?? 領取原型設計大禮包,還有不定期的Axure免費視頻課程分享,老師在線答疑,多學多看多思考,你也能成為Axure原型設計大牛哦~
emmm,看不懂
求源文件