導(dǎo)航設(shè)計是產(chǎn)品設(shè)計中非常重要的一部分，在APP中導(dǎo)航設(shè)計更是直接影響用戶對設(shè)計的體驗(yàn)感受，所以導(dǎo)航菜單設(shè)計需要考慮周全，發(fā)揮導(dǎo)航的價值為構(gòu)筑“怦然心動”的產(chǎn)品打下基礎(chǔ)。

所謂導(dǎo)航指的是：引導(dǎo)用戶訪問欄目、菜單、分類等布局結(jié)構(gòu)形式的總稱。

導(dǎo)航主要是引導(dǎo)用戶并告知用戶怎么找到自己想要的信息或完成用戶自己想要完成的任務(wù)。

導(dǎo)航設(shè)計的合理性直接關(guān)系著用戶是否能夠找到信息和完成操作任務(wù)。APP導(dǎo)航承載著用戶獲取所需內(nèi)容的快速途徑。它看似簡單，卻是產(chǎn)品設(shè)計中最需要考量的一部分。APP導(dǎo)航設(shè)計直接影響用戶對設(shè)計的體驗(yàn)感受，所以導(dǎo)航菜單設(shè)計需要考慮周全，發(fā)揮導(dǎo)航的價值為構(gòu)筑“怦然心動”的產(chǎn)品打下基礎(chǔ)。

01 導(dǎo)航設(shè)計中功能信息的層級劃分

隨著APP用戶的不斷增加，而設(shè)計市場上更多的重視量的積累，因而導(dǎo)航設(shè)計的形式較為單一，導(dǎo)航的操作體驗(yàn)感比較差，不能滿足現(xiàn)代多元化社會的需求。手機(jī)界面更能信息的層級劃分，以及同級界面、上級和下降界面的切換跳轉(zhuǎn)的動態(tài)方式比較少，不能表現(xiàn)出更加真實(shí)的使用層次感和空間感。

手機(jī)APP導(dǎo)航設(shè)計的結(jié)構(gòu)模式具體如下幾種方式：

1.?標(biāo)簽導(dǎo)航

標(biāo)簽類導(dǎo)航位于頁面底部，通常包含5個標(biāo)簽是比較合適的數(shù)量。這種導(dǎo)航是非常常見的，如果你的應(yīng)用需要用戶頻繁的在不同分頁切換，可以采用這種導(dǎo)航。它的缺點(diǎn)是會占用一定高度的空間。如微信最新版的APP界面設(shè)計圖。

2. 舵式導(dǎo)航

目前流行一種標(biāo)簽導(dǎo)航的變體，個人把它稱為“舵式導(dǎo)航”，因?yàn)樗臉邮胶芟褫喆嫌脕碇笓]的船舵，兩側(cè)是其他操作按鈕。當(dāng)頁面有處于同一層級的幾大部分內(nèi)容，同時又需要一個非常重要且頻繁操作的入口，就可以采用這種APP導(dǎo)航模式。如下圖葡萄社APP。

3. 抽屜式架構(gòu)

抽屜式就是把功能按照一定的分類放在特定的位置，像抽屜一樣可以收起打開，自由伸縮。這樣的架構(gòu)不僅節(jié)省空間，更讓用戶一眼便知界面的整體布局功能及其子功能。

這種導(dǎo)航的優(yōu)點(diǎn)是節(jié)省頁面展示空間，讓用戶將更多的注意力聚焦到當(dāng)前頁面。比較適合于不那么需要頻繁切換內(nèi)容的應(yīng)用，例如對設(shè)置、關(guān)于等內(nèi)容的隱藏。UC瀏覽器就是采用抽屜式架構(gòu)，視覺上清晰明了，操作上也非常簡單易懂。

4. 宮格導(dǎo)航（九宮格）

這種宮格導(dǎo)航是將主要入口全部聚合在頁面，讓用戶做出選擇。這樣的組織方式無法讓用戶在第一時間看到內(nèi)容，選擇壓力較大，采用這種導(dǎo)航的應(yīng)用已經(jīng)越來越少，往往用在二級頁。

5. 輪播導(dǎo)航

當(dāng)你的應(yīng)用信息足夠扁平，可以嘗試輪播導(dǎo)航，如果應(yīng)用得當(dāng)，能夠給人耳目一新的體驗(yàn)。這種導(dǎo)航能夠最大程度的保證應(yīng)用的頁面簡潔性，操作也是最方便的。但是缺點(diǎn)是不能夠快速的定位對應(yīng)的分頁內(nèi)容。

6. 列表式導(dǎo)航

列表式APP導(dǎo)航是我們在APP設(shè)計種必不可少的一個信息承載模式。當(dāng)然作為一個APP的導(dǎo)航也是非常方便的。

不過目前來看，列表導(dǎo)航通常用于二級頁，由于它與宮格導(dǎo)航一樣，不會默認(rèn)展示任何實(shí)質(zhì)內(nèi)容，所以通常app不會在首頁使用它。

這種導(dǎo)航結(jié)構(gòu)清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對應(yīng)的頁面。列表項目可以通過間距、標(biāo)題等進(jìn)行分組。

7. tab結(jié)構(gòu)導(dǎo)航

這是一種扁平化的交互架構(gòu)。選中的標(biāo)簽處于界面的 顯著位置，并展現(xiàn)整個內(nèi)容，未選中的則只顯示標(biāo)簽， 不顯示內(nèi)容。這種界面結(jié)構(gòu)把同一級別的功能用標(biāo)簽 的方式來顯示，根據(jù)需求來展現(xiàn)相應(yīng)功能，把不需要 的頁面隱藏，但又保留其功能入口，既簡單好用，又 節(jié)省了屏幕的使用空間。

