B端交互組件之導航篇

這是B端交互組件最後一篇文章了，組件其實有很多，本次只選取了我覺得常用的4個組件來細聊，即導航、表格、表單、彈窗，包括系統菜單、數據管理和展示、數據輸入和系統反饋。

導航與信息架構息息相關，信息架構是對功能進行組織，導航則是系統的門户，對功能的詳細展示，用户可以通過導航快速找到自己想要的功能，也可以通過導航瞭解系統的整體功能分佈。

一、導航結構

導航結構其實也跟頁面結構相關，常見的頁面結構包括上下結構、左右結構、上左右結構、上左中右結構等。

我之前常用的就是上左右結構，也俗稱T字形結構。

頭部放logo、個人信息，搜索等；左側放導航菜單，支持最多三層結構；右側則是主體內容區域，表單，表格等都是放在這個區域。

1. 頭部導航

早期做網頁設計時，基本都是用的上下結構，即頭部是導航，有二級或三級菜單時用下拉菜單展示，中間是網頁主體內容，尾部則是版權信息區域。

對系統而言，這種模式也有，頭部是導航，下面是主體內容區域，有的系統尾部可能會帶簡單的版權信息。

如下圖所示：

以前設計華為內部系統時，看到過很多這種設計的系統，給我感覺就是需要頻繁切換頭部菜單，一個系統功能複雜，頭部菜單基本都帶二級或三級菜單，想找個功能，差不多需要每個都要展開去找，我個人感覺很麻煩，當你進入某個頁面後，如果不看麪包屑，基本就是迷路了，作為重視操作的系統而言，導航應該更醒目一點。

我在做PTS項目管理系統的整體用户體驗設計時，就大膽提出要改整體的結構，普通的外科手術已經沒啥用了，得重新來搭骨架，不過好在此舉得到了部門領導的支持，項目得以順利進行下去，最終也是有很好的落地。

2. 左側導航

除了上下結構外，都可以用左側導航。

如果是上左中右結構時，右側其實可以設計成摺疊效果，可以影藏；固定展示的話，也是放一些配套的附屬功能。有時候首頁是上左中右結構，內頁可能會變成上左右結構，這種情況也是經常有的，根據業務需要來設計。左側導航一般層級不超過3層，如果確實有4級功能的需要，一般也是放在主體內容區域，可以用內部TAB來表達。

不過我們儘量還是讓系統整體的層級控制在3層以內，寧可多加幾個菜單，也不要輕易去縱深。

如下圖所示：

3. 組合導航

組合導航，顧名思義就是頭部有導航，左側也有導航。

如下圖所示：

我以前設計餐飲CRM時，就是採用的這種方式，頭部是一級菜單，用圖標和文字上下襬來展示，只有一層。左側是二級菜單和三級菜單，即左側可以展開，用圖標和文字橫向擺來展示，展開的菜單沒有圖標。如果業務上有要求的四級菜單，則用內部TAB去區分。

操作上是點擊頭部一級菜單後，左側出現其對應的二級菜單，有的可能只有二級菜單，最末菜單點擊後，右側打開頁面。這種設計給人感覺每個頭部菜單都是一個獨立的體系，通過點擊頭部菜單來切換不同的體系，為了避免過於孤立，我們是採用的內部頁籤模式來打開頁面。

二、麪包屑

導航原則上是設計成最多三層，除了通過看導航的顏色變化外，也可以通過看麪包屑來知道當前頁面處於哪個路徑內，網站的麪包屑一般是可以設計成可點擊的模式，除了最終頁面不可點擊。

系統的麪包屑則根據業務要求來判斷是否可以點擊，我個人感覺麪包屑就是一種弱化版的導航，配合主體導航來使用，加強導航的權重。

如下圖所示：

麪包屑展示的菜單如果沒有具體的頁面，則不可點擊；如果二級菜單點擊有頁面，下拉的三級菜單點擊也有頁面，則可以設計成可點擊的模式。

另外有個點要説的是，麪包屑層級只到頁面層級，一些功能按鈕打開的彈窗等原則上還是屬於這個頁面，所以麪包屑不做變化。

