中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

動態(tài)面板可以讓實際操作人員通過簡單的配置，就能實現(xiàn)相對豐富的效果。那么在實際設(shè)計中，有哪些模塊可以利用動態(tài)面板來實現(xiàn)？本篇文章里，作者做了拆解和分析，不妨一起來看一下。

【動態(tài)面板】是 Axure 中另外一個神級的元件，它的江湖地位可以說跟【中繼器】不相上下，【動態(tài)面板】提供了簡單的配置，卻可以實現(xiàn)非常豐富的效果，在實際設(shè)計中應(yīng)用非常廣泛。

對于剛?cè)腴T的產(chǎn)品經(jīng)理來說，學(xué)習(xí)【動態(tài)面板】要比學(xué)習(xí)【中繼器】容易得多，基本很快就能上手，但是很多人學(xué)習(xí)完之后不知道什么地方可以用到【動態(tài)面板】，可以使用哪些屬性來更加輕松地完成設(shè)計，所以，今天分享一些簡單的案例，基本都是用其他元件做起來非常費力，甚至實現(xiàn)不了，但用【動態(tài)面板】卻可以輕松完成的設(shè)計，所以說，對于很多復(fù)雜的設(shè)計而言，動態(tài)面板就是一次“救贖”。

一、導(dǎo)航欄

以人人都是產(chǎn)品經(jīng)理網(wǎng)站首頁為例，我們從下圖可以看到，當(dāng)我們左右調(diào)整窗口寬度的時候，導(dǎo)航欄的背景（白色通欄）會跟隨寬度一起調(diào)整，上下滾動的時候，導(dǎo)航欄始終固定在頁面頂部：

接下來我們用【動態(tài)面板】來實現(xiàn)一下這個效果。

首先在 Axure 工作區(qū)拖入一個動態(tài)面板，如果動態(tài)面板中沒有放任何內(nèi)容的話，在頁面中是看不到的，所以這里我們給動態(tài)面板加一個填充色（頂部工具欄無法直接給動態(tài)面板填充顏色，只能通過【樣式】工具中的【填充】板塊進行設(shè)置，也可以填充圖片）：

接下來為了在頁面中能夠滾動，我們需要讓頁面的內(nèi)容超過瀏覽器高度，這樣瀏覽器才會出現(xiàn)滾動條，能夠進行滾動，這里的頁面內(nèi)容我們用【占位符】代替：

看一下網(wǎng)頁中的效果：

可以看到，通欄沒有占滿瀏覽器寬度，滑動頁面的時候也不能固定在頂部。別急，我們還需要進行一些設(shè)置。

首先我們在【樣式】中勾選【100%寬度】：

接著我們點擊下方的【固定到瀏覽器】，在彈出的設(shè)置窗口中勾選【固定到瀏覽器窗口】，選擇【左側(cè)】：和【頂部】，勾選【始終保持頂層】：

再次預(yù)覽效果，就可以看到，通欄占滿瀏覽器的寬度，并且可以隨著瀏覽器寬度自動調(diào)整，滾動頁面時，通欄也會固定在頁面頂部：

為了讓大家更好地體會到【固定到瀏覽器】這個功能，我再舉一個例子，還是人人都是產(chǎn)品經(jīng)理的某個頁面的通欄，我們可以看到，當(dāng)我們對瀏覽器窗口寬度進行縮放的時候，頭像并不會始終固定在某個位置，而是會貼著瀏覽器邊緣動態(tài)變化：

我們在剛剛的基礎(chǔ)上進行修改，實現(xiàn)這個效果。

我們再拖入一個動態(tài)面板，放在通欄右邊，填充一個底色：

接下來再設(shè)置它【固定到瀏覽器】，這次選擇固定到【右側(cè)】，【邊距】設(shè)置10，不完全貼著右側(cè)，同樣固定在頂部不變，Axure 已經(jīng)自動根據(jù)元件位置設(shè)置好頂部邊距：

預(yù)覽看看效果：

二、輪播圖

先看一下實際的網(wǎng)站效果，同樣也是來自人人都是產(chǎn)品經(jīng)理網(wǎng)站首頁：

輪播圖發(fā)展至今，每個網(wǎng)站的產(chǎn)品經(jīng)理都在竭盡所能設(shè)計出自己的風(fēng)格，但說到底，輪播圖的核心，就是多張圖片的切換，其中包括了【自動切換】、【手動切換】和【指定切換】，接下來我們用動態(tài)面板來實現(xiàn)這個功能。

