導航UI設計「優劣對比」

在產品設計當中，導航最主要的作用有兩個：第1個是告訴用戶當前所處的位置，第2個是為用戶提供其他功能的入口。

此外，導航還有一個比較重要的作用，那就是可以向受眾展示應用的功能結構和信息范圍。結合實際生活場景，會更容易理解導航有展示功能結構這一作用的說法。

當當V10.3.0版本商品頁、首頁

隨著設計的不斷迭代和更新，導航設計的玩法也越來越多，但本質的設計邏輯萬變不離其宗，今天，數藝君整理了8個時下流行的導航設計例子，分享給大家。

5種常見的一級導航

5種常見的一級導航方式包括標簽式、抽屜式、下拉式、點聚式和桌面式。每一種導航方式都有各自的優勢與劣勢，設計師需要結合自己的產品結構進行選擇。

01

標簽式導航

標簽式導航是蘋果公司主推的一級導航方式，也叫Tab式導航。導航上都是一級頁面入口，由代表入口內容的圖標和注解文字組成，如YHOUSE APP城市生活社區，發現好玩的地方和有共同愛好的人）的導航。

有些標簽式導航則采用簡化的方式，如好物APP（原創家居售賣平臺）的導航只有文字，選中文字后會在文字底部標上一條黑色的線條；而nice APP（美圖分享、短視頻直播軟件）的導航去掉了注解文字，只留下了圖標，被選中時圖標由淺灰色變為黑色。

YHOUSE 5.2版

好物APP6.2.1版

nice APP 4.8.0版

標簽式導航常處于一級頁面的底部，導航入口一般有3~5個標簽。當導航只有2個標簽時，沒有必要在頁面底部進行單獨設計。

筆者以前常用的一款美食圖片社交類APP底部的標簽超過了5個，查看其他入口的方式是用手指在屏幕上左右滑動，這樣會影響用戶的使用效率和流暢度。

所以，如果標簽超過5個，就需要重新規劃APP的架構或調整導航的優先級，將導航與二級導航進行合并后放在頁面底部。

優勢：

使用標簽式導航，用戶在打開應用后就能直觀地看到APP的核心功能與結構，用戶能在一級頁面中的每個標簽之間快速切換，并且標簽上的文字或顯示的狀態就能告訴用戶當前所在的位置。

劣勢：

使用標簽式導航，對標簽的數量有要求，如果少于3個標簽，不建議設置導航；如果多于3個標簽，導航會顯示不全，并且用戶的使用體驗也不好。

延伸應用：

如果APP是帶有用戶原創內容功能的，則可以把導航的中間位置設置為發布功能。例如，nice APP頁面的中間是一個相機圖標，點擊相機圖標就能進入手機相冊的頁面，在手機相冊內可以拍照或拍視頻。還有另外一種情況，點擊中間的發布按鈕會展開更多的功能選項，如可以有發布圖文、直播、紅包和音樂等功能。

02

抽屜式導航

抽屜式導航也叫漢堡式菜單，一般出現在APP頁面的左右兩側。用戶停留在可以喚出導航的頁面時，用手指向左右側滑動或點擊左右上角的圖標顯示導航頁面。

抽屜式導航的動畫效果也有比較簡單的，如點擊小紅書APP首頁左上角的用戶頭像后，頁面會從左向右浮出抽屜式導航，背景也會出現一層黑色透明的遮罩效果。

酷狗音樂APP8.8.0版本

小紅書APP 5.0版本

抽屜式導航頁面常見的表現形式有兩種：一種是主頁面縮小并浮動在抽屜式導航頁面上，另一種是導航頁面隱藏在主頁面后。

優勢：

由于抽屜式導航頁面是可以自定義的，而且用戶可以用手指在縱向進行上下滑動，承載的信息量也比較大，因此可以放比較多的功能入口和信息。

劣勢：

由于導航列表是隱藏在主頁面的側邊，信息過多時導航列表上功能的可發現性比較低，因此用戶需要花較多的注意力去找到目標入口。

跟標簽式導航相比，使用抽屜式導航，用戶對APP功能的結構就沒有那么清楚。另外，用戶點擊進入某個入口后，側邊導航列表會被收起，所以不具備標識用戶所在位置的作用，而且用戶在不同功能間進行切換的操作步驟會變多。

延伸應用：

抽屜式導航有個好處，就是不用跳轉到新的頁面，并且信息承載能力較好。在有貨APP和京東APP上對某一類商品進行篩選時，抽屜式導航就比較適合，在導航面板里選擇查詢選項后點擊“確認”按鈕，就會把商品按篩選條件重新排序。

