這是Kevin的第 859 篇原創(chuàng)，

持續(xù)日更，做產(chǎn)品經(jīng)理的創(chuàng)業(yè)斜杠青年。

樹形結(jié)構(gòu)是產(chǎn)品設計中常用的結(jié)構(gòu)圖，產(chǎn)品經(jīng)理會以此來塑造產(chǎn)品的框架圖。

▲ 樹狀結(jié)構(gòu)

在維基百科解釋：

樹狀結(jié)構(gòu)（英語：Tree structure），又譯樹形結(jié)構(gòu)，或稱樹狀圖（tree diagram）是一種將層次結(jié)構(gòu)式的構(gòu)造性質(zhì)，以圖象方式表現(xiàn)出來的方法。它的名稱來自于以樹的象征來表現(xiàn)出構(gòu)造之間的關(guān)系，雖然在圖象的呈現(xiàn)上，它是一個上下顛倒的樹，其根部在上方，是資料的開頭，而下方的資料稱為葉子。

產(chǎn)品的框架結(jié)構(gòu)由有導航欄堆積而成。

導航欄對于一款軟件產(chǎn)品來說，則映射出了軟件系統(tǒng)的樹狀結(jié)構(gòu)。

同樣一個導航欄也是多嵌套機構(gòu)，導航欄包括二級、三級導航欄結(jié)構(gòu)，每個下一級導航欄都可以回歸到一級；

每個導航欄明確了背后提供的內(nèi)容或價值服務是完全不同的。導航欄就像產(chǎn)品的血肉骨架，只有定了導航欄才能進行下一個子功能的設計.

好的導航欄會依附于樹狀結(jié)構(gòu)，突出主要功能和次要功能；同時扁平化用戶使用路徑；任意一個功能都可以在導航欄找到。

在PC和APP上都有不同的導航欄設計，產(chǎn)品經(jīng)理最希望在工作中聚焦在最簡單的導航欄上：既可以開發(fā)簡單、同時又是非常實用？

我整理了簡易設計下的導航欄部分，主要是給那些正在糾結(jié)做什么樣的導航設計的產(chǎn)品經(jīng)理，快速、少出錯、同時又極易容易開發(fā)實現(xiàn)的導航欄。

移動端的導航欄設計

導航欄的設計方式也是有限的；這里我依次列舉下面8種

1.底部導航欄

底部Tab欄具是最常用的，如果你打算從0到1做一款產(chǎn)品，選擇這個肯定沒有錯；展現(xiàn)形式有文字 + icon，也有純icon形式，大部分是文字+icon，可能是減少用戶記憶負擔。

▲ app的底部導航欄設計

優(yōu)點：TAB導航欄在支持用戶在不同模塊之間的快速切換。

缺點：底部導航欄的數(shù)量需要嚴格控制，同時對于順序要深思熟慮；比如需要用戶高頻操作的TAB就會放在中間；小程序的TAB不會超過4個；APP的則不能超過5個。太多后就容易引起誤點操作。

TAB導航欄一定要確定產(chǎn)品核心功能、業(yè)務；可以考慮去突出中間的功能，把Tab單獨設計，鼓勵用戶更多使用該功能。如下是百度、知乎、寶寶樹都把核心業(yè)務作為TAB設計

▲ app的導航欄

比如在社區(qū)的提問版塊、考勤打卡的TAB都是集中在中間甚至是屏幕中間，即可突出重要性也方便用戶操作增加點擊率；

▲ 社區(qū)發(fā)tab

2.頂部Tab欄

如果同一個功能有不同二級功能；或者內(nèi)容版塊下還有細分內(nèi)容，那么頂部TAB是最簡單直接的劃分方式；

展示同一模塊下不同類別的信息或者篩選不用模塊的信息，一般二級導航支持左右滑動；在小程序里可直接點擊；

優(yōu)點：可以方便快速瀏覽二級內(nèi)容，也方便用戶迅速切換操作

缺點：產(chǎn)品經(jīng)理要考慮清楚二級的順序排列邏輯；同時超過屏幕后需要提供左右滑動交互，彌補內(nèi)容被屏幕遮擋的場景。

3.側(cè)邊（矩式）導航欄

