底部導(dǎo)航為何要存在呢，與其它標(biāo)簽導(dǎo)航相比又有什么特點(diǎn)，背后滿足的需求又是什么，在什么場(chǎng)景下會(huì)用它，用它又能給用戶、產(chǎn)品帶來什么價(jià)值？

導(dǎo)航是手機(jī)app經(jīng)常使用的一種方式，指引和告知用戶現(xiàn)在在哪兒、可去哪兒、那兒有什么，方便用戶快速了解產(chǎn)品。導(dǎo)航類型一般有標(biāo)簽導(dǎo)航、宮格導(dǎo)航、懸浮導(dǎo)航和列表導(dǎo)航，它們之間可以相互結(jié)合使用。

而底部導(dǎo)航就屬于標(biāo)簽導(dǎo)航的一種，位于 app的一級(jí)頁(yè)面底部。其它的標(biāo)簽導(dǎo)航還有頂部導(dǎo)航、側(cè)邊導(dǎo)航，比如頭條的頂部導(dǎo)航分類（關(guān)注、推薦、抗擊肺炎、視頻、新聞等）、京東app 的分類頁(yè)面，側(cè)邊導(dǎo)航與宮格式導(dǎo)航結(jié)合。

底部導(dǎo)航+頂部導(dǎo)航? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?底部導(dǎo)航+側(cè)邊導(dǎo)航

那么這個(gè)底部導(dǎo)航為何要存在呢，與其它標(biāo)簽導(dǎo)航相比又有什么特點(diǎn)，背后滿足的需求又是什么，在什么場(chǎng)景下會(huì)用它，用它又能給用戶、產(chǎn)品帶來什么價(jià)值？

一、底部導(dǎo)航是什么？

一般位于app一級(jí)頁(yè)面的底部，以圖標(biāo)+文字的形式展示，用戶點(diǎn)擊相應(yīng)導(dǎo)航可切換頁(yè)面內(nèi)容。

1. 主要特點(diǎn)

優(yōu)勢(shì)：

• 結(jié)構(gòu)清晰，2-5個(gè)tab，app的核心功能一目了然；
• 位置明確，文案簡(jiǎn)潔，有導(dǎo)向性。

用戶打開app一眼即可知道當(dāng)前在什么位置，點(diǎn)擊哪個(gè)tab可以看到什么內(nèi)容。比如淘寶的默認(rèn)頁(yè)面是發(fā)現(xiàn)頁(yè)，這時(shí)底部導(dǎo)航首頁(yè)的圖標(biāo)文字與其它tab會(huì)有所區(qū)別，表明這是當(dāng)前選中的tab，而其它會(huì)顯示為未被選中的狀態(tài)?？吹健跋ⅰ薄ⅰ百?gòu)物車”、“我的”就明白，消息這一欄是“別人”發(fā)給我的、與我有關(guān)的消息，看到“購(gòu)物車”就明白點(diǎn)擊后看到我在逛app時(shí)加入購(gòu)物車的商品；而“我的”就是我這個(gè)人在這個(gè)產(chǎn)品上的資料、訂單等。

• 放于頁(yè)面底部，便于用戶單手操作；
• 將主要模塊提出來，便于用戶點(diǎn)擊切換頁(yè)面內(nèi)容，在一定程度上，可提高該模塊的用戶滲透率，提高產(chǎn)品的用戶活躍度；

不足：

• 數(shù)量有限：只適用于2-5個(gè)導(dǎo)航，多了則擁擠，可點(diǎn)擊區(qū)域變小，而用戶記憶成本也會(huì)提高；
• 底部導(dǎo)航一般固定懸浮于頁(yè)面底部，類目數(shù)量是固定的（除非產(chǎn)品迭代升級(jí)或其它原因），所以結(jié)構(gòu)太復(fù)雜或標(biāo)簽類目不穩(wěn)定時(shí)不適合；

2. 適用場(chǎng)景

