編輯導語：很多產品在設計的過程中，既要界面簡單又要功能豐富，為了解決這個問題，隱藏菜單就被髮明瞭。那麼，如何用Axure為APP設計一個隱藏菜單呢？本文作者就為大家展示了他實踐的過程與結果，快來交流學習吧。
本來在做APP時，要做一個隱藏菜單，搜索時看到Z Yuhan的文章《六種常見隱藏菜單》受益匪淺，平常遇到但是沒有做過總結，總結越多段位越高。
不過Z Yuhan只介紹了理論沒有看到實踐，藉着自己用的機會，就將幾種方式做了實踐，算是對原文的補充，希望Z Yuhan勿怪。
一、側欄菜單1. 拖拉元件1）主頁
一個矩形、一段文字、一個圖片（點擊事件就在圖片身上），為了實現原文中主頁在側欄展開時的顏色變化，又添加了一個矩形（填充顏色、置於底層、隱藏）。
2）側邊
一個動態面板（不可見、自適應內容），對應加一個狀態，狀態裏只有一個矩形、一段文字。
需要注意的是，這裏用了Axure9的負空間，其他沒特殊之處，都是簡單操作，看拖拉後的效果。
1）給圖片“ ”添加“單擊”交互，效果是將負空間裏藏起來的側欄給展示和隱藏；
2）添加事件“單擊時”，單擊有2個情形：展示和隱藏；
3）添加情形“展示”，條件是動態面板“側欄菜單”不可見時；
4）添加動作“移動”，將動態面板“側欄菜單”移動到達(0,0)，動畫效果可有可無；
5）添加動作“顯示/隱藏”，將動態面板“側欄菜單”顯示出來，並且推動右邊的元件；為了實現側欄展示時的層次感，多加了一個矩形來顯示不同的背景色；
6）添加情形“摺疊”，條件是動態面板“側欄菜單”可見時；
7）添加動作“移動”，將動態面板“側欄菜單”移動到達(-200,0)，動畫效果可有可無；
8）添加動作“顯示/隱藏”，將動態面板“側欄菜單”隱藏出來，並且把右邊的元件拉回來；再還原主頁的背景色。
1）添加2個矩形框，1個白色填充1個灰色填充；其中灰色的矩形框是用來在懸浮菜單打開時顯示的，設置不可見；
2）添加一個應景的圖片和一個圓形，組合在一起，取個名“懸浮按鈕”；位置就在右下角，大小就56*56；
3）添加一個動態面板，取個名“懸浮菜單”並設置可不見；增加一個狀態，在狀態裏添加一個應景的圖片和一個圓形，組合在一起，取個名“關閉按鈕”；位置就在右下角，大小就56*56。
為了效果，關閉按鈕最好跟懸浮按鈕位置重疊。
大概就是這個樣子：
1）單擊“懸浮按鈕”，逐漸顯示“懸浮菜單”並隱藏“懸浮按鈕”，將有灰色背景的矩形框顯示出來，設置尺寸是為了看起來是從右下角顯示出來的。
2）單擊“關閉按鈕”，跟“懸浮按鈕”點擊反着幹就行了。
跟原文的效果還是差一點，感覺不夠絲滑。另外懸浮按鈕拖拽效果還在研究中。
三、更多菜單1. 拖拉元件是不是我的錯覺，到這個效果實現一個比一個簡單。
1）添加2個矩形框，1個白色填充1個灰色填充，其中灰色的矩形框是用來在懸浮菜單打開時顯示的，設置不可見；
2）添加一個應景的圖片，就是點點點；
3）添加一個動態面板，取個名“懸浮菜單”並設置可不見；增加一個狀態，在狀態裏，添加一個矩形，一個關閉的圖片。
大概就是這個樣子：
感覺“更多”和“懸浮”差不多啊，有可能是沒我領會到不同之處。
1）單擊“更多按鈕”，以燈箱效果顯示“懸浮菜單”：
2）單擊“關閉按鈕”，隱藏“懸浮菜單”：
這些都不是我的創意，我只是代碼搬運工。另外3種效果下次要用時再搞吧，感覺把幾個常用的元件屬性搞熟練，稍微琢磨一下就可以實現，所以沒有添加下載地址。
效果：https://e6osrz.axshare.com
相關閲讀：
Axure9原型設計：動態面板實現頁面增刪改查模式彈窗效果
Axure9原型設計：動態面板實現手風琴菜單（低配版）
本文由 @頭髮漸少脾氣漸漲 原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議。