? ? ? ‘”我哪里可以去，我可以去哪里“”這個(gè)是使用導(dǎo)航的主要目的。我們要做到知道每種導(dǎo)航的工作方式、優(yōu)缺點(diǎn)和使用場(chǎng)景，才能在“方寸之間”找到最適合的導(dǎo)航方式，讓目錄結(jié)構(gòu)和信息排版更加清晰。讓我們先直觀的了解七種最常見(jiàn)的導(dǎo)航方式。

? ? ? ?不同的導(dǎo)航之間，其實(shí)差別都不是特別大，翻來(lái)覆去就是可見(jiàn)性、操作性以及是否會(huì)擠占內(nèi)容展示空間這幾點(diǎn)。

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

? ? ? ?輕松在各入口間頻繁跳轉(zhuǎn)且不會(huì)迷失方向，直接展現(xiàn)最重要入口的內(nèi)容信息。一般都為5個(gè)，通常第一個(gè)為“主頁(yè)”，最后一個(gè)為“我的”，用于進(jìn)行用戶(hù)相關(guān)的個(gè)性化的設(shè)置。例如淘寶、頭條和智遠(yuǎn)一戶(hù)通都是采用這種方式。

優(yōu)勢(shì)：

1、讓用戶(hù)快速了解app的核心功能，且切換頁(yè)面方便，簡(jiǎn)單高效，用戶(hù)不易“迷路”

2、所有入口都可以看見(jiàn)，容易尋找

劣勢(shì)：

1、占據(jù)一定屏幕高度，瀏覽時(shí)會(huì)阻擋內(nèi)容

2、可展示功能數(shù)量少，最多只有5個(gè)

相關(guān)APP：

舵式導(dǎo)航

? ? ? 在標(biāo)簽導(dǎo)航的基礎(chǔ)上中間加了一個(gè)導(dǎo)航操作項(xiàng)，這種舵盤(pán)很容易區(qū)分開(kāi)旁邊的導(dǎo)航模式，能夠讓用戶(hù)知道中間這個(gè)標(biāo)志是它主要的導(dǎo)航操作項(xiàng)。?

? ? ?點(diǎn)聚式它將多個(gè)核心功能聚匯到主界面中顯示，方便用戶(hù)呼出使用。會(huì)搭載其他導(dǎo)航樣式出現(xiàn)（如標(biāo)簽式）成為舵式導(dǎo)航，例如，墨跡天氣，點(diǎn)擊中間的舵式導(dǎo)航，會(huì)上劃出標(biāo)簽導(dǎo)航，包括三種生產(chǎn)內(nèi)容的主要功能：發(fā)布實(shí)景、反饋天氣和身邊此刻。

優(yōu)點(diǎn)：

把類(lèi)似生產(chǎn)內(nèi)容的主功能按鈕放在中間，標(biāo)簽更加突出醒目；

缺點(diǎn)：

占據(jù)高度空間略大，一般都是文字 或 圖標(biāo)的形式。

相關(guān)APP：

列表導(dǎo)航

? ? ? ?iOS和安卓的列表最小高度是不同的，安卓48dp，iOS的是44pt。

? ? ? ?列表導(dǎo)航是在我們這種二三級(jí)頁(yè)面最常見(jiàn)的一種導(dǎo)航模式，或者說(shuō)二三級(jí)功能里面最常見(jiàn)的。 層次展示清晰，可展示內(nèi)容較長(zhǎng)的標(biāo)題。

優(yōu)點(diǎn)：

由上至下的查看方式，符合傳統(tǒng)的閱讀習(xí)慣；

結(jié)構(gòu)清晰，能夠幫助用戶(hù)快速的定位去到對(duì)應(yīng)的頁(yè)面。

缺點(diǎn)：

條目太多或分布不合理會(huì)導(dǎo)致用戶(hù)查找困難；

不適合需要頻繁切換任務(wù)的情況。

相關(guān)APP：

這個(gè)頁(yè)面實(shí)際是一個(gè)組合導(dǎo)航的形式，上面有TAB導(dǎo)航、中間有宮格導(dǎo)航、下面有列表導(dǎo)航

宮格導(dǎo)航

