如何為網(wǎng)站設(shè)計(jì)一個有效的多級導(dǎo)航系統(tǒng)

時(shí)間：2023-07-27 22:45:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-27 22:45:01 來源：網(wǎng)站運(yùn)營

如何為網(wǎng)站設(shè)計(jì)一個有效的多級導(dǎo)航系統(tǒng)：在從0到1設(shè)計(jì)一個網(wǎng)站的過程中，最先需要設(shè)計(jì)的就是網(wǎng)站的導(dǎo)航系統(tǒng)。如果把網(wǎng)站看成一個生命，那么導(dǎo)航系統(tǒng)就是它的骨骼。對于結(jié)構(gòu)簡單的網(wǎng)站，導(dǎo)航系統(tǒng)也比較簡單，而對于復(fù)雜的網(wǎng)站例如B端或中后臺網(wǎng)站，導(dǎo)航系統(tǒng)也會復(fù)雜的多，此時(shí)一個優(yōu)秀的導(dǎo)航能夠幫助用戶更高效的完成工作。

在本文中，筆者總結(jié)了自己在多級導(dǎo)航設(shè)計(jì)中的一些思路和經(jīng)驗(yàn)，希望可以幫助到正在進(jìn)行相關(guān)工作的設(shè)計(jì)師和產(chǎn)品經(jīng)理們。

對于復(fù)雜的網(wǎng)站，常常需要4級甚至5級的導(dǎo)航，本文中的案例為以5級導(dǎo)航為設(shè)計(jì)目標(biāo)進(jìn)行的。在設(shè)計(jì)時(shí)，筆者發(fā)現(xiàn)這個過程比較需要邏輯思維，因此在設(shè)計(jì)導(dǎo)航的過程中整體思路是：先設(shè)計(jì)出盡可能多的導(dǎo)航系統(tǒng)，然后再在其中挑選出符合網(wǎng)站信息架構(gòu)的導(dǎo)航。本文也按照這兩個步驟進(jìn)行闡述。

一、設(shè)計(jì)出盡可能多的5級導(dǎo)航系統(tǒng)

如何設(shè)計(jì)出盡可能多的5級導(dǎo)航系統(tǒng)？理論上講，通過每個級別排列組合的方式可以得到所有5級導(dǎo)航的排布方式。那么根據(jù)什么方式進(jìn)行排列組合呢？導(dǎo)航的形式大體上可以分為橫向排布和縱向排布，縱向?qū)Ш接钟许敳康目v向收起導(dǎo)航和側(cè)邊導(dǎo)航。接下來只要進(jìn)行排列組合就可以啦。

在排列組合的過程中，有些方式并不合理（比如一到五級全部橫向排布），因此在過程中根據(jù)一些約束條件對排列結(jié)果進(jìn)行了篩選。約束條件如下（這些約束條件也是筆者邊嘗試邊發(fā)現(xiàn)的）：

• 第一級導(dǎo)航層級較高，采用頂部縱向排列（收起）的方式
• 避免橫縱交錯太多，容易邏輯不清，且操作復(fù)雜
• 某兩級導(dǎo)航采用組合展示的方式，可減少層級

……

經(jīng)過排列組合并根據(jù)約束條件篩選后，最終得到了以下9種網(wǎng)站導(dǎo)航的框架：

以下是9種導(dǎo)航框架：

以上就是9種五級導(dǎo)航的設(shè)計(jì)，需要說明的是，這9種導(dǎo)航并非代表了五級導(dǎo)航所有的情況，還可能出現(xiàn)其他的組合與變形，比如二級組合起來的方式變成三級組合起來，就又多了若干種變形方式。以上9種只是常規(guī)導(dǎo)航的一些舉例。

二、挑選合適的導(dǎo)航系統(tǒng)

設(shè)計(jì)出足夠多的導(dǎo)航，接下來是挑選合適的導(dǎo)航。挑選導(dǎo)航時(shí)需要綜合考量網(wǎng)站的具體情況，比如用戶的使用習(xí)慣、導(dǎo)航各層級的關(guān)聯(lián)度、體量等等。以下進(jìn)行具體講解。

1 網(wǎng)站的主要導(dǎo)航有幾個層級

選擇時(shí)需要先了解清楚網(wǎng)站的主要導(dǎo)航有幾個層級。舉個例子，6號導(dǎo)航和9號導(dǎo)航最低一級的橫向?qū)Ш剑?jīng)常用在頁面內(nèi)的tab切換，如果只是偶爾幾個頁面有這樣的tab，那么可以采用這樣的形式，如果大量的頁面都需要這樣的tab，那么可以嘗試把它放到導(dǎo)航目錄中，而不是分在頁面的tab里。

2 用戶是否經(jīng)常需要跨某些層級操作

設(shè)計(jì)導(dǎo)航時(shí)，一定要充分考慮到使用者的使用習(xí)慣，對于后臺網(wǎng)站尤其如此。若用戶需要經(jīng)常在某幾個層級之間切換，那么就應(yīng)該讓這幾個層級盡量放在一起，減少操作時(shí)間，提升操作效率。比如3號導(dǎo)航的四五級是在側(cè)邊展開的方式，那么如果用戶經(jīng)常在四五級之間切換就會非常方便。

3 各級導(dǎo)航的關(guān)聯(lián)度和體量

除去考慮用戶本身的使用，各級導(dǎo)航本身的關(guān)聯(lián)度和體量對于選擇導(dǎo)航也非常重要。

一般情況下，關(guān)聯(lián)度高的不同級別導(dǎo)航會放在盡可能關(guān)聯(lián)的位置，比如6號方案的二三四級導(dǎo)航都在側(cè)邊，能夠有更好的關(guān)聯(lián)度。

導(dǎo)航體量也很影響導(dǎo)航的設(shè)計(jì)。如果某級導(dǎo)航有特別多的內(nèi)容，那么它就不適合做橫向?qū)Ш?，而只能選擇縱向?qū)Ш剑热绨⒗镌企w量如此龐大的導(dǎo)航。

最后的小建議：在設(shè)計(jì)出網(wǎng)站后，一定要去做用戶驗(yàn)證／專家用戶驗(yàn)證，畢竟他們是真實(shí)使用網(wǎng)站的人。

如果你正在設(shè)計(jì)復(fù)雜的網(wǎng)站導(dǎo)航，希望這篇文章的思路能夠幫助到你（如果能夠達(dá)到授之以漁的目的我會很開心），如果你有別的建議，也非常歡迎隨時(shí)和我交流。

未經(jīng)允許，請勿轉(zhuǎn)載