這類導航欄主要體現(xiàn)在沉浸式使用場景的產(chǎn)品。比如睡眠、天氣、地圖導航、閱讀這類產(chǎn)品適合。特點是用戶的主要操作場景在主屏幕；很少頻率有子功能的操作需求；

▲ 側(cè)欄tab設計

優(yōu)點：抽屜式導航的優(yōu)點在于節(jié)省頁面展示空間，使主頁面更加簡潔美觀，讓用戶將更多的注意力聚焦到當前頁面。

缺點：在于次功能入口比較隱蔽，用戶不容易發(fā)現(xiàn)；使用次功能需要二次點擊，增加用戶使用成本，轉(zhuǎn)化率低

4.列表式導航欄

如果有超過5個以上的功能分類后，同時由有大量的文本信息；可以采取列表導航；以列表的形式呈現(xiàn)大量的條目。突出每個導航欄的標題；展示詳細的欄目給用戶

優(yōu)點：列表式結(jié)構(gòu)可以兼容多數(shù)量的導航欄；配合搜索課大大提升它導航效率高。

缺點：內(nèi)容信息過多，用戶消化時間長；同時需要搭配搜索功能，增加開發(fā)了成本。

5.糖葫蘆導航欄

隨著產(chǎn)品逐漸從1.0步入到2.0的迭代，業(yè)務逐步復雜、同時又需要給用戶提供多樣的功能操作，為了增加使用效率，可以采取這類導航；這類導航還有細分為：九宮格、糖葫蘆，都是屬于這類導航藍。

▲ 宮格導航欄設計

這類產(chǎn)品前身需要較多量的用戶作為基礎，其特點是：

①高頻/超高頻使用，用戶粘性極高，應用處于市場壟斷地位，幾乎無可替代產(chǎn)品（生態(tài)龐大帶來的優(yōu)勢）；

②應用服務種類多且扁平化（使得并列式的桌面布局模式成為必選項）；

③可以當做企業(yè)移動后臺來使用（支付寶的服務包括衣食住行，可認為是企業(yè)個人），我稱之為“行走的ERP”；

④形成了固定的多樣性業(yè)務；

優(yōu)點：每個導航欄沒有無主次之分，每個菜單所占空間大小一致，同時方便業(yè)務流量聚合；可以劃分和合并多個矩陣實現(xiàn)

缺點：需要考慮導航欄的排列順序，甚至是為用戶提供個性化布局能力，同時對于新用戶來說感受到操作壓力大，需要較多的引導提示設計

6.卡片式導航欄

卡片導航的一種延展形式，通過增加內(nèi)容的可視化程度讓每個條目呈現(xiàn)更多的信息。

利用算法和用戶注冊信息，讓卡片導航能根據(jù)頁面內(nèi)容的變化及時更新圖片。比如視頻播放的app、或以圖片為主的產(chǎn)品，常作為二級導航。

▲ App Store和P OCO攝影的卡片導航

優(yōu)點：點擊量高，而且單個條目的轉(zhuǎn)化率會相應的提高。

缺點：當運營量較大的時候，這種結(jié)構(gòu)會降低用戶尋找信息的效率。

7.toast導航

通常落地在某個子級導航上，用于篩選同一模塊下多個狀態(tài)下的操作。

▲ toast導航

特點：能讓用戶在有限的屏幕空間上做更多的，同時也是一種減少導航欄設計的方式。

8.輪播（平鋪）式導航

適用于只需要簡答手勢操作就能完成功能操作的場景。比如探探的左右滑動；以及B站上的追??；既可以增加內(nèi)容的視覺展示區(qū)域，還能讓用戶選擇變得簡單。

▲ 追劇和探探的左右滑動

優(yōu)點：操作簡單、并且用戶上手容易，并且運營的成本低

缺點：用戶很可能在早期點擊的數(shù)據(jù)并不真實，因為極易誤操作

9.FAB導航

懸浮式icon也是FAB導航的一種稱呼，很多產(chǎn)品經(jīng)理為了偷懶都會用這個按鈕來做新增功能入口。

但卻沒有考慮到功能背后的業(yè)務、頁面路徑是否用重合，盲目的在屏幕上不斷新增按鈕。最后就產(chǎn)生了下方一樣密密麻麻的icon。

