本文總結(jié)了自己手機(jī)上100多個(gè)APP中的一些常見(jiàn)的導(dǎo)航交互方式，把它們分為了八大類型。并且每種類型由簡(jiǎn)單到復(fù)雜總結(jié)了一個(gè)逐漸“進(jìn)化”的過(guò)程。希望通過(guò)這種簡(jiǎn)單粗暴的總結(jié)，對(duì)之后導(dǎo)航方式的設(shè)計(jì)有所幫助。

一、列表導(dǎo)航

簡(jiǎn)述：列表導(dǎo)航是比較基礎(chǔ)的導(dǎo)航樣式：每個(gè)獨(dú)占一行，依次向下排列，右側(cè)有一個(gè)箭頭用來(lái)提示用戶點(diǎn)擊進(jìn)入。在設(shè)置界面或者個(gè)人界面比較常用。

優(yōu)點(diǎn)：可擴(kuò)展性比較好，可無(wú)限向下擴(kuò)展；從上到下排布，頁(yè)面有條理不煩亂，符合閱讀習(xí)慣。

缺點(diǎn)：頁(yè)面排布略顯呆板；一行一條標(biāo)簽，頁(yè)面利用率不高；向下平鋪的方式，不利于功能的分區(qū)分類展示，在查找和定位時(shí)有困難；功能之間是分裂的，相互跳轉(zhuǎn)比較困難。

進(jìn)化一：多層列表導(dǎo)航

如果希望用列表承載“篩選”的作用，就把列表縮到左邊，點(diǎn)擊列表以后不會(huì)跳轉(zhuǎn)到下一個(gè)界面，而是導(dǎo)致篩選內(nèi)容的改變，功能上和標(biāo)簽欄比較類似。適合做超多門(mén)類的查找篩選。

缺點(diǎn)是信息量大，并且需要花功夫在標(biāo)簽的歸類上，否則會(huì)給用戶的快速選擇帶來(lái)困難。

進(jìn)化二：橫向滑動(dòng)的列表導(dǎo)航

如果需要展示的內(nèi)容有很多類別，每個(gè)類別中東西也不少，不斷向下拉顯然不是一個(gè)很好的方式。App Store中就大量運(yùn)用了可以橫向滑動(dòng)的列表導(dǎo)航，并且在每一行的右側(cè)稍微露出一些圖標(biāo)，提示用戶是可以左滑查看的。

這樣做的好處就是既能清晰地分類，也可以查看到很多選項(xiàng)。

進(jìn)化三：列表導(dǎo)航+功能按鈕

有些列表導(dǎo)航在最右側(cè)加了一些按鈕。有一些功能，可以不必點(diǎn)擊到下一級(jí)去操作，而是在列表頁(yè)這個(gè)層級(jí)就能直接搞定，例如百度網(wǎng)盤(pán)的文件選擇、QQ消息的拖拽消除未讀消息等，于是就把這些功能鍵加到了列表每一行最右側(cè)。

好處是更高效地利用了頁(yè)面空間，缺點(diǎn)在于會(huì)讓頁(yè)面重復(fù)出現(xiàn)一種功能按鈕，如何處理才能不混亂。

進(jìn)化四：列表導(dǎo)航+左滑更多功能

左滑查看更多操作的控件在蘋(píng)果系統(tǒng)中比較常見(jiàn)。如果在進(jìn)化三中，你想為列表添加很多種功能，全都擺在表面上又太亂了，那就把它們藏起來(lái)，只有左滑才能看得見(jiàn)。

例如微信的每一條消息，都可以左滑刪除、取消關(guān)注等。

好處是可以為列表承載多種操作，利用率很高，左滑的手勢(shì)也很順滑；缺點(diǎn)是難以馬上發(fā)現(xiàn)隱藏的功能，并且在安卓系統(tǒng)中與“退回”手勢(shì)重復(fù)，容易誤操作。

?二、底部Tab欄

簡(jiǎn)述：tab欄相當(dāng)于web端的全棧導(dǎo)航，在一級(jí)頁(yè)面上它始終存在，點(diǎn)擊后一級(jí)頁(yè)面相應(yīng)發(fā)生變化。它的樣式一般是“上方icon下方文字”，有時(shí)也會(huì)去掉文字只顯示icon。標(biāo)簽欄的個(gè)數(shù)一般在3~5個(gè)。

