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

懸浮選單軟體怎麼用

編輯導語：很多產品在設計的過程中，既要介面簡單又要功能豐富，為了解決這個問題，隱藏選單就被髮明瞭。那麼，如何用Axure為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

農林漁牧網