網站導航欄的流行大勢！助你煉成優秀的導航欄設計

03-27

網站導航欄相當於網站的指路牌，起到了重要的導向作用，也是用戶瀏覽網站時必須會用到的一個功能。以前的網站設計師大多把精力放在了頁面排版與圖片美化，如今他們也漸漸意識到，小小的導航欄其實大有文章可作，所以越來越多獨樹一幟的網站設計師捨棄了傳統的頂部導航，在導航欄設計玩出了多種創新花樣。

一、六大爆款

1、側邊導航

側邊導航真的很受網站設計師歡迎，通常分布在頁面的左側，使整體的網頁布局顯得簡約優雅，讓欄目內容一目了然。設計側邊導航時，可以把導航與BANNER融為一體，也可以用與BANNER主色對比強烈的純色進行打底，兩種手法都能給訪客獨特的視覺觀感。網站側邊相對於網站頂部來說，可擴展的空間也更廣，所以當網站需要改版增加欄目內容時，側邊導航會比頂部導航更好調整。

2、底部導航

底部導航稱得上是對用戶瀏覽網站規律的一種挑戰，因為我們都知道導航位於頂部才是符合用戶的閱讀習慣。雖然用戶對底部導航或多或少會有點不適應，但無可否認底部導航確實比頂部導航更具有趣味性，也免去考慮導航與BANNER的相稱性，在設計上可以更自由。如果網站定位是愛新鮮的探索能力較強的年輕群體，選用底部導航能給他們更大的驚喜哦~

3、全屏導航

有沒有想像過一打開網站就是一個巨型的導航，幾乎佔了整個屏幕，那種震撼衝擊真不是開玩笑的。我們常見的網站首頁都是以BANNER為核心的，全屏導航則是將導航作為首頁的主體，是一種非常大膽且前衛的嘗試，設計合理的話，也更方便用戶快捷地切換到不同的頁面。

4、隱藏式導航

隱藏式導航顧名思義，並非真的是沒有了導航，而是把導航隱藏起來。與全屏導航是相反的設計邏輯，不是開門見山地刷足存在感，而是低調地等待著你的尋覓。當然，這個尋覓過程是十分簡單的，只要把滑鼠移至某個標示或者點擊就能讓導航現身了。我們常說的滑動式菜單其實也算是隱藏式導航的一種，它可以最大幅度地展現網站內容，給用戶愉悅的體驗。

5、滾動式導航

滾動式導航常見於單頁網站，因為是單頁網站，所以沒有任何的頁面跳轉，當你向下滾動頁面，導航與內容也就合二為一地呈現在你眼前。很明顯地，這類型網站的展示容量全都濃縮在同一個頁面里，如果你是想做那種短小精緻且不需要太多複雜功能的話，這種架構簡單的單頁網站搭配滾動式導航就再適合不過了。

6、動畫式導航

我們都容易被炫酷的動效所吸引，如果在導航上添加動畫效果，更能清晰地引導用戶去點擊使用導航。例如當滑鼠在導航懸停時，讓導航的字體產生變化、背景色塊產生大小變化等，這樣微小而利落的差異化已經足夠了。像以下這個案例屬於圖文導航，前景是文字，後景是圖片，當滑鼠移至相應導航時，靜態圖片就會發生輕幅度的動態變化。動畫式導航不需要太花俏的展現，否則會干擾視覺。

二、實操教程

以上總結的流行趨勢其實都只是導航欄設計創意的冰山一角，更多的未知還有待發掘。網站設計從來就沒有標準答案，下一個潮流風格很有可能就出自你手。所以，別一味單純地借鑒，要在學習中有意識地創新與突破，形成個人特色。現在凡科建站推出的新版導航欄，可以支持子級欄目的自由排版，其實也是鼓勵站長嘗試DIY，從固有的模板跳脫出來，做出自己的STYLE。下面就帶大家一探究竟吧~

把滑鼠移至導航欄，在上方出現的快捷工具欄點擊「切換新版」，切換後再選擇「設置樣式」。