優(yōu)點(diǎn)：符合用戶認(rèn)知習(xí)慣，可以被隨時(shí)發(fā)現(xiàn)和操作；符合用戶操作習(xí)慣，下方的控件容易單手操作和點(diǎn)擊；迅速展示主要功能，用戶在初次進(jìn)入時(shí)能馬上get到主要功能。

缺點(diǎn)：可以容納的標(biāo)簽數(shù)量比較少；可以做到的深度比較淺，一層tab欄最多只能做到一層“篩選”。

進(jìn)化一：舵式導(dǎo)航

舵式導(dǎo)航和tab的基本樣式相似，但是其中有一個(gè)icon被“特別強(qiáng)調(diào)”了。有的是icon的樣式變化，有的是tab欄底部突出一部分來(lái)強(qiáng)調(diào)。如果有一個(gè)板塊是十分重要的/使用頻次很高的，就把它放在舵式導(dǎo)航中央，做強(qiáng)調(diào)處理。

它的優(yōu)勢(shì)在于強(qiáng)調(diào)一個(gè)特定的板塊，增大其使用頻次，有利于用戶使用習(xí)慣引導(dǎo)。缺點(diǎn)是可能會(huì)讓tab欄的樣式不規(guī)整，有可能影響到瀏覽體驗(yàn)。

進(jìn)化二：功能性舵式導(dǎo)航

比較簡(jiǎn)單的舵式導(dǎo)航僅僅添加了樣式的區(qū)分，其實(shí)更進(jìn)一步，還能添加更多的功能。

以喜馬拉雅為例。它的舵式導(dǎo)航承載了播放器的作用，當(dāng)正在播放音頻的時(shí)候，圓圈中會(huì)出現(xiàn)專輯封面并緩慢旋轉(zhuǎn)，表明正在播放。既能表明當(dāng)前狀態(tài)，又節(jié)省空間，同時(shí)利用了tab欄隨時(shí)存在隨時(shí)點(diǎn)擊的特點(diǎn)，是個(gè)很棒范例。或者，有一些舵式導(dǎo)航在點(diǎn)擊之后不會(huì)直接跳轉(zhuǎn)，而是進(jìn)一步選擇下一步操作的方式。

進(jìn)化三：底部tab欄+上拉列表

底部tab欄承載更多功能的方式可以是和列表結(jié)合。

這里以QQ音樂(lè)為例，QQ音樂(lè)的播放界面中，點(diǎn)擊“下載”icon就會(huì)出現(xiàn)選擇下載方式的上拉列表；點(diǎn)擊“分享”icon就會(huì)出現(xiàn)選擇分享方式的上拉列表等。它用來(lái)對(duì)某個(gè)功能進(jìn)行進(jìn)一步的篩選和模式定義（例如，下載音樂(lè)有不同音質(zhì)的選擇等）。

因?yàn)楸容^復(fù)雜，適合在內(nèi)層導(dǎo)航上使用，在全棧的tab導(dǎo)航上不適合大范圍使用，否則會(huì)對(duì)用戶體驗(yàn)造成影響。

進(jìn)化四：icon情感化設(shè)計(jì)

因?yàn)閠ab欄是會(huì)一直停留在一級(jí)頁(yè)面上的，和用戶接觸的時(shí)間也最長(zhǎng)。因此tab欄的一些創(chuàng)新設(shè)計(jì)也很容易成為深入人心的亮點(diǎn)。

例如QQ的tab欄設(shè)計(jì)，“消息”和“聯(lián)系人”上的眼睛，是一直跟著當(dāng)前激活的icon的方向走的，有種很活潑俏皮的感覺(jué)，也十分符合QQ年輕化的產(chǎn)品定位。

三、頂部Tab欄

簡(jiǎn)述：頂部tab欄與底部tab欄相似，都是用來(lái)做大頁(yè)面切換的，一般有2~4個(gè)。但是不同的是，頂部tab欄一般只有文字沒(méi)有icon高度比較小，并且文字的排布也不局限于均勻分布，現(xiàn)在越來(lái)越多的頂部導(dǎo)航是從左至右依次排布。標(biāo)簽切換方式主要是滑動(dòng)而不是點(diǎn)擊，這是因?yàn)榻缑骓敹穗y以用手指直接點(diǎn)擊到，所以用左右滑動(dòng)來(lái)代替遠(yuǎn)距離的點(diǎn)擊。

