動態(tài)面板為Axure里常用的元件:

本次主要涉及：元件：動態(tài)面板、圖像，技術點：交互用例、動態(tài)面板和圖像的編輯，如下面腦圖所示：

1、打開Axure8(axure7也一樣)，默認是新創(chuàng)建的項目，找到 “動態(tài)面板”元件，如下圖：

2、拖動元件到工作區(qū)，按照圖指示的任意一個地方給動態(tài)面板命名：測試面板

3、雙擊動態(tài)面板元件，出現(xiàn)狀態(tài)state1,雙擊進入到state1的編輯：

4、拖放一個圖像元件到state1內(nèi)，雙擊并找到準備的圖片（紅旗），這樣第一個狀態(tài)就編輯好了。

5、下面編輯第二個狀態(tài)，注意看圖，在右下方的 “概要”欄目內(nèi) 找到state1右鍵“復制狀態(tài)”，這樣里面的元件大小、位置不會發(fā)生改變。復制成功后為便于下面的交互用例，將狀態(tài)分別命名為：紅旗、藍旗。然后點擊藍旗狀態(tài)，將圖片替換。

6、以上步驟完成后，開始編輯交互用例。雙擊紅旗圖片，出現(xiàn)如下圖所示的交互用例，找到：鼠標單擊時，并雙擊出現(xiàn)用例編輯面板。

7、選擇 元件-->設置面板狀態(tài) ，然后按照圖示選中 “測試面板”，并為其設置選擇狀態(tài)為：藍旗。同時設定動畫效果。

8、紅旗狀態(tài)編輯完成后，點擊確定，按照下圖所示在 case1下郵件復制用例，并粘貼到藍旗狀態(tài)下。然后按上一步的操作，將藍旗點擊是的選擇狀態(tài)設置為：紅旗。

9、最后F5預覽，并點擊圖像測試效果

相關推薦：

AxureRP 7.0實現(xiàn)天貓登錄的詳細教程

Axure怎么制作頁面滾動時菜單固定在頂部的頁面？

axure怎么做滑動效果? axure做手機觸摸屏幕滑動效果的方法