我記得在3月15日，當(dāng)消息傳來(lái)時(shí)，我在做什么——當(dāng)我們困在Android工作搜索應(yīng)用程序菜單漢堡拋棄，而不是使用一個(gè)選項(xiàng)卡導(dǎo)航可見(jiàn)，谷歌宣布底部導(dǎo)航欄添加到Android設(shè)計(jì)材料指南，這個(gè)Android社區(qū)新聞的迅速蔓延，引并且引發(fā)了關(guān)于底部欄的視覺(jué)效果以及功能性的熱烈爭(zhēng)論。

Android 底部導(dǎo)航欄

一開(kāi)始，與其他人一樣，我們的熱情被完全澆滅了。選擇谷歌扔給我們的這個(gè)全新的、沒(méi)有經(jīng)過(guò)驗(yàn)證的導(dǎo)航方式，而放棄我們努力了幾個(gè)月的成果，讓我們感到很恐慌。然而，我們還是決定在較短時(shí)間內(nèi)為我們的 Android 應(yīng)用發(fā)布一個(gè)新版本，成為最先使用新導(dǎo)航欄的應(yīng)用之一。

移動(dòng)設(shè)備上的導(dǎo)航欄和菜單一直都是一個(gè)熱門(mén)話題，尤其是當(dāng) 漢堡菜單 被引入，同時(shí)智能手機(jī)開(kāi)始變成主要的信息消費(fèi)設(shè)備。這種三條線的菜單變成了許多主要應(yīng)用(如 Facebook、Spotify 以及 Youtube)的默認(rèn)導(dǎo)航元素。但是因?yàn)檫@種導(dǎo)航方式將相關(guān)入口從用戶視野中隱藏，使得其變得不那么優(yōu)雅了。對(duì)于 iOS 應(yīng)用來(lái)說(shuō)，底部標(biāo)簽欄 作為一種全新的可視化導(dǎo)航欄，快速成為了蘋(píng)果智能手機(jī)上實(shí)現(xiàn)一級(jí)導(dǎo)航欄的標(biāo)準(zhǔn)方式。

不幸的是，Android 應(yīng)用缺少一種合適的底部導(dǎo)航欄解決方案，只給應(yīng)用(比如我們的)提供了漢堡菜單。為了在不破壞 Material Design 指南的前提下使得導(dǎo)航欄依然可見(jiàn)，(太多的)應(yīng)用開(kāi)發(fā)者開(kāi)始使用 頂部標(biāo)簽導(dǎo)航欄。雖然標(biāo)簽在簡(jiǎn)單的應(yīng)用上工作良好，但是當(dāng)需要使用二級(jí)導(dǎo)航或者有三個(gè)以上入口的時(shí)候，就會(huì)出現(xiàn)空間不足的問(wèn)題?？紤]到移動(dòng)設(shè)備的 “拇指區(qū)域(Thumb Zones)”，頂部空間也被認(rèn)為是對(duì)于智能手機(jī)用戶來(lái)說(shuō)難以點(diǎn)擊的區(qū)域，特別是與底部導(dǎo)航欄相比。

隨著 Material Design 底部導(dǎo)航欄的引入，谷歌意識(shí)到了應(yīng)用開(kāi)發(fā)者所面臨的挑戰(zhàn)，并且提供了從用戶的角度出發(fā)的解決方案，以實(shí)現(xiàn)一種脫離漢堡式的一級(jí)導(dǎo)航欄。這使得我們非常樂(lè)于使用它。在決定使用底部導(dǎo)航欄之后，我們進(jìn)入了最具有挑戰(zhàn)性的部分——設(shè)計(jì)階段。在大量的規(guī)范和動(dòng)畫(huà)中，我們不得不做出了一些 UX 和產(chǎn)品的重要決定：

我們的底部導(dǎo)航欄

