移動(dòng)導(dǎo)航導(dǎo)航是APP中最重要的組件，它相當(dāng)于產(chǎn)品的骨骼，連接著各個(gè)功能。一個(gè)好的導(dǎo)航設(shè)計(jì)能幫助用戶(hù)快速了解該產(chǎn)品的功能和信息架構(gòu)。一個(gè)app中也會(huì)存在多種不同層級(jí)的導(dǎo)航模式。重慶網(wǎng)站建設(shè)公司整理了目前市面上使用較多的導(dǎo)航以及它們各自的優(yōu)缺點(diǎn)和分別適用的場(chǎng)景。

標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航是IOS系統(tǒng)中最常見(jiàn)的導(dǎo)航，它繼承了桌面導(dǎo)航的樣式，對(duì)圖標(biāo)進(jìn)行了扁平化處理。在IOS系統(tǒng)原生頁(yè)面中可以看到許多頁(yè)面都使用了標(biāo)簽導(dǎo)航的設(shè)計(jì)，包括我們常用的微信、支付寶、微博等軟件，都使用標(biāo)簽導(dǎo)航做為它們的一級(jí)導(dǎo)航。可以說(shuō)標(biāo)簽導(dǎo)航是最符合IOS用戶(hù)習(xí)慣的一種導(dǎo)航

標(biāo)簽導(dǎo)航處于拇指活動(dòng)的最佳區(qū)域，是單手操作時(shí)最容易點(diǎn)擊的部分。

微信四個(gè)主要功能入口使用了標(biāo)簽導(dǎo)航設(shè)計(jì)，大面積按鈕區(qū)域，能快速在各功能之間切換。

App Store使用標(biāo)簽導(dǎo)航，通過(guò)對(duì)選中區(qū)域顏色的更換，能清晰分辨當(dāng)前位置。

IOS10音樂(lè)頁(yè)面

Artsy使用純文字導(dǎo)航設(shè)計(jì)

Facebook使用純ICON導(dǎo)航設(shè)計(jì)

標(biāo)簽導(dǎo)航多數(shù)采用圖文結(jié)合的模式，但也有部分應(yīng)用使用純文字或者純ICON作為識(shí)別入口。例如ins、Artsy、Facebook。使用純ICON為標(biāo)簽入口時(shí)需注意，要使用一眼就能明白含義的圖形，不然會(huì)讓用戶(hù)產(chǎn)生誤解。

總結(jié)：

標(biāo)簽導(dǎo)航適用于主導(dǎo)航各功能重要程度一致，并且主功能數(shù)量在3-5個(gè)之間，相互之間切換頻繁的場(chǎng)景。

TAB導(dǎo)航

TAB導(dǎo)航是IOS和安卓端都十分常見(jiàn)的導(dǎo)航，它和標(biāo)簽導(dǎo)航本質(zhì)上其實(shí)相似，但是展現(xiàn)形式有很大區(qū)別。tab導(dǎo)航一般處于頁(yè)面的頂部，在使用數(shù)量和形式上更加靈活。

網(wǎng)易嚴(yán)選使用滾動(dòng)式TAB導(dǎo)航來(lái)展示分類(lèi)，并在頁(yè)面邊緣給出提示。

ZEEEN使用滾動(dòng)式TAB導(dǎo)航作為一級(jí)導(dǎo)航

大眾點(diǎn)評(píng)在餐飲分類(lèi)頁(yè)面使用TAB導(dǎo)航選擇對(duì)應(yīng)的菜品

新氧APP將TAB導(dǎo)航放置頁(yè)面最頂端用來(lái)切換同級(jí)目錄

淘寶微淘頁(yè)面使用圖文結(jié)合的TAB標(biāo)簽設(shè)計(jì)切換子頁(yè)面

微博發(fā)現(xiàn)頁(yè)面將TAB導(dǎo)航放置在頁(yè)面中部切換相應(yīng)內(nèi)頁(yè)

總結(jié)

通過(guò)案例可以發(fā)現(xiàn)TAB導(dǎo)航在使用上十分靈活多變，外觀簡(jiǎn)潔，能完美運(yùn)用到各場(chǎng)景，是目前十分流行的導(dǎo)航模式。

舵式導(dǎo)航

舵式導(dǎo)航是標(biāo)簽導(dǎo)航的變體，也是比較常見(jiàn)的導(dǎo)航之一。因?yàn)橥庥^看起來(lái)像船舵，所以取名舵式導(dǎo)航。和標(biāo)簽導(dǎo)航不同的是它將核心功能放在導(dǎo)航正中央，并用對(duì)比強(qiáng)烈的色彩來(lái)和其他導(dǎo)航進(jìn)行區(qū)分，常用于發(fā)布按鈕。

趕集網(wǎng)使用舵式按鈕發(fā)布信息

IN主頁(yè)使用舵式導(dǎo)航按鈕發(fā)布照片

PATH使用舵式導(dǎo)航發(fā)布個(gè)人狀態(tài)，點(diǎn)擊按鈕子目錄從中擴(kuò)散。

悅跑圈的核心功能是記錄跑步數(shù)據(jù)，采用舵式導(dǎo)航重點(diǎn)突出跑步按鈕。并將常見(jiàn)的圓形改成了方形，占據(jù)面積更大，視覺(jué)上更突出。

名片全能王APP主要功能為掃描存儲(chǔ)名片，使用舵式導(dǎo)航并配上相機(jī)的icon重點(diǎn)突出該功能。

