導(dǎo)航主要分為兩大類遍愿,橫向和縱向。橫向的導(dǎo)航有:標(biāo)簽導(dǎo)航耘斩、舵式導(dǎo)航沼填、tab導(dǎo)航、輪播導(dǎo)航括授;縱向的導(dǎo)航有:宮格導(dǎo)航坞笙、下拉導(dǎo)航、列表導(dǎo)航荚虚、隱喻導(dǎo)航薛夜、抽屜導(dǎo)航。這些是導(dǎo)航的基本樣式曲管,如今大部分的導(dǎo)航設(shè)計(jì)都可以從中變種却邓、組合而成。
1院水、標(biāo)簽導(dǎo)航(選項(xiàng)卡導(dǎo)航)
將入口放在頁(yè)面底部,形成標(biāo)簽導(dǎo)航简十,這是現(xiàn)在市面上比較流行的一種導(dǎo)航模式檬某,幾乎所有APP都有應(yīng)用到。優(yōu)點(diǎn)顯而易見(jiàn)螟蝙,讓用戶一進(jìn)入APP就能對(duì)APP的結(jié)構(gòu)有一個(gè)初步的認(rèn)識(shí)恢恼,簡(jiǎn)單易懂。通常這種導(dǎo)航方式底部的標(biāo)簽選項(xiàng)不會(huì)超過(guò)5個(gè)胰默,如果超過(guò)五個(gè)就會(huì)考慮適用舵式導(dǎo)航场斑。
2、舵式導(dǎo)航
與標(biāo)簽導(dǎo)航類似牵署,但是其中一個(gè)導(dǎo)航標(biāo)簽蘊(yùn)含更多的操作選項(xiàng)漏隐,也可以理解為標(biāo)簽中蘊(yùn)含更多二級(jí)導(dǎo)航標(biāo)簽,可以讓導(dǎo)航欄簡(jiǎn)潔高效奴迅,避免擁擠青责,又可以突出常用功能。
其中取具,舵式導(dǎo)航中蘊(yùn)含二級(jí)導(dǎo)航標(biāo)簽的標(biāo)簽可以單獨(dú)成為一種導(dǎo)航——點(diǎn)聚導(dǎo)航脖隶,適用于因?yàn)閮?nèi)容的展示,要求界面有極高的簡(jiǎn)潔性的APP暇检。印象筆記的APP版本就是一個(gè)典型的點(diǎn)聚導(dǎo)航产阱,印象筆記是個(gè)特別的例子,不僅用點(diǎn)聚導(dǎo)航作為一級(jí)導(dǎo)航块仆,還用了抽屜導(dǎo)航作為二級(jí)導(dǎo)航构蹬,應(yīng)該是為了最大程度保持產(chǎn)品的簡(jiǎn)潔性酿矢。
3、tab標(biāo)簽導(dǎo)航
將標(biāo)簽放到界面的上方怎燥,就會(huì)形成tab標(biāo)簽導(dǎo)航瘫筐,這種導(dǎo)航適用于類目較多的APP作為二級(jí)導(dǎo)航梳理頁(yè)面邏輯,布局清晰铐姚。作為一個(gè)二級(jí)導(dǎo)航策肝,頂部標(biāo)簽導(dǎo)航應(yīng)用于多種情境下,可以固定數(shù)量隐绵,展示有限的幾個(gè)標(biāo)簽之众。也可以擴(kuò)大一定的數(shù)量,變成向左滑動(dòng)展現(xiàn)更多標(biāo)簽依许,十分靈活棺禾,但是因?yàn)樵谑謾C(jī)中左右滑動(dòng)不如上下滑動(dòng)方便,因此峭跳,個(gè)人認(rèn)為還是不要展開(kāi)太多標(biāo)簽膘婶。
抽屜導(dǎo)航
抽屜導(dǎo)航是將菜單隱藏在當(dāng)前頁(yè)面后,點(diǎn)擊導(dǎo)航入口即可像拉抽屜一樣拉出菜單蛀醉。抽屜導(dǎo)航一般用來(lái)放置對(duì)用戶而言不太常用或者對(duì)于產(chǎn)品而言不太核心的功能悬襟,優(yōu)點(diǎn)是可以節(jié)省頁(yè)面空間,比較適合于不那么需要頻繁切換內(nèi)容的應(yīng)用拯刁,例如對(duì)設(shè)置脊岳、關(guān)于、個(gè)人信息等內(nèi)容的隱藏垛玻。
下拉導(dǎo)航
一般位于產(chǎn)品頂部割捅,通過(guò)點(diǎn)擊呼出導(dǎo)航菜單。導(dǎo)航菜單以浮窗形式位于界面上層帚桩,可通過(guò)點(diǎn)擊導(dǎo)航菜單以外的區(qū)域使其收起亿驾。下拉導(dǎo)航的菜單與界面的連貫性比抽屜式要好,容易讓用戶感知當(dāng)前位置朗儒。但由于是位于屏幕上方颊乘,相對(duì)隱蔽而且不能結(jié)合手勢(shì)操作,所以該菜單形式也不適合于頻繁的切換功能使用醉锄》η模考慮到導(dǎo)航菜單的可用面積較小,所以一般采用列表的形式展示菜單內(nèi)容恳不。下拉導(dǎo)航還有一種變式檩小,就是下來(lái)菜單中展示兩級(jí)甚至多級(jí),一般在電商產(chǎn)品中比較常見(jiàn)烟勋,因?yàn)槠奉惡秃Y選條件眾多规求。
宮格導(dǎo)航
主要入口全部聚合在頁(yè)面筐付,讓用戶做出選擇。這樣的組織方式雖然無(wú)法讓用戶第一時(shí)間看到內(nèi)容或執(zhí)行操作阻肿,用戶的選擇壓力也比較大瓦戚。但卻能夠讓用戶整體上了解APP提供的服務(wù),從而選擇自己所需要的那個(gè)服務(wù)丛塌。這種導(dǎo)航于一些提供的服務(wù)較多或者類目較多的APP较解,例如支付寶、優(yōu)酷等赴邻。
由于受到卡片式設(shè)計(jì)的影響印衔,宮格導(dǎo)航也出現(xiàn)了不少的變式,主要有以下幾種:
將宮格的卡片變大姥敛,宮格與宮格時(shí)間不留空白奸焙。
增加縱向滾動(dòng)功能,就可以增加卡片數(shù)量的展現(xiàn)彤敛,可以說(shuō)是無(wú)限的与帆。如下圖:
對(duì)宮格進(jìn)行分類
每個(gè)分類也可以繼續(xù)展開(kāi),滑動(dòng)出更多臊泌,甚至跟訂閱相結(jié)合
列表導(dǎo)航
通過(guò)列表指示類目鲤桥,在右側(cè)顯示箭頭表示有二級(jí)內(nèi)容,列表導(dǎo)航通常用于二級(jí)頁(yè)渠概,由于它與宮格導(dǎo)航一樣,不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容嫂拴,所以通常app不會(huì)在首頁(yè)使用它播揪。這種導(dǎo)航結(jié)構(gòu)清晰,易于理解筒狠,冷靜高效猪狈,能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面。
同樣可以對(duì)列表進(jìn)行分類產(chǎn)生變式辩恼,這樣邏輯會(huì)更清晰雇庙,不知道如何確定分類名稱。把分類名稱去掉也是可以的灶伊。只是用間距將每一組列表隔開(kāi)也能起到梳理邏輯的作用疆前。
輪播導(dǎo)航
每一個(gè)頁(yè)面就代表一個(gè)導(dǎo)航入口,這就是輪播導(dǎo)航聘萨,適用于比較簡(jiǎn)單或者結(jié)構(gòu)比較扁平的APP竹椒。輪播導(dǎo)航能夠最大程度的保證應(yīng)用的頁(yè)面簡(jiǎn)潔性,操作也是最方便的米辐,只需要手指左右滑動(dòng)胸完。缺點(diǎn)也很明顯:承載入口的數(shù)量有限书释,超過(guò)10個(gè)可能就多了。這種導(dǎo)航常見(jiàn)于查看圖片赊窥,也經(jīng)常與其他導(dǎo)航模式結(jié)合爆惧,作為banner廣告呈現(xiàn)。
隱喻導(dǎo)航
如果原始導(dǎo)航中的五個(gè)入口锨能,變成游戲界面中的五個(gè)關(guān)卡扯再,只是簡(jiǎn)單地將其按照上下順序列出來(lái)就會(huì)不太適用。游戲?qū)?dǎo)航的要求不僅要可用腹侣,更要和整個(gè)游戲的風(fēng)格等匹配叔收。因此,有了隱喻導(dǎo)航這種模式傲隶,用頁(yè)面模仿應(yīng)用的隱喻對(duì)象饺律。這種導(dǎo)航主要用于游戲,但在幫助導(dǎo)航 人們組織事物(如日記跺株、書籍等)复濒,并對(duì)其進(jìn)行分類的應(yīng)用中也能看到。