設(shè)計(jì)一個(gè)電子商務(wù)網(wǎng)站或商業(yè)網(wǎng)站，有現(xiàn)成的 CMS 模板可以讓這一切變得非常簡(jiǎn)單——盡管如此，即使我們決定使用一個(gè)，仍然需要注意網(wǎng)站導(dǎo)航。只是如何設(shè)計(jì)網(wǎng)站導(dǎo)航菜單以確保人類和谷歌爬蟲、機(jī)器人或蜘蛛的可用性？

網(wǎng)站導(dǎo)航菜單只是最核心和最重要的導(dǎo)航工具。它的唯一目的是幫助用戶有效地找到他們感興趣的內(nèi)容，并使他們能夠快速輕松地到達(dá)他們想要的站點(diǎn)位置。因此，網(wǎng)站導(dǎo)航菜單首先應(yīng)該簡(jiǎn)單直觀。不幸的是——盡管 UX 規(guī)則成為所有數(shù)字設(shè)計(jì)的框架，不僅是網(wǎng)站，而且菜單仍然被認(rèn)為是網(wǎng)站的可用性基石——令人驚訝的是，它仍然經(jīng)常辜負(fù)用戶的期望。

為了充分利用它，在布置新的網(wǎng)站導(dǎo)航菜單時(shí)，請(qǐng)注意搜索引擎優(yōu)化！做得對(duì)，網(wǎng)站導(dǎo)航菜單可以提升您的 SEO 并更輕松地保護(hù) Google TOP10！它絕對(duì)應(yīng)該是技術(shù) SEO 服務(wù)中最重要的元素之一。?

信息架構(gòu)——絕對(duì)基礎(chǔ)

首先，需要簡(jiǎn)要解釋的是信息架構(gòu)。然而，在網(wǎng)站設(shè)計(jì)的背景下，一個(gè)不同解釋的概念被定義為一種設(shè)計(jì)網(wǎng)站的方法，以便以用戶友好的方式構(gòu)建內(nèi)容 – 以便每個(gè)訪問者都能快速找到他們需要的內(nèi)容。網(wǎng)站信息架構(gòu)包括：

• 清晰的內(nèi)容組織，
• 正確的命名（標(biāo)簽），
• 清晰的導(dǎo)航，
• 一個(gè)用戶友好的搜索引擎
• 最后但并非最不重要的一點(diǎn)——精心設(shè)計(jì)的網(wǎng)站菜單。

IA很強(qiáng)大。如果信息架構(gòu)運(yùn)作良好，網(wǎng)站就會(huì)轉(zhuǎn)換——很簡(jiǎn)單。IA 不僅產(chǎn)生用戶行為響應(yīng)，還允許您創(chuàng)建它。這基本上就是為什么可用性和設(shè)計(jì)驅(qū)動(dòng)的網(wǎng)站建設(shè)是正確的事情，商業(yè)明智。蘋果公司的史蒂夫·喬布斯（Steve Jobs）的話“人們不知道他們想要什么，除非你把它展示給他們”。

谷歌也將信息架構(gòu)視為排名因素。總部確實(shí)證實(shí)，最受歡迎的 TOP10 蛋糕來自那些充滿獨(dú)特、優(yōu)質(zhì)內(nèi)容、組織良好且完全按照用戶喜歡的內(nèi)容提供服務(wù)的網(wǎng)站。這是 UX 對(duì) SEO 影響的又一個(gè)例子。

現(xiàn)在我們明白了為什么正確的信息架構(gòu)如此重要——對(duì)于電子商務(wù)或商業(yè)網(wǎng)站，或任何東西。現(xiàn)在我們可以轉(zhuǎn)到本條目的主要焦點(diǎn)，即網(wǎng)站導(dǎo)航的核心——菜單。

網(wǎng)站菜單設(shè)計(jì)清單

在啟動(dòng)網(wǎng)站菜單設(shè)計(jì)過程時(shí)，請(qǐng)確保遵循以下幾點(diǎn)：

