網站的佈局和導航十分重要，想要兼顧美觀簡潔的設計又要保障友好的用戶體驗，使用側邊欄導航會是一種不錯的選擇。目前，已經有大量的網站擯棄了傳統的導航模式，改為使用側邊欄導航，今天小摹精選了其中的30個作為靈感案例，一定會給你帶來啟發。
第一部分：為什麼需要網站側邊欄？
側邊欄其實就是一種比較經典的網站導航設計，它的形式通常為豎向的一列，展示在網站的右側或者左側，具體的位置當然是取決於整體的設計。
但一般來講，由於視覺習慣和用戶行為，側邊欄位於左側更容易第一時間吸引用戶注意力，因而也能很高效地給用戶提供導航；而右側的側邊欄則常被看做是二級導航，因而可以豐富網站的結構層次。但總體來講，側邊欄對網站的好處有以下：
● 放置導航菜單以快速引導訪客；
● 突出顯示關鍵信息，例如廣告、聯繫方式或最新消息；
● 刺激用戶進行點擊和瀏覽，降低跳出率，提升轉化；
第二部分：30個優秀的網站側邊欄設計
1.Anthony j rayburn
Anthony j rayburn的側邊欄位於網站右側，突出顯示了多種信息，包括logo、引導用戶的鏈接、社交按鈕和聯繫信息，使用了優雅、獨特的字體，搭配插畫風格的logo，比較精緻。
2.Dollyave
Dollyave 是一個展示攝影和音樂作品的在線媒體，整體設計高端大氣，使用粗文本作為側邊欄導航，與整個網站的設計融為一體。
3. Grace chuang
Grace chuang是一個作品集單頁網站，該網站佈局分為三大部分，左側為帶有logo和社交按鈕的側邊欄，中心是網站所有者的照片展示，右側是自我介紹。
4. Kate vass galerie
Kate vass galerie是一家當代在線藝術畫廊，為了幫助用戶輕鬆瀏覽藝術作品，左側的側邊欄展示了詳盡的分類。
5. Nice cream
Nicecream 是一家手工冰淇淋生產網站，圖文的佈局和搭配很好的凸顯了網站主題，側邊欄導航位於左側，引導用戶輕鬆訪問感興趣的內容。
6. Jasminestar
Jasminestar的側邊欄文本設計比較獨特，看起來像一個左旋90°的頂部導航欄，並且使用留白突出顯示，還提供了關閉按鈕，方便用戶以自己喜歡的方式瀏覽頁面。
7. Quinntonharris
Quinntonharris是一個非常美觀的個人網站，以大圖和文字講述網站主人的生活事蹟，側邊欄導航使用圓點，會有垂直翻頁的幻燈片的感覺。搭配攝影圖片，矩形色塊和帶有頁面序號文字，可以讓用戶始終清晰地知道自己所處的頁面位置。
8. Mike kelley
Mikekelley是攝影師Mike的個人網站，使用了比較常規的側邊欄，搭配高清的照片，整體看起來十分清爽。
9. The idle man
The idle man是一家網上商店，首屏使用了大面積的側邊欄展示最暢銷的商品和最熱門的商品，刺激用戶消費。
10. Love billy
Love billy也是使用粗體字作為側邊欄，既可以作為導航來指導用戶，也讓整個界面看上去很具有時尚感和個性。
11. Sophie kahn
Sophie kahn是數字藝術家和雕塑家Sophie Kahn創建的藝術網站，頁面採用大面積留白，顯得非常素雅，更容易體現靜態雕塑攝影的表現力。
12. Deanie chen
Deanie chen的側邊欄具有留白、簡單、素淨的特點，和右側輪播展示的色彩豐富的大圖形成了鮮明對比。
13. The life church today
The life church today是一個兒童網站，整個設計連同側邊欄都是極簡風格，但又有活潑的元素打破沉悶。
14. Mathieu stern
Mathieu stern是一個記錄攝影和電影的網站，它的側邊欄具有兩個層次結構，可以更好地引導用戶。
15. Charliewaite
Charliewaite是由設計師Charlie Waite創建的個人網站，他使用了大尺寸的側邊欄，展示了自我介紹、設計按鈕以及問候語。
16. Niche pod
為了讓界面更清爽，Niche pod的側邊欄是隱藏起來的，只留下一個圖標，點擊即可查看。
17. Cccog
Cccog的側邊欄白色字體和黑色背景形成鮮明對比，高亮度的白色文字和這種暗色系的網站設計非常搭配。
18. Dylan perlot
Dylan perlot展示了不計其數的時裝攝影作品，它的側邊欄在左側，多個導航下還具有下拉菜單，方便用戶更好定位。
19. Thomas defert
Thomas defert使用了非常詳細的側邊欄展示了該網站的藝術作品。
20. Goltz group
Goltzgroup的側邊欄具有少許透明的效果，緩和了和整體界面的分割。
更多網站側邊欄設計
21. Intechnic
Intechnic具有純文本排列的側邊欄，還有關閉選項。
22. Wiggs photo
Wiggs photo的側邊欄集Logo和導航於一體。
23. Pedron the world
Pedron the world的側邊欄不夠“側”，首頁位於頁面正中。
其他頁面側邊欄位於左側，如下圖：
24. Gresham smith
Gresham smith具有多級導航的側邊欄。
25. Rose datoc dall
Rose datoc dall使用了縮略圖和文本提示展示最新作品的側邊欄。
26. Paul David
Paul David具有非常簡潔的側邊欄，沒有過多的內容。
27. Cookie and kate
Cookieandkate具有佔據空間比較大的側邊欄，展示了profile，社交聯繫方希，以及最新推送。
28. Austin kleon
Austinkleon的左右各有一個側邊欄。
29. Pascal van gemer
Pascalvangemer具有比較經典的側邊欄，位於右側。
30. Elizabethy lin
Elizabethylin的側邊欄和整體設計融為一體，顏值很高。
第三部分：如何創建側邊欄？
側邊欄近來年更加流行，但要設計一個好的邊欄也並不容易，不僅有很多設計原則，還需要充分考慮網站整體的佈局和排版，甚至要考慮網站的性質。這裡推薦一個YouTube的視頻，詳細地講解了如何使用html、css和jQuery創建側邊欄側邊菜單。
https://www.youtube.com/watch?v=zPh0RbYiYGg
但如果你不會開發，也無大礙，可以使用設計工具製作，然後交付開發即可。快速呈現側邊欄設計，Mockplus會是一個不錯的選擇，它封裝了大量的組件，其中就有導航欄，直接拖拽即可快速佈局，全局查看界面設計，高效確認設計思路。這裡有一個之前做過的網站模板，其中包含了側邊欄元素：
此外，使用一些現成的導航模板也是一個不錯的方法，推薦這30個優秀Bootstrap導航模板，用戶訪問又快又準。
閱讀更多 Mockplus摹客 的文章
