“
— — — —?— — — —?— — — —?— — —
我看過很多動態面板的教程
來自X度經驗、來自X乎、來自各大產品網站
卻未曾見過一股清流
— — — —?— — — —?— — — —?— — —?
”
幾乎都是直接講解操作，諸如“手把手教你用動態面板制作手風琴菜單”、“如何用動態面板實現tab頁簽切換”、“快速用動態面板實現菜單展開折疊或下拉”。
雖然也能讓人上手，但總覺得缺少了最根本的內功。
何謂內功？
就好比江南七俠教郭靖，6位師傅各有所長，足足教了8年，但為什么郭靖所學有限，進步唯艱？
為什么馬鈺只是教了1年多呼吸、打坐、睡覺的法子，郭靖就不負所望、進展神速呢？
這里體現的就是內功心法的重要性。
為了更高效地使用動態面板，以及讓我們看到某個交互效果時有能力思考其實現過程，我們很有必要先了解動態面板的基礎原理、它和其他元件的不同之處，再學習實踐具體的交互操作。
一、認識檢視區
在頁面上拖入一個新的動態面板，可在檢視區看到它的屬性、說明、樣式。
1）樣式
對于一個矩形，可在樣式中設置文字的各種顏色、背景色、大小、字體等。
并且，自帶元件中一切形狀的基礎都是矩形，包括文本標簽、各種標題。
但動態面板不能輸入文字，只能添加新狀態，樣式中只能添加背景色和背景圖片。
2）屬性-交互
屬性是設置一個元件各種交互效果的區域。
屬性菜單下又進行二級劃分，矩形的屬性劃分了交互和形狀，而動態面板的屬性劃分了交互和動態面板，還有熱區的屬性也比較特別，所以此處我們先把三者的交互對比來看，下圖所示
重點需要了解的地方已經圈紅
在交互事件中，鼠標相關操作、位移、顯示隱藏等都是相同，故不再贅述。
a、矩形有選中狀態和載入狀態
b、熱區沒有選中狀態
c、動態面板也沒有選中狀態，并且增加了拖動和滾動兩類交互事件
這些交互事件體現的就是這個元件能完成的交互效果。
比如動態面板有拖動，那么我們能聯想到，購物時有放大局部圖片的交互，那么，這可能就和動態面板有關。
再如動態面板有滾動，那么我們能聯想到，一個頁面上下滾動以及定位到指定位置，這也和動態面板有關。
3）屬性-動態面板
還是先來看三種元件的比對圖
形狀的屬性除了基本交互，下面形狀菜單中有懸停、按下、選中、禁用四種設置
我們常見的效果例如一個按鈕，鼠標移上、點擊時會變換字體顏色、按鈕背景色、出現陰影等效果，通過形狀的交互樣式可以快速設置。
動態面板由于缺少選中狀態，所以沒有這幾類交互樣式
但它有滾動條、固定到瀏覽器以及鼠標交互，因此和定位、滾動相關的交互就一定和動態面板有關系。
二、用例動作：顯示隱藏
隨意選中一個元件，打開【檢視-屬性-更多事件】，我們在此處可以設置一個元件的交互用例。
隨意打開一個事件的用例編輯對話框，如下圖，從左至右，依次選中【顯示--某個動態面板--切換】，這樣選擇的目的是方便我們最大限度地看到這個動作的功能。
在配置動作時，如果不選動態面板，而是選一個矩形，下方的可見性及顯示隱藏動畫都完全相同。
并且，選擇元件時每次只能選一個再設置，不能選擇多個元件的組合統一設置，這個過程說明了兩點
1、一個元件的顯示-隱藏，對應所能配置的動作都是一致的。也即矩形或動態面板的顯示、隱藏效果相同
2、多個元件的交互效果如果一致，就可以考慮放入動態面板。也即利用動態面板的容器特性
三、用例動作：設置面板狀態
在用例編輯對話框中，依次點擊【設置面板狀態-某個動態面板-選擇狀態】，我選了next狀態，能看到最多的動作設置。
重點關注【選擇狀態】【推動/拉動元件】，這都是動態面板的特有屬性，其他元件不具備。
動態面板可以添加多個狀態，每個狀態內部又可以添加多個元件，而多個狀態之間又可循環，這讓我們聯想到各個電商網站的首頁圖片輪播效果。
四、五大用途
當我們了解完上述特有屬性及動作的特殊設置，我們才算對動態面板有了較全面的基本認識。可以總結為以下5大用途，此處只做總結說明，后續文章再總結具體方式。
1、容器
●? 說明：動態面板的一個狀態內可以放入多個元件，就好比一個容器。尤其是多個元件的交互效果一致時利用容器特性，就可以一次性實現交互，不必每個元件單獨設置。
●? 案例：鼠標移上一級菜單時下方顯示二級菜單，此時利用容器只需設置交互事件為【鼠標移上時顯示動態面板】即可。
2、滑動/翻轉效果（包含于顯示-隱藏）
●? 說明：在用例動作中的顯示隱藏動作內，可設置顯示或隱藏的動畫效果。具體分為【上下左右滑動】、【上下左右翻轉】
●?案例：滾動文字或圖片，利用滑動效果只需設置交互事件為【頁面載入時、顯示某動態面板、向左滑動】
3、拖動效果
●?說明：拖動是動態面板的特有交互，頁面上常見的拖拽操作是通過它實現的
●?案例：電商網站查看商品圖片時可放大圖片，原理是鼠標所在位置有一個動態面板，鼠標移動時也即拖動面板，同時在附近區域顯示放大的圖片即可。
4、固定位置
●?說明：重要的導航按鈕一般都固定在頁面右側或頂部，這利用的是動態面板的固定在瀏覽器特性，其他元件不存在。
●?案例：頁面右側的固定按鈕常見有回到頂部、建議反饋、分享，不會隨頁面滾動而變化，原理是將這些元件放入動態面板里，再設置固定到瀏覽器。
5、多狀態切換
●?說明：動態面板可以添加多個狀態，并且可以設置切換動效。選擇狀態時，可以選具體某狀態、Next、Previous、Value、停止循環。
●?案例：首頁有5個圖片和5個序號，點擊序號幾，則切換到對應第幾個圖片，原理可利用序號和動態面板的狀態對應，如下圖
以上，就是用好動態面板之前需要了解的要點。
我們常說Axure軟件上手快，這話不錯，但想要熟練、精通，畢竟不是一日之功，每類元件的細節都有差異，這些細節需要平日使用時逐步積累總結，最好的方法是比較、嘗試。
— — — — 系 列 目 錄 — — — —
這不是Axure教程！（四）元件六要素與用例
這不是Axure教程！（五）變量與函數
— — — — 目? 錄? 完 — — — —