底部導(dǎo)航一般是以主導(dǎo)航的形式存在，當(dāng)產(chǎn)品結(jié)構(gòu)不復(fù)雜且需要用戶多次切換進(jìn)行查看或者進(jìn)行其它操作時(shí)，可用。比如微信，在“微信”這一欄可查看誰給我發(fā)了信息，但如果“發(fā)現(xiàn)”的小紅點(diǎn)一亮起，就想去看看朋友們發(fā)了些什么。這個(gè)時(shí)候就需要在“微信”、“發(fā)現(xiàn)”兩個(gè)tab間來回切換去查看最新內(nèi)容，對(duì)于習(xí)慣單手操作的用戶，很實(shí)用。如果把微信的底部導(dǎo)航欄放置頂部，則無法達(dá)到這一效果。

二、底部導(dǎo)航背后滿足的需求和特定的場(chǎng)景是什么？

需求的產(chǎn)生來源于特定的用戶群體在特定的使用場(chǎng)景中遇到的問題，那我們從它自身的特點(diǎn)來倒推一下。

1. 既然是導(dǎo)航，為什么要放在頁(yè)面底部呢？

手機(jī)頁(yè)面中，頁(yè)面底部屬于用戶便于操作但視覺注意力不是很高的區(qū)域，在這兒放置導(dǎo)航，不會(huì)分散用戶對(duì)于屏幕中內(nèi)容的注意力，還可以幫助用戶快速切換到他感興趣的欄目。

而在Steven Hoober的移動(dòng)設(shè)置使用研究中發(fā)現(xiàn)，依靠單手操作的人很多（大約占比49%），將導(dǎo)航放于底部便于用戶單手操作（下圖是手機(jī)），增加用戶操作頻次。

注：綠色表示用戶可以輕松到達(dá)的區(qū)域；黃色代表需要延伸的區(qū)域；紅色表示用戶需要改變下手持方式

當(dāng)app的主要模塊及結(jié)構(gòu)變得更加明晰顯眼時(shí)，它們的使用頻次便會(huì)上升，一定程度上也可提高平臺(tái)的用戶活躍度。比如產(chǎn)品新上線了商業(yè)化產(chǎn)品，加入了會(huì)員。

在公司角度上，希望用戶可以經(jīng)?？吹讲⒂|達(dá)會(huì)員的內(nèi)容，以此來提高用戶的會(huì)員轉(zhuǎn)化率，而能達(dá)到高頻次操作和高觸達(dá)率的也就是底部導(dǎo)航，比如知乎的鹽選會(huì)員，易企秀的會(huì)員模塊等。

從上面可以看出，導(dǎo)航放在底部能夠滿足用戶單手操作手機(jī)的習(xí)慣，點(diǎn)擊后能快速切換到用戶感興趣的欄目；對(duì)產(chǎn)品來說，結(jié)構(gòu)清晰，用戶學(xué)習(xí)成本低，還提升了用戶活躍度。

2. 可用其它主導(dǎo)航代替嗎？

看了底部導(dǎo)航，我們?cè)僖黄鹚伎家幌?，其它類型的?biāo)簽式導(dǎo)航能不能滿足上文所說的需求呢？

（1）若要滿足產(chǎn)品結(jié)構(gòu)明晰

底部導(dǎo)航的設(shè)計(jì)數(shù)量一般在2-5個(gè)，用戶進(jìn)入產(chǎn)品即可從底部導(dǎo)航看到產(chǎn)品的基本結(jié)構(gòu)，已是用戶習(xí)慣。而頂部導(dǎo)航雖然也在首頁(yè)顯示，但占據(jù)空間較小，且置于頂部，并沒有底部導(dǎo)航效果好。而側(cè)導(dǎo)航，以上下通欄的方式展示，雖然也可讓用戶清楚知曉產(chǎn)品結(jié)構(gòu)，但占據(jù)空間著實(shí)夠大，用戶本應(yīng)該關(guān)注頁(yè)面中間部分的內(nèi)容，但卻影響了用戶對(duì)頁(yè)面內(nèi)容的查看效果。抽屜式導(dǎo)航卻是將導(dǎo)航隱藏，無法達(dá)到用戶一看就知道在哪兒、可去哪兒的效果。

