本文總結了自己手機上100多個APP中的一些常見的導航交互方式，把它們分為了八大類型。并且每種類型由簡單到復雜總結了一個逐漸“進化”的過程。希望通過這種簡單粗暴的總結，對之后導航方式的設計有所幫助。

一、列表導航

簡述：列表導航是比較基礎的導航樣式：每個獨占一行，依次向下排列，右側有一個箭頭用來提示用戶點擊進入。在設置界面或者個人界面比較常用。

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

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

進化一：多層列表導航

如果希望用列表承載“篩選”的作用，就把列表縮到左邊，點擊列表以后不會跳轉到下一個界面，而是導致篩選內容的改變，功能上和標簽欄比較類似。適合做超多門類的查找篩選。

缺點是信息量大，并且需要花功夫在標簽的歸類上，否則會給用戶的快速選擇帶來困難。

進化二：橫向滑動的列表導航

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

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

進化三：列表導航+功能按鈕

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

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

進化四：列表導航+左滑更多功能

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

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

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

?二、底部Tab欄

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

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

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

進化一：舵式導航

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

它的優(yōu)勢在于強調一個特定的板塊，增大其使用頻次，有利于用戶使用習慣引導。缺點是可能會讓tab欄的樣式不規(guī)整，有可能影響到瀏覽體驗。

進化二：功能性舵式導航

比較簡單的舵式導航僅僅添加了樣式的區(qū)分，其實更進一步，還能添加更多的功能。

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

進化三：底部tab欄+上拉列表

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

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

因為比較復雜，適合在內層導航上使用，在全棧的tab導航上不適合大范圍使用，否則會對用戶體驗造成影響。

進化四：icon情感化設計

因為tab欄是會一直停留在一級頁面上的，和用戶接觸的時間也最長。因此tab欄的一些創(chuàng)新設計也很容易成為深入人心的亮點。

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

三、頂部Tab欄

簡述：頂部tab欄與底部tab欄相似，都是用來做大頁面切換的，一般有2~4個。但是不同的是，頂部tab欄一般只有文字沒有icon高度比較小，并且文字的排布也不局限于均勻分布，現(xiàn)在越來越多的頂部導航是從左至右依次排布。標簽切換方式主要是滑動而不是點擊，這是因為界面頂端難以用手指直接點擊到，所以用左右滑動來代替遠距離的點擊。

適用場景：頂部tab的適用場景很多，是一個很靈活的控件。

因為安卓手機底部有虛擬按鍵，為了防止誤觸，安卓端APP會將蘋果APP中的底部tab搬到頂部（但是很少有APP能做到設計兩套……一般都不會更換底部tab）；? 一些APP由于需要空出底部的位置放更重要的控件，會把導航全部放到上面（例如QQ音樂，最下面是播放控件，因此把導航直接搬到了上邊）；更多的是，把頂部tab作為二級導航使用，在每一個底部tab的頁面里，都有不一樣的頂部tab，用來給每一個頁面做再次分類。

優(yōu)點：相對于底部Tab，可以容納更多個標簽；更加適合滑動切換，操作的流暢性比較好。

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

進化一：多層的頂部導航

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

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

進化二：可滑動的頂部導航

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

進化三：可滑動的頂部導航+更多按鈕

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

進化四：頂部導航+下拉列表

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

同時，導航條+下拉列表可以用來進行復雜屬性的選擇。如圖，每一個導航是一個屬性，下拉列表中是屬性值的選擇，依次選擇之后就能進行屬性值的疊加。

進化五：可以“移動”的頂部導航

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

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

進化六：可以多次“移動”的頂部導航

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

那就用進化五的升級版——多次移動的頂部導航。

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

四、宮格導航

簡述：宮格的特點是把很多個選項都聚合在一起，沒有切換，用戶選擇一個就會跳轉到對應的功能，常用來作為很多小功能的聚合頁。宮格導航一般都會用icon與文字的組合，樣式像是一個個格子的組合。

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

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

進化一：宮格導航+滑動

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

進化二：宮格導航+更多鍵

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

進化三：可以動態(tài)變化的宮格導航

宮格導航的作用就是放置多個用戶常用的獨立功能，但是如果不同用戶常用的功能不一樣呢？

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

五、抽屜導航

簡述：顧名思義，抽屜導航就好像“抽屜”一樣，平時看不到，在需要的時候就拉出來。抽屜導航的喚起圖標一般被放置在左上角/右上角，點擊后會向右/向左展開一部分隱藏的頁面，在新的頁面中，可以用列表展示更多標簽。

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

優(yōu)點：可擴展性比較強，可以放置很多隱藏功能；占用頁面比較小，不影響用戶體驗。

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

六、下拉列表

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

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

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

缺點：每次呼出下拉導航時一般都會令后邊的界面變暗，頻繁操作視覺效果不佳；因為在界面上方并且是點擊操作，有些難以觸碰到。

進化一：嵌入頁面中的下拉列表

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

七、圖片導航

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

優(yōu)點：展示性比較強；容易吸引注意力，是很有競爭性的展示位置。

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

進化一：卡片式的輪播圖導航

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

進化二：可滑動的輪播圖導航

一些輪播圖導航是不能自動播放，需要用戶手動左右滑動的，一般會有1~3個完整的圖片展示在界面上，右側露出一部分下一個圖片來提示用戶可以左滑查看更多。

進化三：大小靈活有區(qū)分的圖片導航

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

八、陳列館式導航

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

優(yōu)點：視覺效果良好，展示性較強；適合實時更新的內容，布局方式靈活。

缺點：單次展示的內容數(shù)量有限（5~9個）。

進化一：陳列館+小標簽欄

一般來說，對陳列館的進一步操作可以點擊進入其內層進行，但是一些頻次比較高的操作，例如點贊，收藏等，可以拉高一個層級，直接放在陳列館導航的層級中，增加了操作轉化的幾率。但是如果陳列館內容不足夠，頁面反而會被標簽欄統(tǒng)治，因此慎用。

進化二：瀑布流式陳列館

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

進化三：陳列館+更多按鈕

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

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

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

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