適用場(chǎng)景：頂部tab的適用場(chǎng)景很多，是一個(gè)很靈活的控件。

因?yàn)榘沧渴謾C(jī)底部有虛擬按鍵，為了防止誤觸，安卓端APP會(huì)將蘋(píng)果APP中的底部tab搬到頂部（但是很少有APP能做到設(shè)計(jì)兩套……一般都不會(huì)更換底部tab）；? 一些APP由于需要空出底部的位置放更重要的控件，會(huì)把導(dǎo)航全部放到上面（例如QQ音樂(lè)，最下面是播放控件，因此把導(dǎo)航直接搬到了上邊）；更多的是，把頂部tab作為二級(jí)導(dǎo)航使用，在每一個(gè)底部tab的頁(yè)面里，都有不一樣的頂部tab，用來(lái)給每一個(gè)頁(yè)面做再次分類。

優(yōu)點(diǎn)：相對(duì)于底部Tab，可以容納更多個(gè)標(biāo)簽；更加適合滑動(dòng)切換，操作的流暢性比較好。

缺點(diǎn)：頁(yè)面頂部不容易點(diǎn)擊；相對(duì)于底部tab不容易被發(fā)現(xiàn)。

進(jìn)化一：多層的頂部導(dǎo)航

如果底部tab+頂部tab的兩層導(dǎo)航還是不能滿足分類需求，那么最簡(jiǎn)單粗暴的方法就是再來(lái)幾層導(dǎo)航。它的優(yōu)勢(shì)就是解決問(wèn)題簡(jiǎn)單粗暴，很好理解。但是，不論在視覺(jué)上，還是操作方式上都不是很友好。

以微博為例，這個(gè)界面上的左右滑是三級(jí)導(dǎo)航的左右滑，二級(jí)導(dǎo)航必須要點(diǎn)擊/向左滑三級(jí)導(dǎo)航滑到頭才行，這是不符合頂部tab這個(gè)控件使用習(xí)慣的，讓用戶跨越整個(gè)屏幕點(diǎn)擊左上角的按鍵，真的很委屈。因此不適合大范圍使用。

進(jìn)化二：可滑動(dòng)的頂部導(dǎo)航

當(dāng)分類的類別實(shí)在是很多時(shí)，可以做成滑動(dòng)的頂部導(dǎo)航。這樣做的優(yōu)勢(shì)是能夠放下很多甚至是無(wú)上限種標(biāo)簽，并且由于頂部導(dǎo)航通常很窄可以節(jié)省大量界面空間。劣勢(shì)是有很多標(biāo)簽被隱藏了，需要滑動(dòng)才能看見(jiàn)的標(biāo)簽會(huì)不占優(yōu)勢(shì)。

進(jìn)化三：可滑動(dòng)的頂部導(dǎo)航+更多按鈕

如果嫌棄頂部導(dǎo)航滑動(dòng)的體驗(yàn)不好，自用戶想要達(dá)到的標(biāo)簽每次都要滑動(dòng)好久，可以在右側(cè)放一個(gè)“更多”icon，它不會(huì)隨著用戶的滑動(dòng)變化位置，點(diǎn)擊之后會(huì)進(jìn)入一個(gè)新頁(yè)面，展示的是頂部導(dǎo)航中所有的選項(xiàng)。集合了滑動(dòng)切換手勢(shì)的舒適和點(diǎn)擊選擇的精準(zhǔn)快速，緩慢瀏覽/快速查找的需求都能被滿足。缺點(diǎn)是點(diǎn)擊范圍比較小，可能誤觸。

進(jìn)化四：頂部導(dǎo)航+下拉列表

這種交互方式在web端十分常見(jiàn)，用來(lái)給每一個(gè)標(biāo)簽做二次分類。但是遷移到移動(dòng)端就會(huì)出現(xiàn)很多問(wèn)題。首先由于屏幕尺寸的縮小，下拉菜單會(huì)讓屏幕顯得比較復(fù)雜；并且手指點(diǎn)擊又要求控件不能過(guò)小。因此經(jīng)常采用下圖這種樣式來(lái)做下拉列表的變體。

