想必你也曾絞盡腦汁試圖設計出更吸引人的側邊欄吧？那些沉悶無趣的側邊欄設計也曾讓你倒胃口么？那么，這篇文章應該就是你的菜了。下面35款高大上的側邊欄設計就是為了激發你的靈感而生的！

扒案例之前，先簡單總結一下側邊欄設計的影響因素吧：

1. 尺寸大小
2. 色彩樣式
3. 排版設計
4. 位置

這個清單基本覆蓋了設計側邊欄需要考慮的主要因素。

首先，側邊欄的寬度不宜過大，最好控制在主體內容部分寬度的三分之一到二分之一以內。

在色彩上，側邊欄與整個頁面應保持和諧，使用簡單的色彩，配色上不要過于突出。這聽起來似乎和設計它的初衷有所背離，但事實上這種需求和色彩并不沖突——通常好的側邊欄都是通過排版、圖片、字體等因素，適當地吸引用戶的吸引力，而不是使用炫目的色彩來破壞頁面的平衡。

再次，在這方寸之地，排版無疑也非常重要。側邊欄是用戶獲取內容的重要途徑，它經常被使用，但是并非用戶的目標，它很多時候常駐與頁面側面，需要根據用戶習慣、網站的設計需求和整體風格進行系統化的排版設計。

最后說說位置。側邊欄的位置無非是左邊或者右邊，擱頂上那叫導航欄，放底下……估計沒多少人舍得做這樣的事情。通常用戶瀏覽頁面是從左向右，所以一般放在左側會獲得更多的關注度（在阿拉伯世界應該是正好相反的）。但是它終究是引導用戶獲取內容的渠道，放在右側獲得關注度相對少點，但是它對于整個網站視覺的影響也會少點，讓用戶更加專注于內容。所以，左右位置各有優缺點。在這里你有必要讀一下《交互設計實戰！TAB導航與側邊抽屜導航的巔峰對決》這篇文章，了解一下兩種導航方式的優劣和差異，戳下圖跳轉：

側邊欄的內容，展現形式也都是需要設計師考慮的。在移動端，由于屏幕尺寸的限制，側邊欄的設計千奇百怪，這也逐漸影響了桌面端網頁的側邊欄設計。在接下來的35個案例中，你會看到各種各樣的側邊欄設計，但是總會有幾款是你的菜，值得你拿來做參考。

閑話少敘，案例看起來！

SMOKE & CROAK BLOG WITH VARICOLORED HANDDRAWN SIDEBARS

EAT DRINK INC WEBSITE WITH NON-STANDARD NAVIGATION SIDEBAR

FLIPP WEBSITE WITH LEFT SIDEBAR FOR NAVIGATION

GOLTZ GROUP BLACK AND WHITE WEBSITE DESIGN WITH SIDEBAR NAVIGATION

WEB CANVAS DESIGN WEBSITE WITH CREATIVE NAVIGATION SIDEBAR

MORTGAGE WEB TEMPLATE WITH ORANGE SIDEBAR FOR RATES

OSBORN BARR WEBSITE WITH SCROLLABLE SIDEBAR

LS5 WEBSITE WITH RIGHT NAVIGATION SIDEBAR

SCULPT COMMUNICATIONS WEBSITE WITH ELEGANT SIDEBAR DESIGN IN GRAY

TRIPEXPERT BLOG WITH TWEETS SIDEBAR

EXA AIR BOEING 777-300ER WITH ORIGINAL NAVIGATION SIDEBAR

ELEVATED THIRD WEBSITE WITH BLOG ARCHIVE SIDEBAR

VISION DIRECT ONLINE STORE WITH PRODUCT CATEGORIES SIDEBAR

WEBAPPERS WEBSITE WITH GREAT WELL-DESIGNED SIDEBAR

DEMO MESACREATIVA BLOG WITH PHOTOSTREAM SIDEBAR

LAUREN VIDAL WEBSITE WITH SIDEBAR FOR NAVIGATION AND EMAIL NEWSLETTER

CHEF S WEBSITE WITH TOP WEEK MENU ENTREE SIDEBAR

ISO ENTERTAINMENT INFO WEBSITE WITH NAVIGATION MENU TABS ON THE SIDEBAR

CANDY’S CUPCAKES WEBSITE WITH FACEBOOK FANS SIDEBAR

MARKETING WEBSITE TEMPLATE WITH WELL-DESIGNED SIDEBAR

CIQUATTRO AGENCY PORTFOLIO DESIGN WITH NICE SIDEBAR

CORNELL UNIVERSITY WEBSITE WITH NEWS SIDEBAR

BALLARD DESIGNS WEBSITE WITH BEAUTIFUL IMAGE SIDEBAR

MODERN FURNITURE WEBSITE WITH FACEBOOK SIDEBAR

SALON WEBSITE WITH ACCURATE SOCIAL MEDIA FOLLOW SIDEBAR

ERIC GARCETTI WITH THE SIGN-IN SIDEBAR

AMERICA BLOG NEWS WITH RECOMMENDED ARTICLES SIDEBAR

TIME WEBSITE WITH CONTENT-RICH SIDEBAR

FOX SPORTS WEBSITE WITH GREAT SIDEBAR DESIGN

THE DAILY BOARD WEBSITE WITH HANDWRITTEN SIDEBAR

PLAYMAG SITE WITH BLACK ILLUSTRATIVE SIDEBAR

THE PINK PLUMBER WEBSITE WITH QUESTION FORM SIDEBAR

COFA MEDIA WEBSITE WITH COOL SOCIAL MEDIA SIDEBAR

INFULE WEBSITE WITH FREE COURSE SUBSCRIBE SIDEBAR

ADSY WEBSITE WITH CREATIVE ANIMATED SIDEBAR

導航從誕生以來，紛爭不斷，孰好孰壞，讀完以下文章自有定奪。

從頭開始，理清思路，探秘抽屜導航的前世今生：
《交互設計新手必看！探秘抽屜導航的前生今世》

除此之外，更多導航設計一次性學完：
《設計師必備手冊：五種移動應用導航設計總結》

看完總結看案例，學習如何將導航玩得出神入化：
《2014網頁菜單新趨勢！21例時尚創新的側邊欄菜單網頁設計》

原文地址：onextrapixel
優設網翻譯：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量76萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：