中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：很多產(chǎn)品在設(shè)計(jì)的過(guò)程中，既要界面簡(jiǎn)單又要功能豐富，為了解決這個(gè)問(wèn)題，隱藏菜單就被發(fā)明了。那么，如何用Axure為APP設(shè)計(jì)一個(gè)隱藏菜單呢？本文作者就為大家展示了他實(shí)踐的過(guò)程與結(jié)果，快來(lái)交流學(xué)習(xí)吧。

本來(lái)在做APP時(shí)，要做一個(gè)隱藏菜單，搜索時(shí)看到Z Yuhan的文章《六種常見隱藏菜單》受益匪淺，平常遇到但是沒(méi)有做過(guò)總結(jié)，總結(jié)越多段位越高。

不過(guò)Z Yuhan只介紹了理論沒(méi)有看到實(shí)踐，借著自己用的機(jī)會(huì)，就將幾種方式做了實(shí)踐，算是對(duì)原文的補(bǔ)充，希望Z Yuhan勿怪。

一、側(cè)欄菜單

1. 拖拉元件

1）主頁(yè)

一個(gè)矩形、一段文字、一個(gè)圖片（點(diǎn)擊事件就在圖片身上），為了實(shí)現(xiàn)原文中主頁(yè)在側(cè)欄展開時(shí)的顏色變化，又添加了一個(gè)矩形（填充顏色、置于底層、隱藏）。

2）側(cè)邊

一個(gè)動(dòng)態(tài)面板（不可見、自適應(yīng)內(nèi)容），對(duì)應(yīng)加一個(gè)狀態(tài)，狀態(tài)里只有一個(gè)矩形、一段文字。

需要注意的是，這里用了Axure9的負(fù)空間，其他沒(méi)特殊之處，都是簡(jiǎn)單操作，看拖拉后的效果。

2. 添加交互

1）給圖片“”添加“單擊”交互，效果是將負(fù)空間里藏起來(lái)的側(cè)欄給展示和隱藏；

2）添加事件“單擊時(shí)”，單擊有2個(gè)情形：展示和隱藏；

3）添加情形“展示”，條件是動(dòng)態(tài)面板“側(cè)欄菜單”不可見時(shí)；

4）添加動(dòng)作“移動(dòng)”，將動(dòng)態(tài)面板“側(cè)欄菜單”移動(dòng)到達(dá)(0,0)，動(dòng)畫效果可有可無(wú)；

5）添加動(dòng)作“顯示/隱藏”，將動(dòng)態(tài)面板“側(cè)欄菜單”顯示出來(lái)，并且推動(dòng)右邊的元件；為了實(shí)現(xiàn)側(cè)欄展示時(shí)的層次感，多加了一個(gè)矩形來(lái)顯示不同的背景色；

6）添加情形“折疊”，條件是動(dòng)態(tài)面板“側(cè)欄菜單”可見時(shí)；

7）添加動(dòng)作“移動(dòng)”，將動(dòng)態(tài)面板“側(cè)欄菜單”移動(dòng)到達(dá)(-200,0)，動(dòng)畫效果可有可無(wú)；

8）添加動(dòng)作“顯示/隱藏”，將動(dòng)態(tài)面板“側(cè)欄菜單”隱藏出來(lái)，并且把右邊的元件拉回來(lái)；再還原主頁(yè)的背景色。

二、浮鈕菜單

1. 拖拉元件

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

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

3）添加一個(gè)動(dòng)態(tài)面板，取個(gè)名“懸浮菜單”并設(shè)置可不見；增加一個(gè)狀態(tài)，在狀態(tài)里添加一個(gè)應(yīng)景的圖片和一個(gè)圓形，組合在一起，取個(gè)名“關(guān)閉按鈕”；位置就在右下角，大小就56*56。

為了效果，關(guān)閉按鈕最好跟懸浮按鈕位置重疊。

大概就是這個(gè)樣子：

2. 添加交互

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

2）單擊“關(guān)閉按鈕”，跟“懸浮按鈕”點(diǎn)擊反著干就行了。

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

三、更多菜單

1. 拖拉元件

是不是我的錯(cuò)覺，到這個(gè)效果實(shí)現(xiàn)一個(gè)比一個(gè)簡(jiǎn)單。

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

2）添加一個(gè)應(yīng)景的圖片，就是點(diǎn)點(diǎn)點(diǎn)；

3）添加一個(gè)動(dòng)態(tài)面板，取個(gè)名“懸浮菜單”并設(shè)置可不見；增加一個(gè)狀態(tài)，在狀態(tài)里，添加一個(gè)矩形，一個(gè)關(guān)閉的圖片。

大概就是這個(gè)樣子：

2. 添加交互

感覺“更多”和“懸浮”差不多啊，有可能是沒(méi)我領(lǐng)會(huì)到不同之處。

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

2）單擊“關(guān)閉按鈕”，隱藏“懸浮菜單”：

四、總結(jié)

這些都不是我的創(chuàng)意，我只是代碼搬運(yùn)工。另外3種效果下次要用時(shí)再搞吧，感覺把幾個(gè)常用的元件屬性搞熟練，稍微琢磨一下就可以實(shí)現(xiàn)，所以沒(méi)有添加下載地址。

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

相關(guān)閱讀：

Axure9原型設(shè)計(jì)：動(dòng)態(tài)面板實(shí)現(xiàn)頁(yè)面增刪改查模式彈窗效果

Axure9原型設(shè)計(jì)：動(dòng)態(tài)面板實(shí)現(xiàn)手風(fēng)琴菜單（低配版）

本文由 @頭發(fā)漸少脾氣漸漲 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議。