（2）若滿足用戶單手操作并快速切換

前文所講的，底部導(dǎo)航是可以滿足用戶單手操作的，而且導(dǎo)航懸浮于一級(jí)。

頁(yè)面底部，切換導(dǎo)航時(shí)無需做返回操作；頂部導(dǎo)航結(jié)合左右滑動(dòng)的操作可實(shí)現(xiàn)用戶單手操作切換；側(cè)導(dǎo)航無法做到用戶單手操作切換，在側(cè)邊展示，無法結(jié)合上下滑動(dòng)的手勢(shì)去切換要展示的導(dǎo)航類目（上下滑動(dòng)一般用于內(nèi)容的刷新和加載/頁(yè)面的滑動(dòng)）。

（3）若要提高產(chǎn)品的用戶活躍度

底部導(dǎo)航的作用不僅僅是分類，它是將用戶關(guān)心的和產(chǎn)品著重要展示的模塊內(nèi)容外化出來展示給用戶，目標(biāo)是根據(jù)展示內(nèi)容留住用戶或產(chǎn)生效益。而頂部導(dǎo)航和側(cè)導(dǎo)航更多是在大的模塊下的分類，與底部導(dǎo)航組合使用可以產(chǎn)生更好的效果，若單獨(dú)使用，在違背用戶習(xí)慣的情況下，自然無法留住用戶，從而提高產(chǎn)品的活躍度

綜合之后可看出，底部導(dǎo)航一般是以主導(dǎo)航來使用的，而頂部導(dǎo)航和側(cè)導(dǎo)航一般是在主導(dǎo)航的基礎(chǔ)上，對(duì)內(nèi)容進(jìn)行分類展示，比如資訊類app和電商類app。但也要根據(jù)具體產(chǎn)品的定位來考慮怎么用底部導(dǎo)航、頂部導(dǎo)航和側(cè)導(dǎo)航。

若產(chǎn)品比較簡(jiǎn)單，結(jié)構(gòu)單一，那就無需使用導(dǎo)航，若產(chǎn)品定位為地圖類工具，導(dǎo)航的使用情況就會(huì)發(fā)生變化，可能不使用底部導(dǎo)航，直接用側(cè)導(dǎo)航和頂部導(dǎo)航，這時(shí)我們就要具體情況具體分析了。

3. 那為什么有的app沒有用底部導(dǎo)航呢？

既然底部導(dǎo)航能提高產(chǎn)品的用戶活躍度，還能滿足用戶單手操作的習(xí)慣，快速切換頁(yè)面內(nèi)容，那么有的app還是沒有用底部導(dǎo)航呢？比如滴滴、百度地圖。

滴滴：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?百度地圖：

這時(shí)候就需要結(jié)合用戶的使用場(chǎng)景來分析了。可以想一下，我們?cè)谑裁磿r(shí)候會(huì)用到滴滴/百度地圖呢？

A用戶每天坐公共交通上下班，有一天下班晚了，錯(cuò)過了末班車，怎么回家呢？打車吧，于是打開了滴滴出行的app，輸入了目的地，等待司機(jī)接單。過了一會(huì)兒終于看到有司機(jī)接單了，是一輛白色的xx車。上車后，和師傅確認(rèn)了目的地，終于能出發(fā)了。因路途較遠(yuǎn)，他時(shí)不時(shí)的會(huì)看一下到哪兒了，還有多長(zhǎng)時(shí)間到家。等到了目的地，下車回家后，再次打開app，支付車錢并給了師傅好評(píng)后就去忙別的事兒了。

這種場(chǎng)景下用戶更關(guān)注的是屏幕中的地圖，我在哪兒、我將要去哪兒、路線是什么、還得多長(zhǎng)時(shí)間、路費(fèi)是多少。屏幕中只需要根據(jù)打車進(jìn)度顯示相應(yīng)的信息即可，也就是只需要展示一個(gè)tab分類下的內(nèi)容即可，那底部導(dǎo)航關(guān)于單手操作、快速切換內(nèi)容等作用，在這種情況下就起不到效果了。

