南順網絡

這5種成熟的(de)導航設計模式，可(kě)以為(wèi)用戶體驗加分

1、帶有流暢動效的(de)下拉導航菜單

下代菜單是UI設計中最常見的(de)設計元素，作為(wèi)一(yī)種擴展性良好的(de)控件，它在被觸發之後擴展顯示更多的(de)選項，呈現更多的(de)內(nèi)容。下拉菜單有許多種不同的(de)衍生樣式，在導航設計中也很常見。許多傳統的(de)導航當中，導航元素的(de)下拉菜單是需要點擊觸發的(de)，而現在更多的(de)設計師會選擇光标懸浮在導航元素上的(de)時候觸發，這樣對于用戶會更加省心省力。

為(wèi)了确保導航的(de)整潔清晰，如(rú)今網頁的(de)主要導航類目通常不會太多，控制在4~ 6 個選項，而下拉菜單則用來承載二級導航元素，這樣就節省了空間，也讓信息層級更加清晰。

這種設計模式對于用戶而言并不陌生，浏覽起來也頗為(wèi)方便，對于多層級、大量選項的(de)導航需求而言，它正好可(kě)以應對。值得注意的(de)是，光标懸浮觸發下拉菜單的(de)時候，展現的(de)動效要足夠的(de)微妙，降低(dī)用戶打開的(de)突兀感，這樣會讓體驗更加優秀。

2、漢堡菜單+側邊欄

漢堡菜單加上彈出式的(de)側邊欄在iOS和(hé) Android 平台上都是極為(wèi)常見的(de)導航設計模式。雖然有數據表明，漢堡菜單和(hé)默認隐藏的(de)側邊欄導航在打開率上并不如(rú)常見的(de)顯性導航，但是它在體驗上有獨特的(de)優勢，讓整個界面更加簡約、整潔，幹擾性更小。用戶點擊漢堡菜單，側邊欄導航從側面滑出顯示，用戶可(kě)選擇他們想要點擊的(de)選項。

漢堡菜單和(hé)側邊欄的(de)搭配特别适用于響應式的(de)網頁設計，例如(rú)Android 平台的(de) Gmail 官方應用，YouTube 和(hé) Facebook，均是沿用了這樣的(de)設計。

隐藏式的(de)側邊欄導航，在很大程度上讓用戶更加專注于主要的(de)界面內(nèi)容，讓界面更加整潔。雖然打開率不如(rú)顯性導航，但是在很多情況下，這種隐藏性的(de)設計更符合實際需求。

3、懸浮固定網頁導航菜單

懸浮固定的(de)導航菜單在越來越多的(de)網頁設計中出現，當用戶在滾動頁面向下浏覽的(de)時候，懸浮固定導航在頁面頂部懸浮不動，随着用戶浏覽，它們一(yī)直都可(kě)見，用戶無需滾動到頂部就可(kě)以點擊導航跳轉。

目前，懸浮固定導航菜單已經成為(wèi)常見的(de)導航設計手法，電商、産品類的(de)網站，多會選擇這樣的(de)導航設計，便于用戶快速跳轉。這種導航設計的(de)優勢在于快速、便捷，用戶對于在網站不同的(de)頁面間跳轉的(de)需求比較大，那麽這樣的(de)設計能夠省去(qù)很多麻煩。根據 Akamai 和(hé) Gomez.com 的(de)調研，79%的(de)線上購物的(de)用戶，在遭遇糟糕的(de)浏覽和(hé)導航體驗之後，會一(yī)去(qù)不複返，由此可(kě)見，便捷的(de)導航是多麽重要。

4、深度定制的(de)超大導航菜單

此處我們所說的(de)深度定制的(de)超大導航菜單，更接近選項卡的(de)設計，它們大多分為(wèi) 2 個層級，不同的(de)選項被組織到不同的(de)選項卡當中，選項卡中所承載的(de)導航選項相比于下拉菜單更大，設計也更加視(shì)覺化，更易于點擊選取。有的(de)選項當中甚至會包含文本和(hé)說明，便于用戶進行選擇。

這種超大導航菜單當中的(de)子(zǐ)選項的(de)尺寸足夠大，視(shì)覺化設計也足夠突出，可(kě)見性極強，用戶很難選錯。

超大導航菜單所能容納的(de)導航條目相對更多、更加視(shì)覺化，和(hé)開頭所說的(de)下拉菜單導航類似，光标懸浮在标簽頁上的(de)時候，自(zì)動顯示下面的(de)選項。根據 NNGroup 的(de)研究，這類導航當中，導航菜單越大，越受歡迎。

這種導航菜單适合對可(kě)訪問性要求高(gāo)的(de)網頁，對于有視(shì)力障礙和(hé)進階用戶都更為(wèi)友好。另外一(yī)方面，這種導航還為(wèi)設計師提供了更多發揮的(de)空間。

5、響應式卡片栅格導航

響應式的(de)設計就不必贅述，但是卡片栅格式的(de)導航無疑是從移動端開始流行的(de)導航模式。在這裏，導航選項被設計成為(wèi)小卡片，置于導航欄的(de)栅格當中，當屏幕尺寸發生改變的(de)時候，導航中的(de)小卡片會随着自(zì)适應的(de)栅格而重新排列，以匹配整個布局。這種設計不僅高(gāo)度可(kě)視(shì)化，而且可(kě)以根據主題風格，進行深度的(de)定制。

這種導航當中，各個選項不僅便于光标點擊，而且在移動端上，更加适合手指點擊，可(kě)以說是跨平台響應式設計的(de)首選。許多網站目前都采用了這樣的(de)導航設計，比如(rú) Pinterest 和(hé)著名的(de)音樂(yuè)服務 Spotify。

編輯:--ns868