很多產(chǎn)品設(shè)計(jì)的癥結(jié)在于，一方面界面要簡(jiǎn)單，另一方面功能要豐富。為了解決這個(gè)問(wèn)題，隱藏菜單被發(fā)明了，可以把無(wú)窮的多個(gè)信息塞到這個(gè)看不見(jiàn)的秘密容器中。

隱藏菜單在 PC時(shí)代簡(jiǎn)直是標(biāo)配，屏幕上絕大部分空間，只要不是灰色背景，基本上只要點(diǎn)右鍵就能喚起隱藏菜單。這簡(jiǎn)直影響了一代用戶的操作直覺(jué)——哪里不會(huì)點(diǎn)哪里，左鍵不行點(diǎn)右鍵。

iPhone 開(kāi)啟了手指觸屏?xí)r代，再也不用鼠標(biāo)指針好開(kāi)心……但是隱藏菜單怎么辦？

頭幾年還好，手機(jī)以溝通娛樂(lè)為主，APP 不需要多復(fù)雜。近年隨著移動(dòng)端對(duì) PC端的不斷蠶食取代，很多人都把自己的大部分需求轉(zhuǎn)移到了手機(jī)上，APP 的功能也越來(lái)越豐富以滿足用戶不斷增加的需求負(fù)擔(dān)。

所以說(shuō)，手機(jī)端隱藏菜單的問(wèn)題不可避免。

我最近剛好也遇到這類問(wèn)題，一番研究之后發(fā)現(xiàn)，常見(jiàn)的手機(jī)端隱藏菜單也就六種。在這里分享一下我的思考分析，為大家選擇手機(jī)隱藏菜單類型提供幫助。

一、按鈕隱藏菜單

類似下拉框，雖然大部分內(nèi)容是隱藏，但是給了一個(gè)可以理解的入口。

1. 側(cè)欄菜單

應(yīng)用于頂級(jí)菜單，適合大部分產(chǎn)品。

優(yōu)點(diǎn)：容易理解，能夠容納較多信息，可以結(jié)合手勢(shì)。

缺點(diǎn)：只能用于頂級(jí)菜單或?qū)Ш健?

2. 浮鈕菜單

應(yīng)用于頁(yè)面菜單。因?yàn)榉至恐?，適合工具類、重操作的產(chǎn)品，例如P圖軟件。如果是重內(nèi)容的閱讀類產(chǎn)品，就不太合適了。

優(yōu)點(diǎn)：很顯眼，容易操作。

缺點(diǎn)：對(duì)不需要隱藏菜單的用戶過(guò)重了，可能誤操作。

3. 更多菜單

應(yīng)用于模塊菜單，可以擺放的位置很多。

優(yōu)點(diǎn)：輕便靈活，可以在模塊邊緣輕松找到位置。

缺點(diǎn)：不太起眼、如果前面沒(méi)有其它圖標(biāo)會(huì)難理解一點(diǎn)。

二、完全隱藏菜單

有時(shí)候找不到可以擺放圖標(biāo)的位置，或者想要完全弱化菜單存在感，這時(shí)可以將菜單入口完全隱藏。

1. 滑出菜單

應(yīng)用于列表菜單，也是 iOS 上很常見(jiàn)的一種設(shè)計(jì)規(guī)范。

優(yōu)點(diǎn)：操作方便，容易理解。

缺點(diǎn)：可以放置的操作數(shù)量非常有限。必須左右通欄上下較矮的列表才適用，高一點(diǎn)，或不通欄的卡片都不行。

2. 單擊菜單

應(yīng)用于模塊/按鈕/圖標(biāo)菜單，只適合沒(méi)有主要操作（如通常不需要進(jìn)入下一級(jí)），用戶操作意圖不明確的情況。

優(yōu)點(diǎn)：容易發(fā)現(xiàn)，操作快捷。

缺點(diǎn)：放棄主操作存在風(fēng)險(xiǎn)。

3. 長(zhǎng)按菜單

應(yīng)用于模塊/按鈕/圖標(biāo)菜單，適合輔助操作較為明確的場(chǎng)景，如掃碼、下載圖片等。

優(yōu)點(diǎn)：對(duì)產(chǎn)品本身的布局和基礎(chǔ)操作影響較小。

缺點(diǎn)：較為隱晦，需要用戶主動(dòng)嘗試觸發(fā)。

三、創(chuàng)意菜單

除了常見(jiàn)樣式，很多設(shè)計(jì)師也發(fā)揮想象力，創(chuàng)造更加有個(gè)性的菜單。這里羅列一些，給大家提供靈感：

△ 上圖來(lái)源：Yaroslav Zubko

△ 上圖來(lái)源：Medical app – Menu Interaction

△ 上圖來(lái)源：Bottom Menu

△ 上圖來(lái)源：Cards Menu Concept

△ 上圖來(lái)源：https://dribbble.com/shots/2293621-Hamburger-Menu-Animation

△ 上圖來(lái)源：https://dribbble.com/shots/4237823-Menu-animation-in-Principleapp

△ 上圖來(lái)源：https://dribbble.com/shots/5083394-Repy-Message

原文作者：Z_Yuhan? ? 微信公眾號(hào)：「交互進(jìn)階」