同時(shí)，導(dǎo)航條+下拉列表可以用來(lái)進(jìn)行復(fù)雜屬性的選擇。如圖，每一個(gè)導(dǎo)航是一個(gè)屬性，下拉列表中是屬性值的選擇，依次選擇之后就能進(jìn)行屬性值的疊加。

進(jìn)化五：可以“移動(dòng)”的頂部導(dǎo)航

有些頁(yè)面中同時(shí)存在“需要再次分區(qū)的內(nèi)容”和“不需要分區(qū)的內(nèi)容”。

比較常見(jiàn)的處理方式是，把不需要區(qū)分的放在頂部，并且在它下邊有個(gè)“標(biāo)簽欄”，先是隨著頁(yè)面滑動(dòng)向上滑，滑動(dòng)到頂端后就固定到頂端成為真正的“頂部tab欄”，替換掉原先在它上面的東西。如果再次下滑會(huì)恢復(fù)原狀態(tài)。

進(jìn)化六：可以多次“移動(dòng)”的頂部導(dǎo)航

如果頁(yè)面中的需要區(qū)分的次數(shù)很多，在一個(gè)頁(yè)面中想要多個(gè)頂部導(dǎo)航呢？

那就用進(jìn)化五的升級(jí)版——多次移動(dòng)的頂部導(dǎo)航。

“人人都是產(chǎn)品經(jīng)理”這個(gè)APP，把頂部導(dǎo)航做成了可以隨時(shí)變化的樣式。隨著頁(yè)面的下滑，滑到了哪個(gè)導(dǎo)航的范圍，頂部導(dǎo)航就做相應(yīng)的替換。這樣做很靈活減少了下拉的次數(shù)，但是有可能造成用戶迷惑，想找到之前的某個(gè)板塊卻在當(dāng)前頁(yè)面見(jiàn)不到。

四、宮格導(dǎo)航

簡(jiǎn)述：宮格的特點(diǎn)是把很多個(gè)選項(xiàng)都聚合在一起，沒(méi)有切換，用戶選擇一個(gè)就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的功能，常用來(lái)作為很多小功能的聚合頁(yè)。宮格導(dǎo)航一般都會(huì)用icon與文字的組合，樣式像是一個(gè)個(gè)格子的組合。

優(yōu)點(diǎn)：可擴(kuò)展性很好，如果有新功能加入，可以無(wú)限制的向右/向下添加入口；讓用戶一眼就能看到所有的功能，快速了解APP涵蓋的功能。

缺點(diǎn)：當(dāng)功能比較多時(shí)變得難以選擇；功能之間是彼此獨(dú)立的，想要切換功能時(shí)只能退出到初始界面再選別的；被放在需要左滑/上滑才能看到的功能，點(diǎn)擊率會(huì)較低。

進(jìn)化一：宮格導(dǎo)航+滑動(dòng)

宮格導(dǎo)航中如果功能特別多，可以讓宮格導(dǎo)航滑動(dòng)起來(lái)。根據(jù)頁(yè)面排布的不同，可以左右滑動(dòng)（用半個(gè)圖形/小圓點(diǎn)提示用戶可以左滑），或者上下滑動(dòng)。這樣可以加入無(wú)限種功能，劣勢(shì)就是在滑動(dòng)之前，被隱藏的功能很難被發(fā)現(xiàn)，點(diǎn)擊率相對(duì)低，而且功能過(guò)多會(huì)導(dǎo)致難以選擇。

進(jìn)化二：宮格導(dǎo)航+更多鍵

在首頁(yè)上肯定不能把所有功能全都攤上去，可以只放最重要的幾個(gè)，其余的就隱藏到“更多”中；點(diǎn)擊更多就會(huì)跳轉(zhuǎn)到一個(gè)新頁(yè)面，新頁(yè)面中匯集了最全面的功能選項(xiàng)。至于新頁(yè)面是用宮格，還是列表等都可以。這樣做可以節(jié)省頁(yè)面空間，盡量減少用戶的選項(xiàng)，減少滑動(dòng)的麻煩。

