編輯導(dǎo)讀：App導(dǎo)航，是應(yīng)用的信息結(jié)構(gòu)在用戶界面上的展現(xiàn)方式。優(yōu)秀的App導(dǎo)航設(shè)計(jì)，能夠在局限的屏幕窗口中完美的組織豐富的信息、展示產(chǎn)品的功能，并快速引導(dǎo)用戶使用產(chǎn)品功能。本文作者詳細(xì)介紹了B端產(chǎn)品中的導(dǎo)航設(shè)計(jì)，我們一起來(lái)看一下。

這是B端交互組件最后一篇文章了，組件其實(shí)有很多，本次只選取了我覺(jué)得常用的4個(gè)組件來(lái)細(xì)聊，即導(dǎo)航、表格、表單、彈窗，包括系統(tǒng)菜單、數(shù)據(jù)管理和展示、數(shù)據(jù)輸入和系統(tǒng)反饋。

導(dǎo)航與信息架構(gòu)息息相關(guān)，信息架構(gòu)是對(duì)功能進(jìn)行組織，導(dǎo)航則是系統(tǒng)的門戶，對(duì)功能的詳細(xì)展示，用戶可以通過(guò)導(dǎo)航快速找到自己想要的功能，也可以通過(guò)導(dǎo)航了解系統(tǒng)的整體功能分布。

一、導(dǎo)航結(jié)構(gòu)

導(dǎo)航結(jié)構(gòu)其實(shí)也跟頁(yè)面結(jié)構(gòu)相關(guān)，常見(jiàn)的頁(yè)面結(jié)構(gòu)包括上下結(jié)構(gòu)、左右結(jié)構(gòu)、上左右結(jié)構(gòu)、上左中右結(jié)構(gòu)等。

我之前常用的就是上左右結(jié)構(gòu)，也俗稱T字形結(jié)構(gòu)。

頭部放logo、個(gè)人信息，搜索等；左側(cè)放導(dǎo)航菜單，支持最多三層結(jié)構(gòu)；右側(cè)則是主體內(nèi)容區(qū)域，表單，表格等都是放在這個(gè)區(qū)域。

1. 頭部導(dǎo)航

早期做網(wǎng)頁(yè)設(shè)計(jì)時(shí)，基本都是用的上下結(jié)構(gòu)，即頭部是導(dǎo)航，有二級(jí)或三級(jí)菜單時(shí)用下拉菜單展示，中間是網(wǎng)頁(yè)主體內(nèi)容，尾部則是版權(quán)信息區(qū)域。

對(duì)系統(tǒng)而言，這種模式也有，頭部是導(dǎo)航，下面是主體內(nèi)容區(qū)域，有的系統(tǒng)尾部可能會(huì)帶簡(jiǎn)單的版權(quán)信息。

如下圖所示：

以前設(shè)計(jì)華為內(nèi)部系統(tǒng)時(shí)，看到過(guò)很多這種設(shè)計(jì)的系統(tǒng)，給我感覺(jué)就是需要頻繁切換頭部菜單，一個(gè)系統(tǒng)功能復(fù)雜，頭部菜單基本都帶二級(jí)或三級(jí)菜單，想找個(gè)功能，差不多需要每個(gè)都要展開(kāi)去找，我個(gè)人感覺(jué)很麻煩，當(dāng)你進(jìn)入某個(gè)頁(yè)面后，如果不看面包屑，基本就是迷路了，作為重視操作的系統(tǒng)而言，導(dǎo)航應(yīng)該更醒目一點(diǎn)。

我在做PTS項(xiàng)目管理系統(tǒng)的整體用戶體驗(yàn)設(shè)計(jì)時(shí)，就大膽提出要改整體的結(jié)構(gòu)，普通的外科手術(shù)已經(jīng)沒(méi)啥用了，得重新來(lái)搭骨架，不過(guò)好在此舉得到了部門領(lǐng)導(dǎo)的支持，項(xiàng)目得以順利進(jìn)行下去，最終也是有很好的落地。

