據(jù)不完全統(tǒng)計，原型項目中最常用到的交互效果是彈出效果，其次是內(nèi)容切換效果。

摹客RP作為一款簡單易用的原型設(shè)計工具，當(dāng)然也為用戶提供了制作內(nèi)容切換效果的方式，并且也在不斷完善相關(guān)功能與特性。

今天小摹要為大家介紹的正是一款為內(nèi)容切換效果而生的容器——動態(tài)面板。它不僅擁有和內(nèi)容面板相同的作用，還提供更為方便易用的操作方式。想知道你是否已經(jīng)完全掌握了制作內(nèi)容切換效果的技巧？那得看完這篇文章才說得準(zhǔn)哦！

為啥需要動態(tài)面板？

原型項目中常見的切換局部內(nèi)容、輪播圖，都屬于內(nèi)容切換效果。其制作方式是需要在頁面中的一片區(qū)域放置不同的內(nèi)容，然后使這些內(nèi)容根據(jù)給定的方式切換展示出來。由于需要在同一個位置放置不同的內(nèi)容，如果沒有一個專門的管理方式，那么所有的內(nèi)容堆疊在一起，既不利于管理也不利于設(shè)置交互，因此通過一個專門的容器來集中盛放、管理這些組件就十分有必要了。動態(tài)面板正是在這樣的需求下誕生的。

簡單來說，動態(tài)面板就是一個能在其中放置不同內(nèi)容的容器。并且當(dāng)其作為交互目標(biāo)時，還可以執(zhí)行切換內(nèi)容的交互設(shè)置，使其中的內(nèi)容切換展示。

動態(tài)面板具體怎么用？

下面，小摹為你帶來動態(tài)面板最詳盡的使用介紹，帶你一口氣了解這個容器所有的用法和技巧。

創(chuàng)建動態(tài)面板

在組件庫的容器分類下，就可以找到動態(tài)面板。將其拖到頁面中即可完成創(chuàng)建。

編輯內(nèi)容

雙擊動態(tài)面板，即可進入其內(nèi)部，并在其中進行內(nèi)容編輯。點擊左上角的“添加”按鈕，即可為動態(tài)面板創(chuàng)建多個畫板，并在畫板上放置不同的內(nèi)容。

在編輯畫板中的內(nèi)容時需要注意，動態(tài)面板中及其中所有畫板的尺寸是始終保持一致的。即，修改動態(tài)面板或任意畫板的尺寸，都會導(dǎo)致動態(tài)面板及所有畫板的尺寸同步修改。這主要是因為在絕大部分情況下，動態(tài)面板中的內(nèi)容是同大同小的，并且使畫板與容器保持相同尺寸，也可以讓容器能更好地容納及展示其中的內(nèi)容，避免容器過長或內(nèi)容顯示不完整的情況。

當(dāng)然，你可能也會遇到不同內(nèi)容有長有短的情況。在這個時候，你可以在較長的畫板上再添加一個面板來制作滾動區(qū)。

動態(tài)面板支持多層嵌套以應(yīng)對復(fù)雜的項目內(nèi)容。也就是說，你可以在動態(tài)面板中繼續(xù)添加動態(tài)面板，以實現(xiàn)多層級內(nèi)容的劃分。并且當(dāng)你的動態(tài)面板中存在多個層級時，可以通過左上角的面包屑來查看層級結(jié)構(gòu)以及當(dāng)前所在的層級。

如果你在動態(tài)面板中創(chuàng)建了較多的畫板，還可以通過列數(shù)設(shè)置來調(diào)整一行最多能展示的畫板數(shù)量，以更方便地管理這些畫板。

管理內(nèi)容

編輯完內(nèi)容后，你還需要掌握一些管理內(nèi)容的操作。首先是內(nèi)容之間的順序管理。動態(tài)面板中的內(nèi)容是有先后順序的，其擺放的順序，對應(yīng)其在演示時的展示順序。你可以選中整個一個畫板，并通過拖拽以快速調(diào)整其順序。也可以通過點擊畫板右上角的置頂、前移、后移來調(diào)整其順序。如果你不再需要某一個內(nèi)容，只需要選中畫板，并使用刪除鍵，即可將其刪除。

交互設(shè)置

當(dāng)你準(zhǔn)備好所有內(nèi)容后，就可以讓動態(tài)面板參與到交互設(shè)置中了。當(dāng)動態(tài)面板被選為交互目標(biāo)時，可以選擇命令“切換內(nèi)容”以使其中的內(nèi)容進行切換展示。你還可以指定每次切換到的具體內(nèi)容，也可以選擇“上一個”“下一個”以使內(nèi)容依次切換。

動態(tài)面板與內(nèi)容面板

熟悉摹客RP的小伙伴一定會發(fā)現(xiàn)，動態(tài)面板和內(nèi)容面板的作用好像差不多，那么動態(tài)面板和內(nèi)容面板有什么區(qū)別呢？

其實，動態(tài)面板和內(nèi)容面板都是用于制作內(nèi)容切換效果的，二者主要還是在對內(nèi)容的管理方式上有較大的不同。內(nèi)容面板因為需要與輔助畫板關(guān)聯(lián)起來進行使用，內(nèi)容的創(chuàng)建和管理會更復(fù)雜一些，比如復(fù)制內(nèi)容面板不會同步復(fù)制相關(guān)的輔助畫板。而對于動態(tài)面板來說，容器與內(nèi)容直接相關(guān)，尺寸也能同步修改，并且復(fù)制動態(tài)面板也能作用于其中所有內(nèi)容。

因此，在絕大部分情況下，小摹更推薦大家直接使用動態(tài)面板。而內(nèi)容面板因為上線時間更早，不少小伙伴習(xí)慣了使用內(nèi)容面板，且還有不少項目正在使用內(nèi)容面板，因此目前同時提供了這兩種容器。

關(guān)于動態(tài)面板的所有介紹，小摹就為小伙伴們整理到這里。相信在原型設(shè)計的過程中，它一定能為大家?guī)碇T多便利。如果你對動態(tài)面板還存在疑問，或在使用摹客RP的過程中有其他不清楚的地方，歡迎隨時與我們聯(lián)系。

網(wǎng)址：https://www.mockplus.cn/rp

Powered by Froala Editor