進(jìn)化三：可以動(dòng)態(tài)變化的宮格導(dǎo)航

宮格導(dǎo)航的作用就是放置多個(gè)用戶常用的獨(dú)立功能，但是如果不同用戶常用的功能不一樣呢？

支付寶的宮格導(dǎo)航是可以動(dòng)態(tài)變化的，用戶在首次打開(kāi)一個(gè)新功能時(shí)，下方會(huì)出現(xiàn)一個(gè)提示條“把XXX功能添加到首頁(yè)”，點(diǎn)擊以后首頁(yè)的宮格導(dǎo)航就會(huì)變化。很適合有不同使用習(xí)慣的用戶自定義快捷方式，也可以隨時(shí)更換與管理。

五、抽屜導(dǎo)航

簡(jiǎn)述：顧名思義，抽屜導(dǎo)航就好像“抽屜”一樣，平時(shí)看不到，在需要的時(shí)候就拉出來(lái)。抽屜導(dǎo)航的喚起圖標(biāo)一般被放置在左上角/右上角，點(diǎn)擊后會(huì)向右/向左展開(kāi)一部分隱藏的頁(yè)面，在新的頁(yè)面中，可以用列表展示更多標(biāo)簽。

當(dāng)APP首頁(yè)需要沉浸式的體驗(yàn)，tab欄可能會(huì)打擾使用體驗(yàn)時(shí)，常把tab欄中的標(biāo)簽隱藏到左上角的抽屜導(dǎo)航中；當(dāng)有一些標(biāo)簽重要程度低/不會(huì)頻繁點(diǎn)擊，但是也會(huì)偶爾用到時(shí)，可以把這些功能藏在抽屜導(dǎo)航里，即能隨時(shí)找到也不影響頁(yè)面。

優(yōu)點(diǎn)：可擴(kuò)展性比較強(qiáng)，可以放置很多隱藏功能；占用頁(yè)面比較小，不影響用戶體驗(yàn)。

缺點(diǎn)：第一次使用難以找到，用戶可能在使用過(guò)一段時(shí)間后才發(fā)現(xiàn)此功能的位置；增加點(diǎn)擊次數(shù)，點(diǎn)擊率相對(duì)比較低；頻繁開(kāi)關(guān)抽屜時(shí)界面不?；瑒?dòng)，視覺(jué)感受很煩亂。

六、下拉列表

簡(jiǎn)述：下拉列表是web中比較常用的一種交互方式。但是遷移到移動(dòng)端之后就會(huì)出現(xiàn)一系列問(wèn)題。

首先由于屏幕尺寸的縮小，下拉菜單會(huì)讓屏幕顯得比較復(fù)雜；并且手指點(diǎn)擊又要求控件不能過(guò)小，因此每個(gè)下拉列表也不能通過(guò)縮小尺寸降低屏幕復(fù)雜程度。因此經(jīng)常采用如下這些方式來(lái)做下拉列表的變體。（原頁(yè)面被黑色半透明覆蓋，下拉列表疊加在上方）

優(yōu)點(diǎn)：與web端的控件保持一致，容易理解和操作；節(jié)省界面空間。

缺點(diǎn)：每次呼出下拉導(dǎo)航時(shí)一般都會(huì)令后邊的界面變暗，頻繁操作視覺(jué)效果不佳；因?yàn)樵诮缑嫔戏讲⑶沂屈c(diǎn)擊操作，有些難以觸碰到。

進(jìn)化一：嵌入頁(yè)面中的下拉列表

下拉列表也不一定是個(gè)獨(dú)立的浮窗，下面這種列表就直接嵌入到了頁(yè)面中。每一個(gè)列表只給出有限的一/兩行，加一個(gè)代表“更多”的三角，點(diǎn)擊三角就能拉開(kāi)被折疊的列表項(xiàng)。它只展示了重要內(nèi)容，節(jié)省頁(yè)面空間，也留給用戶更多選擇余地，同時(shí)降低了頁(yè)面跳轉(zhuǎn)。但是，如果待選項(xiàng)實(shí)在太多，用戶一邊點(diǎn)擊需要一邊下拉，頁(yè)面越來(lái)越長(zhǎng)，體驗(yàn)欠佳。

七、圖片導(dǎo)航

