底部導航欄可以說是現在最流行的導航控件了，微信、支付寶、淘寶、網易云音樂等等，各種類型的 APP 都有應用。

如何使用這種極普遍的導航控件呢？先來看看在 Material Design 規范和 iOS 規范下的基本交互特性。

Material Design規范

當用戶選擇點擊某個選項時，則應該直接展現相應的頁面，或者刷新當前的頁面；注意不要在點擊后展示菜單或者彈出框（pop-up）。另外，如果點擊系統返回鍵，不會切換到底部導航欄上一次點擊的頁面。

另外，有以下三點需要注意：

• 點擊當前選項的圖標，則頁面返回頂部。即如果當前在第一個 tab，點擊第一個 tab，頁面回到頂部。
• 點擊底部導航欄中的選項后，應該返回該頁面頂部并刷新該選項的頁面（這一點筆者認為也不是必要，需要根據應用自身的場景來判斷）。
• 當點擊底部導航欄中的不同選項時，避免頁面發生橫向切換。

蘋果iOS設計規范

蘋果的設計規范，主要講了以下三點：

• 如果底部導航欄中的某個選項暫時不可用，不要把該選項置灰。在不可用而又點擊了的情況下，頁面只要展示這個頁面為什么沒有內容就可以了。
• 避免使用過多的選項。當然，如果選項過少也會有問題。一般在 iPhone 上，3 到 5 個選項比較合適。在 iPad 上可以適量增加。
• 可以使用肩標來提示信息數量，如下圖所示。

以上是底部 tab 導航欄的基本交互特性。底部 tab 導航，一般用于組織起應用的最頂層內容，其中每個 tab 承載了應用的一個維度的功能。例如微信，每個 tab 都承載了一個維度的功能。

基于這個特點，對于底部 tab 導航欄，最常用的做法是它只出現在一級頁面。當用戶從一級頁面進入到二級頁面，那么底部導航欄會消失。

我也一直認為，底部導航欄就該如此使用：從一級頁進入二級頁，它，必須消失。

然而，事情就怕有例外，而且還是大佬級別的例外。

有一次使用蘋果系統自帶的相冊應用，當我進入二級頁，底部導航欄還存在著。

這不是挑事嗎？無獨有偶，蘋果 App Store 也是如此。

我瀏覽了手機上的快 300 個應用，發現網易云音樂、蝦米音樂也是采用二級頁保留底部導航欄的邏輯。

雖然使用這種邏輯的應用數量較少，但這不能不引起我的質疑：

• 底部導航欄難道不應該就在二級頁消失嗎？
• 用戶已經到了二級頁，還可以切換到別的 tab 嗎？
• 如果二級頁可以保留，那么什么情況下保留？

底部導航欄二級頁存在感研究

我首先從設計規范出發，看一下這樣做是否是符合規范的。

在找遍了 iOS 設計規范和谷歌的 Material Design 設計規范之后，我發現規范里并沒有相關規定。

既然如此，那么從用戶使用的角度，這么做是合理的嗎？

于是我研究了在二級頁保留底部導航的應用，發現這些應用的底部導航欄里的 tab 有一個共同點：每個 tab 的重要性差不多，且應用更偏重于讓用戶發現、探索新內容，而不是沉浸在某個模塊里。

以蘋果自帶的照片應用為例：「照片」tab 以時間為維度組織用戶的照片，「為你推薦」tab 以智能算法為維度，「相簿」以相簿和照片類型為維度，搜索以用戶主動搜索為維度，每種維度都提供了讓用戶搜尋、管理照片的可能。

比如用戶如果需要找某一張特定的照片，他可能先通過相簿來找，當他進入到某個相簿（此時為二級頁），找了一會沒找到，就切換到照片 tab，通過回憶拍照片的大概時間段來尋找了。

其實這種隨時能切換 tab 的方式，跟 PC 網站上，常駐在頁面頂部的導航條很相似。

頂部的導航條，保證了用戶在任何頁面，都可以迅速到達特定的幾個核心頁面。

下面再來研究一下二級頁沒有保留底部導航欄的應用。

上面的三個應用，每個 tab 的重要程度也差不多，但每個模塊提供的功能都相對更沉浸。比如淘寶，第一個 tab「首頁」主要讓用戶瀏覽商品，第二個 tab 則是讓用戶瀏覽各種內容。這兩個 tab 之間，是不需要用戶頻繁切換的。

并且，在進入二級頁后，頁面底部會較為頻繁地出現新的操作欄。

如果二級頁依然保留底部導航欄，那么和底部的操作欄會堆在一起，顯然是不可以的。

切換后是否保留之前狀態

在 iOS 規范里，沒有找到與此相關的說明，但在谷歌的 Material Design 規范里，我找到了間接關聯的一段說明：

• 在 Android 上：點擊某個 tab 后，展示該 tab 的最高一級的頁面內容。重置任何先前的用戶交互和臨時屏幕狀態，例如滾動位置，選項卡選擇和搜索行為。
• 在 iOS 上：點擊某個 tab 后，展示該 tab 里用戶之前的交互結果。如果用戶先前訪問過該 tab，則點擊該 tab 后，展示用戶操作的最后一個屏幕（如果可能，保留其先前狀態）。如果用戶以前沒有訪問過該 tab，則展示該 tab 的最高一級的頁面內容。

上述的說明中，Material Design 規范主要在說明切換 tab 后，是否保留用戶之前的操作結果。總結一下，就是在 Android上，切換后不保留操作結果，在 iOS 上需要保留。

總結

希望用戶更沉浸，則底部導航欄只在一級頁出現；希望用戶更隨意切換，則在二級頁也保留。

當二級頁經常有操作欄時，不建議保留底部導航欄。

如果底部導航欄中的某個選項暫時不可用，不要把該選項置灰。在不可用而又點擊了的情況下，頁面只要展示這個頁面為什么沒有內容就可以了。

避免使用過多的選項。當然，如果選項過少也會有問題。一般在 iPhone 上，3 到 5 個選項比較合適。在 iPad 上可以適量增加。

可以使用肩標來提示信息數量。

歡迎關注作者的微信公眾號：「沐風與體驗設計」