編輯導語：APP的頂部導航欄是UI設計中必不可少的組成部分，它集合了用戶常用或必用的一些功能，指引用戶進行操作，所以做好導航欄的用戶體驗是非常重要的。本文作者對導航欄的設計風格、組成結構、樣式、交互等方面進行了總結，一起來看一下吧。
APP的頂部導航欄（以下簡稱“導航欄”）對我們來說再熟悉不過了，它是UI設計中必不可少的組成部分，幾乎每一個頁面都會使用到。雖然看起來很簡單，感覺不需要花費多少精力，但設計一個與産品需求、用戶目标匹配度較高的導航欄并非那麼容易，這裡面有很多需要注意的設計細節。
導航欄集合了用戶常用或必用一些功能，複用率極高，當用戶在進行部分路徑操作時，導航欄就像黑暗中的一盞“明燈”，指引着用戶進入下一步或回到上一步操作，所以做好用戶體驗是非常重要的。
我們每天都在跟導航欄打交道，如果仔細觀察就會發現，不同應用的頂部導航欄都或多或少的存在一些差異，為了讓大家對導航欄有一個更清晰、全面的認識，本文将對導航欄的設計風格、組成結構、樣式、交互等多方面做出總結，希望能幫到大家，一起來看看吧。
一、導航欄基本介紹在UI設計組件中，如标簽欄、菜單欄、Tab欄、應用欄、标題欄、導航欄……等諸多類型和叫法中，有很多新人設計師難以區分這些重複叫法以及對應的所在區域。
導航欄位于應用程序的頂部，即狀态欄下方，主要用于明确頁面位置、層級等，并且連接着父/子級結構頁面，權重應高于當前頁面的所有内容。如果用戶不知道當前所在位置、如何回到上一步的時候，就說明導航欄一定存在問題。雖然在iOS系統中叫做「導航欄」、Android系統叫「頂部應用欄」，叫法不一，但所在位置以及起到的作用幾乎一緻。
首先，導航欄能告知用戶當前所在位置，并提供回到上一步或部分下一步操作入口，不至于讓用戶迷失方向；其次，以頂部Tab的方式将當前頁面内容作出整理分類，并将各類型入口聚合在導航欄，給用戶提供全局操作；最後，還能增加品牌曝光，例如容器品牌色、圖标品牌色等，甚至在有必要的情況下放置品牌LOGO。
當系統想要給用戶提供更多信息或用戶需要沉浸式的使用體驗，這時系統需要弱化、隐藏導航欄來釋放更多的頁面空間，以備增加單屏頁面信息量的空間資源預留。
例如在線上讀書、地圖導航過程中，系統會将導航欄進行隐藏，因為這時用戶的關注點隻會長時間停留在内容本身，沒有頻繁的操作需求，隐藏導航欄既能預留空間，還能減少無關元素對用戶的幹擾；
使用滴滴出行在選擇服務車型時，會暫時隐藏導航欄的背景容器，隻保留了相關圖标操作入口，雖然沒有全部隐藏，但對本就不寬裕的地圖空間能起到一定的緩解作用，相比上述處在導航過程中，現下場景的操作需求、頻率顯然要高出許多。
常見的導航欄分為左、中、右結構，主要由返回按鈕（左）、标題（中）、輔助操作按鈕（右）三部分元素組成，這也是基于大家最常用、常見的布局方式。
在實際應用中，為了滿足多元化的産品需求及用戶目标，根據不同的場景，導航欄的布局方式也非常多，不管樣式多麼複雜，這也僅僅是站在設計角度，其目的還是為了讓用戶操作起來更簡單、便捷。下面以iOS的2倍圖為例對導航欄進行一一拆解，看看我們所見過形形色色的導航欄到底會用到哪些元素、組件。
即導航欄的範圍約束容器，所有元素都應該在容器裡面。在iOS系統應用中，常規導航欄的固定高度為88px，即便在大标題導航樣式下，不管當前的高度是多少，随着界面的滾動，随後也會轉換為88px的常規高度，例如iPhone界面、産品經理應用等。
另外，部分應用為了釋放更多界面空間，從表面上看不到容器的存在，實際是将容器的不透明度調整為0，邏輯上容器是依然存在的，且各元素依然受到容器的約束，例如滴滴打車界面。
标題用于描述用戶當前所在位置或頁面的具體所在場景，在iPhone全面屏出現之前，因設備屏幕空間有限，大部分使用常規标題，即34px~40px（栅格所需、筆者常用36px）加粗且居中标題文字。
當全面屏設備逐漸普及後，屏幕的高度得到了進一步擴展，導航欄的可發揮空間必然增加，大标題風格開始興起，随後也被引入了設計平台規範。大标題導航欄主要取決于産品定位與功能影響，并不單單是設計風格的問題，毫無疑問，大标題能讓頁面頭部有更多的留白空間，呼吸感更強，非常适合産品結構不深、功能單一且體量級别較輕的應用，也就是我們常說的「小而美」，人人都是産品經理平台在這方面做的相當出色。
大标題導航欄的容器高度為192px，字号通常設定在56px~68px（栅格所需、筆者常用64px）的範圍，頁面上滑後，會恢複到88px的常規高度，标題字号也随之減小。
主頁面導航欄中的圖标比較多元化，例如左側常見的定位、品牌logo、抽屜菜單入口等，右側例如搜索、消息、掃一掃、更多……
二級及以後的頁面導航圖标相對固定，左側必定有一個返回到上級頁面的“回退”圖标，可以是向左剪頭、向下剪頭、關閉按鈕等。需要注意的是，不管設計什麼樣式，都需要符合“回退”樣式預期，确保用戶不會産生疑惑。右側一般放置功能圖标，如次級功能延展、信息提交、删除等，最多不超過兩個操作入口，避免造成功能層級混亂。
導航欄的左側已被「返回」圖标占領，按鈕基本隻能放在右側，且以文字按鈕樣式居多，主要用于承載頁面的輔助操作、功能入口。
當導航有足夠的縱向空間時，也可使用如圓形、方形、圓角矩形類型的容器按鈕，需通過按鈕的形狀、大小、填充、描邊等樣式來确定在頁面中的視覺權重，靈活區分主次層級關系，好的導航按鈕總能抓住用戶的注意力。
當搜索功能權重較高，用圖标、按鈕作為入口已不能滿足用戶頻繁的搜索需求時，就會以輸入框的方式占據導航欄大部分區域，不僅能突出搜索功能、向用戶推薦搜索内容标簽，還能提升産品的可操作性，随着搜索框區域的擴大，用戶無需精準點擊，觸手可及。
對于内容較多的首頁，導航欄需要承載如标題、分類、頭像、按鈕等諸多信息，這是可适時增加導航欄的高度，搜索框放在第二行展示，可避免過度弱化搜索框給用戶帶來操作上的影響，例如京東、淘寶等電商類型的應用。如果想節省頁面整體縱向空間，若條件允許，可在頁面上滑後縮小導航欄高度，隻顯示搜索框，例如美團外賣。
很多社交類産品，會在導航欄的左、右側放置用戶的頭像信息，方便随時調用與用戶相關的功能。例如點擊後進入個人設置、個人信息展示、會員中心、個人主頁等。
導航欄的分類菜單包括分段控件和标簽導航，分段控件通常包含2~4個标簽，直接點擊進行内容切換，不支持左右滑動；标簽導航則相對靈活，很适合分類較多的内容，可通過左右滑動來查看所有分類，實現更方便的導航。
上述提到的标簽是對産品内容的分類，而這裡更多指的是産品、系統的輔助功能。
當頁面的某些功能操作頻率較高或與當前頁面信息相關聯但不方便直接展示入口、也可能因導航欄剩餘空間不足以承載時，将功能放置在更多菜單中，既能适當的給用戶提供操作入口，也能滿足産品多方面的隐性需求。
分隔線并不僅僅是一條線，它可以是線、面或投影，用于分隔導航欄與内容區域的一個邊界線，通過視覺阻斷的方式讓用戶感知内容區域，避免在頁面産生上下滑動交互後重複掃視頂部位置。
分割線是為了體現導航欄與内容界面的層級關系，缺少視覺分割可能會讓用戶感覺它們是一個平級，會增加感知難度。當然，并不是所有的應用或界面都需要視覺分割，例如：界面内容極少、界面背景色與導航欄容器背景色值有明顯差異、多圖/多卡片……
最常見的樣式，95%以上的2級及後續界面使用的都是常規導航欄，部分較為簡單的主頁也會使用這種類型。以iOS的2倍圖為例，容器高度固定在88px，基本隻有按鈕、标題組成，背景色多為白色或主體色。
在iOS11系統發布之後，大标題導航欄逐漸流行。大标題一般隻出現在主頁面（底部标簽功能分類），至于基礎規範上述有詳細說明。
大标題導航欄會給人一種高逼格、通透的空間感，整體風格偏向簡約大氣，并不适合電商類型應用，因所占空間較大，适合用在如新聞資訊、社交、工具型且功能較為單一的應用。
根據搜索功能的權重，在常規導航欄中添加一個搜索框并替代标題展示。因空間限制，搜索框高度一般設置在56px~64px，寬度随其他功能圖标的多少而定，若圖标較多，可将搜索框放在第二行。
如無特别需要，盡量将搜索框整體居中，讓兩側的間距相等或兩側圖标數量相同，以提升視覺美觀度。
Tab欄有分段控件和多标簽導航兩種，需明确突出已選中的标簽即可，上述有詳細規範說明，暫不做贅述。
通欄導航可以是上述類型中的任何一種，唯一不同的是在視覺層沒有容器（或不透明度0%）的存在。在初始化狀态下，它可以與背景/圖片融為一體，對節省頭部空間、渲染氛圍起到很大的作用，同時也能減少導航欄與内容區域的割裂感，電商類應用中很常見。
在頁面上滑至背景消失後，會逐漸恢複至常規樣式。尤其要注意背景色與導航欄中元素的色彩明暗對比（例如圖标深色、背景就必須淺色），如若背景不可控，建議在導航欄下方增加一個黑色透明漸變蒙層，以确保證信息的可識别性。
不管是哪個平台的小程序，我們都可以理解為内嵌的“子級”APP，其導航欄右上角一部分區域為“父級”APP原生功能，是無法作出任何修改的，這是硬性規則。除此之外，至于放什麼元素、用什麼類型可随意發揮。
衆所周知，導航欄最主要的作用是方便用戶随時進行上一步或部分功能的下一步操作，幫助用戶不迷路，但有時候，導航欄還能協助用戶快速完成任務，以及交互後的内容管理、信息層級重新劃分等。
當用戶與導航欄中的文字/圖标按鈕産生交互時，不用離開此頁面就對内容進行管理并能即時反饋，例如增加、删除、分享等操作，協助用戶快速完成任務。
随着界面的向上滑動，大标題、或帶搜索功能且占據兩行的大尺寸導航欄将恢複至常規尺寸，信息的數量、層級也将重新劃分，以弱化導航欄吸引力的方式，減少對用戶的幹擾。
界面産生上滑交互後，原本常規樣式的導航欄會自動增加信息内容。例如美團外賣，首屏上滑至一半時，将特色标簽及篩選入口懸浮至導航欄，目的是為了幫助用戶快速做出決策。
大多數用分隔線直接分割，但部分産品為了保持界面的幹淨整潔、減少無關信息的幹擾，在無任何交互産生的情況下，導航欄與内容區域的元素間隔較遠，利用空間留白自動形成視覺分割，當産生滾動交互後，留白不可控，就會在導航欄下方增加投影、分隔線或毛玻璃效果，進行視覺分割。
導航欄在同一個應用中的高度、位置及其部分屬性需具備統一性，這也是格式塔心理學中的「一緻性」對UI設計的硬性要求。即便是大标題樣式，那麼底部标簽欄（主結構、功能）所對應頁面的導航欄也會遵循一緻性要求。當然，部分隻在首頁設定大标題樣式的應用除外。
顧名思義，導航欄還需要具備導航的作用，不管什麼時候，用戶隻要一擡頭（掃視導航欄）就能清楚知道當前正處于什麼位置或流程，這主要從标題（後續會有标題設計的單獨文章）信息中快速獲取，如果當前頁面不設标題，那麼用戶需要在頁面頭部某些層級較為突出的關鍵信息中獲取，一旦頁面滑動覆蓋至關鍵信息位置，就需要呈現标題給用戶指路，避免用戶産生疑惑而付出更多的時間、增加理解難度。
這裡主要指的是iOS、Android兩大系統，在同等比例、同寬度前提下，Android（MD設計規範）系統的标題為左對齊，且容器高度比iOS要高；iOS系統一般隻會在大标題樣式下讓标題左對齊。
另外，Android一般會在容器底部增加投影，以區分導航欄與内容區域的分割；iOS除上述（2-9）提到的分割元素外，還可以使用高斯模糊且帶不透明度的方式來區分，毛玻璃效果的味道。
六、結語導航欄幾乎是每個界面必定存在的控件，雖然常用，但并不是每個設計師都能将其設計的優秀，需要在基礎設計規範、作用之上，賦予其更大的産品價值。“如果逃不掉，那就靜下心來享受”，導航欄既然不能輕易删減，那麼就把它設計好，或許還能帶來意想不到的好處。
以上内容集合了筆者使用衆多APP後以及根據工作中的經驗總結，讓我們從更全面的角度來看待導航欄在不同頁面、不同應用中的使用方式和設計細節，以及不同場景下的交互變化，讓信息變得更高效，用戶使用起來更便捷。
本篇文章希望能幫大家看到在設計導航欄的時可能忽略的一些問題。每次的總結梳理，都是一次知識、能量的升華，個人拙見及表達方式固然不能盡善盡美，歡迎一起交流、進行思維碰撞。
大漠飛鷹；公衆号：能量眼球，人人都是産品經理專欄作家。緻力于産品需求的驅動、産品體驗的挖掘，利用設計的手段為受衆用戶帶來更好的體驗，即好看、好用。
本文原創發布于人人都是産品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
