Axure教程：APP/PC頁面懸浮按鈕顯示與隱藏效果

01 前期準備

軟體：Axure 9.0

硬體：Windows/Mac電腦

思考：實現懸浮按鈕顯示與隱藏效果前的思考（可參考下圖）

由此可以看出，顯示效果和隱藏效果互動效果相反即可。

02 教程1. 準備素材，我們需要準備懸浮按鈕的圖示及列表頁內容，以及一個頁面

1.1 先準備頁面，拖動一個矩形元件，設定尺寸為1080*768，設定背景色為黑色。

1.2 製作懸浮圖示按鈕，拖動一個圓形設定尺寸80*80 填充背景色，我這裡設定的為藍色，接著去阿里巴巴向量庫https://www.iconfont.cn/找到合適的圖示素材，將圓形和圖示右鍵組合在一起。

1.3 製作列表頁內容，拖動一個矩形設定尺寸200*200，顏色懸浮圖示按鈕一致，填充適量內容及圖示，具體可以參考下圖

2. 將懸浮按鈕轉化為動態面板並取名“浮層”，並設定2個狀態

懸浮圖示放在第一個狀態裡命名“開始”，列表裡內容在第二個狀態裡命名“展開”，

將列表內容頁起始內容位置設定為（-60，-60），即與第一個狀態中心對齊，-(200-80)/2=-60.

如果設定為0*0的話後面展開後無法達到從中心向兩邊擴充套件的效果。

退出後右鍵選擇取消自適應內容。

3. 製作顯示範圍邊界框

用於校對是否實現我們顯示隱藏效果的矩形框，設定為尺寸200*200，待實現效果後刪除。邊界框無需命名。具體和“懸浮”面板位置如下圖，即懸浮動態面板在邊界框的右下角位置。

4. 佈置頁面，將邊界框和懸浮面板放入之前黑色頁面中

設定“懸浮”面板位置為959*637，大概左下角靠上一點的位置。如下圖

5. 製作點選懸浮圖示顯示列表內容頁效果

進入“懸浮”動態面板的第一個狀態即“開始”，拖動一個熱區元件，設定80*80，放在懸浮按鈕上方，針對熱區做顯示效果

效果實現步驟分為：

5.1 移動懸浮圖示所在的”懸浮“動態面板到邊界框中心位置，即相對頁面的899*577位置。

5.2 檢視移動效果，設定等待互動，本文設定等待500s ，也可根據自己的情況調整。

5.3 將“懸浮”面板設定為列表內容頁內容

5.4 以中心錨點設定面板尺寸200*200，即第二狀態中列表內容頁的尺寸大小

5.5 將列表內容頁位置從（-60，-60）變為（0，0）

6. 製作點選列表內容頁隱藏效果

進入“懸浮”動態面板的第二個狀態即“展開”，選中所有內容（組合後起名為“彈出介面”）選擇單擊時互動，貼上上一個互動，修改出場順序並修改數值如下圖

7. 驗證效果

結語

本篇練習重點在於移動和動態面板的組合使用，容易錯的對方有2點：

1. 動態面板忘記取消自適應內容，動態面板列表內容頁起始位置設為（-60,60)容易忽略。
2. 動態面板移動的尺寸容易出錯，一定要填寫最終移動到的那個位置的座標。

趕緊動手練一下吧～

本文由 @藍汐 原創釋出於人人都是產品經理。未經許可，禁止轉載！

題圖來自Unsplash，基於CC0協議