想必你也曾絞盡腦汁試圖設(shè)計(jì)出更吸引人的側(cè)邊欄吧?那些沉悶無趣的側(cè)邊欄設(shè)計(jì)也曾讓你倒胃口么?那么，這篇文章應(yīng)該就是你的菜了。下面35款高大上的側(cè)邊欄設(shè)計(jì)就是為了激發(fā)你的靈感而生的!
扒案例之前，先簡(jiǎn)單總結(jié)一下側(cè)邊欄設(shè)計(jì)的影響因素吧：
尺寸大小
色彩樣式
排版設(shè)計(jì)
位置
這個(gè)清單基本覆蓋了設(shè)計(jì)側(cè)邊欄需要考慮的主要因素。
首先，側(cè)邊欄的寬度不宜過大，最好控制在主體內(nèi)容部分寬度的三分之一到二分之一以內(nèi)。
在色彩上，側(cè)邊欄與整個(gè)頁面應(yīng)保持和諧，使用簡(jiǎn)單的色彩，配色上不要過于突出。這聽起來似乎和設(shè)計(jì)它的初衷有所背離，但事實(shí)上這種需求和色彩并不沖突——通常好的側(cè)邊欄都是通過排版、圖片、字體等因素，適當(dāng)?shù)匚脩舻奈Γ皇鞘褂渺拍康纳蕘砥茐捻撁娴钠胶狻?/p>
再次，在這方寸之地，排版無疑也非常重要。側(cè)邊欄是用戶獲取內(nèi)容的重要途徑，它經(jīng)常被使用，但是并非用戶的目標(biāo)，它很多時(shí)候常駐與頁面?zhèn)让妫枰鶕?jù)用戶習(xí)慣、網(wǎng)站的設(shè)計(jì)需求和整體風(fēng)格進(jìn)行系統(tǒng)化的排版設(shè)計(jì)。
最后說說位置。側(cè)邊欄的位置無非是左邊或者右邊，擱頂上那叫導(dǎo)航欄，放底下……估計(jì)沒多少人舍得做這樣的事情。通常用戶瀏覽頁面是從左向右，所以一般放在左側(cè)會(huì)獲得更多的關(guān)注度(在阿拉伯世界應(yīng)該是正好相反的)。但是它終究是引導(dǎo)用戶獲取內(nèi)容的渠道，放在右側(cè)獲得關(guān)注度相對(duì)少點(diǎn)，但是它對(duì)于整個(gè)網(wǎng)站視覺的影響也會(huì)少點(diǎn)，讓用戶更加專注于內(nèi)容。所以，左右位置各有優(yōu)缺點(diǎn)。
側(cè)邊欄的內(nèi)容，展現(xiàn)形式也都是需要設(shè)計(jì)師考慮的。在移動(dòng)端，由于屏幕尺寸的限制，側(cè)邊欄的設(shè)計(jì)千奇百怪，這也逐漸影響了桌面端網(wǎng)頁的側(cè)邊欄設(shè)計(jì)。在接下來的35個(gè)案例中，你會(huì)看到各種各樣的側(cè)邊欄設(shè)計(jì)，但是總會(huì)有幾款是你的菜，值得你拿來做參考。
閑話少敘，案例看起來!
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
