巨型菜單與用戶體驗(yàn)

使用巨型菜單的主要原則應(yīng)該能解答一個(gè)簡(jiǎn)單的問題：

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

你不應(yīng)該僅僅因?yàn)樗鼈兪亲钚鲁钡臇|西就添加一個(gè)。在你的網(wǎng)站上添加巨型菜單應(yīng)該考慮到用戶體驗(yàn) (UX)。如果你的巨型菜單能讓導(dǎo)航過程更流暢、更直觀，那就添加一個(gè)。如果不是，或者你只需要菜單中很少的項(xiàng)目，那就堅(jiān)持使用常規(guī)的下拉菜單。

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

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

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

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

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

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

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

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

何時(shí)使用巨型菜單

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

1. 當(dāng)用戶期望使用它時(shí)

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

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

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

2. 當(dāng)下拉菜單太大時(shí)

在某些情況下，下拉菜單或一系列下拉菜單將包含如此多的選項(xiàng)，以至於會(huì)降低用戶體驗(yàn)。

Jakob Nielsen 和 Angie Li 進(jìn)行的一項(xiàng)研究表明，對(duì)於大型導(dǎo)航菜單，與下拉菜單相比，巨型菜單增強(qiáng)了用戶體驗(yàn)。這是因?yàn)榘罅績(jī)?nèi)容的下拉菜單將要求用戶向下滾動(dòng)，有時(shí)需要向下滾動(dòng)然後再次向上滾動(dòng)。這需要更長(zhǎng)的時(shí)間，會(huì)給短期記憶帶來更大的壓力，並且可能會(huì)令人困惑。

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

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

### 3. 當(dāng)菜單的設(shè)計(jì)增強(qiáng)網(wǎng)站時(shí)

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

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

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

何時(shí)不使用巨型菜單

有時(shí)你不應(yīng)該使用巨型菜單。以下是一些示例。

1. 當(dāng)你沒有很多鏈接時(shí)

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

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

### 2. 當(dāng)你的主頁(yè)只是鏈接時(shí)

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

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

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

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

3. 當(dāng)你希望將訪問者引導(dǎo)到特定頁(yè)面時(shí)

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

如果是這種情況，你可能在主頁(yè)上有一個(gè)橫幅，將訪問者引導(dǎo)到一個(gè)登錄頁(yè)面。

在這種情況下，你希望導(dǎo)航保持最少。巨型菜單會(huì)給訪問者提供如此多的選擇，以至於他們?cè)L問你希望他們?cè)L問的頁(yè)面的可能性會(huì)大大降低。因此，請(qǐng)將導(dǎo)航保持在最低限度，並專注於將訪問者引導(dǎo)到你的登錄頁(yè)面。

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

如果他們給訪問者一個(gè)大型的巨型菜單，它會(huì)降低他們做這兩件事中任何一件的可能性，因此他們改為保持導(dǎo)航簡(jiǎn)單。

### 4. 在移動(dòng)設(shè)備上

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

在移動(dòng)設(shè)備上，最好使用漢堡菜單：一個(gè)直到你點(diǎn)擊其符號(hào)才會(huì)可見的菜單。它通常被稱為漢堡菜單，因?yàn)榉?hào)：三條垂直線看起來有點(diǎn)像漢堡包。

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

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

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

鏈接應(yīng)該井然有序

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

鏈接應(yīng)該易於閱讀和點(diǎn)擊

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

添加視覺提示以幫助用戶

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

優(yōu)化性能

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

為移動(dòng)設(shè)備提供替代方案

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

添加號(hào)召性用語(yǔ)按鈕

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

通過用戶測(cè)試改進(jìn)可用性

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

在多個(gè)設(shè)備上測(cè)試巨型菜單

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

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

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

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

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

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

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

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

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