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

01 前期準(zhǔn)備

軟件：Axure 9.0

硬件：Windows/Mac電腦

思考：實(shí)現(xiàn)懸浮按鈕顯示與隱藏效果前的思考（可參考下圖）

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

02 教程

1. 準(zhǔn)備素材，我們需要準(zhǔn)備懸浮按鈕的圖標(biāo)及列表頁內(nèi)容，以及一個(gè)頁面

1.1 先準(zhǔn)備頁面，拖動(dòng)一個(gè)矩形元件，設(shè)置尺寸為1080*768，設(shè)置背景色為黑色。

1.2 制作懸浮圖標(biāo)按鈕，拖動(dòng)一個(gè)圓形設(shè)置尺寸80*80 填充背景色，我這里設(shè)置的為藍(lán)色，接著去阿里巴巴矢量庫https://www.iconfont.cn/找到合適的圖標(biāo)素材，將圓形和圖標(biāo)右鍵組合在一起。

1.3 制作列表頁內(nèi)容，拖動(dòng)一個(gè)矩形設(shè)置尺寸200*200，顏色懸浮圖標(biāo)按鈕一致，填充適量?jī)?nèi)容及圖標(biāo)，具體可以參考下圖

2. 將懸浮按鈕轉(zhuǎn)化為動(dòng)態(tài)面板并取名“浮層”，并設(shè)置2個(gè)狀態(tài)

懸浮圖標(biāo)放在第一個(gè)狀態(tài)里命名“開始”，列表里內(nèi)容在第二個(gè)狀態(tài)里命名“展開”，

將列表內(nèi)容頁起始內(nèi)容位置設(shè)置為（-60，-60），即與第一個(gè)狀態(tài)中心對(duì)齊，-(200-80)/2=-60.

如果設(shè)置為0*0的話后面展開后無法達(dá)到從中心向兩邊擴(kuò)展的效果。

退出后右鍵選擇取消自適應(yīng)內(nèi)容。

3. 制作顯示范圍邊界框

用于校對(duì)是否實(shí)現(xiàn)我們顯示隱藏效果的矩形框，設(shè)置為尺寸200*200，待實(shí)現(xiàn)效果后刪除。邊界框無需命名。具體和“懸浮”面板位置如下圖，即懸浮動(dòng)態(tài)面板在邊界框的右下角位置。

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

設(shè)置“懸浮”面板位置為959*637，大概左下角靠上一點(diǎn)的位置。如下圖

5. 制作點(diǎn)擊懸浮圖標(biāo)顯示列表內(nèi)容頁效果

進(jìn)入“懸浮”動(dòng)態(tài)面板的第一個(gè)狀態(tài)即“開始”，拖動(dòng)一個(gè)熱區(qū)元件，設(shè)置80*80，放在懸浮按鈕上方，針對(duì)熱區(qū)做顯示效果

效果實(shí)現(xiàn)步驟分為：

5.1 移動(dòng)懸浮圖標(biāo)所在的”懸浮“動(dòng)態(tài)面板到邊界框中心位置，即相對(duì)頁面的899*577位置。

5.2 查看移動(dòng)效果，設(shè)置等待交互，本文設(shè)置等待500s ，也可根據(jù)自己的情況調(diào)整。

5.3 將“懸浮”面板設(shè)置為列表內(nèi)容頁內(nèi)容

5.4 以中心錨點(diǎn)設(shè)置面板尺寸200*200，即第二狀態(tài)中列表內(nèi)容頁的尺寸大小

5.5 將列表內(nèi)容頁位置從（-60，-60）變?yōu)椋?，0）

6. 制作點(diǎn)擊列表內(nèi)容頁隱藏效果

進(jìn)入“懸浮”動(dòng)態(tài)面板的第二個(gè)狀態(tài)即“展開”，選中所有內(nèi)容（組合后起名為“彈出界面”）選擇單擊時(shí)交互，粘貼上一個(gè)交互，修改出場(chǎng)順序并修改數(shù)值如下圖

7. 驗(yàn)證效果

結(jié)語

本篇練習(xí)重點(diǎn)在于移動(dòng)和動(dòng)態(tài)面板的組合使用，容易錯(cuò)的對(duì)方有2點(diǎn)：

1. 動(dòng)態(tài)面板忘記取消自適應(yīng)內(nèi)容，動(dòng)態(tài)面板列表內(nèi)容頁起始位置設(shè)為（-60,60)容易忽略。
2. 動(dòng)態(tài)面板移動(dòng)的尺寸容易出錯(cuò)，一定要填寫最終移動(dòng)到的那個(gè)位置的坐標(biāo)。

趕緊動(dòng)手練一下吧～

本文由 @藍(lán)汐 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載！

題圖來自Unsplash，基于CC0協(xié)議