網頁上 Dynamic Panel 用途

Jerry Kitty Hsu
Axure Geek
Published in
3 min readApr 19, 2018

動態面板真的是 AxureRP 一個很棒的東西,雖然影響了不少網頁效能,但是多用途的切換真的是非常方便,今天就來介紹一下什麼狀況會用上Dynamic Panel

Banner

製作網站上,Banner是不可或缺(?的元素,有了動態面板切換啥的都不是太大的問題,最重要的就是設定尺寸就好

在 Dynamic Panel 底下設定層級,五張 banner 就可以快速的出現
動作上的設定也很多元,甚至動畫都設定好給你了,自動輪播也不是問題

全站跳窗

Dynamic Panel 有個好處就是切換狀態,所以我們可以在網站規劃階段,可以設定一個全站共用跳窗,呼叫時再切換 Panel 狀態

設定好狀態,切換 Panel state 就完成一體適用的全站跳窗

浮動功能

只有 Dynamic Panel 才有 Pin To Browser 的功能

所以在設計如浮動廣告或是浮動購物車的狀況下,Dynamic Panel 就必須派上用場,不過固定得比較不自然

Pin To Browser 功能可以設定任何視窗上的位置

圖片遮罩

在 Panel 裡的圖片物件會被上層的可視範圍裁切,會使用到這功能的狀況不多,之後在 RWD 上會使用到更多

藍色虛線就是Panel的可視範圍,在這以外都不會在 Dynamic Panel 上層顯示

動畫

這是一個比較高深的功能,是利用多張 Panel 作為影格與自動輪播的兩個功能去處理一連串動畫動作,常會用的除了 Loading 動畫可以處理,還有一些網頁上的動畫也可以用 Dynamic Panel 完成

動畫網址 https://yzo287.axshare.com/home.html

之後會有更多 Dynamic Panel 實作應用會出現在其他教學中,敬請期待

如果喜歡 Axure Geek 的內容,請用 👏 給我們支持與鼓勵,能分享更好!
最多可以 👏 50下哦!

--

--