Axure9原型設計：動態面板實現APP隱藏菜單

本來在做APP時，要做一個隱藏菜單，搜索時看到Z Yuhan的文章《六種常見隱藏菜單》受益匪淺，平常遇到但是沒有做過總結，總結越多段位越高。

不過Z Yuhan只介紹了理論沒有看到實踐，藉着自己用的機會，就將幾種方式做了實踐，算是對原文的補充，希望Z Yuhan勿怪。

一、側欄菜單1. 拖拉元件

1）主頁

一個矩形、一段文字、一個圖片（點擊事件就在圖片身上），為了實現原文中主頁在側欄展開時的顏色變化，又添加了一個矩形（填充顏色、置於底層、隱藏）。

2）側邊

一個動態面板（不可見、自適應內容），對應加一個狀態，狀態裏只有一個矩形、一段文字。

需要注意的是，這裏用了Axure9的負空間，其他沒特殊之處，都是簡單操作，看拖拉後的效果。

2. 添加交互

1）給圖片“ ”添加“單擊”交互，效果是將負空間裏藏起來的側欄給展示和隱藏；

2）添加事件“單擊時”，單擊有2個情形：展示和隱藏；

3）添加情形“展示”，條件是動態面板“側欄菜單”不可見時；

4）添加動作“移動”，將動態面板“側欄菜單”移動到達(0,0)，動畫效果可有可無；

5）添加動作“顯示/隱藏”，將動態面板“側欄菜單”顯示出來，並且推動右邊的元件；為了實現側欄展示時的層次感，多加了一個矩形來顯示不同的背景色；

6）添加情形“摺疊”，條件是動態面板“側欄菜單”可見時；

7）添加動作“移動”，將動態面板“側欄菜單”移動到達(-200,0)，動畫效果可有可無；

8）添加動作“顯示/隱藏”，將動態面板“側欄菜單”隱藏出來，並且把右邊的元件拉回來；再還原主頁的背景色。

二、浮鈕菜單1. 拖拉元件

1）添加2個矩形框，1個白色填充1個灰色填充；其中灰色的矩形框是用來在懸浮菜單打開時顯示的，設置不可見；

2）添加一個應景的圖片和一個圓形，組合在一起，取個名“懸浮按鈕”；位置就在右下角，大小就56*56；

3）添加一個動態面板，取個名“懸浮菜單”並設置可不見；增加一個狀態，在狀態裏添加一個應景的圖片和一個圓形，組合在一起，取個名“關閉按鈕”；位置就在右下角，大小就56*56。

為了效果，關閉按鈕最好跟懸浮按鈕位置重疊。

大概就是這個樣子：

2. 添加交互

1）單擊“懸浮按鈕”，逐漸顯示“懸浮菜單”並隱藏“懸浮按鈕”，將有灰色背景的矩形框顯示出來，設置尺寸是為了看起來是從右下角顯示出來的。

2）單擊“關閉按鈕”，跟“懸浮按鈕”點擊反着幹就行了。

跟原文的效果還是差一點，感覺不夠絲滑。另外懸浮按鈕拖拽效果還在研究中。

三、更多菜單1. 拖拉元件

是不是我的錯覺，到這個效果實現一個比一個簡單。

1）添加2個矩形框，1個白色填充1個灰色填充，其中灰色的矩形框是用來在懸浮菜單打開時顯示的，設置不可見；

2）添加一個應景的圖片，就是點點點；

3）添加一個動態面板，取個名“懸浮菜單”並設置可不見；增加一個狀態，在狀態裏，添加一個矩形，一個關閉的圖片。

大概就是這個樣子：

2. 添加交互

感覺“更多”和“懸浮”差不多啊，有可能是沒我領會到不同之處。

1）單擊“更多按鈕”，以燈箱效果顯示“懸浮菜單”：

2）單擊“關閉按鈕”，隱藏“懸浮菜單”：

四、總結

這些都不是我的創意，我只是代碼搬運工。另外3種效果下次要用時再搞吧，感覺把幾個常用的元件屬性搞熟練，稍微琢磨一下就可以實現，所以沒有添加下載地址。

效果：https://e6osrz.axshare.com

相關閲讀：

Axure9原型設計：動態面板實現頁面增刪改查模式彈窗效果

Axure9原型設計：動態面板實現手風琴菜單（低配版）

本文由 @頭髮漸少脾氣漸漲 原創發佈於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議。