▲ FAB導航

導航欄的作用，不僅是方便用戶查找到對應的內(nèi)容。更重要的是將可以提高用戶在產(chǎn)品的流量轉(zhuǎn)化。

每個導航欄都除了自帶的字段屬性，還會有狀態(tài)屬性：選中、跳轉(zhuǎn)、關(guān)注、熱度等。

網(wǎng)頁導航欄設計

對于web端來說，也有常用的導航欄設計。導航欄由于在WEB屏幕大，許多產(chǎn)品經(jīng)理會將它帶上動畫。

web導航欄的設計主要分兩類：滾動式導航分水平滾動和垂直式滾動。

1.垂直式滾動

垂直式的滾動在官網(wǎng)或產(chǎn)品介紹頁中運用廣泛，將一些頁面交互動畫特效和垂直式滾動導航相結(jié)合，。頁面往下滾動，就會產(chǎn)生切換到新的導航欄，點擊導航欄可以聚焦在頁面的某個區(qū)域

▲ 垂直導航欄設計

這一點像一篇文章的目錄導航一樣，當用戶下滑到某個頁面、屏幕就會產(chǎn)生新的導航。

2.水平式滾動

水平式滾動就是導航欄的交互呈左右水平方向滾動的，當用戶第一次遇到這樣類型網(wǎng)站的時候，體驗感會比較差，因為它物理和視覺運動方向與常規(guī)的縱向滾動不。

而且當用戶使用鼠標滾輪滾動的時候，它的左右水平滾動會讓用戶產(chǎn)生交互上的錯位感，這樣的感受其實并不是特別友好。所以這樣的網(wǎng)站不適合做官網(wǎng)，反而適合做論壇、內(nèi)容社區(qū)、新聞資訊，因為用戶可以最大區(qū)域化的瀏覽內(nèi)容

▲ 水平式滾動

3.側(cè)邊導航

側(cè)邊導航在web上因為落地在了用戶主要焦點上所以成了很多官網(wǎng)的主流導航。和app對比，web端側(cè)邊導航不僅不會降低轉(zhuǎn)化率，還會更加清晰分明的引導用戶操作不同功能。

網(wǎng)站側(cè)邊相對于網(wǎng)站頂部來說，可擴展的空間也更廣，當網(wǎng)站需要改版增加欄目內(nèi)容時，側(cè)邊導航會比頂部導航更好調(diào)整。

4.動畫式導航

在WEB端，酷炫的動畫更能吸引用戶。如果在導航上添加動畫效果，更能清晰地引導用戶去點擊使用導航。例如當鼠標在導航懸停時，讓導航的字體產(chǎn)生變化、背景色塊產(chǎn)生大小變化等，這樣微小而利落的差異化已經(jīng)足夠了。像以下這個案例屬于圖文導航，前景是文字，后景是圖片，當鼠標移至相應導航時，靜態(tài)圖片就會發(fā)生輕幅度的動態(tài)變化。動畫式導航不需要太花俏的展現(xiàn)，否則會干擾視覺。

但在簡易設計里，我希望你不要在意動畫的導航，因為這絕對是對大部分產(chǎn)品經(jīng)理的一場災難，第一是需要動畫設計資源，第二也是需要非常相信的前段交互操作說明，增加了開發(fā)成本。

為了給用戶提供閉環(huán)路徑，導航欄成了用戶在產(chǎn)品中的路標；好的路標自然可以提高用戶達到目的地的幾率；

拋開付費的情況，導航欄還是用戶查找內(nèi)容信息的核心路徑，沒有做好導航欄自然用戶體驗也很差。

每天體驗1款app知識星球

我創(chuàng)建了一個《每天體驗1款app》知識星球，有超過20個行業(yè)嘉賓在圈子里。加入后365天，每天體驗一款APP。提升產(chǎn)品設計能力，同時有1500份體驗報告幫助你找到競品。

平均1天1塊錢，掃碼購買即可加入

連續(xù)體驗90款應用，通過后原路退回

搞清楚樹形結(jié)構(gòu)｜產(chǎn)品經(jīng)理必學的導航欄簡易設計

2.頂部Tab欄

6.卡片式導航欄