巨型菜單與用戶體驗

使用巨型菜單的主要原則應該能解答一個簡單的問題：

巨型菜單能讓用戶更輕鬆地瀏覽我的網(wǎng)站嗎？

你不應該僅僅因為它們是最新潮的東西就添加一個。在你的網(wǎng)站上添加巨型菜單應該考慮到用戶體驗 (UX)。如果你的巨型菜單能讓導航過程更流暢、更直觀，那就添加一個。如果不是，或者你只需要菜單中很少的項目，那就堅持使用常規(guī)的下拉菜單。

在決定是否使用巨型菜單時，你可能還想問自己另一個問題：

巨型菜單能否幫助我的網(wǎng)站實現(xiàn)其目標？

你可能認為這是一個模糊的問題，很難回答，但網(wǎng)站設計和內(nèi)容的所有方面都應該與你的網(wǎng)站試圖實現(xiàn)的目標相關(guān)聯(lián)。這可能是以下幾種情況之一：

• 在線銷售產(chǎn)品
• 鼓勵人們聯(lián)繫你購買你的服務
• 發(fā)展追隨者
• 推廣慈善機構(gòu)
• 創(chuàng)建社區(qū)
• 獲取訂閱者
• 銷售活動門票

我相信網(wǎng)站可能還有更多目標，但這些是最常見的一些。了解你的目標將幫助你準確地知道你希望用戶訪問網(wǎng)站中的哪些頁面以實現(xiàn)你的目標。

因此，如果你希望人們在線購買產(chǎn)品，並且你擁有一個大型且複雜的商店，巨型菜單很可能是最佳選擇。但是，如果你只有一個非常具體的商品或服務，並且你希望將人們引導到該商品或服務的銷售頁面，那麼巨型菜單可能會分散注意力。

在你決定是否添加巨型菜單之前，花些時間考慮一下你希望你的網(wǎng)站實現(xiàn)什麼目標，你希望鼓勵訪問者去網(wǎng)站的哪個位置，以及什麼樣的導航將鼓勵他們這樣做。

下面是一些巨型菜單可能增強你的網(wǎng)站的具體示例。

何時使用巨型菜單

讓我們來看一些巨型菜單作為網(wǎng)站的有用補充的情況。

1. 當用戶期望使用它時

如果你的網(wǎng)站是一個零售網(wǎng)站，那麼用戶將習慣於看到巨型菜單並使用它們來瀏覽商店的各個部門。

例如，下面顯示的 John Lewis 網(wǎng)站為商店的每個主要部分使用不同的巨型菜單。下面的是女裝部分：

人們習慣於在大型百貨商店的網(wǎng)站上使用巨型菜單，並且不會感到困惑。例如，如果我訪問該網(wǎng)站尋找一件連衣裙，我可以輕鬆地通過一次點擊進入該網(wǎng)站的相應部分。

2. 當下拉菜單太大時

在某些情況下，下拉菜單或一系列下拉菜單將包含如此多的選項，以至於會降低用戶體驗。

Jakob Nielsen 和 Angie Li 進行的一項研究表明，對於大型導航菜單，與下拉菜單相比，巨型菜單增強了用戶體驗。這是因為包含大量內(nèi)容的下拉菜單將要求用戶向下滾動，有時需要向下滾動然後再次向上滾動。這需要更長的時間，會給短期記憶帶來更大的壓力，並且可能會令人困惑。

因此，如果你的網(wǎng)站需要在導航菜單中包含許多元素，巨型菜單很可能會增強用戶體驗。但是，請確保如果你確實使用了一個巨型菜單，你以一種對用戶直觀的方式來構(gòu)建它，並且你使用諸如顏色、文本效果和字體等設計提示來使其易於瀏覽。

下面的 Game 網(wǎng)站是巨型菜單系列的一個很好的例子，每個菜單都與網(wǎng)站的一個部分相關(guān)。這些菜單使用了間距和文本效果（如粗體文本和背景）來使菜單直觀且易於導航。

### 3. 當菜單的設計增強網(wǎng)站時