8. 組合類結(jié)構(gòu)導(dǎo)航

當(dāng)用戶需要聚焦內(nèi)容，同時又需要一些快捷入口能夠連接到某些頁面時，就可以采用組合導(dǎo)航。組合導(dǎo)航上方用宮格的形式展現(xiàn)快捷入口，與標(biāo)簽導(dǎo)航不同的是，這些宮格入口之間不需要是平級的關(guān)系，也不必包含整個層級的內(nèi)容，你可以將它理解為一種圖形化的文字鏈。這種導(dǎo)航比較靈活，能適應(yīng)架構(gòu)的快速調(diào)整。

02 現(xiàn)有導(dǎo)航設(shè)計趨勢

用戶的認(rèn)知是交互行為的基礎(chǔ)，輕松獲得良好的界面認(rèn)知是成功完成人機(jī)對話的必要條件。

優(yōu)秀的導(dǎo)航模式可以將界面信息簡單、直接傳遞給用戶， 盡量符合用戶認(rèn)知習(xí)慣，能讓用戶無需思考、直接快速進(jìn)入操作模式，體驗(yàn)便捷性及舒適感，享受操作過程，當(dāng)然不同的平臺之間也存在著不同的導(dǎo)航模式。

在手機(jī) APP（移動應(yīng)用程序）的導(dǎo)航模式設(shè)計中，必須考慮智能手機(jī)屏幕尺寸有限的特殊性。通過有效的功能性整合，把功能按需求的程度、使用的習(xí)慣進(jìn)行分類排序編輯。并利用多種認(rèn)知模式進(jìn)行創(chuàng)新設(shè)計，例如：隱喻式導(dǎo)航設(shè)計、可視化導(dǎo)航設(shè)計等全新的認(rèn)知設(shè)計形式如下圖。

同時要更加重視以用戶為中心的原則進(jìn)行視覺再優(yōu)化設(shè)計， 提高用戶認(rèn)知效率，降低同一APP由于設(shè)備的轉(zhuǎn)換所造成的認(rèn)知摩擦，達(dá)到用戶良好體驗(yàn)的目的。

03 APP導(dǎo)航設(shè)計應(yīng)該符合哪些標(biāo)準(zhǔn)？

雖然每個導(dǎo)航模式有常見的用法，但并沒有絕對的限定，要具體情況具體分析。比如頂部標(biāo)簽導(dǎo)航可以作為一級導(dǎo)航，但與抽屜導(dǎo)航結(jié)合的話，可能就會變成二級導(dǎo)航。

就目前的情況來看，很少有APP能夠只用一種導(dǎo)航模式，至少需要兩種。絕大多數(shù)的APP都在混合使用多種導(dǎo)航模式。很多APP甚至可能使用多大七八種導(dǎo)航模式，有的一個界面就可能用三到四種導(dǎo)航模式。

導(dǎo)航模式混合使用并不可怕，關(guān)鍵是要在設(shè)計上做好文章，確保用戶能夠獲得良好的用戶體驗(yàn)。

導(dǎo)航的具體設(shè)計方式多種多樣，有只有文字的，有文字圖標(biāo)結(jié)合的，有圖片文字結(jié)合的，有圖片文字圖標(biāo)結(jié)合的、有只有圖標(biāo)的……具體的形式不在這里多談。用什么樣的形式取決于內(nèi)容需要什么樣的展現(xiàn)形式。

文中的導(dǎo)航模式只是一種參考，這些模式其實(shí)還有各種各樣的變形。只要能夠引導(dǎo)用戶清晰明確地找到信息或完成任務(wù)的導(dǎo)航都是優(yōu)秀的導(dǎo)航，并不一定非得使用某種導(dǎo)航。

1. 創(chuàng)建情節(jié)型的導(dǎo)航設(shè)計

在創(chuàng)建導(dǎo)航模式時候，可以創(chuàng)建一個情節(jié)。用戶將會用你的設(shè)計快速、高效的完成某項任務(wù)、達(dá)成一個目標(biāo)。例如：當(dāng)你想要整理桌面時候點(diǎn)擊此項導(dǎo)航，將會方便自己個性化的創(chuàng)建。

2. 讓用戶可以想象交互導(dǎo)航的行程

在導(dǎo)航設(shè)計的過程中由于各個導(dǎo)航的設(shè)計存在一定的相似性，所以導(dǎo)致用戶在使用過程中容易出現(xiàn)誤操作的現(xiàn)象，設(shè)計師可以利用這種現(xiàn)象設(shè)計出不確定的導(dǎo)航設(shè)計模式，豐富APP導(dǎo)航使用的生動、形象的特點(diǎn)。

3. 在導(dǎo)航設(shè)計行程的可視化設(shè)計

在APP創(chuàng)建的過程中可能會用到多種導(dǎo)航設(shè)計，我們可以將每種導(dǎo)航設(shè)計中的大多數(shù)數(shù)據(jù)轉(zhuǎn)換成圖形的形式表現(xiàn)出來，同時在同一個APP中將不同的導(dǎo)航設(shè)計通過可視化的設(shè)計串聯(lián)成一個整體，從而讓APP設(shè)計更加的整體、增強(qiáng)人機(jī)體驗(yàn)感。

總結(jié)

無處不在的互聯(lián)網(wǎng)空間，使一系列智能設(shè)備深入人們的生活，而手機(jī)憑借體積小、便于攜帶的優(yōu)勢成為最受人們青睞的移動設(shè)備。但尺寸上的優(yōu)勢也成為使用中的局限，因而對手機(jī)界面進(jìn)行的功能性擴(kuò)展研究，增加其使用的空間感和層次性，保證操作的簡單、易學(xué)，應(yīng)該是交互設(shè)計的重要課題。

本文由 @DS.Geng 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議