導(dǎo)航是良好用戶體驗(yàn)（UX）的關(guān)鍵。用戶依靠直觀的數(shù)字導(dǎo)航來查找有用的信息，探索品牌故事并做出購(gòu)買決策。

令人困惑的導(dǎo)航足以讓用戶退回或退出。隨著UX專家更多地了解消費(fèi)者如何與數(shù)字內(nèi)容互動(dòng)，設(shè)計(jì)師混合搭配導(dǎo)航元素的方式越來越多。為移動(dòng)和桌面站點(diǎn)選擇正確的導(dǎo)航設(shè)置可以改變您的用戶體驗(yàn)并促進(jìn)業(yè)務(wù)發(fā)展。

您的Web Designer工具箱

無(wú)限下載：500,000多個(gè)Web模板，圖標(biāo)集，主題和設(shè)計(jì)資產(chǎn)

現(xiàn)在下載

一致性是王

如果所有導(dǎo)航專家都同意一件事，那就是一致性的重要性。導(dǎo)航需要在整個(gè)站點(diǎn)中保持一致，并且每頁(yè)都可用。

導(dǎo)航菜單不一致會(huì)導(dǎo)致混淆。用戶不必搜索隱藏的導(dǎo)航菜單或嘗試太難找到所需的頁(yè)面。無(wú)論您選擇何種類型的導(dǎo)航設(shè)置，都必須優(yōu)先考慮一致性。通過關(guān)注幾個(gè)主要方面來做到這一點(diǎn)：

菜單應(yīng)該出現(xiàn)在每個(gè)頁(yè)面上。不要讓用戶擱淺在沒有出路的頁(yè)面上。該菜單應(yīng)該在您網(wǎng)站的每個(gè)頁(yè)面上都可用。如果菜單選項(xiàng)有多個(gè)級(jí)別，請(qǐng)保留面包屑以便訪問者可以看到他們?cè)诰W(wǎng)站上的位置的層次結(jié)構(gòu)。當(dāng)用戶通過外部源查找頁(yè)面時(shí)，面包屑尤為重要。

使每個(gè)菜單項(xiàng)以相同的方式作出反應(yīng)。如果“關(guān)于”選項(xiàng)卡下拉到不同選項(xiàng)的列表中，則其他選項(xiàng)卡也應(yīng)如此。如果其中一個(gè)是指向著陸頁(yè)的鏈接，請(qǐng)同時(shí)創(chuàng)建其他鏈接。導(dǎo)航菜單中的每個(gè)項(xiàng)目應(yīng)以與用戶觸摸（或單擊）相同的方式作出反應(yīng)。

元素應(yīng)該是直觀的。用戶已經(jīng)將某些網(wǎng)站設(shè)計(jì)元素與意義聯(lián)系起來。例如，通過菜單項(xiàng)放置箭頭通常意味著存在與項(xiàng)目一起的下拉列表。創(chuàng)建幫助用戶了解導(dǎo)航期望的元素，并在整個(gè)網(wǎng)站中保持相同。

尼爾森諾曼集團(tuán)表示，在記憶方面，識(shí)別比召回更容易。大腦依靠提示激活內(nèi)存并檢索信息。

通過允許站點(diǎn)訪問者依賴識(shí)別而不是回想起來，使站點(diǎn)訪問者輕松導(dǎo)航。您越一致，越好的訪問者就會(huì)認(rèn)識(shí)到您網(wǎng)站上每個(gè)元素背后的含義。這將導(dǎo)致更快的全方位網(wǎng)站瀏覽 - 以及更快樂的用戶。

清晰，簡(jiǎn)潔的標(biāo)簽

導(dǎo)航菜單不是讓您的內(nèi)容變得聰明的地方。用戶依靠菜單來繞過您的網(wǎng)站。菜單的目的是提供方向。它不需要招待或震驚網(wǎng)站訪問者。

保持菜單標(biāo)簽簡(jiǎn)潔，清晰，簡(jiǎn)潔。出于某種原因，大多數(shù)網(wǎng)站使用相同的單字標(biāo)簽。用戶熟悉Home，Products，About，Blog和Contact等選項(xiàng)。他們知道標(biāo)簽的含義以及選擇選項(xiàng)時(shí)會(huì)發(fā)生什么。

漢堡菜單的替代品

還記得2014年針對(duì)移動(dòng)網(wǎng)站設(shè)計(jì)的精彩漢堡菜單辯論嗎？它正在進(jìn)行中，現(xiàn)代網(wǎng)站設(shè)計(jì)師在問題的任何一方都會(huì)遇到問題。

許多移動(dòng)網(wǎng)站仍然使用可信賴的漢堡包，因?yàn)檫@是大多數(shù)移動(dòng)用戶所尋求的?！皾h堡包”是由三條堆疊的水平線組成的菜單圖標(biāo)。設(shè)計(jì)師最初使用它是因?yàn)樗梢栽谳^小的移動(dòng)屏幕上節(jié)省空間。今天許多設(shè)計(jì)師正在嘗試漢堡包的替代品，例如：

標(biāo)簽

可滾動(dòng)導(dǎo)航

底部導(dǎo)航

“顯示更多”選項(xiàng)

帶標(biāo)題的內(nèi)聯(lián)列表

分段控制

漢堡包菜單的替代品在許多網(wǎng)站上取得了巨大成功，特別是那些選項(xiàng)少的網(wǎng)站。許多設(shè)計(jì)師的共識(shí)是，如果你可以顯示導(dǎo)航，顯示它。

