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

一沼沈、導(dǎo)航菜單有什么作用流酬？

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

導(dǎo)航是APP的骨架，支撐著整體的內(nèi)容和信息庆冕，讓內(nèi)容按照信息架構(gòu)有機(jī)地結(jié)合在一起康吵，直觀而清晰地展示在用戶面前劈榨，從而使零碎的內(nèi)容變得充實(shí)而有序访递。結(jié)構(gòu)化的同時(shí)也增強(qiáng)了生態(tài)感。

2.重點(diǎn)展示核心功能

每一款產(chǎn)品投入開發(fā)進(jìn)入市場后同辣，立身之本在于自己的核心功能。因此响巢，核心功能必須放在用戶觸手可及的位置踪古，次要功能的比重應(yīng)該得到控制拘泞，展示上也不能喧賓奪主陪腌。通過導(dǎo)航就能很好的突出核心诗鸭，適當(dāng)隱藏次要功能参滴。

3.簡化用戶旅程

合理的導(dǎo)航系統(tǒng)和順暢的任務(wù)路徑强岸，能夠讓用戶快速地達(dá)到目標(biāo)，形成暢快的用戶體驗(yàn)请唱。用戶旅程的簡化對(duì)于產(chǎn)品的用戶黏度和轉(zhuǎn)化率有著直接的作用过蹂，高效的導(dǎo)航能夠直戳用戶痛點(diǎn)酷勺。

二、導(dǎo)航菜單的分類

在了解導(dǎo)航菜單的基本作用后甚亭，我們利用快速原型工具M(jìn)ockplus來展示一下導(dǎo)航菜單的分類击胜。

1偶摔、經(jīng)典導(dǎo)航菜單Tabber

Tabber是蘋果ios可以自動(dòng)生成一種導(dǎo)航控件，開發(fā)起來方便策州。所以這種經(jīng)典的底部導(dǎo)航欄受到絕大數(shù)app設(shè)計(jì)師的青睞够挂。這種設(shè)計(jì)符合手機(jī)端用戶單手操作的習(xí)慣藕夫，包括新版微信枯冈，淘寶，支付寶办悟，百度手機(jī)等都采用的這一方式霜幼。這個(gè)APP導(dǎo)航方式占大多數(shù)罪既。

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

缺點(diǎn)：功能入口過多時(shí)，該模式顯得笨重不實(shí)用苛蒲。

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

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

利用Mockplus實(shí)現(xiàn)的宮格導(dǎo)航效果【在線預(yù)覽】

優(yōu)點(diǎn)：簡約而不簡陋睁搭，導(dǎo)航清晰锌唾、明顯重窟，并能提高效率。

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

3怯邪、抽屜式導(dǎo)航

抽屜式滑動(dòng)導(dǎo)航很好地彌補(bǔ)了tabber導(dǎo)航中切換項(xiàng)受限的缺陷和泌，通過縱向排列切換項(xiàng)解決了這一問題县恕，將菜單隱藏在當(dāng)前頁面內(nèi)美尸，點(diǎn)擊入口即可像抽屜一樣拉出菜單堪滨。

利用Mockplus實(shí)現(xiàn)的抽屜式導(dǎo)航效果【在線預(yù)覽】

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

缺點(diǎn)：不適合頻繁切換的應(yīng)用。

4、舵式導(dǎo)航

目前流行一種標(biāo)簽導(dǎo)航的形式袖牙，常被稱做為“舵式導(dǎo)航”皇忿，因?yàn)樗臉邮胶芟褫喆嫌脕碇笓]的船舵叨襟，兩側(cè)是其他操作按鈕铺峭。當(dāng)頁面有處于同一層級(jí)的幾大部分內(nèi)容傀履，同時(shí)又需要一個(gè)非常重要且頻繁操作的入口，就可以采用這種APP導(dǎo)航模式。

利用Mockplus實(shí)現(xiàn)的舵式導(dǎo)航效果【在線預(yù)覽】

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

缺點(diǎn)：同標(biāo)簽導(dǎo)航。

三、經(jīng)典導(dǎo)航菜單設(shè)計(jì)

1. 谷歌的Material Design中使用了“浮動(dòng)操作按鈕”來定義這種導(dǎo)航台猴。通過UI上方浮動(dòng)的圖標(biāo)進(jìn)行區(qū)分曹步，同時(shí)也有恰當(dāng)?shù)膭?dòng)態(tài)效果俊柔。開創(chuàng)了全新的導(dǎo)航規(guī)范物赶。

2. 同樣的奖地，印象筆記也借鑒了這樣的模式，用戶只需輕點(diǎn)右下角的浮動(dòng)按鈕蜜氨，就可以快速地記錄當(dāng)下的靈感。

3. Tumblr搭配了形象的圖標(biāo)和貼切的標(biāo)簽煞赢。 當(dāng)你向下滾動(dòng)瀏覽內(nèi)容時(shí)，這些圖標(biāo)也會(huì)自然地消失。

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

小結(jié)

越來越多的設(shè)計(jì)師意識(shí)到導(dǎo)航欄菜單對(duì)提高用戶體驗(yàn)的重要性。 在Android中誊册，我們看到從漢堡導(dǎo)航迭代為獨(dú)立的標(biāo)簽欄澎办。 在iOS上，越來越多的應(yīng)用程序正在移除小標(biāo)簽欄，替換成更大更清晰的圖標(biāo)。為了追求更好的用戶體驗(yàn)，簡化APP設(shè)計(jì)接谨，設(shè)計(jì)師們還會(huì)在導(dǎo)航設(shè)計(jì)優(yōu)化的路上不斷探索新的設(shè)計(jì)方向。