首先還是拖入動態(tài)面板，并在面板左右添加兩個按鈕，分別用來手動切換【上一張】和【下一張】圖片：

接著雙擊動態(tài)面板，進入動態(tài)面板編輯頁面：

在這里我們可以看到動態(tài)面板的【狀態(tài)】，默認給了一個狀態(tài)，我們可以添加多個狀態(tài)，并在每個狀態(tài)中放入一張輪播圖（一般輪播圖設(shè)計建議是3-5張）：

添加完點擊右上角【關(guān)閉】回到主工作區(qū)，接下來給切換按鈕添加【單擊時】【設(shè)置面板狀態(tài)】事件。

以下是【上一張】按鈕的事件，點擊的時候切換【上一項】（也就是動態(tài)面板的上一個狀態(tài)），這里勾選了【向前循環(huán)】，表示可以直接從第一個狀態(tài)切換到最后一個狀態(tài)，然后我們給切換設(shè)置一個動畫效果，常規(guī)切換上一張就是當(dāng)前的圖向右滑出，上一張圖片向右滑入，所以這里我們設(shè)置進入動畫是【向右滑動】，時間是【500毫秒】，用【線性】動畫即可，退出動畫會自動匹配合適的效果：

下一張的設(shè)置類似，但是注意切換的是【下一項】，并且動畫效果也是跟上一張相反的：

預(yù)覽看看效果：

【手動切換】功能就做完了，點擊按鈕可以前后切換圖片，并且可以循環(huán)切換，在【第一張圖】再次點擊【上一張】的時候，可以切換到【最后一張】（第三張圖）。

接下來我們來做【自動切換】，給【動態(tài)面板】添加【載入時】【設(shè)置動態(tài)面板】的事件，由于【自動切換】一般都是切換到【下一張】，所以這里設(shè)置的事件跟【下一張】按鈕的事件基本相同，但注意這里不同的地方是，我們需要設(shè)置【循環(huán)間隔】，這里的意思就是每隔【3000毫秒】自動切換，同時這里需要勾選【首個狀態(tài)延時切換】，如果不勾選，頁面一上來就切換到第二張圖，用戶就看不到第一張圖了：

預(yù)覽看看效果：

【自動切換】也做完了，最后來做【指定切換】，指定切換一般需要搭配【指示燈】使用，就是如下所示的圓點，用來指示當(dāng)前在第幾張圖片，也可以通過點擊切換到對應(yīng)的圖片。

我們在工作區(qū)繪制3個圓點作為【指示燈】：

接下來給【指示燈】添加【單擊時】【設(shè)置面板狀態(tài)】的動作，在狀態(tài)這里直接選擇切換到對應(yīng)的狀態(tài)，比如第一個圓點對應(yīng)第一張圖，也就是狀態(tài)1，以此類推：

3個【指示燈】都設(shè)置完之后，就可以在幾張圖中任意切換了：

這個輪播圖還有點小問題，第一個就是【手動切換】或者【指定切換】之后，【自動切換】會失效，這是因為這幾個地方的事件沒有【循環(huán)間隔】的設(shè)置，這個給【上下翻頁】和【指示燈】的【單擊時】事件加一個【觸發(fā)事件】，觸發(fā)動態(tài)面板的【載入時】事件即可，這樣，每次【手動切換】或【指定切換】之后，都會重新觸發(fā)一次【自動切換】的動作：

另外一個問題就是這個輪播圖的【指示燈】沒有辦法指示當(dāng)前所在的圖，也需要進行相關(guān)設(shè)置，首先選中3個【指示燈】，【右鍵】選擇【選項組】：

在彈出的選項組彈窗命名為【指示燈】并確定：

接下來給【指示燈】添加【交互樣式】，選中3個【指示燈】，右側(cè)找到【交互】面板，點擊【添加交互樣式】：

選擇【元件選中樣式】：

這里我們加個填充顏色即可：

接下來給【動態(tài)面板】添加【狀態(tài)改變時】的交互，然后根據(jù)【面板狀態(tài)】的不同選中對應(yīng)的【指示燈】圓點即可：

最后，因為頁面剛載入時，已經(jīng)在第一張輪播圖，但是還沒有發(fā)生狀態(tài)的變化，所以【指示燈】都不會“點亮”，所以需要默認選中第一個【指示燈】，選擇第一個【指示燈】，【右鍵】選擇【選中】即可：

預(yù)覽看看效果：

三、頁簽Tab

