編輯導語：APP的頂部導航欄是UI設計中必不可少的組成部分，它集合了用戶常用或必用的一些功能，指引用戶進行操作，所以做好導航欄的用戶體驗是非常重要的。本文作者對導航欄的設計風格、組成結構、樣式、交互等方面進行了總結，一起來看一下吧。

APP的頂部導航欄（以下簡稱“導航欄”）對我們來說再熟悉不過了，它是UI設計中必不可少的組成部分，幾乎每一個頁面都會使用到。雖然看起來很簡單，感覺不需要花費多少精力，但設計一個與產品需求、用戶目標匹配度較高的導航欄并非那么容易，這里面有很多需要注意的設計細節。

導航欄集合了用戶常用或必用一些功能，復用率極高，當用戶在進行部分路徑操作時，導航欄就像黑暗中的一盞“明燈”，指引著用戶進入下一步或回到上一步操作，所以做好用戶體驗是非常重要的。

我們每天都在跟導航欄打交道，如果仔細觀察就會發現，不同應用的頂部導航欄都或多或少的存在一些差異，為了讓大家對導航欄有一個更清晰、全面的認識，本文將對導航欄的設計風格、組成結構、樣式、交互等多方面做出總結，希望能幫到大家，一起來看看吧。

一、導航欄基本介紹

1. 導航欄在哪里？

在UI設計組件中，如標簽欄、菜單欄、Tab欄、應用欄、標題欄、導航欄……等諸多類型和叫法中，有很多新人設計師難以區分這些重復叫法以及對應的所在區域。

導航欄位于應用程序的頂部，即狀態欄下方，主要用于明確頁面位置、層級等，并且連接著父/子級結構頁面，權重應高于當前頁面的所有內容。如果用戶不知道當前所在位置、如何回到上一步的時候，就說明導航欄一定存在問題。雖然在iOS系統中叫做「導航欄」、Android系統叫「頂部應用欄」，叫法不一，但所在位置以及起到的作用幾乎一致。

2. 導航欄能起到什么作用？

首先，導航欄能告知用戶當前所在位置，并提供回到上一步或部分下一步操作入口，不至于讓用戶迷失方向；其次，以頂部Tab的方式將當前頁面內容作出整理分類，并將各類型入口聚合在導航欄，給用戶提供全局操作；最后，還能增加品牌曝光，例如容器品牌色、圖標品牌色等，甚至在有必要的情況下放置品牌LOGO。

3. 為什么有的頁面沒有導航欄？

當系統想要給用戶提供更多信息或用戶需要沉浸式的使用體驗，這時系統需要弱化、隱藏導航欄來釋放更多的頁面空間，以備增加單屏頁面信息量的空間資源預留。

例如在線上讀書、地圖導航過程中，系統會將導航欄進行隱藏，因為這時用戶的關注點只會長時間停留在內容本身，沒有頻繁的操作需求，隱藏導航欄既能預留空間，還能減少無關元素對用戶的干擾；

使用滴滴出行在選擇服務車型時，會暫時隱藏導航欄的背景容器，只保留了相關圖標操作入口，雖然沒有全部隱藏，但對本就不寬裕的地圖空間能起到一定的緩解作用，相比上述處在導航過程中，現下場景的操作需求、頻率顯然要高出許多。

二、導航欄的結構組成

常見的導航欄分為左、中、右結構，主要由返回按鈕（左）、標題（中）、輔助操作按鈕（右）三部分元素組成，這也是基于大家最常用、常見的布局方式。

在實際應用中，為了滿足多元化的產品需求及用戶目標，根據不同的場景，導航欄的布局方式也非常多，不管樣式多么復雜，這也僅僅是站在設計角度，其目的還是為了讓用戶操作起來更簡單、便捷。下面以iOS的2倍圖為例對導航欄進行一一拆解，看看我們所見過形形色色的導航欄到底會用到哪些元素、組件。

1. 容器

即導航欄的范圍約束容器，所有元素都應該在容器里面。在iOS系統應用中，常規導航欄的固定高度為88px，即便在大標題導航樣式下，不管當前的高度是多少，隨著界面的滾動，隨后也會轉換為88px的常規高度，例如iPhone界面、產品經理應用等。

另外，部分應用為了釋放更多界面空間，從表面上看不到容器的存在，實際是將容器的不透明度調整為0，邏輯上容器是依然存在的，且各元素依然受到容器的約束，例如滴滴打車界面。

2. 標題

標題用于描述用戶當前所在位置或頁面的具體所在場景，在iPhone全面屏出現之前，因設備屏幕空間有限，大部分使用常規標題，即34px~40px（柵格所需、筆者常用36px）加粗且居中標題文字。

當全面屏設備逐漸普及后，屏幕的高度得到了進一步擴展，導航欄的可發揮空間必然增加，大標題風格開始興起，隨后也被引入了設計平臺規范。大標題導航欄主要取決于產品定位與功能影響，并不單單是設計風格的問題，毫無疑問，大標題能讓頁面頭部有更多的留白空間，呼吸感更強，非常適合產品結構不深、功能單一且體量級別較輕的應用，也就是我們常說的「小而美」，人人都是產品經理平臺在這方面做的相當出色。