• 首先也是最重要的：澄清您網(wǎng)站的目的。你需要什么——像亞馬遜一樣的大型電子商務(wù)或只有幾頁(yè)的在線名片？確定主要目的基本上決定了網(wǎng)站導(dǎo)航設(shè)計(jì)過程的整個(gè)其余部分。拿個(gè)人博客來說——主菜單會(huì)比較簡(jiǎn)單，鏈接到關(guān)于我、聯(lián)系方式頁(yè)面等等……此外，如果你想要一個(gè)側(cè)邊菜單（顯示你最新或最熱門的條目），它可能是，例如、日歷或按月組織條目的列表 – 但永遠(yuǎn)不要忘記標(biāo)簽或類別等組織工具。但是，為大型電子商務(wù)設(shè)計(jì)導(dǎo)航稍微復(fù)雜一些。對(duì)于這種類型的網(wǎng)站，良好的導(dǎo)航必須包括所有主要類別的細(xì)分，然后是子類別等；清晰是重中之重——客戶以多快的速度找到他或她需要的東西，這一點(diǎn)很重要。
• 其次：設(shè)置頁(yè)面菜單結(jié)構(gòu)。正確設(shè)計(jì)的樹視圖（允許在類別之間進(jìn)行簡(jiǎn)單直觀的轉(zhuǎn)換以及快速查找單個(gè)項(xiàng)目）對(duì)于整個(gè)網(wǎng)站的成功至關(guān)重要。
• 第三：想想你的命名/標(biāo)簽/標(biāo)簽。簡(jiǎn)單勝出——通常最好有一個(gè)“博客”選項(xiàng)卡，它清楚地告訴每個(gè)人它鏈接到一個(gè)商業(yè)博客，而不是嘗試提出“創(chuàng)意”名稱，即“靈感”、“見解”或“知識(shí)”。
• 第四：關(guān)注用戶。總是。整個(gè)設(shè)計(jì)需要以用戶為導(dǎo)向，以使您的網(wǎng)站取得成功——清晰和直觀是最重要的。

基本的網(wǎng)站菜單類型 – 優(yōu)點(diǎn)和缺點(diǎn)

在決定菜單的類型之前，首先要考慮它在布局中的位置。左還是右？朝向頂部，還是與底部對(duì)齊？當(dāng)然，用戶是有習(xí)慣的，但無論其他十億個(gè)因素如何，都沒有也永遠(yuǎn)不會(huì)有一個(gè)每個(gè)用戶都喜歡的理想設(shè)計(jì)。這就是網(wǎng)站目的規(guī)范如此重要的原因。此外，如果您真的想確保您的網(wǎng)站及其導(dǎo)航功能對(duì)用戶友好，請(qǐng)考慮在一個(gè)好的樣本上對(duì)其可用性進(jìn)行研究。一個(gè)好的網(wǎng)站菜單既要與整個(gè)網(wǎng)站保持一致，又要以用戶為導(dǎo)向。

1. 水平標(biāo)簽欄菜單——主要用于較小的頁(yè)面，通常是頁(yè)面頂部的標(biāo)簽，位于內(nèi)容字段的正上方。

https://healthyplanbyann.com/

這種解決方案雖然經(jīng)常被發(fā)現(xiàn)，但既有優(yōu)點(diǎn)也有缺點(diǎn)。清晰度絕對(duì)是一個(gè)優(yōu)勢(shì)。這樣一個(gè)菜單在進(jìn)入網(wǎng)站后立即完全可見的事實(shí)也是如此。此外，它不會(huì)占用太多的內(nèi)容專用空間。看起來也挺自然的。至于缺點(diǎn)：由于插槽數(shù)量有限，它需要在網(wǎng)站啟動(dòng)之前進(jìn)行完善的規(guī)劃——很難用新按鈕來擴(kuò)展它，尤其是當(dāng)不同的顯示設(shè)備啟動(dòng)時(shí)。通常，大約有 6-8 個(gè)插槽。最重要的是，此類菜單中的任何鏈接文本都需要簡(jiǎn)短——最好是一個(gè)單詞。水平菜單既可以用作唯一的導(dǎo)航工具，也可以與例如側(cè)面菜單結(jié)合使用（即用于子類別）。

2. 下拉菜單、飛出菜單、彈出菜單等——這些是水平菜單，但具有各種下拉選項(xiàng)卡子菜單。一種非常流行的解決方案，尤其是在電子商務(wù)中。主要類別沿水平菜單排列，將鼠標(biāo)懸停在它們上方（有時(shí)僅在單擊后）后，帶有子類別的子菜單會(huì)下拉。

H&M專賣店菜單

該解決方案具有標(biāo)準(zhǔn)水平菜單的所有優(yōu)點(diǎn)和缺點(diǎn)。不過，另一個(gè)好處是它們提供的清晰度——所有子類別都清楚地鏈接到它們的主要類別，從而向用戶暗示他們?cè)诰W(wǎng)站中的下落。最重要的是，它是一個(gè)非常直觀的解決方案——如果設(shè)計(jì)得當(dāng)，頁(yè)面和頁(yè)面背后的邏輯對(duì)任何人來說都是顯而易見的。至于缺點(diǎn)——這個(gè)菜單可能會(huì)占用大量的主頁(yè)面布局空間，將所有內(nèi)容向下推送，但是，使用下拉子菜單，這通常不是問題。下拉菜單適用于 2 級(jí)導(dǎo)航結(jié)構(gòu)；“子”類別越多，菜單就越不清晰。

