這是Kevin的第 859篇原創(chuàng)，持續(xù)日更，做產(chǎn)品經(jīng)理的創(chuàng)業(yè)斜杠青年。
樹形結(jié)構(gòu)是產(chǎn)品設(shè)計中常用的結(jié)構(gòu)圖，產(chǎn)品經(jīng)理會以此來塑造產(chǎn)品的框架圖。
▲樹狀結(jié)構(gòu)
在維基百科解釋：
樹狀結(jié)構(gòu)（英語：Tree ），又譯樹形結(jié)構(gòu)，或稱樹狀圖（tree ）是一種將層次結(jié)構(gòu)式的構(gòu)造性質(zhì)，以圖象方式表現(xiàn)出來的方法。它的名稱來自于以樹的象征來表現(xiàn)出構(gòu)造之間的關(guān)系，雖然在圖象的呈現(xiàn)上，它是一個上下顛倒的樹，其根部在上方，是資料的開頭，而下方的資料稱為葉子。
產(chǎn)品的框架結(jié)構(gòu)由有導(dǎo)航欄堆積而成。
導(dǎo)航欄對于一款軟件產(chǎn)品來說，則映射出了軟件系統(tǒng)的樹狀結(jié)構(gòu)。
同樣一個導(dǎo)航欄也是多嵌套機(jī)構(gòu)，導(dǎo)航欄包括二級、三級導(dǎo)航欄結(jié)構(gòu)，每個下一級導(dǎo)航欄都可以回歸到一級；
每個導(dǎo)航欄明確了背后提供的內(nèi)容或價值服務(wù)是完全不同的。導(dǎo)航欄就像產(chǎn)品的血肉骨架，只有定了導(dǎo)航欄才能進(jìn)行下一個子功能的設(shè)計.
好的導(dǎo)航欄會依附于樹狀結(jié)構(gòu)，突出主要功能和次要功能；同時扁平化用戶使用路徑；任意一個功能都可以在導(dǎo)航欄找到。
在PC和APP上都有不同的導(dǎo)航欄設(shè)計，產(chǎn)品經(jīng)理最希望在工作中聚焦在最簡單的導(dǎo)航欄上：既可以開發(fā)簡單、同時又是非常實用？
我整理了簡易設(shè)計下的導(dǎo)航欄部分，主要是給那些正在糾結(jié)做什么樣的導(dǎo)航設(shè)計的產(chǎn)品經(jīng)理，快速、少出錯、同時又極易容易開發(fā)實現(xiàn)的導(dǎo)航欄。
移動端的導(dǎo)航欄設(shè)計
導(dǎo)航欄的設(shè)計方式也是有限的；這里我依次列舉下面8種
1.底部導(dǎo)航欄
底部Tab欄具是最常用的，如果你打算從0到1做一款產(chǎn)品，選擇這個肯定沒有錯；展現(xiàn)形式有文字 + icon，也有純icon形式，大部分是文字+icon，可能是減少用戶記憶負(fù)擔(dān)。
▲app的底部導(dǎo)航欄設(shè)計
優(yōu)點：TAB導(dǎo)航欄在支持用戶在不同模塊之間的快速切換。
缺點：底部導(dǎo)航欄的數(shù)量需要嚴(yán)格控制，同時對于順序要深思熟慮；比如需要用戶高頻操作的TAB就會放在中間；小程序的TAB不會超過4個；APP的則不能超過5個。太多后就容易引起誤點操作。
TAB導(dǎo)航欄一定要確定產(chǎn)品核心功能、業(yè)務(wù)；可以考慮去突出中間的功能，把Tab單獨設(shè)計，鼓勵用戶更多使用該功能。如下是百度、知乎、寶寶樹都把核心業(yè)務(wù)作為TAB設(shè)計
▲app的導(dǎo)航欄
比如在社區(qū)的提問版塊、考勤打卡的TAB都是集中在中間甚至是屏幕中間，即可突出重要性也方便用戶操作增加點擊率；
▲社區(qū)發(fā)tab
2.頂部Tab欄
如果同一個功能有不同二級功能；或者內(nèi)容版塊下還有細(xì)分內(nèi)容，那么頂部TAB是最簡單直接的劃分方式；
展示同一模塊下不同類別的信息或者篩選不用模塊的信息，一般二級導(dǎo)航支持左右滑動；在小程序里可直接點擊；
優(yōu)點：可以方便快速瀏覽二級內(nèi)容，也方便用戶迅速切換操作
缺點：產(chǎn)品經(jīng)理要考慮清楚二級的順序排列邏輯；同時超過屏幕后需要提供左右滑動交互，彌補(bǔ)內(nèi)容被屏幕遮擋的場景。
3.側(cè)邊（矩式）導(dǎo)航欄
這類導(dǎo)航欄主要體現(xiàn)在沉浸式使用場景的產(chǎn)品。比如睡眠、天氣、地圖導(dǎo)航、閱讀這類產(chǎn)品適合。特點是用戶的主要操作場景在主屏幕；很少頻率有子功能的操作需求；
▲側(cè)欄tab設(shè)計
優(yōu)點：抽屜式導(dǎo)航的優(yōu)點在于節(jié)省頁面展示空間，使主頁面更加簡潔美觀，讓用戶將更多的注意力聚焦到當(dāng)前頁面。
缺點：在于次功能入口比較隱蔽，用戶不容易發(fā)現(xiàn)；使用次功能需要二次點擊，增加用戶使用成本，轉(zhuǎn)化率低
4.列表式導(dǎo)航欄
如果有超過5個以上的功能分類后，同時由有大量的文本信息；可以采取列表導(dǎo)航；以列表的形式呈現(xiàn)大量的條目。突出每個導(dǎo)航欄的標(biāo)題；展示詳細(xì)的欄目給用戶
優(yōu)點：列表式結(jié)構(gòu)可以兼容多數(shù)量的導(dǎo)航欄；配合搜索課大大提升它導(dǎo)航效率高。
缺點：內(nèi)容信息過多，用戶消化時間長；同時需要搭配搜索功能，增加開發(fā)了成本。
5.糖葫蘆導(dǎo)航欄
隨著產(chǎn)品逐漸從1.0步入到2.0的迭代，業(yè)務(wù)逐步復(fù)雜、同時又需要給用戶提供多樣的功能操作，為了增加使用效率，可以采取這類導(dǎo)航；這類導(dǎo)航還有細(xì)分為：九宮格、糖葫蘆，都是屬于這類導(dǎo)航藍(lán)。
▲宮格導(dǎo)航欄設(shè)計
這類產(chǎn)品前身需要較多量的用戶作為基礎(chǔ)，其特點是：
①高頻/超高頻使用，用戶粘性極高，應(yīng)用處于市場壟斷地位，幾乎無可替代產(chǎn)品（生態(tài)龐大帶來的優(yōu)勢）；
②應(yīng)用服務(wù)種類多且扁平化（使得并列式的桌面布局模式成為必選項）；
③可以當(dāng)做企業(yè)移動后臺來使用（支付寶的服務(wù)包括衣食住行，可認(rèn)為是企業(yè)個人），我稱之為“行走的ERP”；
④形成了固定的多樣性業(yè)務(wù)；
優(yōu)點：每個導(dǎo)航欄沒有無主次之分，每個菜單所占空間大小一致，同時方便業(yè)務(wù)流量聚合；可以劃分和合并多個矩陣實現(xiàn)
缺點：需要考慮導(dǎo)航欄的排列順序，甚至是為用戶提供個性化布局能力，同時對于新用戶來說感受到操作壓力大，需要較多的引導(dǎo)提示設(shè)計
6.卡片式導(dǎo)航欄
卡片導(dǎo)航的一種延展形式，通過增加內(nèi)容的可視化程度讓每個條目呈現(xiàn)更多的信息。
利用算法和用戶注冊信息，讓卡片導(dǎo)航能根據(jù)頁面內(nèi)容的變化及時更新圖片。比如視頻播放的app、或以圖片為主的產(chǎn)品，常作為二級導(dǎo)航。
▲App Store和P OCO攝影的卡片導(dǎo)航
優(yōu)點：點擊量高小程序時間導(dǎo)航欄，而且單個條目的轉(zhuǎn)化率會相應(yīng)的提高。缺點：當(dāng)運營量較大的時候，這種結(jié)構(gòu)會降低用戶尋找信息的效率。
7.toast導(dǎo)航
通常落地在某個子級導(dǎo)航上，用于篩選同一模塊下多個狀態(tài)下的操作。
▲toast導(dǎo)航
特點：能讓用戶在有限的屏幕空間上做更多的，同時也是一種減少導(dǎo)航欄設(shè)計的方式。
8.輪播（平鋪）式導(dǎo)航
適用于只需要簡答手勢操作就能完成功能操作的場景。比如探探的左右滑動；以及B站上的追劇；既可以增加內(nèi)容的視覺展示區(qū)域，還能讓用戶選擇變得簡單。
▲追劇和探探的左右滑動
優(yōu)點：操作簡單、并且用戶上手容易，并且運營的成本低
缺點：用戶很可能在早期點擊的數(shù)據(jù)并不真實，因為極易誤操作
9.FAB導(dǎo)航
懸浮式icon也是FAB導(dǎo)航的一種稱呼，很多產(chǎn)品經(jīng)理為了偷懶都會用這個按鈕來做新增功能入口。
但卻沒有考慮到功能背后的業(yè)務(wù)、頁面路徑是否用重合，盲目的在屏幕上不斷新增按鈕。最后就產(chǎn)生了下方一樣密密麻麻的icon。
▲FAB導(dǎo)航
導(dǎo)航欄的作用，不僅是方便用戶查找到對應(yīng)的內(nèi)容。更重要的是將可以提高用戶在產(chǎn)品的流量轉(zhuǎn)化。
每個導(dǎo)航欄都除了自帶的字段屬性，還會有狀態(tài)屬性：選中、跳轉(zhuǎn)、關(guān)注、熱度等。
網(wǎng)頁導(dǎo)航欄設(shè)計
對于web端來說，也有常用的導(dǎo)航欄設(shè)計。導(dǎo)航欄由于在WEB屏幕大，許多產(chǎn)品經(jīng)理會將它帶上動畫。
web導(dǎo)航欄的設(shè)計主要分兩類：滾動式導(dǎo)航分水平滾動和垂直式滾動。
1.垂直式滾動垂直式的滾動在官網(wǎng)或產(chǎn)品介紹頁中運用廣泛，將一些頁面交互動畫特效和垂直式滾動導(dǎo)航相結(jié)合小程序時間導(dǎo)航欄，。頁面往下滾動，就會產(chǎn)生切換到新的導(dǎo)航欄，點擊導(dǎo)航欄可以聚焦在頁面的某個區(qū)域
▲垂直導(dǎo)航欄設(shè)計
這一點像一篇文章的目錄導(dǎo)航一樣，當(dāng)用戶下滑到某個頁面、屏幕就會產(chǎn)生新的導(dǎo)航。2.水平式滾動
水平式滾動就是導(dǎo)航欄的交互呈左右水平方向滾動的，當(dāng)用戶第一次遇到這樣類型網(wǎng)站的時候，體驗感會比較差，因為它物理和視覺運動方向與常規(guī)的縱向滾動不。而且當(dāng)用戶使用鼠標(biāo)滾輪滾動的時候，它的左右水平滾動會讓用戶產(chǎn)生交互上的錯位感，這樣的感受其實并不是特別友好。所以這樣的網(wǎng)站不適合做官網(wǎng)，反而適合做論壇、內(nèi)容社區(qū)、新聞資訊，因為用戶可以最大區(qū)域化的瀏覽內(nèi)容
▲水平式滾動
3.側(cè)邊導(dǎo)航
側(cè)邊導(dǎo)航在web上因為落地在了用戶主要焦點上所以成了很多官網(wǎng)的主流導(dǎo)航。和app對比，web端側(cè)邊導(dǎo)航不僅不會降低轉(zhuǎn)化率，還會更加清晰分明的引導(dǎo)用戶操作不同功能。
網(wǎng)站側(cè)邊相對于網(wǎng)站頂部來說，可擴(kuò)展的空間也更廣，當(dāng)網(wǎng)站需要改版增加欄目內(nèi)容時，側(cè)邊導(dǎo)航會比頂部導(dǎo)航更好調(diào)整。
4.動畫式導(dǎo)航
在WEB端，酷炫的動畫更能吸引用戶。如果在導(dǎo)航上添加動畫效果，更能清晰地引導(dǎo)用戶去點擊使用導(dǎo)航。例如當(dāng)鼠標(biāo)在導(dǎo)航懸停時，讓導(dǎo)航的字體產(chǎn)生變化、背景色塊產(chǎn)生大小變化等，這樣微小而利落的差異化已經(jīng)足夠了。像以下這個案例屬于圖文導(dǎo)航，前景是文字，后景是圖片，當(dāng)鼠標(biāo)移至相應(yīng)導(dǎo)航時，靜態(tài)圖片就會發(fā)生輕幅度的動態(tài)變化。動畫式導(dǎo)航不需要太花俏的展現(xiàn)，否則會干擾視覺。
但在簡易設(shè)計里，我希望你不要在意動畫的導(dǎo)航，因為這絕對是對大部分產(chǎn)品經(jīng)理的一場災(zāi)難，第一是需要動畫設(shè)計資源，第二也是需要非常相信的前段交互操作說明，增加了開發(fā)成本。
為了給用戶提供閉環(huán)路徑，導(dǎo)航欄成了用戶在產(chǎn)品中的路標(biāo)；好的路標(biāo)自然可以提高用戶達(dá)到目的地的幾率；
拋開付費的情況，導(dǎo)航欄還是用戶查找內(nèi)容信息的核心路徑，沒有做好導(dǎo)航欄自然用戶體驗也很差。
每天體驗1款app知識星球
我創(chuàng)建了一個《每天體驗1款app》知識星球，有超過20個行業(yè)嘉賓在圈子里。加入后365天，每天體驗一款A(yù)PP。提升產(chǎn)品設(shè)計能力，同時有1500份體驗報告幫助你找到競品。
平均1天1塊錢，掃碼購買即可加入
連續(xù)體驗90款應(yīng)用，通過后原路退回