2. 左側(cè)導(dǎo)航

除了上下結(jié)構(gòu)外，都可以用左側(cè)導(dǎo)航。

如果是上左中右結(jié)構(gòu)時(shí)，右側(cè)其實(shí)可以設(shè)計(jì)成折疊效果，可以影藏；固定展示的話，也是放一些配套的附屬功能。有時(shí)候首頁(yè)是上左中右結(jié)構(gòu)，內(nèi)頁(yè)可能會(huì)變成上左右結(jié)構(gòu)，這種情況也是經(jīng)常有的，根據(jù)業(yè)務(wù)需要來(lái)設(shè)計(jì)。左側(cè)導(dǎo)航一般層級(jí)不超過(guò)3層，如果確實(shí)有4級(jí)功能的需要，一般也是放在主體內(nèi)容區(qū)域，可以用內(nèi)部TAB來(lái)表達(dá)。

不過(guò)我們盡量還是讓系統(tǒng)整體的層級(jí)控制在3層以內(nèi)，寧可多加幾個(gè)菜單，也不要輕易去縱深。

如下圖所示：

3. 組合導(dǎo)航

組合導(dǎo)航，顧名思義就是頭部有導(dǎo)航，左側(cè)也有導(dǎo)航。

如下圖所示：

我以前設(shè)計(jì)餐飲CRM時(shí)，就是采用的這種方式，頭部是一級(jí)菜單，用圖標(biāo)和文字上下擺來(lái)展示，只有一層。左側(cè)是二級(jí)菜單和三級(jí)菜單，即左側(cè)可以展開(kāi)，用圖標(biāo)和文字橫向擺來(lái)展示，展開(kāi)的菜單沒(méi)有圖標(biāo)。如果業(yè)務(wù)上有要求的四級(jí)菜單，則用內(nèi)部TAB去區(qū)分。

操作上是點(diǎn)擊頭部一級(jí)菜單后，左側(cè)出現(xiàn)其對(duì)應(yīng)的二級(jí)菜單，有的可能只有二級(jí)菜單，最末菜單點(diǎn)擊后，右側(cè)打開(kāi)頁(yè)面。這種設(shè)計(jì)給人感覺(jué)每個(gè)頭部菜單都是一個(gè)獨(dú)立的體系，通過(guò)點(diǎn)擊頭部菜單來(lái)切換不同的體系，為了避免過(guò)于孤立，我們是采用的內(nèi)部頁(yè)簽?zāi)Ｊ絹?lái)打開(kāi)頁(yè)面。

二、面包屑

導(dǎo)航原則上是設(shè)計(jì)成最多三層，除了通過(guò)看導(dǎo)航的顏色變化外，也可以通過(guò)看面包屑來(lái)知道當(dāng)前頁(yè)面處于哪個(gè)路徑內(nèi)，網(wǎng)站的面包屑一般是可以設(shè)計(jì)成可點(diǎn)擊的模式，除了最終頁(yè)面不可點(diǎn)擊。

系統(tǒng)的面包屑則根據(jù)業(yè)務(wù)要求來(lái)判斷是否可以點(diǎn)擊，我個(gè)人感覺(jué)面包屑就是一種弱化版的導(dǎo)航，配合主體導(dǎo)航來(lái)使用，加強(qiáng)導(dǎo)航的權(quán)重。

如下圖所示：

面包屑展示的菜單如果沒(méi)有具體的頁(yè)面，則不可點(diǎn)擊；如果二級(jí)菜單點(diǎn)擊有頁(yè)面，下拉的三級(jí)菜單點(diǎn)擊也有頁(yè)面，則可以設(shè)計(jì)成可點(diǎn)擊的模式。

