前言

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

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

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

導航欄基本介紹

1. 導航欄在哪里？

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

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

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

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

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

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

例如在線上讀書、地圖導航過程中，系統(tǒng)會將導航欄進行隱藏，因為這時用戶的關注點只會長時間停留在內(nèi)容本身，沒有頻繁的操作需求，隱藏導航欄既能預留空間，還能減少無關元素對用戶的干擾；使用滴滴出行在選擇服務車型時，會暫時隱藏導航欄的背景容器，只保留了相關圖標操作入口，雖然沒有全部隱藏，但對本就不寬裕的地圖空間能起到一定的緩解作用，相比上述處在導航過程中，線下場景的操作需求、頻率顯然要高出許多。

導航欄的結(jié)構(gòu)組成

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

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

1. 容器

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

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

2. 標題

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

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

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

3. 圖標

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

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

4. 按鈕

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

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

5. 搜索框

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

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

6. 用戶頭像

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

7. 標簽/分類

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

8. 更多菜單

上述提到的標簽是對產(chǎn)品內(nèi)容的分類，而這里更多指的是產(chǎn)品、系統(tǒng)的輔助功能。

當頁面的某些功能操作頻率較高或與當前頁面信息相關聯(lián)但不方便直接展示入口、也可能因?qū)Ш綑谑Ｓ嗫臻g不足以承載時，將功能放置在更多菜單中，既能適當?shù)慕o用戶提供操作入口，也能滿足產(chǎn)品多方面的隱性需求。

9. 分割線

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

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

導航欄樣式分類

1. 常規(guī)樣式

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

2. 大標題

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

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

3. 搜索框類型

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

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

4. Tab 導航

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

5. 通欄導航欄

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

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

6. 小程序

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

內(nèi)容區(qū)域的交互關聯(lián)

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

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

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

2. 界面上滑，導航欄內(nèi)容減少

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

3. 界面上滑，導航欄內(nèi)容增加

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

4. 導航欄與內(nèi)容區(qū)域的信息分割

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

導航欄的相同點/不同點

1. 同一應用中的相同點

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

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

2. 不同平臺中的差異

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

另外，Android 一般會在容器底部增加投影，以區(qū)分導航欄與內(nèi)容區(qū)域的分割；iOS 除上述（2-9）提到的分割元素外，還可以使用高斯模糊且?guī)Р煌该鞫鹊姆绞絹韰^(qū)分，毛玻璃效果的味道。

結(jié)語

導航欄幾乎是每個界面必定存在的控件，雖然常用，但并不是每個設計師都能將其設計的優(yōu)秀，需要在基礎設計規(guī)范、作用之上，賦予其更大的產(chǎn)品價值。"如果逃不掉，那就靜下心來享受"，導航欄既然不能輕易刪減，那么就把它設計好，或許還能帶來意想不到的好處。

以上內(nèi)容集合了筆者使用眾多 APP 后以及根據(jù)工作中的經(jīng)驗總結(jié)，讓我們從更全面的角度來看待導航欄在不同頁面、不同應用中的使用方式和設計細節(jié)，以及不同場景下的交互變化，讓信息變得更高效，用戶使用起來更便捷。本篇文章希望能幫大家看到在設計導航欄的時候可能忽略的一些問題。每次的總結(jié)梳理，都是一次知識、能量的升華，個人拙見及表達方式固然不能盡善盡美，歡迎一起交流、進行思維碰撞。

作者：能量眼球