• 滾動(dòng)時(shí)隱藏： 我們希望在用戶的屏幕上顯示盡可能多的內(nèi)容。因此，我們決定在向下滾動(dòng)的時(shí)候隱藏導(dǎo)航欄，從而給內(nèi)容區(qū)域提供更多的空間。而向上滾動(dòng)可以使導(dǎo)航欄重新顯現(xiàn)。
• 變換式導(dǎo)航欄： Material Design 底部欄有一個(gè)非常平滑的動(dòng)畫(huà)，它參考了變換式導(dǎo)航欄——在不同目標(biāo)間切換的時(shí)候，被選中的部分會(huì)被放大，同時(shí)未被選中的元素會(huì)被向后移動(dòng)，從而在導(dǎo)航欄上瀏覽不同的目標(biāo)就有點(diǎn)像在瀏覽一個(gè)旋轉(zhuǎn)木馬。我們決定要使用這種效果因?yàn)樗沟们袚Q導(dǎo)航目標(biāo)變得更加有趣了。我們希望這可以推動(dòng)我們的用戶更多地在應(yīng)用的不同功能組間切換。同時(shí)，該動(dòng)畫(huà)在我們的下一個(gè)觀點(diǎn)中非常重要。
• Material Design 的外觀和體驗(yàn)： 我們希望這個(gè)底部導(dǎo)航欄盡可能地融入原生 Android 環(huán)境。這意味著在動(dòng)畫(huà)和視覺(jué)設(shè)計(jì)上投入更多。只有這樣做我們才能夠在我們的 Android 用戶群中獲得高接受度——我們最不希望看到的就是用戶在與導(dǎo)航欄交互時(shí)懷疑他們?cè)谑褂脧囊粋€(gè) iOS 簡(jiǎn)單拷貝過(guò)來(lái)的應(yīng)用。
• 保存狀態(tài)： 使用底部導(dǎo)航欄的應(yīng)用需要記住用戶在每一個(gè)視圖組都做了什么，這與漢堡菜單非常不同。因?yàn)榭梢?jiàn)的分組安排就是為了更快速和頻繁的切換，所以每一個(gè)視圖組的點(diǎn)擊路徑都應(yīng)該被儲(chǔ)存起來(lái)，這樣用戶就可以很方便地返回之前的任務(wù)。 相反的是，使用漢堡菜單的應(yīng)用不會(huì)儲(chǔ)存狀態(tài)，當(dāng)應(yīng)用回到一個(gè)分組時(shí)，應(yīng)用都會(huì)從視圖的第一層級(jí)重新開(kāi)始?；谀銘?yīng)用的基礎(chǔ)結(jié)構(gòu)，保存分組中的狀態(tài)可能會(huì)成為一個(gè)巨大的技術(shù)難題，因此我建議盡早與你的開(kāi)發(fā)團(tuán)隊(duì)討論此事。
• 減少分組的數(shù)量： 當(dāng)我們從漢堡菜單轉(zhuǎn)換到底部導(dǎo)航欄的時(shí)候，我們只需要轉(zhuǎn)換少量分組以便于管理，這樣可以讓我們更快完成設(shè)計(jì)和開(kāi)發(fā)，同時(shí)也可以確保只給用戶展示最重要的入口。這使得我們將設(shè)置的入口移動(dòng)到了右上角的三點(diǎn)菜單中，而不是將它放在最重要的特性(如搜索，書(shū)簽和推薦)旁邊。我建議在確定將哪些功能放在導(dǎo)航欄中時(shí)應(yīng)該盡量嚴(yán)格。如果你的應(yīng)用有大量分組，底部欄可能會(huì)相對(duì)難以實(shí)現(xiàn)，并且你可能需要考慮將其中的一些合并或者重新排列。幸運(yùn)的是，我們并不需要做這些。
• 保持精干 雖然你需要搞清楚你在新導(dǎo)航欄中想實(shí)現(xiàn)哪些特性，但更重要的是，不要在驗(yàn)證核心想法正確與否之前過(guò)分沉迷于細(xì)節(jié)。因此，我們底部導(dǎo)航欄的最小可行產(chǎn)品并沒(méi)有包含大量的額外修飾。當(dāng)然，我們最終將會(huì)把這些附加物加入我們的產(chǎn)品中，我們只是希望在一開(kāi)始就能確認(rèn)我們做的是否正確。我們甚至向一小部分用戶發(fā)布了一個(gè)無(wú)法保存用戶狀態(tài)(詳見(jiàn)之前的觀點(diǎn))的版本。我們?cè)跍y(cè)試樣本中看到了積極的數(shù)據(jù)后，才開(kāi)始處理后續(xù)任務(wù)。

