當(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ú)立，它們的信息間也沒有任何交集，無法跳轉(zhuǎn)互通。因?yàn)檫@種特質(zhì)，宮格式導(dǎo)航被廣泛應(yīng)用于各平臺(tái)系統(tǒng)的中心頁(yè)面。這樣的組織方式無法讓用戶在第一時(shí)間看到內(nèi)容，選擇壓力較大，除了常見app如支付寶和美圖秀秀，其他的app采用這種導(dǎo)航的應(yīng)用已經(jīng)越來越少，往往用在二級(jí)頁(yè)作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或是作為一系列工具入口的聚合。
舉例：
1.優(yōu)點(diǎn)
功能入口直觀，且功能模塊多。
2.劣勢(shì)
①功能多、雜，無重點(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í)，無法突出重點(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)和具體功能而定，最適合用戶的才是最好的！
