導航菜單是人機交互的最主要的橋梁和平臺，主要作用是不讓用戶迷失方向。現(xiàn)在市面上產(chǎn)品的菜單欄種類繁多，到底什么樣的才是優(yōu)秀的導航菜單設計呢？好的菜單設計不僅能提升整個產(chǎn)品的用戶體驗，而且還能讓用戶耳目一新。這篇文章將聚焦導航菜單，分享我們對于導航菜單的認識和體驗。

一、導航菜單有什么作用？

1. 提升產(chǎn)品內(nèi)容和功能結(jié)構和層次

導航是APP的骨架，支撐著整體的內(nèi)容和信息，讓內(nèi)容按照信息架構有機地結(jié)合在一起，直觀而清晰地展示在用戶面前，從而使零碎的內(nèi)容變得充實而有序。結(jié)構化的同時也增強了生態(tài)感。

2. 重點展示核心功能

每一款產(chǎn)品投入開發(fā)進入市場后，立身之本在于自己的核心功能。因此，核心功能必須放在用戶觸手可及的位置，次要功能的比重應該得到控制，展示上也不能喧賓奪主。通過導航就能很好的突出核心，適當隱藏次要功能。

3. 簡化用戶旅程

合理的導航系統(tǒng)和順暢的任務路徑，能夠讓用戶快速地達到目標，形成暢快的用戶體驗。用戶旅程的簡化對于產(chǎn)品的用戶黏度和轉(zhuǎn)化率有著直接的作用，高效的導航能夠直戳用戶痛點。

二、導航菜單的分類

在了解導航菜單的基本作用后，我們利用快速原型工具Mockplus來展示一下導航菜單的分類。

1、經(jīng)典導航菜單Tabber

Tabber是蘋果ios可以自動生成一種導航控件，開發(fā)起來方便。所以這種經(jīng)典的底部導航欄受到絕大數(shù)app設計師的青睞。這種設計符合手機端用戶單手操作的習慣，包括新版微信，淘寶，支付寶，百度手機等都采用的這一方式。這個APP導航方式占大多數(shù)。

優(yōu)點：清楚當前所在的入口位置；直接展現(xiàn)最重要入口的內(nèi)容信息。

缺點：功能入口過多時，該模式顯得笨重不實用。

2.、矩形、網(wǎng)格式導航菜單

這種宮格導航是將主要入口全部聚合在頁面，讓用戶做出選擇。這樣的組織方式無法讓用戶在第一時間看到內(nèi)容，選擇壓力較大，采用這種導航的應用已經(jīng)越來越少，往往用在二級頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或是作為一系列工具入口的聚合。

利用Mockplus實現(xiàn)的宮格導航效果【在線預覽】

優(yōu)點：簡約而不簡陋，導航清晰、明顯，并能提高效率。

缺點：設計時需要注意色彩的搭配，太過于花哨會讓用戶產(chǎn)生視覺疲勞。

3、抽屜式導航

抽屜式滑動導航很好地彌補了tabber導航中切換項受限的缺陷，通過縱向排列切換項解決了這一問題，將菜單隱藏在當前頁面內(nèi)，點擊入口即可像抽屜一樣拉出菜單。

利用Mockplus實現(xiàn)的抽屜式導航效果【在線預覽】

優(yōu)點：節(jié)省頁面展示空間；讓用戶注意力聚焦到當前頁面；擴展性好。

缺點：不適合頻繁切換的應用。

4、舵式導航

目前流行一種標簽導航的形式，常被稱做為“舵式導航”，因為它的樣式很像輪船上用來指揮的船舵，兩側(cè)是其他操作按鈕。當頁面有處于同一層級的幾大部分內(nèi)容，同時又需要一個非常重要且頻繁操作的入口，就可以采用這種APP導航模式。

利用Mockplus實現(xiàn)的舵式導航效果【在線預覽】

優(yōu)點：需要突出重要且頻繁操作的入口。

缺點：同標簽導航。

三、經(jīng)典導航菜單設計

1. 谷歌的Material Design中使用了“浮動操作按鈕”來定義這種導航。通過UI上方浮動的圖標進行區(qū)分，同時也有恰當?shù)膭討B(tài)效果。開創(chuàng)了全新的導航規(guī)范。

2. 同樣的，印象筆記也借鑒了這樣的模式，用戶只需輕點右下角的浮動按鈕，就可以快速地記錄當下的靈感。

3. Tumblr搭配了形象的圖標和貼切的標簽。 當你向下滾動瀏覽內(nèi)容時，這些圖標也會自然地消失。

4. Messenger的構造嚴格地遵循了標簽導航，一部分標簽固定在頂部，一部分在底部清晰地呈現(xiàn)主要功能。圖標清晰易于理解，也允許自定義標簽，從而產(chǎn)生精致而整潔的視覺體驗。

小結(jié)

越來越多的設計師意識到導航欄菜單對提高用戶體驗的重要性。 在Android中，我們看到從漢堡導航迭代為獨立的標簽欄。 在iOS上，越來越多的應用程序正在移除小標簽欄，替換成更大更清晰的圖標。為了追求更好的用戶體驗，簡化APP設計，設計師們還會在導航設計優(yōu)化的路上不斷探索新的設計方向。