編輯導(dǎo)語(yǔ)：產(chǎn)品的導(dǎo)航設(shè)計(jì)目的是突出產(chǎn)品的核心功能，扁平化用戶(hù)的任務(wù)路徑，讓用戶(hù)能順利地在產(chǎn)品中暢行。而不同的導(dǎo)航設(shè)計(jì)有不同的效果，本文作者總結(jié)了九種導(dǎo)航類(lèi)型，一起來(lái)看一下吧。

產(chǎn)品的導(dǎo)航設(shè)計(jì)目的是為了突出產(chǎn)品的核心功能，扁平化用戶(hù)的任務(wù)路徑。讓用戶(hù)能夠順利地在產(chǎn)品中暢行，讓用戶(hù)知道自己在產(chǎn)品中所在的位置，和怎么前往目的頁(yè)面或功能。那我們來(lái)了解一下不同導(dǎo)航的區(qū)分。

一、底部標(biāo)簽（Tab）導(dǎo)航

當(dāng)產(chǎn)品的體驗(yàn)流是以幾個(gè)功能模塊貫穿，用戶(hù)在使用時(shí)需要在幾個(gè)標(biāo)簽入口之間來(lái)回切換時(shí)，這就是底部標(biāo)簽導(dǎo)航。底部標(biāo)簽導(dǎo)航里面的標(biāo)簽一般是不會(huì)超過(guò)五個(gè)，因?yàn)槌^(guò)五個(gè)標(biāo)簽之后，就沒(méi)有核心功能的體現(xiàn)。

將貫穿產(chǎn)品整個(gè)體驗(yàn)流的模塊平鋪在Tab Bar位置，在保證了切換效率的同時(shí)也保證了用戶(hù)在使用過(guò)程時(shí)的任務(wù)路徑扁平化。

二、頂部標(biāo)簽（Tab）導(dǎo)航

頂部Tab最早是谷歌提出來(lái)并使用的，主要是為了區(qū)分與iOS的一種導(dǎo)航模式。與底部標(biāo)簽導(dǎo)航不同，由于在頂部，手指一般很難觸及，所以頂部標(biāo)簽導(dǎo)航功能展現(xiàn)更細(xì)化，標(biāo)簽也就更多，通常是通過(guò)左右滑動(dòng)來(lái)切換標(biāo)簽。

在實(shí)際項(xiàng)目中，頂部與底部基本都是配合使用。

三、舵式導(dǎo)航

舵式導(dǎo)航是將多個(gè)核心功能匯聚在一個(gè)標(biāo)簽內(nèi)，方便用戶(hù)點(diǎn)擊呼出使用。所以舵式導(dǎo)航一般會(huì)搭載其他導(dǎo)航樣式出現(xiàn)（如標(biāo)簽式導(dǎo)航）。

與標(biāo)簽導(dǎo)航類(lèi)似的是，它們都是點(diǎn)聚式導(dǎo)航與標(biāo)簽導(dǎo)航的結(jié)合體。簡(jiǎn)單來(lái)說(shuō)就是一個(gè)導(dǎo)航標(biāo)簽里面包含很多個(gè)操作選項(xiàng)，也可以說(shuō)是導(dǎo)航標(biāo)簽里面包含很多個(gè)二級(jí)導(dǎo)航標(biāo)簽。

四、宮格式導(dǎo)航

宮格式導(dǎo)航是最被廣泛用于各平臺(tái)系統(tǒng)的中心頁(yè)面，一般用在二級(jí)頁(yè)作為內(nèi)容列表，以圖形化形式呈現(xiàn)在頁(yè)面上，又或者是作為一系列的工具入口聚合。也被稱(chēng)為跳板式、圖標(biāo)卡片式、磁貼式。

五、陳列館式導(dǎo)航

陳列館式導(dǎo)航是屬于宮格導(dǎo)航的一種表式，用來(lái)呈現(xiàn)實(shí)時(shí)內(nèi)容，像新聞、圖片、商品信息等。還可以采用網(wǎng)格式布局（直播或者是ins類(lèi)型）、輪盤(pán)布局（格瓦拉電影類(lèi)型）或者是幻燈片模式展示。最適合呈現(xiàn)的是如經(jīng)常更新、需要直觀(guān)的視覺(jué)效果、彼此獨(dú)立的內(nèi)容。

六、抽屜式導(dǎo)航

抽屜式導(dǎo)航又被稱(chēng)為：擴(kuò)展菜單、側(cè)邊導(dǎo)航、漢堡導(dǎo)航；是用來(lái)放置一些對(duì)用戶(hù)來(lái)說(shuō)不會(huì)經(jīng)常用到或者是產(chǎn)品不核心的功能，例如設(shè)置、關(guān)于、個(gè)人信息這類(lèi)不需要頻繁切換內(nèi)容的功能。

一般是應(yīng)用在信息流的產(chǎn)品設(shè)計(jì)里面，用戶(hù)的任務(wù)路徑比較單一，頁(yè)面基本只用于產(chǎn)品的核心內(nèi)容展示。其他不怎么使用或是不核心的功能就會(huì)隱藏于界面的后方，這樣避免頁(yè)面產(chǎn)生臃腫感，用戶(hù)也不會(huì)過(guò)多的功能模塊的呈現(xiàn)搶奪眼球。

七、下拉導(dǎo)航/菜單導(dǎo)航

與抽屜式導(dǎo)航的概念相同，都是為了突出頁(yè)面的核心內(nèi)容或功能。與抽屜導(dǎo)航不同的是，下拉導(dǎo)航一般位于產(chǎn)品的頂部，通過(guò)點(diǎn)擊功能標(biāo)簽呼出導(dǎo)航菜單。

下拉啟動(dòng)導(dǎo)航通常用來(lái)篩選不同類(lèi)別的信息，或者是點(diǎn)擊后快速啟動(dòng)某個(gè)常用的功能模塊，這樣也避免了頻繁的頁(yè)面跳轉(zhuǎn)。

下拉導(dǎo)航還有一種變式，就是下拉的菜單中展示兩級(jí)或者是多級(jí)，這一種是在電商產(chǎn)品中非常多見(jiàn)的，因?yàn)槠奉?lèi)和篩選條件很多。

八、列表導(dǎo)航

列表導(dǎo)航是作為信息組織的框架，也是產(chǎn)品在設(shè)計(jì)中必不可少的一個(gè)信息承載模式。

比較適合用來(lái)顯示較長(zhǎng)或者是擁有次級(jí)文字內(nèi)容的標(biāo)題，每一行都可以融入非常多的信息。

它與宮格導(dǎo)航一樣，經(jīng)常用在二級(jí)頁(yè)面，不會(huì)默認(rèn)展示任何實(shí)質(zhì)性的內(nèi)容，所以一般在首頁(yè)不會(huì)使用它。

九、輪播（旋轉(zhuǎn)木馬）導(dǎo)航

當(dāng)產(chǎn)品的應(yīng)用信息不多且足夠扁平的時(shí)候，就可以使用輪播導(dǎo)航。常見(jiàn)于頁(yè)面結(jié)構(gòu)簡(jiǎn)單的APP中。

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

題圖來(lái)自Unsplash，基于 CC0 協(xié)議。