轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   www.cqzjtgb.com  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點這里

對于大部分網(wǎng)站，導(dǎo)航并不算是個挑戰(zhàn)。一條主導(dǎo)航加條二級導(dǎo)航支撐，通常就足夠了。典型的做法是，二級導(dǎo)航顯示出父、兄及當(dāng)前子菜單。常顯的主導(dǎo)航條顯示最頂層的菜單，允許用戶在菜單間切換。

然而，有一類網(wǎng)站讓這種傳統(tǒng)的導(dǎo)航樣式承擔(dān)有些吃力。這就是我要提的大型網(wǎng)站。

定義大型網(wǎng)站

一個大型網(wǎng)站由結(jié)合了綜合服務(wù)和產(chǎn)品的典型大型組織所有。這個組織通常也服務(wù)各色用戶。擁有大型網(wǎng)站的組織，包括BBC這類機構(gòu)型的，類似微軟這種項目多樣化的公司型的，政府部門，高等教育類的以及運作多種活動的慈善組織類的，比如世界自然基金會。

這些網(wǎng)站：龐大，層級多而深，由多個小網(wǎng)站和頻道組成，迎合受眾眾多，許多入口，這種規(guī)模級的復(fù)雜網(wǎng)站導(dǎo)航頗具挑戰(zhàn)。

大型網(wǎng)站上的導(dǎo)航挑戰(zhàn)

在我們公司，我們花費了大量工作在這類大型網(wǎng)站上，尤其當(dāng)我們想使用傳統(tǒng)的導(dǎo)航時特費勁兒。

傳統(tǒng)的導(dǎo)航無法負(fù)擔(dān)深層級

傳統(tǒng)的導(dǎo)航隨著網(wǎng)站層級越深變得越難用。傳統(tǒng)導(dǎo)航很容易應(yīng)付三層；超過的話，問題就會暴露。即便拓展到頁面眾多的房產(chǎn)類網(wǎng)站導(dǎo)航，他們會更致力于導(dǎo)航多過內(nèi)容（大型網(wǎng)站里頁面太多讓問題變得更糟），或更頂層的頁面不再出現(xiàn)在導(dǎo)航中。在后者中，如果用戶處于網(wǎng)站的深層級頁面，他們將搞不清上上下級關(guān)系，因為無法看見當(dāng)前頁面在整個網(wǎng)站中的所處位置。

雖然傳統(tǒng)的導(dǎo)航處理結(jié)合了面包屑，能夠拓展適應(yīng)綜合型網(wǎng)站，但當(dāng)在房產(chǎn)網(wǎng)站上如此做時，成本卻不斷升高。

傳統(tǒng)導(dǎo)航無法承載多入口

如果用戶經(jīng)由小網(wǎng)站或網(wǎng)站某菜單頁的進(jìn)入，傳統(tǒng)方式的導(dǎo)航將讓用戶感到困惑。以一個在考慮參加大學(xué)研究課題的學(xué)生舉例。這個人可能對院系詳情更感興趣相比整個學(xué)校。因而很容易進(jìn)入網(wǎng)站的院系層頁面，而不是學(xué)校的主頁。
另一個例子就是單身媽媽想了解寶寶福利。她們更像是要直達(dá)福利的次級頻道而不是政府主頁。在這種情況下，用戶的關(guān)注是在當(dāng)前內(nèi)容。（如：課題頁或兒童福利頁）。他們不是立即對這整一個網(wǎng)站感興趣。
不幸的是，不論用戶是否愿意，傳統(tǒng)的一級、二級導(dǎo)航都試圖讓用戶去了解整個網(wǎng)站環(huán)境。

在這個大學(xué)頁面上，這個“研究菜單是指整個大學(xué)的研究呢還是僅是這個學(xué)院的研究。當(dāng)兩個同樣的菜單出現(xiàn)，并指向不同的地方會怎么樣？

更糟的是，當(dāng)前上下文實際上能夠影響用戶對導(dǎo)航內(nèi)容的理解。比如，一個”關(guān)于我們“菜單的鏈接，這個學(xué)生會想這是關(guān)于學(xué)院的還是關(guān)于整個學(xué)校的？在某些極端的例子中，你甚至可以發(fā)現(xiàn)同樣名稱的導(dǎo)航同時用于當(dāng)前內(nèi)容和更廣泛的機構(gòu)中（就像這個”關(guān)于我們“）。

