Google不久前剛剛更新了他們的Google+應(yīng)用，采用了新的導(dǎo)航方式并拋棄了navigationdrawer。一時(shí)之間，又引發(fā)了一系列關(guān)于NavigationDrawer利弊的討論。

Navigationdrawer又被稱為“OffCanvas“、”hamburgernavigation“、”sidenavigation“、“slidemenu”等等，雖然叫法不一樣，但大致都是同一種形式的導(dǎo)航。

NavigationDrawer的前世今生

據(jù)考究，Navigationdrawer最早源自于Youtube，如下截圖。

而“三道杠”的icon最早出現(xiàn)在1981年NormCox設(shè)計(jì)的個(gè)人工作站XeroxStar。

詳細(xì)見(jiàn)“Wheredoesdraweroriginatefrom?”

2012年，Youtube、Facebook、Path等應(yīng)用紛紛使用了Navigationdrawer這樣的導(dǎo)航方式，一時(shí)之間引發(fā)了廣泛的關(guān)注，甚至可以稱為一種設(shè)計(jì)的趨勢(shì)。

Facebook

Path

但由于沒(méi)有統(tǒng)一的規(guī)范，各個(gè)產(chǎn)品的抽屜導(dǎo)航設(shè)計(jì)也各不相同，為了控制Android平臺(tái)日益混亂的抽屜交互方式，2013GoogleI/O大會(huì)之后，Google將NavigationDrawer納入了AndroidDesign規(guī)范當(dāng)中，隨后大量應(yīng)用開(kāi)始采用這種交互模式。

2014GoogleI/O大會(huì)剛剛結(jié)束，筆者會(huì)持續(xù)跟進(jìn)，敬請(qǐng)關(guān)注后續(xù)更新。

?備受爭(zhēng)議？

關(guān)于Navigationdrawer利弊的討論也一直不停，直到2014年5月，Googleplus更新，去掉了抽屜導(dǎo)航，一時(shí)之間，又引發(fā)了熱烈的討論。

可以說(shuō)Navigationdrawer的出現(xiàn)也是應(yīng)需而生，較之PC，移動(dòng)設(shè)備屏幕尺寸較小，可以說(shuō)“寸土寸金”，抽屜導(dǎo)航最明顯的一個(gè)優(yōu)勢(shì)就是節(jié)省屏幕空間，讓導(dǎo)航“藏”在側(cè)滑抽屜里，釋放了更多的空間給主要內(nèi)容。

再者，Navigationdrawer實(shí)際上是開(kāi)辟了另一種新的導(dǎo)航模式，區(qū)別于在此之前的幾種主要導(dǎo)航模式：腹肌式（Six-pack）、下拉 欄式（Spinner）、選項(xiàng)卡式（FixedTabs），它（Navigationdrawer）彌補(bǔ)了其他幾種模式在非頂級(jí)視圖間進(jìn)行導(dǎo)航的缺陷—— 用戶必須退回頂級(jí)視圖，在頂級(jí)視圖切換分類之后再進(jìn)入其他內(nèi)容，也就是說(shuō)Drawer的好處就是能夠提供在非頂級(jí)視圖間導(dǎo)航的能力。

如下圖所示，從3.3跳轉(zhuǎn)到4.2，如果用其他導(dǎo)航，需要逐級(jí)回到頂級(jí)視圖再逐級(jí)進(jìn)入最終頁(yè)面，但是Drawer可以方便快捷的實(shí)現(xiàn)頁(yè)面之間跳轉(zhuǎn)。

然而自抽屜導(dǎo)航出現(xiàn)初期就一直伴隨著質(zhì)疑，甚至LuisAbreu用“為何以及如何避免使用漢堡導(dǎo)航？”作為文章標(biāo)題，其對(duì)于Navigationdrawer的態(tài)度可見(jiàn)一斑。

當(dāng)然，還有AnthonyRose用Zeebox的實(shí)踐經(jīng)驗(yàn)告訴我們，“抽屜導(dǎo)航可能會(huì)降低你產(chǎn)品一半的用戶參與度”。（自備梯子）

對(duì)NavigationDrawer的質(zhì)疑大致可歸納為以下幾點(diǎn)：

1. 可發(fā)現(xiàn)性低；

2. 在某些平臺(tái)下，和平臺(tái)固有的導(dǎo)航設(shè)計(jì)模式有所沖突；

3. 低效，并非一瞥即得。