? ? ? ?宮格導(dǎo)航是將主要入口全部聚合在頁(yè)面，突出重點(diǎn)，讓用戶(hù)進(jìn)入界面之后第一眼就能看到 直觀展現(xiàn)各項(xiàng)內(nèi)容。適合用于獨(dú)立、無(wú)功能交叉、不頻繁切換的部分，多用于二級(jí)菜單。上圖APP的宮格導(dǎo)航主要為購(gòu)買(mǎi)“重點(diǎn)”產(chǎn)品的功能。

優(yōu)點(diǎn)：

分類(lèi)清晰、入口獨(dú)立、風(fēng)格簡(jiǎn)約、方便抓住客戶(hù)的眼球

缺點(diǎn)：

不能顯示太多入口次級(jí)內(nèi)容，它只能展示一級(jí)入口，只適合一些功能層級(jí)沒(méi)有太多的APP

TAB導(dǎo)航

? ? ? 作為一個(gè)二級(jí)導(dǎo)航，頂部標(biāo)簽導(dǎo)航應(yīng)用于多種情境下，可以固定數(shù)量，展示有限的幾個(gè)標(biāo)簽。也可以擴(kuò)大一定的數(shù)量，變成向左滑動(dòng)展現(xiàn)更多標(biāo)簽。甚至可以像很多新聞?lì)惸菢?，衍生出訂閱功能。頂部?biāo)簽導(dǎo)航也是一種非常常見(jiàn)的導(dǎo)航模式。拓展性是非常好的，可以隨自己的心意增減標(biāo)簽。而且相比底部Tab來(lái)說(shuō)，頂部Tab采用的是文字的形式，占據(jù)的空間是非常小的。但是要注意標(biāo)簽的個(gè)數(shù)，否則可見(jiàn)性越差，頁(yè)面滲透率也會(huì)越低。

優(yōu)點(diǎn)：

擴(kuò)展性好：標(biāo)簽的個(gè)數(shù)沒(méi)有上限，不過(guò)太多的話(huà)，越是后面的頁(yè)面滲透率會(huì)越低；

占據(jù)空間小：相比于底部Tab，頂部Tab一般占據(jù)的空間更小（因?yàn)椴恍枰紤]手指點(diǎn)擊，所以可以把區(qū)域縮小，只選用圖標(biāo)或者文字即可），可以把更多的空間安排給內(nèi)容展示。

手勢(shì)操作非常方便。

缺點(diǎn)：

可見(jiàn)性略遜：這是空間占據(jù)的區(qū)域變小之后的后果。

相關(guān)APP（左滑動(dòng)展現(xiàn)）：

輪播導(dǎo)航

? ? ? 瀏覽方式非常順暢、有方向感，滑動(dòng)為左右滑動(dòng)，用戶(hù)用起來(lái)不會(huì)困難。不適合展示過(guò)多頁(yè)面，如果功能太多了，層級(jí)太多了，都不適用于輪播導(dǎo)航。只有應(yīng)用信息足夠扁平，可以嘗試輪播導(dǎo)航，這種導(dǎo)航常見(jiàn)于查看圖片，也經(jīng)常與其他導(dǎo)航模式結(jié)合，作為banner廣告呈現(xiàn)。

優(yōu)點(diǎn)：

能夠最大程度的保證應(yīng)用的頁(yè)面簡(jiǎn)潔性，操作也是最方便；

缺點(diǎn)：

承載入口的數(shù)量有限，不能夠快速的定位對(duì)應(yīng)的分頁(yè)內(nèi)容；

相關(guān)APP：

抽屜導(dǎo)航

? ? ? 采用將導(dǎo)航主體隱藏在app側(cè)邊的方式，以一個(gè)按鈕來(lái)呼出導(dǎo)航，在使用完成之后在使用相同的按鈕隱藏起來(lái)；將并不是太常用或者切換不頻繁的功能隱藏在主界面之后

優(yōu)點(diǎn)：

（1）導(dǎo)航界面隱藏在主界面之后，有助于用戶(hù)集中注意力，營(yíng)造沉浸式體驗(yàn)

（2）可容納多個(gè)條目，可擴(kuò)展性強(qiáng)

缺點(diǎn)：

（1）用戶(hù)不容易發(fā)現(xiàn)，使用戶(hù)認(rèn)知成本增加

（2）用戶(hù)容易“迷路”

相關(guān)APP：

圖1可以理解為文件夾，圖2理解為文件夾下的文件清單