底部導航欄概述

底部導航欄

在這篇文章中學會提問，學會實踐探索。

本文章将會從導航的本意開始，先講明材質設計中對于該元件的相關内容再加以材質設計指南與人類互動指南對于移動裝置底部導航的規範對比、部分谷歌以及蘋果應用對該元件的實作現狀來講述這個後期才加入材質設計指南且備受争議的元件。

圖檔來自 Material-io.cn

·目的地：粗略了解為使用者想要使用的各個功能頁面

了解導航

導航使使用者能夠在應用程式各個功能頁面中移動。

導航類型

導航是在應用程式的螢幕之間移動以完成任務的行為。它通過多種方式啟用：專用導航元件、将導航行為嵌入到内容中 (例如: 通過一個顯示行程資訊的卡片可以查閱先前訂閱的酒店詳細資訊) 以及平台可供性 (目前無需掌握)。

導航方向

根據您應用的資訊架構，您的使用者可以在三種導航方向之間移動：

• 橫向導航( Lateral navigation ) 是指在同一層次結構的螢幕之間移動。應用程式的主要導航元件應提供對其層次結構頂層的所有目的地的通路。
• 向前導航( Forward navigation ) 是指在連續的層次結構、流程中的步驟或跨應用程式的螢幕之間移動。向前導航将導航行為嵌入到容器（例如卡片、清單或圖像）、按鈕、連結中或通過使用搜尋。
• 反向導航( Reverse navigation ) 是指按時間順序（在一個應用程式内或跨不同應用程式）或分層（在一個應用程式内）在螢幕上後退移動。平台約定決定了應用程式中反向導航的确切行為。

橫向導航？

利用頂部頁籤的橫向導航方式允許在此音樂應用程式資訊架構的頂級導航之間移動。

橫向導航是指在同一層級的螢幕之間移動。 它支援通路不同的應用程式目的地和功能，或在一組項目中的相關項目之間切換。

目的地和層次結構

應用程式的主要導航元件應提供對其層次結構頂層的所有目的地的通路。 具有兩個或多個頂級目的地的應用程式可以通過導航抽屜、底部導航欄或頁籤提供橫向導航。

底部導航欄

底部導航欄在螢幕底部顯示三到五個目的地。 每個目的地都由一個圖示和一個可選的文本标簽表示。 當點選底部導航圖示時，使用者将被帶到與該圖示關聯的頂級導航目的地。

重要原則

• 符合人體工程學

  底部導航欄在手持移動裝置上會容易觸摸。

• 持續出現

  使用時，底部導航欄出現在每個螢幕的底部 (不要死闆，後面會談到)。

• 重要程度相同

  底部導航欄目的地的地位應該同等重要。

上文提到了橫向導航可以使用此方式來引導使用者進行應用功能間的移動，這也是目前移動裝置上較為流行的導航方式之一，畢竟，在螢幕逐漸增大的手持移動裝置中，使用拇指點選螢幕底部的導航會有助于使用體驗。底部導航欄成功地為應用廠商想要加入的熱門功能帶來了流量。但流行不代表着您可以随意使用底部導航欄，根據您的應用想要入駐的平台，可以參考谷歌的材質設計指南 ( Android ) 或者蘋果的人機界面指南 ( iOS ) 來進一步地設計您的底部導航欄。

使用

• 材質設計指南
• 正确使用：
  1. 需要從應用各個位置随時通路的目的地
  2. 三至五個導航項
  3. 僅限使用于平闆或者手機
• 錯誤使用：
  1. 針對單個程式動作 例如點選後撰寫新的郵件内容或隻浏覽單封郵件
  2. 引導到使用者界面偏好設定或者應用設定
  3. 使用少于 3 個導航項或多于 5 個導航項
• 謹慎使用
  • 結合底部導航欄和頂部頁籤可能會導緻導航層級混淆，因為它們與内容的關系可能不清楚。 頁籤之間導航相似的内容，而底部導航目的地是頂級的并且彼此斷開并無關聯。(例如: 在一個圖檔百科軟體中，使用者先搜尋寵物，出現了一個結果，頁面頂部三個頁籤導航内容分别為：狗、貓、鳥 等，這些分類是類似的導航項目。在這個圖檔百科軟體中，底部導航欄包含了三個導航項：推薦、搜尋、曆史，這些内容之間沒有任何聯系)
  • 相關文章
    • 頂部頁籤
    • 導航抽屜