另外有個(gè)點(diǎn)要說(shuō)的是，面包屑層級(jí)只到頁(yè)面層級(jí)，一些功能按鈕打開(kāi)的彈窗等原則上還是屬于這個(gè)頁(yè)面，所以面包屑不做變化。

說(shuō)到這，突然感覺(jué)系統(tǒng)設(shè)計(jì)的變化很多，具體要采用哪種模式，里面的門道也挺多的，下面我會(huì)對(duì)導(dǎo)航路徑來(lái)詳細(xì)聊聊。

三、導(dǎo)航路徑

導(dǎo)航路徑，你也可以理解為用戶路徑，用戶從首頁(yè)進(jìn)去，點(diǎn)擊功能菜單，一步步到達(dá)目標(biāo)頁(yè)面，并完成目標(biāo)功能。這里面可以采用的模式就有很多種。

1. 單層到底

用戶從首頁(yè)進(jìn)來(lái)，不論怎么點(diǎn)擊，每次只打開(kāi)一個(gè)頁(yè)面，比如當(dāng)前在一級(jí)A菜單下某個(gè)頁(yè)面，現(xiàn)在我打開(kāi)一級(jí)B菜單下某個(gè)頁(yè)面，則A菜單頁(yè)面消失，轉(zhuǎn)而只呈現(xiàn)B菜單頁(yè)面，這種交互方式，我姑且用“單層到底”模式來(lái)表達(dá)吧。

如下圖所示：

我們也可以理解為在當(dāng)前頁(yè)打開(kāi)某個(gè)頁(yè)面，點(diǎn)擊后頁(yè)面會(huì)刷新并覆蓋掉以前的頁(yè)面。這種設(shè)計(jì)，導(dǎo)航路徑會(huì)很清晰，都是單層設(shè)計(jì)，一級(jí)菜單都是主線，二級(jí)或三級(jí)則是分支。最后我總結(jié)下，就是每次只能打開(kāi)一個(gè)頁(yè)面。

在具體業(yè)務(wù)中可能會(huì)遇到這種情況，打開(kāi)A頁(yè)面進(jìn)行操作時(shí)，突然需要用到B頁(yè)面的數(shù)據(jù)，這個(gè)時(shí)候不管B頁(yè)面處在哪個(gè)層級(jí)，我現(xiàn)在需要打開(kāi)B頁(yè)面看到我要的數(shù)據(jù)，當(dāng)我再次返回A頁(yè)面時(shí)，之前操作的位置也就不存在了，不論是通過(guò)翻頁(yè)還是搜索或者其他操作后才能達(dá)到的位置，我現(xiàn)在需要重新做一遍，可能我需要反復(fù)去看B頁(yè)面的數(shù)據(jù)，這樣就會(huì)頻繁在A頁(yè)面和B頁(yè)面之間切換。

有些人可能會(huì)說(shuō)可以把B頁(yè)面的數(shù)據(jù)導(dǎo)出或者打印出來(lái)，當(dāng)然這也是一種解決辦法。如果場(chǎng)景再?gòu)?fù)雜一點(diǎn)呢，我需要通過(guò)B頁(yè)面的功能得出一個(gè)結(jié)論，確實(shí)需要在A和B之間來(lái)回切換。說(shuō)到這，引出我即將要談的頁(yè)簽?zāi)Ｊ搅恕?/p>

2. 頁(yè)簽?zāi)Ｊ?/h3>

接著上面的問(wèn)題，用頁(yè)簽?zāi)Ｊ?，就可以解決A和B之間來(lái)回切換的問(wèn)題，我同時(shí)打開(kāi)兩個(gè)頁(yè)面，在B頁(yè)面操作后得出結(jié)論，我再回到A頁(yè)面進(jìn)行操作，數(shù)據(jù)也保存了，回到B頁(yè)面繼續(xù)操作，再次回到A頁(yè)面時(shí)，位置沒(méi)變，我可以接著操作，無(wú)縫對(duì)接。

如下圖所示：