頁簽在網(wǎng)頁設(shè)計中應(yīng)用非常廣泛，這里以人人都是產(chǎn)品經(jīng)理首頁社群板塊為例：

點擊標(biāo)題的時候，下方可根據(jù)標(biāo)題顯示對應(yīng)的內(nèi)容，這個其實跟上面輪播圖的【指定跳轉(zhuǎn)】是一個原理，就是點擊對應(yīng)的標(biāo)題時，下方通過切換到動態(tài)面板的不同狀態(tài)來實現(xiàn)對應(yīng)效果，這里就不再設(shè)計實例。

四、固定尺寸

我們有時候會看到類似下方這樣的效果，一個頁面有多個板塊，為了頁面的美觀，每個板塊有固定的高度，每個板塊可以通過獨立的滾動條控制：

在 Axure 中，每個板塊通過【動態(tài)面板】來做，就可以實現(xiàn)類似這樣的效果，我們來實現(xiàn)類似上圖的效果。

先在工作區(qū)拖入兩個動態(tài)面板，在動態(tài)面板中的第一個狀態(tài)放一個【占位符】：

這里注意我們需要手動調(diào)整動態(tài)面板的高度，可以通過右側(cè)【樣式】檢查確認沒有勾選【自適應(yīng)內(nèi)容】，并確保動態(tài)面板內(nèi)的【占位符】高度超過動態(tài)面板的高度：

接著我們選中兩個動態(tài)面板，在右側(cè)【樣式】中將滾動方式設(shè)置為【垂直滾動】：

預(yù)覽就可以看到我們需要的效果：

這里幾個定義簡單解釋一下：

• 自適應(yīng)內(nèi)容：動態(tài)面板的寬度和高度會根據(jù)內(nèi)容自動調(diào)整，如果有多個狀態(tài)，且每個狀態(tài)內(nèi)放置的內(nèi)容尺寸不一致，在切換到不同狀態(tài)的時候，動態(tài)面板的尺寸也會自動調(diào)整；
• 從不滾動：固定動態(tài)面板尺寸時，如果內(nèi)容超過動態(tài)面板尺寸，只能看見與動態(tài)面板尺寸相同的那部分內(nèi)容；
• 按需滾動：固定動態(tài)面板尺寸時，當(dāng)內(nèi)容寬度或高度超過動態(tài)面板尺寸，動態(tài)面板自動出現(xiàn)垂直或水平滾動條；
• 垂直滾動：固定動態(tài)面板尺寸時，當(dāng)內(nèi)容高度超過動態(tài)面板高度，動態(tài)面板自動出現(xiàn)垂直滾動條；
• 水平滾動：固定動態(tài)面板尺寸時，當(dāng)內(nèi)容寬度超過動態(tài)面板寬度，動態(tài)面板出現(xiàn)水平滾動條。

五、拖動內(nèi)容

顧名思義，就是在頁面上自由拖動一個元件，這個設(shè)計不用動態(tài)面板也可以做得到，但是我相信你會體會到什么叫“從入門到放棄”，而如果用動態(tài)面板來做，你會忍不住喊出那句“so easy”，來吧，照樣先在工作區(qū)拖入一個動態(tài)面板，填充顏色，然后添加【拖動】交互，【跟隨拖動】【移動】當(dāng)前元件：

看看效果：

六、循環(huán)控制

有時候我們需要在我們的設(shè)計中循環(huán)執(zhí)行某一個動作，但 Axure 是沒有提供循環(huán)的交互的，但是我們可以利用動態(tài)面板來“曲線救國”，我們會用到動態(tài)面板的兩個交互，一個是【自動切換狀態(tài)】，讓動態(tài)面板在狀態(tài)間循環(huán)切換，另外一個就是【狀態(tài)改變時】的交互，執(zhí)行我們需要循環(huán)的交互。

這樣面板會不但循環(huán)，每次循環(huán)時改變了狀態(tài)，就會執(zhí)行對應(yīng)的交互，這樣就能實現(xiàn)循環(huán)執(zhí)行某一動作的效果。

這樣講可能有點抽象，各位可以看看我之前的文章《【Axure 動態(tài)面板】讓你的動畫變成“永動機”》，相信你能對此深有體會。

動態(tài)面板的內(nèi)容就分享到這里，各位覺得還有哪些做起來很難，但是可以通過動態(tài)面板輕松實現(xiàn)的設(shè)計，歡迎評論區(qū)分享，感謝閱讀！