另外，抽屜式導航在游戲類APP中也比較常見，有復雜成長系統和任務系統的手游都把內容放在頁面的左右兩側，用戶點擊懸浮在頁面上的入口就能喚出頁面，再次點擊入口或頁面上的收起按鈕就可以隱藏頁面。

03

下拉式導航

下拉式導航位于APP頂部的導航條上，用戶通過點擊菜單按鈕向下彈出下拉式導航。用戶點擊任意菜單會跳轉到相應的板塊，同時下拉式導航會被收起。用戶點擊其他任何地方也能收起導航。使用下拉式導航的典型的應用就是新浪微博APP。

新浪微博APP 7.10.2版本

優勢:

與標簽式導航相比，下拉式導航的信息承載力更好，因為被選中的頁面位置會更新在導航條上面，同時也具備標簽式導航指示用戶所在頁面位置的優點。與抽屜式導航相比，下拉式導航可發現性高，且用戶在功能板塊之間的切換也比較流暢

劣勢：

由于導航的位置在頂部，因此用戶在使用大屏幕的手機且在單手持握手機的場景下操作會有些不方便，用戶可能需要改變持握手機的方式。

另外，下拉式導航需要用戶先點開導航面板，然后在面板里點擊進入別的功能頁面。與標簽式導航相比，下拉式導航不支持用手指左右滑動的方式進行頁面的切換。

延伸應用:

在美柚APP頁面上，下拉式導航可以對內容進行篩選排序。在海狐海淘APP頁面上，下拉式導航應用在商品搜索結果頁面和商品類別頁面上，讓用戶點擊篩選條件，且一個頁面上可以有多個下拉式導航。

美柚 APP 6.2.1版本

海狐海淘 APP 3.7.0版本

04

點聚式導航

點聚式導航的“ ”號圖標在頁面的左下角，用戶點擊“ ”號圖標后就可以把導航全部打開，再次點擊“ ”號圖標后導航就會被收起。Path APP（社交平臺）使用的就是點聚式導航。

Path APP 6.5.1版本

優勢:

點聚式導航入口一直懸停在頁面的左下角，在一級頁面上比較方便查找，并且與標簽式導航相比，不會占據屏幕的空間。

劣勢:

點聚式導航在展開的時候是環形排列的，功能入口選項只能使用圖標表示，不能出現文字，這就要求圖標能通俗地表達清楚選項的意思和要求。另外，切換到其他頁面時，導航上的圖標不能指示出當前頁面的位置。

延伸應用:

用好好住APP（裝修設計、家居生活分享社區）發布動態時，頁面會彈出“發布文章”“發布圖片”“發布整屋”這3個選項。設計師在這個場景中把點聚式導航的環形排列方式改成了圖標加文字的橫向排列方式，每一個選項的意思都很容易被理解。

另一種延伸應用是蘋果手機自帶的 Assistive Touch，蘋果手機APP的頁面入口可以隨著手勢拖動到屏幕上的任意位置，但常規的APP一般不會用這樣的設計方案。

好好住 APP 2.11.6版本

蘋果手機Assistive Touch

05

桌面式導航

舊版本的支付寶APP首頁就采用了桌面式導航。支付寶APP把它包含的功能或獨立應用的入口都放在首頁。

之所以叫桌面式導航，是因為這種導航的布局方式與手機桌面一樣，采用這種導航設計的前提是導航頁面上每個入口對應功能的獨立性要高。

支付寶 APP（舊版本）

優勢：

桌面式導航是在單獨的一個頁面里放多個功能入口，信息承載能力比較好，可擴展性也比較好。用戶進入APP的第一個頁面就會顯示APP的功能，對其他功能的推廣也會有幫助。

劣勢：

桌面式導航的每個功能入口都是獨立的，用戶進入一個入口后，如果要使用其他功能，就要返回到導航再點擊其他的入口。

對于需要頻繁切換功能的應用來說，用戶體驗會比較差。另外，用戶第一眼看到的APP首頁上全都是功能入口，從企業角度來看，這種情況分散了用戶的注意力。

延伸應用：

當APP還承載著其他獨立的功能和應用入口時，設計師會把桌面式導航設計成與大眾點評APP的首頁一樣的模式。用戶看見的APP首頁不全是排列好的入口，首頁頂部會用左右翻頁的形式來展示更多入口，首頁下部還是主推與業務相關的信息。

例如，在麗芙家居APP（家居產品售賣平臺）的商品分類中，如果分類數量不會隨著業務的增長而改變，那么使用桌面式導航的延伸形式是比較合適的。

在電商類APP上面經常能看見衣服、鞋子和包等商品分類，其視覺結構上面是對應的圖標、下面是文字，用戶能夠比較輕易地通過這些內容了解商品信息。

大眾點評APP 9.7.0版本