3. 側(cè)邊菜單——一個(gè)列表，通常將一個(gè)類別置于另一個(gè)類別之下。有時(shí)，子類別列表會(huì)橫向擴(kuò)展（這不是一個(gè)完美的解決方案，順便說一句 – 需要近乎完美的光標(biāo)精度才能單擊正確的鏈接，尤其是在多級(jí)菜單中），如圖中的情況。側(cè)邊菜單經(jīng)常出現(xiàn)，尤其是在產(chǎn)品范圍廣泛的電子商務(wù)中。它可以支持頂部菜單，也可以是完全獨(dú)立的元素。它通常位于左側(cè)（因?yàn)槭澜缟洗蠖鄶?shù)國(guó)家的人們從左到右閱讀 – 所以理論上，菜單是第一個(gè)偶然發(fā)現(xiàn)的）。除非您的重點(diǎn)是讓用戶首先閱讀內(nèi)容，然后才查看菜單——然后，將其與右邊緣對(duì)齊。

如您所見，以用戶為中心的設(shè)計(jì)需要具有文化敏感性；始終了解您的目標(biāo)用戶——雖然大多數(shù)語(yǔ)言都是左旋右旋的——從左到右閱讀，其他語(yǔ)言是右旋的——所以，否則；即使是瀏覽網(wǎng)站時(shí)的眼球運(yùn)動(dòng)也是相對(duì)文化的——對(duì)于一些用戶來說，外觀是第一位的，然后才轉(zhuǎn)向類別選擇——這里的因素是習(xí)慣、消費(fèi)主義等）。

側(cè)邊菜單 https://www.infibeam.com

側(cè)面菜單允許按類別構(gòu)建各種產(chǎn)品 – 長(zhǎng)列表鏈接在其中看起來會(huì)很好。此外，當(dāng)需要多級(jí)導(dǎo)航時(shí)，這是一個(gè)很好的解決方案，仍然可以清楚地顯示類別和子類別之間的關(guān)系。長(zhǎng)名稱也不成問題——類別名稱甚至可以有幾個(gè)單詞。此外，這樣的菜單是可擴(kuò)展的——添加新類別不是問題——因此，如果你愿意提供擴(kuò)展服務(wù)，這似乎是一個(gè)不錯(cuò)的選擇。

側(cè)邊菜單的缺點(diǎn)是它經(jīng)常占用大量的網(wǎng)站空間；此外最好清楚地傳達(dá)類別級(jí)別可以進(jìn)一步探索 – 使整個(gè)結(jié)構(gòu)盡可能清晰。

這當(dāng)然是一個(gè)非常普遍的解決方案。通常，它補(bǔ)充了頂部菜單。例如，頂部欄列出了主要類別，鏈接到頁(yè)面，還提供帶有子類別的側(cè)邊菜單 – 所有這些都是為了更流暢的網(wǎng)站導(dǎo)航。

https://clockshops.com/

上圖中的電子商務(wù)使用頂部和側(cè)邊菜單，以及所謂的面包屑——指向之前訪問過的頁(yè)面的鏈接。這使得網(wǎng)站導(dǎo)航更加直觀。

4. 漢堡菜單——一個(gè)展開的圖標(biāo)，默認(rèn)隱藏菜單。主要用于移動(dòng)應(yīng)用程序、網(wǎng)站和門戶；Facebook 在 2010 年出名，現(xiàn)在已經(jīng)放棄了這種解決方案。“漢堡包”，因?yàn)樗雌饋硐褚粋€(gè)?

然而，圖標(biāo)本身可以追溯到 80 年代，由 Norm Cox（頂級(jí)設(shè)計(jì)公司 Cox & Hall 的聯(lián)合創(chuàng)始人）為施樂設(shè)計(jì)。

這種類型的菜單在所有移動(dòng)設(shè)備上都特別適用——應(yīng)用程序或網(wǎng)站，然而，也經(jīng)常被用作桌面解決方案。它符合最新的視覺設(shè)計(jì)趨勢(shì)。畢竟，極簡(jiǎn)主義統(tǒng)治著全世界的設(shè)計(jì)。一些人反對(duì)漢堡菜單，聲稱該解決方案不夠清晰——至少不是對(duì)所有人都適用。

概括

當(dāng)然，網(wǎng)站導(dǎo)航菜單的類型更多——上面的列表只是皮毛而已。要為您的業(yè)務(wù)設(shè)計(jì)完美的菜單，請(qǐng)注意黃金用戶體驗(yàn)規(guī)則。畢竟，設(shè)計(jì)不佳的菜單會(huì)使您的轉(zhuǎn)化率下降 – 優(yōu)質(zhì)的設(shè)計(jì)和精心的計(jì)劃會(huì)帶來回報(bào)。

如上所述，確保給定菜單類型是否有效的最佳方法是進(jìn)行專業(yè)的用戶偏好研究，探索目標(biāo)群體用戶的直觀性和清晰度。但是，永遠(yuǎn)不要忘記 SEO——以及良好的類別命名——嘗試平衡人類用戶和搜索引擎爬蟲的期望。