• 人類互動指南 (有删減)

  ·标簽欄：類似于底部導航欄

  • 通常，使用标簽欄在各應用程式功能頁面級别組織資訊。标簽欄簡化了應用資訊層級并且能同時提供幾個同級别的子產品
  • 嚴格使用标簽欄進行導航。不要用來啟用功能
  • 使用正确數量的标簽。過多的标簽項會減小各個标簽項自身的可觸碰面積，同時複雜化你的導航，這會使得您的使用者難以定位資訊。過少的标簽項會使得您的互動邏輯出現失聯的可能，雖然在标簽過多的情況下您可以添加一個 “更多” 标簽項來引導使用者進入一個單獨的頁面來展示更多的标簽項，但結果就是通路這個單獨頁面中的各個功能需要多一步點選，在影響流量的同時也是不能合理利用空間的展現
  • 當人們導航到您應用中的不同區域時，不要隐藏标簽欄。
  • 當其功能不可用時，不要删除或禁用頁籤

    

    如果頁籤在某些情況下可用但在其他情況下不可用，則您的應用程式界面會變得不穩定且不可預測。 確定所有标簽項始終處于啟用狀态，并解釋标簽項内容不可用的原因。 例如，如果 iOS 裝置上沒有歌曲，“音樂” 應用中的 “資料庫” 标簽項頁面會說明如何能顯示歌曲。
  • 始終在标簽項的附加視圖中保持上下文狀态。為了讓你的界面保持可預測性，選擇一個标簽項應該總是影響直接附加到标簽欄的視圖，而不是螢幕上其他地方的另一個視圖。 例如，選擇 “推薦” 不應導緻 “曆史” 的翻閱位置内容突然更改 (之後再次點選 “曆史” 時保留使用者的翻閱位置和操作記錄)。 在彈出視窗中選擇選項不應導緻彈出視窗底部的的視圖發生變化。
  • 確定标簽欄字形在視覺上保持一緻和平衡。

對比

兩個規範無一不在強調底部的操作隻能專注于導航，并且對底部導航欄的導航數量作了限制——不要過少或過多。同時，兩個規範都提到了很戲劇的一點：為了從應用的各個位置通路導航，請持續顯示底部導航。

實際上呢？

• Google Mail (郵箱): 首頁顯示底部導航欄，點選閱覽單封郵件時底部導航欄下滑 隐藏 。傳回主界面時保留之前翻閱位置，再次點選 “郵件” 将會更新翻閱狀态并回到頂部。
• Google Photo (相冊): 首頁顯示底部導航欄，點選閱覽單張圖檔時底部導航欄快速 漸隐，新的工具欄快速漸出在底部，為了更好的浏覽照片，工具欄背景透明。傳回主界面時保留之前翻閱位置，再次點選 “照片” 将會更新翻閱狀态并回到頂部。
• Google Drive (雲端硬碟): 首頁顯示底部導航欄，點選查閱單個檔案時，右側快速滑入新的界面并且直接 覆寫 掉底部導航欄。不保留翻閱位置，每次進入首頁都會進行重新整理。
• Apple 音樂: 持續顯示底部導航欄。點選正在播放的狀态元件會放大該元件至全屏，而底部導航欄快速下滑被正在播放頁面 擠壓出 螢幕傳回主界面時保留之前翻閱位置，再次點選相同标簽項将會更新翻閱狀态并回到頂部。
• Apple 照片：首頁顯示底部導航欄，點選閱覽單張圖檔時底部導航欄快速 漸隐，新的工具欄快速漸出在底部，傳回主界面時保留之前翻閱位置，再次點選 “照片” 将會更新翻閱狀态并回到頂部。
• Apple 應用商店: 由于使用者不能對未下載下傳的推薦應用作出修改操作，将 持續顯示 底部導航欄。從應用詳情頁面傳回主界面時保留之前翻閱位置，再次點選點選相同标簽項将會更新翻閱狀态并回到頂部。

說明了什麼？

對于某歌應用某些情況下不遵守文檔來開發應用順便反手更改文檔規範我先表示 <beep——>

在前文中提到材質設計針對底部導航欄提出的重要原則時，我已經強調過，不要死闆的閱讀文檔。沒有實際為使用者體驗着想地進行設計或者說在不了解文檔、指南真正含義的情況下忘我的背書——将會帶領一個應用走向死亡。

為什麼這麼說？

請先閱讀：

1. 材質設計提及 “需要從應用各個位置随時通路的目的地”
2. 人類互動指南寫明 “當人們導航到您應用中的不同區域時，不要隐藏标簽欄”

應用各個位置和應用中的不同區域到底指代的是什麼情況下顯示底部導航欄、需要注意什麼，您現在是否有數？

• 在各個頂級的頁面中導航時顯示
• 如果使用者不能對其中的内容進行操作，請顯示
• ！請務必保留使用者的翻閱狀态，除非使用者再次點選導航項/标簽項，請勿重新整理頁面狀态

留在最後

引用有知乎設計師工作經曆的 NovaDNG 的一句話：

文章相關内容

導航選擇參考

了解導航

導航抽屜 - Material Design

底部導航欄 - Material Design

頂部頁籤 - Material Design

标簽欄 - Human Interface Guidelines