動態面板為Axure里常用的元件:

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

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

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

3、雙擊動態面板元件，出現狀態state1,雙擊進入到state1的編輯：

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

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

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

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

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

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

相關推薦：

AxureRP 7.0實現天貓登錄的詳細教程

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

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