交互設(shè)計(jì)丨移動(dòng)端APP導(dǎo)航形式
關(guān)注?Kevin和互聯(lián)網(wǎng)產(chǎn)品經(jīng)理們，一起成長
作者?l?花溪HUAXI
來源?l 花溪HUAXI
分享 l Kevin
本文主要介紹了現(xiàn)在APP常用的五種導(dǎo)航形式。
01. 宮格式（也叫跳板式）導(dǎo)航
早期常見布局是3×3、2×3、2×2、1×2?，F(xiàn)在數(shù)量比較多變。相對(duì)而言，容納的文字標(biāo)題字?jǐn)?shù)有限。
應(yīng)用場(chǎng)景：大量功能入口（支付寶）、大量內(nèi)容入口（小說書架）、分類入口（騰訊視頻）
02. 選項(xiàng)卡式導(dǎo)航（標(biāo)簽式導(dǎo)航）
標(biāo)簽式導(dǎo)航數(shù)量一般在2-5個(gè)。最初是指底部標(biāo)簽。出現(xiàn)形式多為icon+文字。適合頻繁切換的主要功能導(dǎo)航。
應(yīng)用場(chǎng)景：常見APP底部、詳情頁(tab切換，電商的寶貝/詳情/評(píng)價(jià)）
與底部對(duì)應(yīng)的就是頂部標(biāo)簽。但屏幕頂部不便于點(diǎn)擊，大多是配合APP本身的左右滑動(dòng)來進(jìn)行切換。如果是minisite，會(huì)與“左滑退出當(dāng)前頁面”的返回手勢(shì)沖突。頂部標(biāo)簽的優(yōu)勢(shì)是可以延展。設(shè)計(jì)滾動(dòng)標(biāo)簽導(dǎo)航時(shí)，要注意給予用戶提示可滾動(dòng)。
03.?舵（duò）式導(dǎo)航
舵式導(dǎo)航是標(biāo)簽導(dǎo)航的一種演變形式。中間的標(biāo)簽一般是APP的主要功能入口。
應(yīng)用場(chǎng)景：主要是內(nèi)容發(fā)布、開始拍照/直播、上傳作品、發(fā)布文字或照片
04.?列表導(dǎo)航
列表導(dǎo)航形式比較固定，列表式展示內(nèi)容一目了然，可呈現(xiàn)多項(xiàng)導(dǎo)航，而且可呈現(xiàn)更多文字內(nèi)容。常見列表導(dǎo)航形式如下。
應(yīng)用場(chǎng)景：個(gè)人頁面、系統(tǒng)頁、功能類APP首頁
列表式導(dǎo)航除了標(biāo)題，也可以呈現(xiàn)次級(jí)內(nèi)容。
05.?抽屜式導(dǎo)航（側(cè)邊欄導(dǎo)航）/ 漢堡包導(dǎo)航
抽屜式導(dǎo)航可以幫助頁面節(jié)省更多空間。比標(biāo)簽導(dǎo)航可承載更多內(nèi)容。
抽屜式導(dǎo)航的缺點(diǎn)也很明顯：功能被發(fā)現(xiàn)概率低，點(diǎn)擊效率低（抽屜式導(dǎo)航比標(biāo)簽導(dǎo)航需多一步點(diǎn)擊）
應(yīng)用場(chǎng)景：個(gè)人頁 抽屜式有些隱喻的含義，不重要或者不首要的功能才會(huì)被隱藏起來。
抽屜式導(dǎo)航與宮格式導(dǎo)航相結(jié)合。
與抽屜式導(dǎo)航比較類似的導(dǎo)航是漢堡包導(dǎo)航。漢堡包導(dǎo)航點(diǎn)擊后通常是由上至下展開，在功能上通常承載的是單純的列表，形式不如抽屜式導(dǎo)航多樣化。優(yōu)缺點(diǎn)和抽屜導(dǎo)航類似。
漢堡包導(dǎo)航的展開與收起
關(guān)于漢堡包導(dǎo)航的多內(nèi)容替代方案，以及正確的打開方式，可以查看下面這篇文章。是一位產(chǎn)品經(jīng)理寫的，個(gè)人覺得很詳細(xì)。
06. 全局導(dǎo)航
沒查到明確的命名方法，暫時(shí)稱為全局導(dǎo)航。這種導(dǎo)航可以把大量內(nèi)容進(jìn)行分類，并且讓用戶迅速了解平臺(tái)商品的架構(gòu)，多用于教育、電商等種類豐富的平臺(tái)。
現(xiàn)有倆種使用方式：固定的一級(jí)導(dǎo)航+對(duì)應(yīng)的二級(jí)導(dǎo)航；固定的一級(jí)導(dǎo)航+二級(jí)導(dǎo)航+商品列表。前者的更注重分類，幫助用戶快速找到內(nèi)容；在二級(jí)導(dǎo)航內(nèi)可以承載文字、圖片、文字＋圖片等不同的形式。后者則是通過固定的一級(jí)導(dǎo)航幫助用戶在不同分類之間快速切換。
07. 分段式控件導(dǎo)航
分段式控件小巧靈活，可以很好地融合進(jìn)導(dǎo)航欄中而不占用過多空間。是IOS系統(tǒng)的常用控件，由于數(shù)量比較少，不適合做一級(jí)導(dǎo)航，常用于二級(jí)導(dǎo)航。
參考文獻(xiàn)：
術(shù)與道：移動(dòng)應(yīng)用UI設(shè)計(jì)必修課 余振華著
移動(dòng)應(yīng)用UI設(shè)計(jì)模式 Theresa Neil著
深入淺出！全方位科普移動(dòng)端導(dǎo)航的七種設(shè)計(jì)模式
APP導(dǎo)航設(shè)計(jì)的對(duì)比總結(jié) - 新聞/公告 - 騎士人才系統(tǒng)官網(wǎng)
今天的分享就到這兒啦~
END
?
?