六種常見(jiàn)隱藏菜單
常見(jiàn)的手機(jī)端隱藏菜單也就六種。在這里分享一下我的思考分析,為大家選擇手機(jī)隱藏菜單類型提供幫助。enjoy~
很多產(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)心……但是隱藏菜單怎么辦?。?/p>
頭幾年還好,手機(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ū)Ш?/li>
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í)可以將菜單入口完全隱藏。
4. 滑出菜單
應(yīng)用于列表菜單,也是 IOS 上很常見(jiàn)的一種設(shè)計(jì)規(guī)范。
- 優(yōu)點(diǎn):操作方便,容易理解
- 缺點(diǎn):可以放置的操作數(shù)量非常有限。必須左右通欄上下較矮的列表才適用,高一點(diǎn),或不通欄的卡片都不行。
5. 單擊菜單
應(yīng)用于模塊/按鈕/圖標(biāo)菜單,只適合沒(méi)有主要操作(如通常不需要進(jìn)入下一級(jí)),用戶操作意圖不明確的情況。
- 優(yōu)點(diǎn):容易發(fā)現(xiàn),操作快捷
- 缺點(diǎn):放棄主操作存在風(fēng)險(xiǎn)
6. 長(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
作者:Z Yuhan,華為騰訊設(shè)計(jì)師,曾在英國(guó)學(xué)習(xí)人機(jī)交互,樂(lè)意與你一起探索產(chǎn)品體驗(yàn)
來(lái)源:微信公眾號(hào):「體驗(yàn)進(jìn)階」
本文由 @Z Yuhan 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels,基于 CC0 協(xié)議
這種動(dòng)態(tài)效果圖是用什么軟件做的,作者知道嗎?
這種動(dòng)態(tài)展示交互效果的圖怎么做?
后面幾個(gè)都是程序員見(jiàn)了要打死的節(jié)奏
如果各種交互的使用場(chǎng)景描述的再詳細(xì)一點(diǎn)就好了