三、底部導(dǎo)航的價(jià)值是什么呢？

1. 讓用戶一眼明晰產(chǎn)品的基本結(jié)構(gòu)，有效降低用戶學(xué)習(xí)成本

用戶在進(jìn)入產(chǎn)品后，通過底部導(dǎo)航可知道現(xiàn)在在什么位置，通過底部導(dǎo)航的標(biāo)簽和文字即可知道不同標(biāo)簽對(duì)應(yīng)的頁(yè)面內(nèi)容是什么，當(dāng)前所在位置是什么，可去哪兒；可以讓用戶對(duì)產(chǎn)品有大概的了解，想做什么操作點(diǎn)擊哪兒即可到達(dá)，且頁(yè)面切換方便，一定程度上能降低用戶學(xué)習(xí)成本。

2. 在一定程度上提高產(chǎn)品的用戶活躍度，吸引用戶留存

底部導(dǎo)航懸浮于一級(jí)頁(yè)面底部，標(biāo)簽間切換無需返回再次進(jìn)入，內(nèi)容切換方便，且符合用戶單手操作習(xí)慣，可在一定程度上提高產(chǎn)品的活躍度。將產(chǎn)品中極具吸引力的內(nèi)容以標(biāo)簽的形式展示在底部導(dǎo)航，在提高用戶活躍度的同時(shí)，也可用內(nèi)容提高用戶的瀏覽時(shí)長(zhǎng)，吸引用戶留存。

3. 提高導(dǎo)航所屬頁(yè)面的滲透率，實(shí)現(xiàn)相應(yīng)產(chǎn)品目標(biāo)

底部導(dǎo)航始終懸浮于一級(jí)頁(yè)面底部，用戶流量是產(chǎn)品中其它部分最高的，當(dāng)產(chǎn)品想實(shí)現(xiàn)商業(yè)化或者其它某些目標(biāo)時(shí)，可通過展示在底部導(dǎo)航的方式去吸引用戶點(diǎn)擊瀏覽并實(shí)現(xiàn)轉(zhuǎn)化。

四、總結(jié)

說了這么多底部導(dǎo)航，那么底部導(dǎo)航在設(shè)計(jì)時(shí)應(yīng)注意什么呢？怎么能更好發(fā)揮它自身的優(yōu)勢(shì)，同時(shí)又能與其它類型的導(dǎo)航結(jié)合，發(fā)揮更大作用呢？

1. 可觸達(dá)性：數(shù)量一般在2-5個(gè)，多了用戶點(diǎn)擊區(qū)域會(huì)變小，特別是在小屏手機(jī)上，而過多的標(biāo)簽也會(huì)使用戶記憶成本過高；
2. 一致性：設(shè)計(jì)、圖標(biāo)、文案的風(fēng)格應(yīng)一致（簡(jiǎn)短且可說明問題），間隔一致；
3. 相關(guān)性：底部導(dǎo)航的幾個(gè)欄目必須是同一級(jí)別、同等重要（對(duì)目標(biāo)用戶來說，什么是他想看見的，或者說什么是產(chǎn)品想讓用戶注意到的）；
4. 可讀性：要讓用戶清晰的知曉當(dāng)前的位置、可以去的位置，文案要讓用戶明白要去的位置正好是他想看的內(nèi)容。

做到以上幾點(diǎn)的同時(shí)，我們還要考慮其它導(dǎo)航的特性，結(jié)合使用，讓導(dǎo)航發(fā)揮更大作用。比如底部導(dǎo)航+頂部導(dǎo)航，在保證結(jié)構(gòu)清晰的情況下，還能讓用戶按不同的類目查看不同的內(nèi)容。底部導(dǎo)航+側(cè)導(dǎo)航（比如手機(jī)版QQ），在產(chǎn)品結(jié)果復(fù)雜時(shí)可使用此種方案，產(chǎn)品結(jié)構(gòu)清晰，又可節(jié)約頁(yè)面空間。

本文由 @阿井 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議