有時，你有機會向你的網(wǎng)站添加不僅僅是文本鏈接的內(nèi)容。

下面顯示的 Moleskine 網(wǎng)站有一個與眾不同的巨型菜單。除了文本鏈接外，它還有一些關(guān)鍵產(chǎn)品的照片，這些照片與覆蓋在它們上面的文本一起充當鏈接。

這鼓勵訪問者訪問這些頁面，並使巨型菜單不僅僅是網(wǎng)站的功能方面——它增強了設計並有助於實現(xiàn)銷售目標。

何時不使用巨型菜單

有時你不應該使用巨型菜單。以下是一些示例。

1. 當你沒有很多鏈接時

如果你的網(wǎng)站沒有數(shù)百個頁面，那麼巨型菜單將顯得多餘。對於普通的小型企業(yè)網(wǎng)站或博客，巨型菜單只會讓訪問者感到困惑——而且它看起來也會很空。

Envato Tuts 網(wǎng)站結(jié)合使用了巨型菜單和普通下拉菜單。對於網(wǎng)站中鏈接不多的部分，普通下拉菜單可以完成任務，並且覆蓋的頁面較少：

### 2. 當你的主頁只是鏈接時

如果你的主頁只是一頁鏈接到子頁面的頁面，那麼你也不需要巨型菜單。

英國政府網(wǎng)站就是一個例子，它的主頁是一頁全是鏈接的頁面：

一旦你進一步導航到網(wǎng)站，就會有一個可以展開的左側(cè)導航菜單：

這也是在用戶可能不期望使用巨型菜單的環(huán)境中不使用巨型菜單的一個很好的例子。例如，在公共部門網(wǎng)站中，巨型菜單不如在零售網(wǎng)站中常見。

3. 當你希望將訪問者引導到特定頁面時

有時你的網(wǎng)站的設計是為了銷售一兩種產(chǎn)品或服務，或者鼓勵註冊郵件列表。

如果是這種情況，你可能在主頁上有一個橫幅，將訪問者引導到一個登錄頁面。

在這種情況下，你希望導航保持最少。巨型菜單會給訪問者提供如此多的選擇，以至於他們訪問你希望他們訪問的頁面的可能性會大大降低。因此，請將導航保持在最低限度，並專注於將訪問者引導到你的登錄頁面。

Social Media Examiner 網(wǎng)站就是一個很好的例子?，F(xiàn)在，他們希望訪問者做兩件事中的一件：註冊他們的郵件列表或購買他們會議的門票。橫幅反映了第二點，而佔據(jù)主頁頂部部分的號召性用語反映了第一點。

如果他們給訪問者一個大型的巨型菜單，它會降低他們做這兩件事中任何一件的可能性，因此他們改為保持導航簡單。

### 4. 在移動設備上

在小屏幕上創(chuàng)建易於閱讀的巨型菜單將很困難。為了使其有效，你必須要么使鏈接很小，這意味著人們將無法點擊它們，要么引入滾動。將巨型菜單與滾動相結(jié)合可能會令人困惑，因為很難知道巨型菜單在哪裡結(jié)束以及頁面內(nèi)容在哪裡開始。

在移動設備上，最好使用漢堡菜單：一個直到你點擊其符號才會可見的菜單。它通常被稱為漢堡菜單，因為符號：三條垂直線看起來有點像漢堡包。

上面提到的 John Lewis 網(wǎng)站就有這樣的菜單。點擊符號，菜單選項就會在其下方展開。

在你的網(wǎng)站上添加巨型菜單時需要注意的事項

我們剛剛討論了何時應該以及不應該在你的網(wǎng)站上添加巨型菜單。如果你認為巨型菜單會提高你網(wǎng)站的可用性，那麼是時候了解一些在將巨型菜單添加到你的網(wǎng)站之前值得記住的重要事項了。

鏈接應該井然有序

巨型菜單通常會包含許多鏈接。因此，重要的是鏈接井然有序，並被劃分為適當?shù)牟糠?。這在 John Lewis 網(wǎng)站上的巨型菜單屏幕截圖中很明顯。女性部分下的鏈接進一步被放入不同的易於導航的類別中。

