?

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

?

導(dǎo)航欄集合了用戶常用或必用一些功能，復(fù)用率極高，當(dāng)用戶在進(jìn)行部分路徑操作時(shí)，導(dǎo)航欄就像黑暗中的一盞“明燈”，指引著用戶進(jìn)入下一步或回到上一步操作，所以做好用戶體驗(yàn)是非常重要的。

?

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

?

?

?

一、導(dǎo)航欄基本介紹

?

1、導(dǎo)航欄在哪里？

?

在UI設(shè)計(jì)組件中，如標(biāo)簽欄、菜單欄、Tab欄、應(yīng)用欄、標(biāo)題欄、導(dǎo)航欄...等諸多類型和叫法中，有很多新人設(shè)計(jì)師難以區(qū)分這些重復(fù)叫法以及對(duì)應(yīng)的所在區(qū)域。

?

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

?

?

?

2、導(dǎo)航欄能起到什么作用？

?

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

?

?

?

3、為什么有的頁面沒有導(dǎo)航欄？

?

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

?

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

?

?

?

?

二、導(dǎo)航欄的結(jié)構(gòu)組成

?

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

?

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

?

?

?

1、容器

?

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

?

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

?

?

?

2、標(biāo)題

?

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

?

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

?

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

?

?

?

3、圖標(biāo)

?

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

?

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

?

?

?

4、按鈕

?

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

?

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

?

?

?

5、搜索框

?

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

?

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

?

?

?

6、用戶頭像

?

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

?

?

?

7、標(biāo)簽/分類

?

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

?

?

?

8、更多菜單

?

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

?

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

?

?

?

9、分割線

?

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

?

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

?

?

?

?

三、導(dǎo)航欄樣式分類

?

1、常規(guī)樣式

?

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

?

?

?

2、大標(biāo)題

?

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

?

大標(biāo)題導(dǎo)航欄會(huì)給人一種高逼格、通透的空間感，整體風(fēng)格偏向簡(jiǎn)約大氣，并不適合電商類型應(yīng)用，因所占空間較大，適合用在如新聞資訊、社交、工具型且功能較為單一的應(yīng)用。

?

?

?

3、搜索框類型

?

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

?

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

?

?

?

4、Tab導(dǎo)航

?

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

?

?

?

5、通欄導(dǎo)航欄

?

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

?

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

?

?

?

6、小程序

?

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

?

?

?

?

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

?

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

?

?

1、導(dǎo)航欄中的按鈕點(diǎn)擊交互

?

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

?

?

?

2、界面上滑，導(dǎo)航欄內(nèi)容減少

?

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

?

?

?

3、界面上滑，導(dǎo)航欄內(nèi)容增加

?

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

?

?

?

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

?

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

?

?

?

?

五、導(dǎo)航欄的相同點(diǎn)/不同點(diǎn)

?

1、同一應(yīng)用中的相同點(diǎn)

?

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

?

?

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

?

?

?

2、不同平臺(tái)中的差異

?

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

?

?

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

?

?

?

六、結(jié)語

?

導(dǎo)航欄幾乎是每個(gè)界面必定存在的控件，雖然常用，但并不是每個(gè)設(shè)計(jì)師都能將其設(shè)計(jì)的優(yōu)秀，需要在基礎(chǔ)設(shè)計(jì)規(guī)范、作用之上，賦予其更大的產(chǎn)品價(jià)值?！叭绻硬坏簦蔷挽o下心來享受”，導(dǎo)航欄既然不能輕易刪減，那么就把它設(shè)計(jì)好，或許還能帶來意想不到的好處。

?

以上內(nèi)容集合了筆者使用眾多APP后以及根據(jù)工作中的經(jīng)驗(yàn)總結(jié)，讓我們從更全面的角度來看待導(dǎo)航欄在不同頁面、不同應(yīng)用中的使用方式和設(shè)計(jì)細(xì)節(jié)，以及不同場(chǎng)景下的交互變化，讓信息變得更高效，用戶使用起來更便捷。

?

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

?