網(wǎng)站導航設(shè)計模式
新聞 2019-04-20編輯：深圳網(wǎng)站建設(shè)閱讀（）標簽：
網(wǎng)站導航設(shè)計模式
可靠的導航設(shè)計需要幫助用戶達成目標，找到內(nèi)容，提升頁面的轉(zhuǎn)化率。設(shè)計不合理的導航對于用戶體驗是災難性的，下面是小編整理的
網(wǎng)站導航設(shè)計模式，僅供參考。
1、帶有流暢動效的下拉導航菜單
下代菜單是UI設(shè)計中最常見的設(shè)計元素，作為一種擴展性良好的控件，它在被觸發(fā)之后擴展顯示更多的選項，呈現(xiàn)更多的內(nèi)容。下拉菜單有許多種不同的衍生樣式，在導航設(shè)計中也很常見。許多傳統(tǒng)的導航當中，導航元素的下拉菜單是需要點擊觸發(fā)的，而現(xiàn)在更多的設(shè)計師會選擇光標懸浮在導航元素上的時候觸發(fā)，這樣對于用戶會更加省心省力。
為了確保導航的整潔清晰，如今網(wǎng)頁的主要導航類目通常不會太多，控制在4~6個選項，而下拉菜單則用來承載二級導航元素，這樣就節(jié)省了空間，也讓信息層級更加清晰。
這種設(shè)計模式對于用戶而言并不陌生，瀏覽起來也頗為方便，對于多層級、大量選項的導航需求而言，它正好可以應(yīng)對。值得注意的是，光標懸浮觸發(fā)下拉菜單的時候，展現(xiàn)的動效要足夠的微妙，降低用戶打開的突兀感，這樣會讓體驗更加優(yōu)秀。
2、漢堡菜單+側(cè)邊欄
漢堡菜單加上彈出式的側(cè)邊欄在iOS和 Android 平臺上都是極為常見的導航設(shè)計模式。雖然有數(shù)據(jù)表明，漢堡菜單和默認隱藏的側(cè)邊欄導航在打開率上并不如常見的顯性導航，但是它在體驗上有獨特的優(yōu)勢，讓整個界面更加簡約、整潔，干擾性更小。用戶點擊漢堡菜單，側(cè)邊欄導航從側(cè)面滑出顯示，用戶可選擇他們想要點擊的選項。
漢堡菜單和側(cè)邊欄的搭配特別適用于響應(yīng)式的網(wǎng)頁設(shè)計，例如Android 平臺的 Gmail 官方應(yīng)用，YouTube 和 Facebook，均是沿用了這樣的設(shè)計。
隱藏式的側(cè)邊欄導航，在很大程度上讓用戶更加專注于主要的界面內(nèi)容，讓界面更加整潔。雖然打開率不如顯性導航，但是在很多情況下，這種隱藏性的設(shè)計更符合實際需求。
3、懸浮固定網(wǎng)頁導航菜單
懸浮固定的導航菜單在越來越多的網(wǎng)頁設(shè)計中出現(xiàn)，當用戶在滾動頁面向下瀏覽的時候，懸浮固定導航在頁面頂部懸浮不動，隨著用戶瀏覽，它們一直都可見，用戶無需滾動到頂部就可以點擊導航跳轉(zhuǎn)。
目前，懸浮固定導航菜單已經(jīng)成為常見的導航設(shè)計手法，電商、產(chǎn)品類的網(wǎng)站，多會選擇這樣的導航設(shè)計，便于用戶快速跳轉(zhuǎn)。這種導航設(shè)計的優(yōu)勢在于快速、便捷，用戶對于在網(wǎng)站不同的頁面間跳轉(zhuǎn)的需求比較大，那么這樣的設(shè)計能夠省去很多麻煩。根據(jù) Akamai 和 Gomez.com 的調(diào)研，79%的線上購物的用戶，在遭遇糟糕的瀏覽和導航體驗之后，會一去不復返，由此可見，便捷的導航是多么重要。
4、深度定制的超大導航菜單
此處我們所說的深度定制的超大導航菜單，更接近選項卡的設(shè)計，它們大多分為2個層級，不同的選項被組織到不同的選項卡當中，選項卡中所承載的導航選項相比于下拉菜單更大，設(shè)計也更加視覺化，更易于點擊選取。有的選項當中甚至會包含文本和說明，便于用戶進行選擇。
這種超大導航菜單當中的子選項的尺寸足夠大，視覺化設(shè)計也足夠突出，可見性極強，用戶很難選錯。
超大導航菜單所能容納的導航條目相對更多、更加視覺化，和開頭所說的下拉菜單導航類似，光標懸浮在標簽頁上的時候，自動顯示下面的選項。根據(jù) NNGroup 的研究，這類導航當中，導航菜單越大，越受歡迎。
這種導航菜單適合對可訪問性要求高的網(wǎng)頁，對于有視力障礙和進階用戶都更為友好。另外一方面，這種導航還為設(shè)計師提供了更多發(fā)揮的空間。
5、響應(yīng)式卡片柵格導航
響應(yīng)式的設(shè)計就不必贅述，但是卡片柵格式的導航無疑是從移動端開始流行的導航模式。在這里，導航選項被設(shè)計成為小卡片，置于導航欄的柵格當中，當屏幕尺寸發(fā)生改變的時候，導航中的小卡片會隨著自適應(yīng)的柵格而重新排列，以匹配整個布局。這種設(shè)計不僅高度可視化，而且可以根據(jù)主題風格，進行深度的定制。
