無論是APP或者PC端頁面，右下角大多都會有默認收起的懸浮按鈕，點擊懸浮按鈕后會展開更多信息。本文作者介紹了如何用Axure實現懸浮按鈕顯示與隱藏效果的操作步驟，以及實現過程中的一些心得體會，與大家分享。

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協議