簡(jiǎn)述：這種導(dǎo)航在輪播圖上應(yīng)用的比較多，主要特點(diǎn)就是用大圖片作為導(dǎo)航的內(nèi)容，可以左右滑動(dòng)查看，并且在下方有小圓點(diǎn)來(lái)展示輪播圖總數(shù)和當(dāng)前圖片的位置。在需要展示圖片內(nèi)容，并且每次只需要用戶專注于一個(gè)（并非從多個(gè)里面選擇一個(gè)），可以用輪播的導(dǎo)航方式。

優(yōu)點(diǎn)：展示性比較強(qiáng)；容易吸引注意力，是很有競(jìng)爭(zhēng)性的展示位置。

缺點(diǎn)：展示的個(gè)數(shù)不宜太多；一次只能展示有限種，用戶需要等待/手動(dòng)切換才能看到全部，轉(zhuǎn)化率具有隨機(jī)性；占頁(yè)面區(qū)域較大。

進(jìn)化一：卡片式的輪播圖導(dǎo)航

做成帶有立體效果的卡片展示樣式，切換效果比較華麗。并且左/右的圖片可以吸引用戶不斷滑動(dòng)刺激用戶查看。但是會(huì)使頁(yè)面顯得些許煩亂。

進(jìn)化二：可滑動(dòng)的輪播圖導(dǎo)航

一些輪播圖導(dǎo)航是不能自動(dòng)播放，需要用戶手動(dòng)左右滑動(dòng)的，一般會(huì)有1~3個(gè)完整的圖片展示在界面上，右側(cè)露出一部分下一個(gè)圖片來(lái)提示用戶可以左滑查看更多。

進(jìn)化三：大小靈活有區(qū)分的圖片導(dǎo)航

這種形式的圖片導(dǎo)航一般都是靜態(tài)的，將圖片做出大小區(qū)分的目的，是為了對(duì)重要程度做出區(qū)別。比較重要的當(dāng)然要分配更大的，更高的位置。

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

簡(jiǎn)述：陳列館式導(dǎo)航用來(lái)展示實(shí)時(shí)性的內(nèi)容，并且經(jīng)常放入圖片和文字將整個(gè)屏幕占滿。適用于內(nèi)容展示性要求比較高的導(dǎo)航，并且常用于實(shí)時(shí)更新頻繁的內(nèi)容，例如動(dòng)態(tài)、新聞、圖片作品等等。

優(yōu)點(diǎn)：視覺(jué)效果良好，展示性較強(qiáng)；適合實(shí)時(shí)更新的內(nèi)容，布局方式靈活。

缺點(diǎn)：?jiǎn)未握故镜膬?nèi)容數(shù)量有限（5~9個(gè)）。

進(jìn)化一：陳列館+小標(biāo)簽欄

一般來(lái)說(shuō)，對(duì)陳列館的進(jìn)一步操作可以點(diǎn)擊進(jìn)入其內(nèi)層進(jìn)行，但是一些頻次比較高的操作，例如點(diǎn)贊，收藏等，可以拉高一個(gè)層級(jí)，直接放在陳列館導(dǎo)航的層級(jí)中，增加了操作轉(zhuǎn)化的幾率。但是如果陳列館內(nèi)容不足夠，頁(yè)面反而會(huì)被標(biāo)簽欄統(tǒng)治，因此慎用。

進(jìn)化二：瀑布流式陳列館

瀑布流的陳列方式現(xiàn)在越來(lái)越常見(jiàn)，其特點(diǎn)就是高度不固定，而是根據(jù)作品的高度自動(dòng)調(diào)節(jié)。整體顯得很靈活自然。

進(jìn)化三：陳列館+更多按鈕

當(dāng)陳列館的分類很多，并且每一類中包含的內(nèi)容也很多時(shí)，就可以使用這種方式。每一種類別的陳列館展示最新的幾個(gè)，并且加一個(gè)“更多”按鈕（一般放在類別的右上角），點(diǎn)擊以后進(jìn)入詳細(xì)界面，此界面中是不分類別的陳列館，可以查看此類中的所有內(nèi)容。

第一次將自己總結(jié)的東西發(fā)出來(lái)，還有很多不完善的地方，歡迎大家的批評(píng)指正！

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

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