Axure:APP懸浮菜單的動(dòng)態(tài)導(dǎo)航

18 評(píng)論 15506 瀏覽 53 收藏 4 分鐘

本文描述了APP中懸浮式菜單導(dǎo)航的動(dòng)態(tài)展開與收起的過程,一起來看看~

先看效果:

體驗(yàn)地址:https://pikopc.axshare.com

一、操作分析

  1. 點(diǎn)擊加號(hào)按鈕,加號(hào)順時(shí)針旋轉(zhuǎn)45度,變成關(guān)閉按鈕,扇形菜單欄以按鈕為中心彈出。
  2. 點(diǎn)擊關(guān)閉按鈕,×逆時(shí)針旋轉(zhuǎn)45度,變成加號(hào)按鈕,扇形菜單欄以按鈕為中心收起。

二、實(shí)現(xiàn)步驟

1. 準(zhǔn)備階段

  1. 首先拖入一個(gè)375*667的動(dòng)態(tài)面板。雙擊動(dòng)態(tài)面板進(jìn)入state 1頁面。
  2. 在state 1頁面,準(zhǔn)備一張375*667的背景圖,放在x=0,y=0的位置。
  3. 然后拖入一個(gè)圓,取消邊框,設(shè)置尺寸為56*56,填充如下圖所示的玫紅色(這個(gè)顏色大家看自己的喜好來填充啦~)。拖入一個(gè)加號(hào)icon,設(shè)置尺寸為22*22,填充白色,放置在圓的正中心位置。組合加號(hào)icon和背景圓,作為加號(hào)按鈕。
  4. 再次拖入一個(gè)圓,取消邊框,設(shè)置尺寸為325*325,填充跟第二步中背景圓一樣的玫紅色。將其中心對(duì)準(zhǔn)加號(hào)按鈕,放置在如下圖所示的位置。拖入三個(gè)菜單icon,組合菜單icon,放置在菜單欄(大圓)上面的合適位置,然后將菜單欄(圓)和菜單icon一起設(shè)為隱藏(加號(hào)按鈕置頂)。
  5. 最后,如下圖所示:準(zhǔn)備好所需元件后,拖入一個(gè)熱區(qū)使其完全恰好覆蓋加號(hào)按鈕。

2. 設(shè)置交互

(1)首先設(shè)置覆蓋在加號(hào)按鈕上面的熱區(qū)的交互,如下圖所示:

按鈕背景圓的選中交互:

(2)然后是對(duì)加號(hào)按鈕設(shè)置交互事件

(3)菜單欄交互

點(diǎn)擊預(yù)覽,完成效果制作~~

 

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

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 你好,可以分享一下文件嗎?196115157@qq.com

    來自廣東 回復(fù)
  2. 老哥 能發(fā)份 源文件嗎 萬分感謝616994419@qq.com

    來自福建 回復(fù)
  3. 感謝樓主!我試著做了一下,發(fā)現(xiàn)不需要熱區(qū)就行嘞,用兩個(gè)case邏輯簡單點(diǎn)~

    來自浙江 回復(fù)
  4. 樓主 做了好幾次,總是無法返回,能分享下源文件嗎1396844601@qq.com 謝謝了。

    來自北京 回復(fù)
  5. 不知道講的什么,中間省去很多步驟,沒看明白。。。。。

    來自江蘇 回復(fù)
  6. 你好,可以分享一下文件嗎?997880722@qq.com

    來自貴州 回復(fù)
  7. 感謝分享,但是我的加號(hào)按鈕的顏色變不回玫瑰色是怎么回事?

    來自廣東 回復(fù)
    1. 點(diǎn)擊“加號(hào)”的選中狀態(tài)為false,就會(huì)取消選中時(shí)的狀態(tài)顏色

      來自廣東 回復(fù)
  8. 我無論怎么修改都有些問題,可以分享一下文件嗎,謝謝,284266378@qq.com ??

    來自浙江 回復(fù)
  9. 大神,我怎么做都不對(duì),對(duì)分享下文件嗎,謝謝,33723739@qq.com

    來自吉林 回復(fù)
  10. 25728797@qq.com 謝謝樓主分享,麻煩把文件分享下我的郵箱。

    來自湖南 回復(fù)
  11. 大佬,能分享下嗎?沒做的出來。ant_gao1992@163.com

    來自四川 回復(fù)
  12. 大佬,自己整了沒跟上節(jié)奏,求rp文件謝謝。443500559@qq.com

    來自廣東 回復(fù)
  13. 您好,做的很好,能分享一下rp文件么,謝謝。279314862@qq.com

    來自吉林 回復(fù)
    1. 發(fā)了~

      來自廣東 回復(fù)
  14. 可以在小圓后面加陰影效果,會(huì)更好一點(diǎn),體現(xiàn)層次感!

    回復(fù)
  15. 謝謝樓主,已完成。

    來自四川 回復(fù)
  16. 滑動(dòng)選擇豈不更好

    來自山東 回復(fù)