導(dǎo)航解決方案

如同所有的事物，這里也沒有完美的解決方案。但仍然有一些適合于小一點的網(wǎng)站的方案，算作向更完善導(dǎo)航邁出的一步。第一個方案是最激進(jìn)的。

徹底去掉導(dǎo)航

似乎是06年時，我第一次在拉斯的關(guān)于破除傳統(tǒng)導(dǎo)航的演講中聽說這個方法。他拒絕給用戶宏偉磅礴的導(dǎo)航，取而代之讓用戶去通過網(wǎng)站找到自己的路徑。
要使用這種方式，得每個頁面成為獨立的文檔并且標(biāo)記適當(dāng)?shù)年P(guān)鍵詞數(shù)據(jù)。然后用戶就可以發(fā)現(xiàn)頁面間通過關(guān)聯(lián)檢索和標(biāo)簽來導(dǎo)航。 如果關(guān)鍵詞數(shù)據(jù)已與每個頁面關(guān)聯(lián) ，牽引鏈接來建立文檔關(guān)系也將可行。

這種做法有幾個好處：
支持無限大的網(wǎng)站；
非常適合從一個深鏈接到達(dá)的用戶；
它允許頁面間的關(guān)系更加靈活動態(tài)并且能輕松容納頁面增刪變動；
當(dāng)然，這中方法也有自身的局限。網(wǎng)站的獨立頻道仍應(yīng)該有一個著陸頁（如：section.bbc.com）,業(yè)務(wù)上也會困擾于沒有具體的站來運營。更重要的是，這種方法很大程度上依賴于文檔標(biāo)簽完善以及強大的搜索功能，這兩者都將很難在大型網(wǎng)站中實現(xiàn)。
就是說，這只是一種選擇，不要太快拍磚。
把網(wǎng)站拆分成多個小站

另一個辦法是把這個大型網(wǎng)站拆分成多個更小的更容易管理的小站。這是BBC采用的辦法。BBC沒有存整，而是打破，分散成多個次級站，如新聞、體育、電視、廣播等。每個網(wǎng)站都有獨立的導(dǎo)航，因而避免了大型網(wǎng)站的導(dǎo)航問題。BBC在界面上采用頂部導(dǎo)航保持一致的辦法貫穿，避免用戶在各次級站點間切換時感覺脫節(jié)。

BBC拆成了多個小站，以避免網(wǎng)站成為臃腫站，同時導(dǎo)航和設(shè)計語言保持一致性。雖然BBC的次級站外觀多樣，但他們用同樣的主導(dǎo)航，擁有一致的設(shè)計語言，比如排版、布局和模塊。這種語言與BBC全球體驗語言定義足夠一致，確保穩(wěn)固的用戶體驗時又夠彈性地適應(yīng)不同的受眾和主題。

這是個不錯的路線。讓每個次級站太不一樣，用戶被UI的改變所迷惑。讓他們太相似，用戶又會放棄去發(fā)現(xiàn)，原來網(wǎng)站上不是一個導(dǎo)航結(jié)構(gòu)。

面包屑導(dǎo)航

第三種是被Gov.uk采用的方案。他拋棄了導(dǎo)航的保留地，轉(zhuǎn)而用頁面的內(nèi)容去鏈接到子內(nèi)容。然后用面包屑去幫助用戶識別他們的導(dǎo)航層級，以及需要時返回上級樹。

Gov.uk幾乎僅依賴面包屑來導(dǎo)航。這樣做有許多好處。首先它最小化了導(dǎo)航的占地空間，與此同時給予子內(nèi)容更多的描述。這個層面說，這是最簡單、干凈、和容易理解的方式。還能很好的遷移至移動設(shè)備（占Gov.uk的流量的40%）。

突出的面包屑讓用戶對當(dāng)前所處位置更清楚，在頁面里面的到子頁面的導(dǎo)航讓下一步要干啥顯而易見。最重要的是，向我呈現(xiàn)出相比導(dǎo)航更強調(diào)內(nèi)容。

