當(dāng)我們確定了移動(dòng)APP的設(shè)計(jì)需求和APP產(chǎn)品設(shè)計(jì)流程之后，開始著手設(shè)計(jì)APP界面UI或是APP原型圖啦。這個(gè)時(shí)候我們都要面臨的第一個(gè)問題就是如何將信息以最優(yōu)的方式組合起來霸琴？
都說好的導(dǎo)航是產(chǎn)品成功的一半，良好的APP導(dǎo)航設(shè)計(jì)模式?jīng)Q策對(duì)整個(gè)app的核心體驗(yàn)起到關(guān)鍵作用晰骑。
本文總結(jié)了目前通用且流行的模式权埠，并分析了這些模式適用的場(chǎng)景和優(yōu)劣勢(shì)榨了，希望幫助產(chǎn)品同學(xué)更快的作出較合理的信息組織決策。
下面來詳細(xì)解析下9種移動(dòng)APP導(dǎo)航設(shè)計(jì)模式：
一攘蔽、Tab導(dǎo)航
又稱為“標(biāo)簽式導(dǎo)航”龙屉，分上、下兩種满俗。
標(biāo)簽式導(dǎo)航是IOS主推的導(dǎo)航模式转捕，位于屏幕的底部，在安卓上常見于頂部唆垃。這種布局方式能讓用戶直觀地了解到app的核心功能五芝。同時(shí)，使用上能在幾個(gè)標(biāo)簽間快速的跳轉(zhuǎn)辕万。標(biāo)簽分類可以根據(jù)邏輯和重要性控制在5個(gè)以內(nèi)枢步，通過視覺表現(xiàn)用戶的當(dāng)前位置，頁(yè)面之間的切換快速又不容易迷失渐尿，簡(jiǎn)單高效醉途。
標(biāo)簽式導(dǎo)航，也經(jīng)常融合一些個(gè)性化設(shè)計(jì)砖茸。例如隘擎，在標(biāo)簽欄的中間位置融合Logo或產(chǎn)品最核心的功能，豐富了標(biāo)簽欄的樣式凉夯。
舉例：
1.適用場(chǎng)景
①上面的tab導(dǎo)航货葬，一般適用于對(duì)當(dāng)前頁(yè)面的分類查看，或者改變當(dāng)前視圖劲够≌鹜埃可以滑動(dòng)，所以數(shù)量可多可少征绎；
②下面的tab導(dǎo)航蹲姐，一般是用來展示App的核心功能，可以迅速切換炒瘸，適合用于需要頻繁切換的功能淤堵。受限于屏幕寬度寝衫，數(shù)量一般控制在5個(gè)以內(nèi)顷扩，4個(gè)為最佳，（以4個(gè)舉例）其中第2慰毅、3個(gè)最好操作隘截。當(dāng)有更多操作的時(shí)候，可以將最后一項(xiàng)設(shè)置為“更多”，來將一些次要功能進(jìn)行隱藏婶芭。
2.優(yōu)勢(shì)
①讓用戶快速了解app的核心功能东臀，且切換頁(yè)面方便，簡(jiǎn)單高效犀农，用戶不易“迷路”
②所有入口都可以看見惰赋，容易尋找
3.劣勢(shì)
①占據(jù)一定屏幕高度，如果是下方tab,瀏覽時(shí)會(huì)阻擋內(nèi)容
②可展示功能數(shù)量少呵哨，最多只有5個(gè)
4.注意項(xiàng)
這種模式不適合太過復(fù)雜和不穩(wěn)定的結(jié)構(gòu)赁濒。
二、抽屜式導(dǎo)航
抽屜式導(dǎo)航追求核心內(nèi)容的突出孟害，弱化導(dǎo)航界面拒炎，常見于一些信息流產(chǎn)品（知乎、path挨务、facebook等）击你。抽屜式導(dǎo)航在形式上一般位于當(dāng)前界面的后方，通過左上角的按鈕或手勢(shì)滑動(dòng)呼出谎柄。由于隱藏在屏幕在外丁侄，所以導(dǎo)航界面的空間較大，為可擴(kuò)展性和個(gè)性化帶來了更多可能谷誓。由于導(dǎo)航默認(rèn)是隱藏的绒障，在選擇后需要有明確的提示來告知用戶的當(dāng)前位置。
舉例：
1.適用場(chǎng)景
將并不是太常用或者切換不頻繁的功能隱藏在主界面之后捍歪，對(duì)于那些需要經(jīng)常在不同導(dǎo)航間切換或者核心功能有一堆入口的app不適用户辱。
在整體上:適用于功能較多，需求層級(jí)較多的軟件糙臼。
在功能上:同類弱需求的組合排列庐镐。
2.優(yōu)勢(shì)
①導(dǎo)航界面隱藏在主界面之后，有助于用戶集中注意力变逃，營(yíng)造沉浸式體驗(yàn)
②可容納多個(gè)條目必逆，可擴(kuò)展性強(qiáng)
3.劣勢(shì)
①用戶不容易發(fā)現(xiàn)，使用戶認(rèn)知成本增加
②用戶容易“迷路”
4.注意項(xiàng)
隱藏的導(dǎo)航內(nèi)容揽乱，需要更好的方式調(diào)出（如手勢(shì)）名眉。
三、宮格導(dǎo)航
這種宮格導(dǎo)航是將主要入口全部聚合在主頁(yè)面中凰棉，每個(gè)宮格相互獨(dú)立损拢，它們的信息間也沒有任何交集，無(wú)法跳轉(zhuǎn)互通撒犀。因?yàn)檫@種特質(zhì)福压，宮格式導(dǎo)航被廣泛應(yīng)用于各平臺(tái)系統(tǒng)的中心頁(yè)面掏秩。這樣的組織方式無(wú)法讓用戶在第一時(shí)間看到內(nèi)容，選擇壓力較大荆姆，除了常見app如支付寶和美圖秀秀蒙幻，其他的app采用這種導(dǎo)航的應(yīng)用已經(jīng)越來越少，往往用在二級(jí)頁(yè)作為內(nèi)容列表的一種圖形化形式呈現(xiàn)胆筒，或是作為一系列工具入口的聚合邮破。
舉例：
1.優(yōu)點(diǎn)
功能入口直觀，且功能模塊多仆救。
2.劣勢(shì)
①功能多决乎、雜，無(wú)重點(diǎn)突出派桩。
②各個(gè)入口之間的跳轉(zhuǎn)不夠靈活构诚。如果某個(gè)功能的層級(jí)路徑較深時(shí)，用戶不能快速跳轉(zhuǎn)到自己忽然想要完成的任務(wù)頁(yè)面铆惑。
3.適用范圍
①在整體上：適用于功能模塊多的平臺(tái)性軟件范嘱。
②在功能上：較多重要功能，以展示列的形式顯示功能员魏。
四丑蛤、列表式導(dǎo)航
典型網(wǎng)易、知乎撕阎，較常用導(dǎo)航模式受裹。列表式導(dǎo)航作為信息組織框架，是我們?cè)诋a(chǎn)品設(shè)計(jì)中必不可少的一個(gè)信息承載模式虏束。列表導(dǎo)航與宮格導(dǎo)航類似棉饶，常用于二級(jí)頁(yè)面，不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容镇匀，所以通常app不會(huì)在首頁(yè)使用它照藻。這種導(dǎo)航結(jié)構(gòu)清晰，易于用戶理解汗侵，能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面幸缕。
1.優(yōu)點(diǎn)
①層次清晰，展示內(nèi)容多晰韵，展示內(nèi)容性軟件发乔。
②一次性可加載展現(xiàn)的內(nèi)容條數(shù)較多。
2.劣勢(shì)
①需注重編排
②內(nèi)容過多時(shí)雪猪，無(wú)法突出重點(diǎn)
③靈活性不高
3.適用范圍
①在整體上：適用于資訊類軟件栏尚。
②在功能上：常用于2級(jí)頁(yè)面，對(duì)各種內(nèi)容的展示浪蹂，需保證清晰抵栈、明了。
五坤次、舵式導(dǎo)航
也稱“點(diǎn)聚式”導(dǎo)航古劲，點(diǎn)聚式導(dǎo)航最早來自于應(yīng)用path，它將用戶最頻繁使用的多個(gè)核心功能點(diǎn)匯聚在主界面中顯示缰猴，方便用戶隨時(shí)呼出使用产艾，它不同于傳統(tǒng)標(biāo)簽欄那樣占據(jù)界面最下方一欄，而是通過一個(gè)點(diǎn)的方式匯聚這些功能的入口滑绒。標(biāo)簽更加突出醒目闷堡，同時(shí)該主功能標(biāo)簽做了功能擴(kuò)展，也因此給設(shè)計(jì)增加了一些個(gè)性化的亮點(diǎn)疑故。由于點(diǎn)聚式導(dǎo)航所占用的空間較小杠览，所以它常出現(xiàn)在一些主要流程界面中，作為全局導(dǎo)航使用纵势。
舉例：
1.適用場(chǎng)景
適用于非常重要且用戶操作頻繁適用的功能點(diǎn)踱阿，將這些功能點(diǎn)匯聚，放在底部tab的中間或者右邊（根據(jù)app的具體功能確定）
2.優(yōu)勢(shì)
突出的表現(xiàn)入口钦铁，能夠吸引用戶注意力软舌，使得頻繁使用的入口容易被用戶接觸到
3.劣勢(shì)
入口數(shù)量有限、可擴(kuò)展性差
六牛曹、輪播導(dǎo)航
典型Iphone天氣佛点、花田，較常用導(dǎo)航模式黎比。
1.適用場(chǎng)景
常用于查看圖片類,適用于功能單一超营、統(tǒng)一的工具型軟件，適用于隨意看看阅虫。
2.優(yōu)勢(shì)
（1）操作方便糟描，只需手指左右滑動(dòng)即可
（2）內(nèi)容突出展示，增加了曝光率
3.劣勢(shì)
只能查看相鄰卡片展示的內(nèi)容书妻，并不能跳躍性地進(jìn)行選擇,不能展示多頁(yè)船响，只能順序查看。
七躲履、組合導(dǎo)航
當(dāng)用戶需要聚焦內(nèi)容见间，同時(shí)又需要一些快捷入口能夠連接到某些頁(yè)面時(shí)，就可以采用組合導(dǎo)航工猜。
1.適用場(chǎng)景
當(dāng)前很多app都使用了組合式導(dǎo)航米诉。當(dāng)一種導(dǎo)航方式已經(jīng)不能滿足app的復(fù)雜功能時(shí)，組合導(dǎo)航就能很好的安排信息的排列方式篷帅，以最優(yōu)的方式來引導(dǎo)用戶使用app
2.優(yōu)勢(shì)
可以根據(jù)app的功能需要史侣，進(jìn)行多種導(dǎo)航方式的組合拴泌，來達(dá)到最優(yōu)的信息展現(xiàn)
3.劣勢(shì)
app變得厚重，入口數(shù)量較多時(shí)惊橱，用戶容易眼花繚亂蚪腐，給用戶造成心理壓力。
八税朴、瀑布式
典型花瓣回季、壁紙10000+，較少用導(dǎo)航模式正林。
1.優(yōu)點(diǎn)
瀏覽式查看泡一、目的性不強(qiáng)。
2.局限性
布局需設(shè)計(jì)觅廓，會(huì)造成視覺疲勞鼻忠。
3.適用場(chǎng)景
圖片、壁紙軟件杈绸，偏向信息展示
①在整體上：適用于信息展示粥烁，偏向于圖片而非文字類，瀏覽性質(zhì)強(qiáng)蝇棉。
②在功能上：同類內(nèi)容的展示讨阻，用于隨意看看，與輪播式導(dǎo)航類似篡殷，但是展示內(nèi)容更多钝吮。
九、陳列式
典型貓眼板辽、大眾點(diǎn)評(píng)奇瘦，較常用導(dǎo)航模式。
1.優(yōu)點(diǎn)
直觀劲弦、方便耳标，內(nèi)容陳列。
2.適用范圍
①在整體上：適用電影邑跪、書籍等陳列展示次坡。
②在功能上：相同內(nèi)容的展示，現(xiàn)基本都是用于展示電影內(nèi)容
小結(jié)：
不同的導(dǎo)航方式都有各自的優(yōu)缺點(diǎn)画畅，導(dǎo)航方式的選擇要依據(jù)自己app的信息架構(gòu)和具體功能而定砸琅，最適合用戶的才是最好的！
