想必你也曾绞尽脑汁试图设计出更吸引人的侧边栏吧?那些沉闷无趣的侧边栏设计也曾让你倒胃口么?那么,这篇文章应该就是你的菜了。下面35款高大上的侧边栏设计就是为了激发你的灵感而生的!
扒案例之前,先简单总结一下侧边栏设计的影响因素吧:
尺寸大小
色彩样式
排版设计
位置
这个清单基本覆盖了设计侧边栏需要考虑的主要因素。
首先,侧边栏的宽度不宜过大,最好控制在主体内容部分宽度的三分之一到二分之一以内。
在色彩上,侧边栏与整个页面应保持和谐,使用简单的色彩,配色上不要过于突出。这听起来似乎和设计它的初衷有所背离,但事实上这种需求和色彩并不冲突——通常好的侧边栏都是通过排版、图片、字体等因素,适当地吸引用户的吸引力,而不是使用炫目的色彩来破坏页面的平衡。
再次,在这方寸之地,排版无疑也非常重要。侧边栏是用户获取内容的重要途径,它经常被使用,但是并非用户的目标,它很多时候常驻与页面侧面,需要根据用户习惯、网站的设计需求和整体风格进行系统化的排版设计。
最后说说位置。侧边栏的位置无非是左边或者右边,搁顶上那叫导航栏,放底下……估计没多少人舍得做这样的事情。通常用户浏览页面是从左向右,所以一般放在左侧会获得更多的关注度(在阿拉伯世界应该是正好相反的)。但是它终究是引导用户获取内容的渠道,放在右侧获得关注度相对少点,但是它对于整个网站视觉的影响也会少点,让用户更加专注于内容。所以,左右位置各有优缺点。
侧边栏的内容,展现形式也都是需要设计师考虑的。在移动端,由于屏幕尺寸的限制,侧边栏的设计千奇百怪,这也逐渐影响了桌面端网页的侧边栏设计。在接下来的35个案例中,你会看到各种各样的侧边栏设计,但是总会有几款是你的菜,值得你拿来做参考。
闲话少叙,案例看起来!
SMOKE & CROAK BLOG WITH VARICOLORED HANDDRAWN SIDEBARS
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240221.jpg)
EAT DRINK INC WEBSITE WITH NON-STANDARD NAVIGATION SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240191.jpg)
FLIPP WEBSITE WITH LEFT SIDEBAR FOR NAVIGATION
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240291.jpg)
GOLTZ GROUP BLACK AND WHITE WEBSITE DESIGN WITH SIDEBAR NAVIGATION
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240751.jpg)
WEB CANVAS DESIGN WEBSITE WITH CREATIVE NAVIGATION SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240731.jpg)
MORTGAGE WEB TEMPLATE WITH ORANGE SIDEBAR FOR RATES
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240521.jpg)
OSBORN BARR WEBSITE WITH SCROLLABLE SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240671.jpg)
LS5 WEBSITE WITH RIGHT NAVIGATION SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240811.jpg)
SCULPT COMMUNICATIONS WEBSITE WITH ELEGANT SIDEBAR DESIGN IN GRAY
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240341.jpg)
TRIPEXPERT BLOG WITH TWEETS SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240161.jpg)
EXA AIR BOEING 777-300ER WITH ORIGINAL NAVIGATION SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240171.jpg)
ELEVATED THIRD WEBSITE WITH BLOG ARCHIVE SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240201.jpg)
VISION DIRECT onLINE STORE WITH PRODUCT CATEGORIES SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240601.jpg)
WEBAPPERS WEBSITE WITH GREAT WELL-DESIGNED SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240741.jpg)
DEMO MESACREATIVA BLOG WITH PHOTOSTREAM SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240671.jpg)
LAUREN VIDAL WEBSITE WITH SIDEBAR FOR NAVIGATION AND EMAIL NEWSLETTER
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240801.jpg)
CHEF S WEBSITE WITH TOP WEEK MENU ENTREE SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240361.jpg)
ISO ENTERTAINMENT INFO WEBSITE WITH NAVIGATION MENU TABS ON THE SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240391.jpg)
CANDY’S CUPCAKES WEBSITE WITH FACEBOOK FANS SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240401.jpg)
MARKETING WEBSITE TEMPLATE WITH WELL-DESIGNED SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240691.jpg)
CIQUATTRO AGENCY PORTFOLIO DESIGN WITH NICE SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240571.jpg)
CORNELL UNIVERSITY WEBSITE WITH NEWS SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240981.jpg)
BALLARD DESIGNS WEBSITE WITH BEAUTIFUL IMAGE SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240261.jpg)
MODERN FURNITURE WEBSITE WITH FACEBOOK SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240741.jpg)
SALON WEBSITE WITH ACCURATE SOCIAL MEDIA FOLLOW SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240601.jpg)
ERIC GARCETTI WITH THE SIGN-IN SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240371.jpg)
AMERICA BLOG NEWS WITH RECOMMENDED ARTICLES SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240331.jpg)
TIME WEBSITE WITH CONTENT-RICH SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240641.jpg)
FOX SPORTS WEBSITE WITH GREAT SIDEBAR DESIGN
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240581.jpg)
THE DAILY BOARD WEBSITE WITH HANDWRITTEN SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240831.jpg)
PLAYMAG SITE WITH BLACK ILLUSTRATIVE SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240311.jpg)
THE PINK PLUMBER WEBSITE WITH QUESTION FORM SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240901.jpg)
COFA MEDIA WEBSITE WITH COOL SOCIAL MEDIA SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240841.jpg)
INFULE WEBSITE WITH FREE COURSE SUBSCRIBE SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240661.jpg)
ADSY WEBSITE WITH CREATIVE ANIMATED SIDEBAR
![导航有智慧!35个网页侧边栏创意设计欣赏](http://img2.shancun.net/201903/29/035240671.jpg)