可滾動(dòng)導(dǎo)航菜單示例

有時(shí)這是不可能的，因?yàn)檩^小的移動(dòng)屏幕或幾個(gè)菜單選項(xiàng)。在這些情況下，逐步披露是可以接受的。您的菜單選擇取決于您需要擠入的內(nèi)容量和網(wǎng)站的目標(biāo)。例如，較年長(zhǎng)的觀眾可能會(huì)欣賞永久可見的菜單，而不是漢堡包。嘗試不同的風(fēng)格，看看是否增加收入。

顯示更多選項(xiàng)示例

易于查找的搜索欄

設(shè)計(jì)功能菜單不僅僅涉及清晰度和一致性 - 它還涉及最大化網(wǎng)站的可用性。

YouTube搜索欄

可以提高可用性的一個(gè)功能是搜索圖標(biāo)（通常是放大鏡）。如果用戶查找搜索欄，則他們已經(jīng)丟失到足以需要直接搜索功能。隱藏搜索選項(xiàng) - 或者完全不考慮搜索選項(xiàng)，不要讓事情變得更糟。

紐約時(shí)報(bào)搜索欄

用戶可以在搜索欄丟失時(shí)找到出路，也可以為具有特定任務(wù)的用戶提供更直接的信息路徑。拿走搜索欄會(huì)導(dǎo)致沮喪的訪問者決定尋找其他地方，而不是搜索他們想要的網(wǎng)站。

將搜索欄放在每個(gè)頁(yè)面清晰可見的位置。大多數(shù)用戶都會(huì)在搜索選項(xiàng)的右上角查看，或者至少在菜單附近的某個(gè)位置查找。

旋轉(zhuǎn)木馬菜單

輪播菜單在博客類網(wǎng)站和發(fā)布定期更新和新聞報(bào)道的網(wǎng)站上越來越受歡迎。

“輪播”指的是頁(yè)面頂部的菜單，其中顯示了網(wǎng)站發(fā)布的最新文章。許多新聞網(wǎng)站和博客在旋轉(zhuǎn)木馬中使用縮略圖來吸引眼球并使其更容易選擇文章。

Vogue Carousel菜單

旋轉(zhuǎn)木馬選項(xiàng)卡還具有文章的標(biāo)題，和/或內(nèi)部?jī)?nèi)容的簡(jiǎn)要說明。它基本上用作帶有可點(diǎn)擊鏈接的幻燈片，供用戶輕松瀏覽。輪播菜單非常適合展示最新內(nèi)容，并且可以讓用戶在您的網(wǎng)站上保留一些他們可能想要在普通網(wǎng)站上閱讀的其他有趣文章。

巨型菜單

另一個(gè)席卷導(dǎo)航設(shè)計(jì)的趨勢(shì)是大型菜單。顧名思義，這個(gè)菜單是加號(hào)，垂直和水平占據(jù)頁(yè)面。這些菜單在雜志式博客中很受歡迎，但更多品牌正在使用它們來制作菜單。

超級(jí)菜單非常適合具有多級(jí)導(dǎo)航的網(wǎng)站。如果需要，可以使用圖像和縮略圖，而不是將用戶與十幾個(gè)下拉菜單混淆，將菜單展開到頁(yè)面的一半，并清楚地排列選項(xiàng)。

大型菜單也非常適合頻繁發(fā)布文章的網(wǎng)站，因?yàn)樵O(shè)計(jì)師可以使用不同的列來顯示最近的故事和相關(guān)鏈接。

超級(jí)菜單示例

固定導(dǎo)航欄

由于社交媒體和移動(dòng)網(wǎng)站，無(wú)限滾動(dòng)風(fēng)格的網(wǎng)站開始流行。Facebook等先鋒使用這種格式允許讀者無(wú)限滾動(dòng)，每次用戶到達(dá)頁(yè)面底部時(shí)不斷上傳新信息。

使用拇指輕松滾動(dòng)，使其成為移動(dòng)用戶的理想選擇。有了這個(gè)網(wǎng)站風(fēng)格出現(xiàn)了導(dǎo)航問題 - 它應(yīng)該保持在頁(yè)面頂部還是以某種方式保持可見？答案來自固定的導(dǎo)航菜單。

固定導(dǎo)航示例

當(dāng)用戶向下滾動(dòng)頁(yè)面時(shí)，固定的導(dǎo)航菜單保持不變。這種類型的菜單也稱為粘性導(dǎo)航，并且最常見的是作為頂部導(dǎo)航欄。

菜單始終存在，供用戶更改頁(yè)面。Facebook使用這種格式允許用戶在滾動(dòng)瀏覽新聞源時(shí)查看他們的個(gè)人資料或查看通知。如果您的網(wǎng)站具有社交感覺，或者該網(wǎng)站處理大量數(shù)據(jù)，則帶有固定導(dǎo)航欄的無(wú)限滾動(dòng)可能是合適的。

毫無(wú)疑問，網(wǎng)站的導(dǎo)航會(huì)影響用戶體驗(yàn)。用戶會(huì)有積極的體驗(yàn)，還是消極的體驗(yàn)？使用移動(dòng)和桌面設(shè)計(jì)的最新趨勢(shì)優(yōu)化您的導(dǎo)航設(shè)置可以帶來更好的全方位用戶體驗(yàn) - 以及更好的業(yè)務(wù)成功。請(qǐng)考慮更新您的網(wǎng)站，以包含一些最新的網(wǎng)站導(dǎo)航最佳做法。