喜馬拉雅直接將舵式按鈕用作播放功能，用戶(hù)打開(kāi)應(yīng)用就能迅速播放相關(guān)音頻。

總結(jié)：

舵式導(dǎo)航彌補(bǔ)了標(biāo)簽導(dǎo)航功能數(shù)量的限制，重點(diǎn)突出了核心功能，適用于發(fā)布功能下有多種同級(jí)分類(lèi)選項(xiàng)的應(yīng)用，常用+號(hào)表示，以及在功能型產(chǎn)品中核心功能的開(kāi)關(guān)按鈕。但是相比標(biāo)簽導(dǎo)航不足的是，舵式導(dǎo)航將核心功能全部隱藏在+號(hào)中，需要用戶(hù)二次點(diǎn)擊才能到達(dá)目標(biāo)，增加了點(diǎn)擊次數(shù)，藏在+號(hào)中的功能使用頻率會(huì)比一級(jí)導(dǎo)航大大降低。

抽屜式導(dǎo)航

抽屜式導(dǎo)航外觀小巧，占用空間少，容量大。外觀設(shè)計(jì)的像抽屜，可以自由伸縮，也是我們常說(shuō)的漢堡菜單。它的核心目的是隱藏不常用的功能，減少主界面導(dǎo)航控件數(shù)量，讓界面更加干凈利落。這種設(shè)計(jì)模式曾經(jīng)非常流行。但是正因?yàn)樗男∏?，又處在?yè)面左上方，是單手操作時(shí)非常不容易點(diǎn)擊到的區(qū)域，這也導(dǎo)致藏在抽屜里的功能很少用戶(hù)會(huì)使用。所以目前抽屜導(dǎo)航在市面上的使用量已經(jīng)越來(lái)越少。但目前仍有一些主流軟件在使用抽屜導(dǎo)航的設(shè)計(jì)，一般用來(lái)放置輔助功能。

QQ的核心功能是聊天，附加功能則藏在了抽屜中。給主功能頁(yè)面留有更大的空間。

滴滴打車(chē)的核心功能是打車(chē)，主頁(yè)重點(diǎn)突出打車(chē)功能，次要功能則全部隱藏在抽屜導(dǎo)航中。

總結(jié)：

抽屜式導(dǎo)航適合作為產(chǎn)品的輔助導(dǎo)航，一般用來(lái)放置需要但是不常用到的功能，例如設(shè)置、當(dāng)前用戶(hù)等信息。

宮格式導(dǎo)航

宮格式導(dǎo)航也是較為常見(jiàn)的一種，它的特點(diǎn)是占據(jù)空間大，入口扁平化，以平鋪的形式展示所有功能，這一點(diǎn)和桌面類(lèi)似，在使用上讓功能一目了然，在設(shè)計(jì)上更加富有情感化。

支付寶功能頁(yè)面使用的宮格式布局。通過(guò)對(duì)功能的分類(lèi)和圖形的設(shè)計(jì)，將大量的功能入口有序的排列，頁(yè)面信息一目了然

新氧APP中，大量使用了宮格導(dǎo)航設(shè)計(jì)。配合情感化的插圖，頁(yè)面更加生動(dòng)有趣

使用宮格式導(dǎo)航進(jìn)行內(nèi)容分類(lèi)，照片加文字的設(shè)計(jì)更加情感化

天天P圖使用宮格導(dǎo)航放置功能入口

總結(jié)：

宮格導(dǎo)航常用在二級(jí)菜單，在使用上充分利用了頁(yè)面空間，使頁(yè)面更飽滿(mǎn),視覺(jué)更清晰。但缺點(diǎn)是不方便同級(jí)功能之間互相切換，必須退出到導(dǎo)航頁(yè)面重新選擇。常用作同級(jí)別下使用頻率相近又彼此獨(dú)立且功能之間切換頻率不高的場(chǎng)景。

總結(jié)

看完這五種導(dǎo)航模式我們不難發(fā)現(xiàn)，在不同層級(jí)和功能下導(dǎo)航的使用方式和場(chǎng)景上都各有不同，也有多種導(dǎo)航互相結(jié)合的設(shè)計(jì)。每一種導(dǎo)航都有各自的使用場(chǎng)景。當(dāng)我們需要在_級(jí)導(dǎo)航之間頻繁切換時(shí)則可使用標(biāo)簽導(dǎo)航，當(dāng)產(chǎn)品分類(lèi)細(xì)致且互相切換頻繁時(shí)則可以使用tab導(dǎo)航，當(dāng)需要重點(diǎn)突出核心功能時(shí)則可以使用舵式導(dǎo)航，抽屜式導(dǎo)航則用來(lái)隱藏需要但不常用到的功能，宮格式導(dǎo)航則適用于同級(jí)別下使用頻率相近又彼此獨(dú)立且功能之間切換頻率不高的場(chǎng)景。

沒(méi)有最完美的導(dǎo)航，只有最適合的導(dǎo)航。在選擇導(dǎo)航時(shí)應(yīng)根據(jù)產(chǎn)品需求和功能來(lái)選擇最佳方案。在平時(shí)我們可以通過(guò)觀察發(fā)現(xiàn)我們常用的APP中各種層級(jí)的導(dǎo)航變化，思考它們的設(shè)計(jì)方式。通過(guò)長(zhǎng)時(shí)間的積累，我相信大家對(duì)各種導(dǎo)航都能夠運(yùn)用自如。