我之前設(shè)計(jì)餐飲CRM時(shí)就是采用的頁(yè)簽?zāi)Ｊ?，我遨游在?dǎo)航系統(tǒng)中，打開(kāi)很多個(gè)頁(yè)面，當(dāng)頁(yè)面很多時(shí)，其實(shí)也會(huì)感覺(jué)很凌亂，所以我后來(lái)優(yōu)化了，設(shè)置了最大頁(yè)簽數(shù)。

當(dāng)頁(yè)面被影藏后，頁(yè)簽上的文字就是唯一判斷這是哪個(gè)頁(yè)面的依據(jù)，文字太多怎么辦，用省略號(hào)嗎，所以導(dǎo)航設(shè)計(jì)時(shí)，文字也需要去優(yōu)化，當(dāng)時(shí)真的是一地雞毛，一步步去梳理，最終達(dá)到一個(gè)平衡。

頁(yè)簽文字右側(cè)一般會(huì)有關(guān)閉按鈕，當(dāng)打開(kāi)頁(yè)面數(shù)超過(guò)最大頁(yè)簽數(shù)時(shí)，系統(tǒng)會(huì)提示，這時(shí)你可以先關(guān)閉掉暫時(shí)不用的頁(yè)面。

這種模式用久了，我也發(fā)現(xiàn)問(wèn)題了，沒(méi)事喜歡到處點(diǎn)擊，打開(kāi)很多頁(yè)面，然后每次就是不停的去關(guān)閉頁(yè)面，一時(shí)方便用的爽，后來(lái)發(fā)現(xiàn)每個(gè)頁(yè)面都需要手動(dòng)關(guān)閉，也很麻煩。

3. 組合模式

組合模式就是把單層到底和頁(yè)簽?zāi)Ｊ浇M合后的設(shè)計(jì)，單層針對(duì)的是一級(jí)菜單，頁(yè)簽切換是子菜單，同一個(gè)一級(jí)菜單下的子菜單，可以打開(kāi)多個(gè)，采用頁(yè)簽?zāi)Ｊ健?/p>

如下圖所示：

如果你點(diǎn)擊其他一級(jí)菜單下某個(gè)子菜單，則會(huì)刷新頁(yè)面，前面所有頁(yè)面被覆蓋掉，只展示一個(gè)新頁(yè)面，當(dāng)然你可以再次打開(kāi)多個(gè)同一級(jí)菜單下的其他頁(yè)面?？偨Y(jié)下，就是每次只能打開(kāi)一個(gè)一級(jí)菜單中的頁(yè)面，數(shù)量不限。

當(dāng)然也不是完美的，如果我需要同時(shí)打開(kāi)一級(jí)A菜單下和一級(jí)B菜單下的頁(yè)面，組合模式就做不到。

總結(jié)

業(yè)務(wù)場(chǎng)景變化多端，設(shè)計(jì)方法是死的，我們需要活學(xué)活用，用最優(yōu)的設(shè)計(jì)方案去解決業(yè)務(wù)問(wèn)題。

產(chǎn)品經(jīng)理和交互設(shè)計(jì)師其實(shí)就是一群“分析問(wèn)題，解決問(wèn)題”的人。

在分析問(wèn)題時(shí)，除了找到問(wèn)題所在，重中之重，先要對(duì)業(yè)務(wù)有足夠的理解；解決問(wèn)題時(shí)，對(duì)特定的業(yè)務(wù)場(chǎng)景需要用到最貼切的設(shè)計(jì)方案。

作者：D.cheerful，武漢地區(qū)野路子產(chǎn)品經(jīng)理，3年網(wǎng)頁(yè)設(shè)計(jì)，5年+交互設(shè)計(jì)，3年+產(chǎn)品經(jīng)理；公眾號(hào)：D哥設(shè)計(jì)。

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

題圖來(lái)自 unsplash，基于 CC0 協(xié)議