大標題導航欄的容器高度為192px，字號通常設定在56px~68px（柵格所需、筆者常用64px）的范圍，頁面上滑后，會恢復到88px的常規高度，標題字號也隨之減小。

3. 圖標

主頁面導航欄中的圖標比較多元化，例如左側常見的定位、品牌logo、抽屜菜單入口等，右側例如搜索、消息、掃一掃、更多……

二級及以后的頁面導航圖標相對固定，左側必定有一個返回到上級頁面的“回退”圖標，可以是向左剪頭、向下剪頭、關閉按鈕等。需要注意的是，不管設計什么樣式，都需要符合“回退”樣式預期，確保用戶不會產生疑惑。右側一般放置功能圖標，如次級功能延展、信息提交、刪除等，最多不超過兩個操作入口，避免造成功能層級混亂。

4. 按鈕

導航欄的左側已被「返回」圖標占領，按鈕基本只能放在右側，且以文字按鈕樣式居多，主要用于承載頁面的輔助操作、功能入口。

當導航有足夠的縱向空間時，也可使用如圓形、方形、圓角矩形類型的容器按鈕，需通過按鈕的形狀、大小、填充、描邊等樣式來確定在頁面中的視覺權重，靈活區分主次層級關系，好的導航按鈕總能抓住用戶的注意力。

5. 搜索框

當搜索功能權重較高，用圖標、按鈕作為入口已不能滿足用戶頻繁的搜索需求時，就會以輸入框的方式占據導航欄大部分區域，不僅能突出搜索功能、向用戶推薦搜索內容標簽，還能提升產品的可操作性，隨著搜索框區域的擴大，用戶無需精準點擊，觸手可及。

對于內容較多的首頁，導航欄需要承載如標題、分類、頭像、按鈕等諸多信息，這是可適時增加導航欄的高度，搜索框放在第二行展示，可避免過度弱化搜索框給用戶帶來操作上的影響，例如京東、淘寶等電商類型的應用。如果想節省頁面整體縱向空間，若條件允許，可在頁面上滑后縮小導航欄高度，只顯示搜索框，例如美團外賣。

6. 用戶頭像

很多社交類產品，會在導航欄的左、右側放置用戶的頭像信息，方便隨時調用與用戶相關的功能。例如點擊后進入個人設置、個人信息展示、會員中心、個人主頁等。

7. 標簽/分類

導航欄的分類菜單包括分段控件和標簽導航，分段控件通常包含2~4個標簽，直接點擊進行內容切換，不支持左右滑動；標簽導航則相對靈活，很適合分類較多的內容，可通過左右滑動來查看所有分類，實現更方便的導航。

8. 更多菜單

上述提到的標簽是對產品內容的分類，而這里更多指的是產品、系統的輔助功能。

當頁面的某些功能操作頻率較高或與當前頁面信息相關聯但不方便直接展示入口、也可能因導航欄剩余空間不足以承載時，將功能放置在更多菜單中，既能適當的給用戶提供操作入口，也能滿足產品多方面的隱性需求。

9. 分割線

分隔線并不僅僅是一條線，它可以是線、面或投影，用于分隔導航欄與內容區域的一個邊界線，通過視覺阻斷的方式讓用戶感知內容區域，避免在頁面產生上下滑動交互后重復掃視頂部位置。

分割線是為了體現導航欄與內容界面的層級關系，缺少視覺分割可能會讓用戶感覺它們是一個平級，會增加感知難度。當然，并不是所有的應用或界面都需要視覺分割，例如：界面內容極少、界面背景色與導航欄容器背景色值有明顯差異、多圖/多卡片……

三、導航欄樣式分類

1. 常規樣式

最常見的樣式，95%以上的2級及后續界面使用的都是常規導航欄，部分較為簡單的主頁也會使用這種類型。以iOS的2倍圖為例，容器高度固定在88px，基本只有按鈕、標題組成，背景色多為白色或主體色。

2. 大標題

在iOS11系統發布之后，大標題導航欄逐漸流行。大標題一般只出現在主頁面（底部標簽功能分類），至于基礎規范上述有詳細說明。

大標題導航欄會給人一種高逼格、通透的空間感，整體風格偏向簡約大氣，并不適合電商類型應用，因所占空間較大，適合用在如新聞資訊、社交、工具型且功能較為單一的應用。

3. 搜索框類型

根據搜索功能的權重，在常規導航欄中添加一個搜索框并替代標題展示。因空間限制，搜索框高度一般設置在56px~64px，寬度隨其他功能圖標的多少而定，若圖標較多，可將搜索框放在第二行。

如無特別需要，盡量將搜索框整體居中，讓兩側的間距相等或兩側圖標數量相同，以提升視覺美觀度。

4. Tab導航

Tab欄有分段控件和多標簽導航兩種，需明確突出已選中的標簽即可，上述有詳細規范說明，暫不做贅述。

