對界面友好的導航秘訣是從導航菜單開始，設計導航的菜單應該由于設計過程。

可訪問的導航會引導用戶通過界面中的信息流，幫助他們完成任務，提升你的用戶體驗和推動你的網(wǎng)頁和移動端的轉(zhuǎn)換。同樣，如果用戶無法找到所在頁面或應用程序，該頁面或應用程序就是無用的，糟糕的導航設計使用戶體驗變得糟糕，導致用戶退出轉(zhuǎn)換渠道。因此，設計不當或忽視用戶界面導航會對你的結(jié)果造成災難性影響，這也并不奇怪。

對界面友好的導航秘訣是從導航菜單開始。為了讓用戶在你的網(wǎng)站或應用上從A點到B點，他們需要一張地圖來指引他們。設計導航菜單應優(yōu)先于設計過程。在開發(fā)之前對導航菜單進行原型化將為你提供從開始實時可視化和交互設計所需的資源。

我們來看看5個常見的界面模式。

下拉菜單，用于平滑的網(wǎng)站導航設計

下拉菜單具有用戶可以選擇的幾個值，并從那里被帶到網(wǎng)站的另一個區(qū)域，是一個可擴展的界面導航。下拉菜單是一種網(wǎng)站導航設計，可將用戶傳輸?shù)骄W(wǎng)站中一個新的位置，并根據(jù)所選的最后一個選項執(zhí)行操作命令菜單。

什么時候設計下拉菜單

當你有很多顯示選項并希望節(jié)省空間時，下拉菜單是瀏覽網(wǎng)站的一個不錯的方法。

熟悉易于掃描，一個好的下拉菜單可以提高點擊率。但它需要一個時間和地點，所以想想你的用戶體驗模式。菜單需要包含足夠的導航值，以便用戶知道怎樣與它進行交互（例如，單擊所選值而不是使用單選按鈕進行雙擊），而不是讓用戶難以掃描菜單列表。明智地使用它，將會為你的用戶體驗和界面設計做出好的改變。

滑動漢堡包移動端菜單

滑動漢堡包菜單或滑動菜單是用于顯示多個鏈接，常見的Android和iOS移動菜單。在“休息”位置，滑動菜單在屏幕中隱藏。通過觸發(fā)漢堡包圖標，用戶可以訪問未覆蓋的導航鏈接。

什么時候使用

滑動漢堡包菜單適用于響應式網(wǎng)頁設計。例如，Anroid的Gmail收件箱的導航抽屜，YouTube和Facebook的界面。

滑動菜單是隱藏導航的理想選擇，例如，清除雜亂的具有大量導航鏈接的移動屏幕。在這里閱讀更多關于滑動菜單的最佳做法。

網(wǎng)頁界面模式的定位菜單

什么是定位菜單

定位菜單也可叫作粘性菜單是一種網(wǎng)頁界面模式，其中標題區(qū)域（菜單，網(wǎng)站標題和標識）在向下滾動時保持可見，頁面內(nèi)容在其下方流動。粘性標題已經(jīng)成為一種網(wǎng)頁界面模式的標準——?Google +和Dropbox都有粘性菜單。

什么時候使用

定位菜單應用于要采取行動的網(wǎng)頁頁面，如零售，電子商務網(wǎng)站。用戶可以在幾秒鐘內(nèi)到達導航選項——使定位菜單非常強大。速度是用戶在瀏覽網(wǎng)站時最重要的。事實上，根據(jù)Akamai and Gomez.com study，79％的網(wǎng)絡購物者如果遇到問題是不會再返回網(wǎng)站。

自定義多欄下拉菜單菜單，用于網(wǎng)頁導航

多欄下拉菜單是用于網(wǎng)站導航的可擴展的多級菜單。它具有二維面板，分為導航選項（選項卡）組，每個選項卡中的所有鏈接都可以一次使用，因此無需滾動。用戶單擊或懸停在選項卡上就可以查看其包含的鏈接。

像下拉菜單一樣，多欄下拉菜單會使用圖標來提供結(jié)構(gòu)和子菜單的可見性。它們還可以包括導航鏈接旁邊的圖像或彩色字體，以將用戶的注意力引導到值得注意的內(nèi)容上。

何時使用

多欄下拉菜單是偉大的儲存空間，它隱藏內(nèi)容，直到用戶將鼠標懸停在菜單欄上，才能顯示所有的導航鏈接。Nielsen Norman Group 研究表明在網(wǎng)頁上顯示的鏈接數(shù)量越多，更受歡迎的多欄下拉菜單就越多。

此菜單最適合可訪問的網(wǎng)頁設計，視覺障礙用戶或高級網(wǎng)絡用戶。它們也受到包含大量不同主題的雜志風格博客的歡迎。

用于響應導航的網(wǎng)格

網(wǎng)格是在網(wǎng)頁和移動端導航中使用的一個導航模式。網(wǎng)格包含一組分割成可擴展和可折疊的塊的圖像。它是另一種高度可視化的結(jié)構(gòu)，允許你將可視化主題和用戶體驗流相關元素組合在一起。

什么時候使用

網(wǎng)格內(nèi)的圖像提供了大量的點擊/點擊目標，使網(wǎng)格成為移動界面導航的理想選擇。它們也用于許多的網(wǎng)頁設計和用于瀏覽視覺內(nèi)容的網(wǎng)站，如圖像共享網(wǎng)站Pinterest和音樂流媒體服務Spotify。

由于它們的邏輯和適應性布局，網(wǎng)格是一個完美的響應式導航！

原文作者：Justinmind

譯者：SKYUI

原文地址：https://uxplanet.org/5-ui-patterns-navigation-that-makes-good-ux-sense-92a65df7485d

本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。