説到這，突然感覺系統設計的變化很多，具體要採用哪種模式，裏面的門道也挺多的，下面我會對導航路徑來詳細聊聊。

三、導航路徑

導航路徑，你也可以理解為用户路徑，用户從首頁進去，點擊功能菜單，一步步到達目標頁面，並完成目標功能。這裏面可以採用的模式就有很多種。

1. 單層到底

用户從首頁進來，不論怎麼點擊，每次只打開一個頁面，比如當前在一級A菜單下某個頁面，現在我打開一級B菜單下某個頁面，則A菜單頁面消失，轉而只呈現B菜單頁面，這種交互方式，我姑且用“單層到底”模式來表達吧。

如下圖所示：

我們也可以理解為在當前頁打開某個頁面，點擊後頁面會刷新並覆蓋掉以前的頁面。這種設計，導航路徑會很清晰，都是單層設計，一級菜單都是主線，二級或三級則是分支。最後我總結下，就是每次只能打開一個頁面。

在具體業務中可能會遇到這種情況，打開A頁面進行操作時，突然需要用到B頁面的數據，這個時候不管B頁面處在哪個層級，我現在需要打開B頁面看到我要的數據，當我再次返回A頁面時，之前操作的位置也就不存在了，不論是通過翻頁還是搜索或者其他操作後才能達到的位置，我現在需要重新做一遍，可能我需要反覆去看B頁面的數據，這樣就會頻繁在A頁面和B頁面之間切換。

有些人可能會説可以把B頁面的數據導出或者打印出來，當然這也是一種解決辦法。如果場景再複雜一點呢，我需要通過B頁面的功能得出一個結論，確實需要在A和B之間來回切換。説到這，引出我即將要談的頁籤模式了。

2. 頁籤模式

接着上面的問題，用頁籤模式，就可以解決A和B之間來回切換的問題，我同時打開兩個頁面，在B頁面操作後得出結論，我再回到A頁面進行操作，數據也保存了，回到B頁面繼續操作，再次回到A頁面時，位置沒變，我可以接着操作，無縫對接。

如下圖所示：

我之前設計餐飲CRM時就是採用的頁籤模式，我遨遊在導航系統中，打開很多個頁面，當頁面很多時，其實也會感覺很凌亂，所以我後來優化了，設置了最大頁籤數。

當頁面被影藏後，頁簽上的文字就是唯一判斷這是哪個頁面的依據，文字太多怎麼辦，用省略號嗎，所以導航設計時，文字也需要去優化，當時真的是一地雞毛，一步步去梳理，最終達到一個平衡。

頁籤文字右側一般會有關閉按鈕，當打開頁面數超過最大頁籤數時，系統會提示，這時你可以先關閉掉暫時不用的頁面。

這種模式用久了，我也發現問題了，沒事喜歡到處點擊，打開很多頁面，然後每次就是不停的去關閉頁面，一時方便用的爽，後來發現每個頁面都需要手動關閉，也很麻煩。

3. 組合模式

組合模式就是把單層到底和頁籤模式組合後的設計，單層針對的是一級菜單，頁籤切換是子菜單，同一個一級菜單下的子菜單，可以打開多個，採用頁籤模式。

如下圖所示：

如果你點擊其他一級菜單下某個子菜單，則會刷新頁面，前面所有頁面被覆蓋掉，只展示一個新頁面，當然你可以再次打開多個同一級菜單下的其他頁面。總結下，就是每次只能打開一個一級菜單中的頁面，數量不限。

當然也不是完美的，如果我需要同時打開一級A菜單下和一級B菜單下的頁面，組合模式就做不到。

總結

業務場景變化多端，設計方法是死的，我們需要活學活用，用最優的設計方案去解決業務問題。

產品經理和交互設計師其實就是一羣“分析問題，解決問題”的人。

在分析問題時，除了找到問題所在，重中之重，先要對業務有足夠的理解；解決問題時，對特定的業務場景需要用到最貼切的設計方案。

作者：D.cheerful，武漢地區野路子產品經理，3年網頁設計，5年+交互設計，3年+產品經理；公眾號：D哥設計。

本文由 @D.cheerful 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自 unsplash，基於 CC0 協議