大多數(shù)質(zhì)疑聲都集中在這個(gè)Drawer的可發(fā)現(xiàn)性上，他們認(rèn)為“如果看不到，自然也就想不到”（Outofsight，outofmind），在默 認(rèn)狀態(tài)下，Drawer都是隱藏的，與傳統(tǒng)的經(jīng)驗(yàn)——最重要最常用的功能放到首屏相悖，用戶比較難發(fā)現(xiàn)隱藏的導(dǎo)航，增加了認(rèn)知負(fù)擔(dān)。

其次，在iOS平臺(tái)下，官方標(biāo)準(zhǔn)的導(dǎo)航模式一般左上角是返回，而且支持左滑（從左往右滑動(dòng)）返回的手勢(shì)操作；Drawer也是將icon放到左上角，這樣就產(chǎn)生了如下圖的沖突，actionbar的左上角有多個(gè)icon，而且交互模式類似，如下圖。

再次，特別是在信息層級(jí)扁平的產(chǎn)品中，Drawer只是在視覺(jué)上簡(jiǎn)化了界面，功能并沒(méi)有減少，“隱藏”其實(shí)是增加了“呼出抽屜”的操作，讓原本直接操作的過(guò)程變得復(fù)雜了。很難想象如果微信的Tab導(dǎo)航變成Navigationdrawer之后，會(huì)是怎樣一番吐槽的場(chǎng)景。

需要理清的問(wèn)題

NavigationDrawer作為一種導(dǎo)航模式，已經(jīng)不僅僅是Android平臺(tái)獨(dú)享，iOS甚至Windows平臺(tái)都有類似的模式，當(dāng)我們提到抽屜導(dǎo)航，其實(shí)應(yīng)該是指廣義上的，跨平臺(tái)的。

雖然都是“Drawer”，但“此Drawer非彼Drawer”，不可混為一談。這種混為一談在NavigationDrawer的各種褒貶爭(zhēng)論中屢見(jiàn)不鮮。

例如飽受詬病的“沖突”問(wèn)題——“左滑返回”與“左滑呼出導(dǎo)航”沖突，其實(shí)就是混淆了平臺(tái)特性。之所以認(rèn)為是沖突，是建立在如下基礎(chǔ)之上的，即“在產(chǎn)品任何一個(gè)層級(jí)均可激活抽屜導(dǎo)航”（詳見(jiàn)?Android官方文檔，自備梯子），所以需要預(yù)留左滑手勢(shì)為呼出導(dǎo)航，于是指出與系統(tǒng)手勢(shì)（左滑返回）沖突。

請(qǐng)注意，前者是Android的規(guī)范，但后者是iOS??！所以針對(duì)這樣的問(wèn)題，應(yīng)該按照不同的平臺(tái)分別對(duì)待，尋找解決方案。

以iOS平臺(tái)的知乎為例，使用NavigationDrawer，但是并非任何一個(gè)界面都可呼出導(dǎo)航（誰(shuí)讓iOS規(guī)范里沒(méi)規(guī)定呢，嘖嘖），進(jìn)入詳情頁(yè)后，左滑和左上角back都只是返回操作，需要切換到其他詳情頁(yè)或者返回問(wèn)題列表頁(yè)才能呼出導(dǎo)航菜單，沖突問(wèn)題得到解決。

誠(chéng)然，只看Android，即使是官方規(guī)范中也還是存在一些沒(méi)能完美解決的問(wèn)題，例如到達(dá)具體詳情頁(yè)面，ActionBar上UPicon與Drawericon有一定意義上的沖突，保留任何一個(gè)都不那么完美。但這是另一個(gè)問(wèn)題了，不是么？

被遺棄？

不久前，Googleplus更新，去掉了Navigationdrawer的導(dǎo)航形式，于是有人大呼風(fēng)靡一時(shí)的抽屜導(dǎo)航將被遺棄，但筆者認(rèn)為并非如此。問(wèn)題不在于遺棄與否？而在于如何不被遺棄？換句話說(shuō)就是如何正確的使用Navigationdrawer？

Navigationdrawer作為一種導(dǎo)航的模式，有其應(yīng)用的場(chǎng)景和價(jià)值，而其備受詬病的“難以發(fā)現(xiàn)”問(wèn)題也隨著用戶的長(zhǎng)期使用下逐漸弱化，使用習(xí)慣的培養(yǎng)使得現(xiàn)在用戶再看到“三道杠”已經(jīng)不再像兩年前那樣不知為何物了。

在哪些場(chǎng)景下建議使用抽屜導(dǎo)航呢？Android規(guī)范中已經(jīng)總結(jié)的較好，有興趣的可點(diǎn)擊鏈接查看，這里簡(jiǎn)要概括如下：

1. 頂級(jí)視圖超過(guò)3個(gè)；

2. 低層視圖交叉導(dǎo)航；

3. 導(dǎo)航層級(jí)很深；