鏈接應該易於閱讀和點擊

你還需要確保巨型菜單中的所有鏈接都易於閱讀和點擊。鏈接之間應該有足夠的間距，以便用戶不會意外點擊他們不想訪問的內(nèi)容。它們應該包含有限的文本，但仍然能夠幫助用戶理解一旦點擊它們將把用戶帶到哪裡。

添加視覺提示以幫助用戶

你可能還想嚮導航菜單添加一些視覺提示，以幫助用戶了解鏈接是如何組織的。例如，箭頭圖標將向用戶指示點擊特定子菜單項將顯示一堆新鏈接?？牲c擊和不可點擊的項目應該很容易區(qū)分。

優(yōu)化性能

巨型菜單複雜且資源密集型。它們需要大量的標記、CSS 和 JavaScript 才能在任何地方都能按預期工作。有些巨型菜單也大量使用圖像。這可能會對菜單以及網(wǎng)站的加載時間產(chǎn)生不利影響。你不會希望你的潛在客戶因等待而感到厭煩，然後轉(zhuǎn)而選擇你的競爭對手。因此，保持巨型菜單的優(yōu)化應該是一個優(yōu)先事項。

為移動設備提供替代方案

正如我們前面討論的那樣，由於屏幕尺寸小，巨型菜單在移動設備上效果不佳。你應該考慮在較小的屏幕上提供另一種導航方式，以保持網(wǎng)站的響應能力。例如，你可以在移動設備上使用漢堡菜單，並且可能在小屏幕上的導航菜單中刪除圖像，只使用基本鏈接。

添加號召性用語按鈕

用戶將經(jīng)常使用你的巨型菜單在網(wǎng)站的一個部分跳轉(zhuǎn)到另一個部分。你可以利用這些知識通過巧妙地在正確的位置添加一些號召性用語或促銷活動來提升用戶參與度。

通過用戶測試改進可用性

對你來說在巨型菜單中看似顯而易見和正確的內(nèi)容，對用戶來說可能並非如此。因此，重要的是你必須持續(xù)對你的巨型菜單進行 A/B 測試，以找出哪種佈局最適合你的情況。

在多個設備上測試巨型菜單

同樣重要的是，你應該在盡可能多的瀏覽器和設備上測試你的巨型菜單。巨型菜單是複雜的 UI 元素，使它們看起來正確可能有點棘手。同時，還要確保巨型菜單中的所有鏈接都正常工作。

向你的網(wǎng)站添加巨型菜單

如果你已經(jīng)決定巨型菜單是你的網(wǎng)站的正確選擇，那麼添加巨型菜單最簡單的方法是通過插件。

CodeCanyon 提供許多可供你選擇的巨型菜單插件。一些最受歡迎的包括：

• UberMenu 是最暢銷的巨型菜單插件。它允許你為你的網(wǎng)站創(chuàng)建完全自定義的巨型菜單。它包括 CSS 選擇器，以幫助你使用字體和文本效果設計一個外觀精美的巨型菜單，並且有多種佈局。
• Mega Main Menu 允許你將各種對像類型放置到你的菜單中。因此，如果你想要像上面的 Moleskine 網(wǎng)站那樣的圖像，這可能會有所幫助。
• Hero Menu 的設計易於使用，並且可以幫助你在幾分鐘內(nèi)啟動並運行巨型菜單，並配有拖放式菜單構(gòu)建器。

有關(guān)創(chuàng)建巨型菜單的更多靈感，你可能想查看 Envato Tuts 上的這些其他帖子：

明智地使用巨型菜單，它們將增強你的網(wǎng)站

巨型菜單可以成為改進網(wǎng)站用戶體驗的好方法。如果你有一個大型網(wǎng)站，有很多鏈接，那麼添加一個巨型菜單將幫助你的用戶進行導航。如果你的網(wǎng)站符合要求，請嘗試今天添加一個巨型菜單。

以上是何時使用（不使用）導航的巨型菜單的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！