麗芙家居APP 5.3.1版本

2

3種常見的二級導航

二級導航是對內容的類別再一次細分，如提到“動態”這個詞就會讓人聯想到動態需要分“最新動態”和“我關注的動態”。用戶點擊這兩個功能入口之后，會切換到對應的頁面，這種二級導航被稱為Tab式導航。

其他兩種常見的二級導航分別是列表式導航和幻燈片式導航，接下來筆者將詳細講解每一種二級導航的應用場景和優劣勢。

01

Tab式導航

Tab式導航的名稱比較形象，其切換方式主要有兩種：一種是點擊后切換到另一個類別，并通過高亮的方式把選中的狀態顯示出來；另一種是通過用手指左右滑動的方式進行切換。

如果導航在頁面頂部，其表現的形式有兩種：一種像藝術頭條APP（藝術資訊閱讀類應用）那樣，導航位于大標題下方；另一種像in APP（萌趣貼紙自拍應用）的導航位于頁面中間，用戶滑動導航時導航底部會有紅色線條出現。

不過Tab式導航很少在首頁上出現，大多會出現在詳情頁內，如堆糖APP（好物推薦社區）的商品詳情頁面。

在電商類APP中，導航條會隨著頁面的向上滾動而變化。當用戶重新向下滑動頁面，直到Tab式導航上方出現其他的內容時，導航條才會跟著頁面向下滾動。

藝術頭條 APP

in APP

堆糖 APP

設計師在設計導航條的時候，要考慮好導航條的擴展性。如果二級導航比較多，那么要考慮采用什么樣的方法才能在有限的空間內展示更多的選項。

02

列表式導航

列表式導航在排列方向上都是縱向的，列表式導航多用于“個人中心”的頁面，不同入口對應的功能之間關系不大，每個入口都是單獨的功能頁面。

一部分應用分類的設計方案也是列表式，如尖叫設計APP（原創家居集合品牌售賣平臺）的分類，這里的導航設計方案是配合圖片進行展示的；而網易云音樂APP中“我的音樂”中“本地音樂”“最近播放”“我的電臺”“我的收藏”這4個類別列表是沒有圖片的。

尖叫設計APP 2.8.4版本

網易云音樂APP 4.3.4版本

列表式導航的每一項內容都不會超過一行，一般是結合圖標再以文字左對齊的方式顯示。列表的右邊通常會有向右的箭頭，引導用戶點擊跳轉到新的頁面。如果列表過長，則會像閑魚APP那樣，把幾個類別放在一個組里，在視覺上對各類別進行區分，這樣列表的信息結構看起來也會比較清晰。

列表式導航還可以使用狀態文案，如得到APP的列表，在“我的賬戶”后有相關數字顯示當前的余額。

另外在“推薦「得到」給好友”下方有一行引導性文字，一定程度上加強了用戶推薦的動力。

列表式導航信息承載能力好，用戶點擊選項進入的頁面還可以繼續呈現其他的列表，如用戶點擊“設置”選項后，進入的頁面還會出現有“關于我們”“清理緩存”和“是否開啟4G使用”等選項的列表。

閑魚 APP 6.0.3版本

得到 APP 4.0.0版本

03

幻燈片式導航

幻燈片式導航的呈現方式是比較“酷炫”的，如想去APP（設計師原創服飾平臺）的“專題”頁面的導航，用戶可通過用手指在屏幕上左右滑動的方式查看所有相關入口。

當設計師選擇采用幻燈片式導航時，其承載的信息數量不能過多，因為越排列在后方的內容流量會越少，用戶來回翻閱會增加時間成本。

并且幻燈片頁數過多時用戶很難知道自己停留在哪頁上，所以設計師在設計時最好加上分頁指示器，讓用戶對幻燈片式導航的信息量有個預估并能夠清楚自己停留在哪個位置。

想去 APP 4.5.5版本

用戶在青芒雜志APP（精選內容訂閱平臺）上選擇訂閱頻道時，每個類別下面的頻道是可以橫向滾動的，其標題變成了一張封面圖，頻道被換成了商品，這與幻燈片式導航的交互方式一樣。

多個類別在頁面上是縱向排列的，這樣的交互方式在一些電商類APP中也很常見?；脽羝綄Ш降牧硪环N延伸應用是類似Tasty APP（旅行美食推薦指南）的話題功能，所有話題入口排列成一行，用戶可以通過左右滑動的方式查看話題。

Tasty APP的話題入口的上半部分是圖片，下半部分是話題名稱。也有在背景圖片上顯示話題名稱的表現形式，但這種表現形式要求頁面上的入口數量不能過多。

青芒雜志APP 2.0.1版本

Tasty APP 1.4.8版本