4. 導(dǎo)航樞紐：用戶需要頻繁訪問(wèn)導(dǎo)航。

上述場(chǎng)景，其他平臺(tái)也同樣適用。抽屜導(dǎo)航只是眾多導(dǎo)航的一種，需要考慮清楚使用場(chǎng)景謹(jǐn)慎使用。

如何正確使用？結(jié)合筆者觀察的一些使用Navigationdrawer的app，提供如下建議：

1.新手引導(dǎo)，初次進(jìn)入app，默認(rèn)展開(kāi)抽屜，然后自動(dòng)收起；可以考慮設(shè)置展示頻率，例如前50次默認(rèn)展開(kāi)；

2.區(qū)分平臺(tái)，因地制宜?？梢葬槍?duì)不同平臺(tái)，做不同的解決方案，只借用抽屜的優(yōu)勢(shì)，不必局限于Android官方文檔里規(guī)定的交互模式。筆者體驗(yàn)、觀察了數(shù)十個(gè)抽屜導(dǎo)航的APP，下面將以android平臺(tái)的亞馬遜和iOS平臺(tái)的知乎為例，以供參考。

Amazon（Android）

Android平臺(tái)使用Navigationdrawer的APP之中，數(shù)Amazon最符合Android規(guī)范，例如Actionbar固定不 動(dòng)，即使是進(jìn)入更深層級(jí)的界面，Actionbar也一直顯示導(dǎo)航icon，可隨時(shí)激活抽屜導(dǎo)航，支持從邊緣左滑，但不支持從屏幕中間左滑，所以不存在沖 突的問(wèn)題，而且也規(guī)避了在詳情頁(yè)UPicon與導(dǎo)航icon的沖突問(wèn)題，讓返回通過(guò)系統(tǒng)導(dǎo)航back按鈕來(lái)完成，雖然和目前主流的設(shè)計(jì)有些不同，不過(guò)邏輯 上完全沒(méi)有沖突，堪稱最“規(guī)范”的抽屜導(dǎo)航APP。

知乎（iOS）

而iOS平臺(tái)之中，以知乎為例，它只在頂級(jí)視圖（如導(dǎo)航中列出來(lái)的首頁(yè)、發(fā)現(xiàn)、我關(guān)注的等一級(jí)欄目）下的Actionbar才顯示導(dǎo)航icon，也 就是說(shuō)只能在頂級(jí)視圖才能激活抽屜導(dǎo)航，而且Actionbar是會(huì)隨著導(dǎo)航移動(dòng)（“擠出”而非“覆蓋”）。為了避免與左滑返回沖突，去除了邊緣左滑激活 抽屜導(dǎo)航的功能，無(wú)論是左滑還是邊緣左滑都是“返回”。整體來(lái)看，雖然無(wú)法隨時(shí)激活導(dǎo)航菜單，但是考慮到知乎本身產(chǎn)品的特性——閱讀類，在一級(jí)欄目之間頻 繁切換的需求并不強(qiáng)烈，更多的是在欄目下作平級(jí)的切換（上一篇、下一篇），所以這樣設(shè)計(jì)有其合理之處。

簡(jiǎn)單對(duì)比羅列如下：

3.信息架構(gòu)的優(yōu)化是王道。Navigationdrawer只是眾多導(dǎo)航模式的一種，并不是萬(wàn)能解。所以要想提供友好的用戶體驗(yàn)，不僅僅局限在導(dǎo)航的設(shè)計(jì)上，應(yīng)該站在更高的角度來(lái)重新思考該產(chǎn)品的信息架構(gòu)，去除那些不必要的層級(jí)/信息，以減少信息層級(jí)，才是根本的解決之道。

參考資料及推薦閱讀：

• 《AndroidNavigationDrawer》
• 《whynottousetheleftNavFlyouts？》
• 《AnupdateontheHamburgermenu》》
• 《Navigationdrawerdoneright》
• 《WhyandHowtoavoidHamburgerMenus》（自備梯子）
• 《Sidedrawernavigationcouldbecostingyouhalfyouruserengagement》
• 《HamburgervsMenu:TheFinalABTest》
• 《AndroidDesign趨勢(shì)——NavigationDrawer》
• 《NavigationDrawer的誕生》
• 《Wheredoessidemenuoriginatefrom?》
• 《WhodesignedtheHumburgericon？》
• 《2012年設(shè)計(jì)新趨勢(shì)：側(cè)滑導(dǎo)航欄》
• 《WhoDesignedtheHamburgerIcon?》
• 《BasementMenusandBreakingthe“Rules”ofAppDesign》（自備梯子）

作者：@沐沐成長(zhǎng)中

原文來(lái)自：優(yōu)設(shè)