需要注意的是，雖然谷歌的 Material Design 指南 可能為如何使用這種新導(dǎo)航欄提供了詳盡的定義，你依然需要基于你自己的目標(biāo)以及你應(yīng)用的工作方式來(lái)做一些重要的決定。

我們使用 Google Play 分階段發(fā)布 功能小心地鋪開(kāi)我們的新導(dǎo)航欄，以確保這個(gè)改變實(shí)現(xiàn)了我們預(yù)想的效果。幸運(yùn)的是，我們很快確認(rèn)了它做到了：

增加了用戶參與度： 我們的用戶變得更加積極，這使得我們的訪問(wèn)量顯著增加了(PV 和 月活躍用戶都有兩位數(shù)的增長(zhǎng))。同時(shí)，我們的用戶回訪更加頻繁了，這意味著新導(dǎo)航欄與用戶形成了共鳴，從而提高了用戶粘性(訪客數(shù)量和月活用戶都有接近兩位數(shù)的增長(zhǎng))。

應(yīng)用各功能組訪客數(shù)量增長(zhǎng)了： 重要的應(yīng)用功能，像書(shū)簽以及工作推薦，現(xiàn)在都在底部欄中可見(jiàn)了，并且從數(shù)據(jù)中反映出其使用量大大增加(進(jìn)入這些功能組的用戶數(shù)量有兩到三位數(shù)的增長(zhǎng))。這個(gè)增長(zhǎng)幫助我們更好地向用戶展示我們獨(dú)特的優(yōu)點(diǎn)，同時(shí)也提高了整個(gè)產(chǎn)品的體驗(yàn)。

無(wú)負(fù)面用戶反饋 到目前為止，無(wú)論是通過(guò)直接的用戶反饋或者是通過(guò)應(yīng)用評(píng)價(jià)，我們都沒(méi)有收到過(guò)對(duì)于新導(dǎo)航欄的抱怨。而通過(guò)上述途徑，我們可以看到很多正面的反饋。

漢堡菜單 vs 無(wú)漢堡菜單：我們應(yīng)用在導(dǎo)航欄改變前后的對(duì)比

我們得到一個(gè)新的Android回報(bào)底部導(dǎo)航欄，我們已經(jīng)成功地實(shí)現(xiàn)目標(biāo),提高用戶體驗(yàn)和KPI性能。因此，如果您的應(yīng)用程序也是依賴于漢堡導(dǎo)航，我強(qiáng)烈建議你探索這個(gè)機(jī)會(huì)轉(zhuǎn)化為可見(jiàn)的導(dǎo)航欄。當(dāng)然，在開(kāi)發(fā)前的大量輸入需要修改的設(shè)計(jì)初步了解總額的工作有了更深的了解。

你可以從這里查看我們最新版本的應(yīng)用，最新版本中會(huì)有我們隨后對(duì)底部導(dǎo)航欄的設(shè)計(jì)調(diào)整。這個(gè)應(yīng)用是針對(duì)德國(guó)就業(yè)市場(chǎng)的，所以它可能不會(huì)有你所在地的完整職位列表。我歡迎任何的問(wèn)題以及想法，并且期待你們的評(píng)論和郵件。

最后但同樣重要的是，我想要對(duì)我們超棒的設(shè)計(jì)和開(kāi)發(fā)團(tuán)隊(duì)說(shuō)謝謝！他們精巧地實(shí)現(xiàn)了這個(gè)新的導(dǎo)航方式，并使得整個(gè)實(shí)現(xiàn)過(guò)程令人愉悅和興奮。

文章下載，點(diǎn)擊：有了新的 Android 交互設(shè)計(jì)方案，與漢堡菜單說(shuō)拜拜