5. 通欄導航欄

通欄導航可以是上述類型中的任何一種，唯一不同的是在視覺層沒有容器（或不透明度0%）的存在。在初始化狀態下，它可以與背景/圖片融為一體，對節省頭部空間、渲染氛圍起到很大的作用，同時也能減少導航欄與內容區域的割裂感，電商類應用中很常見。

在頁面上滑至背景消失后，會逐漸恢復至常規樣式。尤其要注意背景色與導航欄中元素的色彩明暗對比（例如圖標深色、背景就必須淺色），如若背景不可控，建議在導航欄下方增加一個黑色透明漸變蒙層，以確保證信息的可識別性。

6. 小程序

不管是哪個平臺的小程序，我們都可以理解為內嵌的“子級”APP，其導航欄右上角一部分區域為“父級”APP原生功能，是無法作出任何修改的，這是硬性規則。除此之外，至于放什么元素、用什么類型可隨意發揮。

四、內容區域的交互關聯

眾所周知，導航欄最主要的作用是方便用戶隨時進行上一步或部分功能的下一步操作，幫助用戶不迷路，但有時候，導航欄還能協助用戶快速完成任務，以及交互后的內容管理、信息層級重新劃分等。

1. 導航欄中的按鈕點擊交互

當用戶與導航欄中的文字/圖標按鈕產生交互時，不用離開此頁面就對內容進行管理并能即時反饋，例如增加、刪除、分享等操作，協助用戶快速完成任務。

2. 界面上滑，導航欄內容減少

隨著界面的向上滑動，大標題、或帶搜索功能且占據兩行的大尺寸導航欄將恢復至常規尺寸，信息的數量、層級也將重新劃分，以弱化導航欄吸引力的方式，減少對用戶的干擾。

3. 界面上滑，導航欄內容增加

界面產生上滑交互后，原本常規樣式的導航欄會自動增加信息內容。例如美團外賣，首屏上滑至一半時，將特色標簽及篩選入口懸浮至導航欄，目的是為了幫助用戶快速做出決策。

4. 導航欄與內容區域的信息分割

大多數用分隔線直接分割，但部分產品為了保持界面的干凈整潔、減少無關信息的干擾，在無任何交互產生的情況下，導航欄與內容區域的元素間隔較遠，利用空間留白自動形成視覺分割，當產生滾動交互后，留白不可控，就會在導航欄下方增加投影、分隔線或毛玻璃效果，進行視覺分割。

五、導航欄的相同點/不同點

1. 同一應用中的相同點

導航欄在同一個應用中的高度、位置及其部分屬性（字號、圖標大小、用色規范）需具備統一性，這也是格式塔心理學中的「一致性」對UI設計的硬性要求。即便是大標題樣式，那么底部標簽欄（主結構、功能）所對應頁面的導航欄也會遵循一致性要求。當然，部分只在首頁設定大標題樣式的應用除外。

顧名思義，導航欄還需要具備導航的作用，不管什么時候，用戶只要一抬頭（掃視導航欄）就能清楚知道當前正處于什么位置或流程，這主要從標題（后續會有標題設計的單獨文章）信息中快速獲取，如果當前頁面不設標題，那么用戶需要在頁面頭部某些層級較為突出的關鍵信息中獲取，一旦頁面滑動覆蓋至關鍵信息位置，就需要呈現標題給用戶指路，避免用戶產生疑惑而付出更多的時間、增加理解難度。

2. 不同平臺中的差異

這里主要指的是iOS、Android兩大系統，在同等比例、同寬度前提下，Android（MD設計規范）系統的標題為左對齊，且容器高度比iOS要高；iOS系統一般只會在大標題樣式下讓標題左對齊。

另外，Android一般會在容器底部增加投影，以區分導航欄與內容區域的分割；iOS除上述（2-9）提到的分割元素外，還可以使用高斯模糊且帶不透明度的方式來區分，毛玻璃效果的味道。

六、結語

導航欄幾乎是每個界面必定存在的控件，雖然常用，但并不是每個設計師都能將其設計的優秀，需要在基礎設計規范、作用之上，賦予其更大的產品價值?！叭绻硬坏?，那就靜下心來享受”，導航欄既然不能輕易刪減，那么就把它設計好，或許還能帶來意想不到的好處。

以上內容集合了筆者使用眾多APP后以及根據工作中的經驗總結，讓我們從更全面的角度來看待導航欄在不同頁面、不同應用中的使用方式和設計細節，以及不同場景下的交互變化，讓信息變得更高效，用戶使用起來更便捷。

本篇文章希望能幫大家看到在設計導航欄的時可能忽略的一些問題。每次的總結梳理，都是一次知識、能量的升華，個人拙見及表達方式固然不能盡善盡美，歡迎一起交流、進行思維碰撞。

#專欄作家#

大漠飛鷹；公眾號：能量眼球，人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘，利用設計的手段為受眾用戶帶來更好的體驗，即好看、好用。

本文原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。