不過，這種方法也有自身的缺陷，完全依賴面包屑和頁面里的子頁面鏈接，用戶只有這點關(guān)于當(dāng)前位置的信息。他們會無法感知當(dāng)前頁面的同級和網(wǎng)站的全部模樣。（例如他們無法知曉頂層菜單內(nèi)容）如果用戶只是想完成一個特定的任務(wù)這將不是問題，而且通過同一位置的全部內(nèi)容關(guān)聯(lián)起來，網(wǎng)站也滿足這個任務(wù)需要。然而，當(dāng)用戶在做一個綜合研究模型或當(dāng)任務(wù)有關(guān)的內(nèi)容已經(jīng)分散到多個頁面時，這種方式就要讓人崩潰了。崩潰是由于面包屑導(dǎo)航需要用戶菜單層級里上上下下所致。這里沒辦法在菜單間跳躍。

幸運的是，還有一種混合方案，用面包屑導(dǎo)航做主導(dǎo)航工具，輔以傳統(tǒng)導(dǎo)航增強。

我更傾向的方案

方案靈感來自于GEL出臺前的BBC體育站。BBC垂直折疊傳統(tǒng)的面包屑，而非水平鋪展。在每個面包屑列表尾部，當(dāng)前頁面的子頁面也被展示出來。當(dāng)你到達(dá)樹的底部時，導(dǎo)航會繼續(xù)顯示當(dāng)前頁面的同級內(nèi)容而不是子內(nèi)容。

老的BBC體育站用垂直的面包屑作為主要的導(dǎo)航工具。當(dāng)用戶進(jìn)入足球或其他全部運動的菜單。Photo by:i.e. the siblings

這種方式把全部導(dǎo)航集中在一個位置，對于當(dāng)前位置，給予用戶清楚的感覺，減少導(dǎo)航的空間占用。但問題還是和Gov.uk一樣。

當(dāng)在布萊頓大學(xué)工作時，我們提議了BBC運動站的方案，但附加一個重要的東西。我們建議常顯頂層導(dǎo)航條。雖然這增加了更多的導(dǎo)航給這個頁面，但給予用戶網(wǎng)站結(jié)構(gòu)的概覽。這讓需要多部分信息的用戶（比如，一個具有前瞻性的學(xué)生，既要研究課程又要了解住宿）能夠這些菜單間快速跳轉(zhuǎn)。

在許多的例子中，這足以建立夠簡單強大的用戶體驗。然而，這也沒能解決需要看到同級頁面的需求。

用面包屑導(dǎo)航顯示同層級

到目前為止，對這個問題我考慮了兩種可行的解決方案。一種運行于同級互相通常有關(guān)聯(lián)的假設(shè)；比如，他們是同個故事的部分。在這個基礎(chǔ)上，簡單附加“下一個”和“上一個”的按鈕（比如在許多博客上可以發(fā)現(xiàn)）可能就足夠構(gòu)成個方案。用戶因而只需要一個點擊就能夠在同級內(nèi)容間切換。
另一個替代方案是讓每層面包屑導(dǎo)航飛出個菜單，從而露出那個選項的同級內(nèi)容。這將讓用戶能夠在網(wǎng)站的任何平層和跨層間跳轉(zhuǎn)，還可能拋棄分離的單獨主導(dǎo)航條的需要。

通過給垂直面包屑導(dǎo)航增加飛出菜單，讓用戶能快速進(jìn)入網(wǎng)站任何層級。不管你用的是垂直或傳統(tǒng)的橫向面包屑導(dǎo)航，這都能使。我沒測試過這個方法，還得考慮下移動設(shè)備。

你還可以給出更多點子

如你所見，綜合型網(wǎng)站導(dǎo)航問題很棘手，看起來也不像只有一個顯然的解決方案。一個讓我寫這篇文章的主要的原因是開放討論這個話題，并希望能拋磚引出更多替代方案。正是因此，我真心感謝你能在評論中給出一些想法，或你發(fā)現(xiàn)的替代性的導(dǎo)航案例。