导航有智慧!35个网页侧边栏创意设计欣赏

想必你也曾绞尽脑汁试图设计出更吸引人的侧边栏吧?那些沉闷无趣的侧边栏设计也曾让你倒胃口么?那么,这篇文章应该就是你的菜了。下面35款高大上的侧边栏设计就是为了激发你的灵感而生的!

扒案例之前,先简单总结一下侧边栏设计的影响因素吧:

  1. 尺寸大小
  2. 色彩样式
  3. 排版设计
  4. 位置

这个清单基本覆盖了设计侧边栏需要考虑的主要因素。

首先,侧边栏的宽度不宜过大,最好控制在主体内容部分宽度的三分之一到二分之一以内。

在色彩上,侧边栏与整个页面应保持和谐,使用简单的色彩,配色上不要过于突出。这听起来似乎和设计它的初衷有所背离,但事实上这种需求和色彩并不冲突——通常好的侧边栏都是通过排版、图片、字体等因素,适当地吸引用户的吸引力,而不是使用炫目的色彩来破坏页面的平衡。

再次,在这方寸之地,排版无疑也非常重要。侧边栏是用户获取内容的重要途径,它经常被使用,但是并非用户的目标,它很多时候常驻与页面侧面,需要根据用户习惯、网站的设计需求和整体风格进行系统化的排版设计。

最后说说位置。侧边栏的位置无非是左边或者右边,搁顶上那叫导航栏,放底下……估计没多少人舍得做这样的事情。通常用户浏览页面是从左向右,所以一般放在左侧会获得更多的关注度(在阿拉伯世界应该是正好相反的)。但是它终究是引导用户获取内容的渠道,放在右侧获得关注度相对少点,但是它对于整个网站视觉的影响也会少点,让用户更加专注于内容。所以,左右位置各有优缺点。在这里你有必要读一下《交互设计实战!TAB导航与侧边抽屉导航的巅峰对决》这篇文章,了解一下两种导航方式的优劣和差异,戳下图跳转:
导航有智慧!35个网页侧边栏创意设计欣赏

侧边栏的内容,展现形式也都是需要设计师考虑的。在移动端,由于屏幕尺寸的限制,侧边栏的设计千奇百怪,这也逐渐影响了桌面端网页的侧边栏设计。在接下来的35个案例中,你会看到各种各样的侧边栏设计,但是总会有几款是你的菜,值得你拿来做参考。

闲话少叙,案例看起来!

SMOKE & CROAK BLOG WITH VARICOLORED HANDDRAWN SIDEBARS

导航有智慧!35个网页侧边栏创意设计欣赏

EAT DRINK INC WEBSITE WITH NON-STANDARD NAVIGATION SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

FLIPP WEBSITE WITH LEFT SIDEBAR FOR NAVIGATION

导航有智慧!35个网页侧边栏创意设计欣赏

GOLTZ GROUP BLACK AND WHITE WEBSITE DESIGN WITH SIDEBAR NAVIGATION

导航有智慧!35个网页侧边栏创意设计欣赏

WEB CANVAS DESIGN WEBSITE WITH CREATIVE NAVIGATION SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

MORTGAGE WEB TEMPLATE WITH ORANGE SIDEBAR FOR RATES

导航有智慧!35个网页侧边栏创意设计欣赏

OSBORN BARR WEBSITE WITH SCROLLABLE SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

LS5 WEBSITE WITH RIGHT NAVIGATION SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

SCULPT COMMUNICATIONS WEBSITE WITH ELEGANT SIDEBAR DESIGN IN GRAY

导航有智慧!35个网页侧边栏创意设计欣赏

TRIPEXPERT BLOG WITH TWEETS SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

EXA AIR BOEING 777-300ER WITH ORIGINAL NAVIGATION SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

ELEVATED THIRD WEBSITE WITH BLOG ARCHIVE SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

VISION DIRECT ONLINE STORE WITH PRODUCT CATEGORIES SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

WEBAPPERS WEBSITE WITH GREAT WELL-DESIGNED SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

DEMO MESACREATIVA BLOG WITH PHOTOSTREAM SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

LAUREN VIDAL WEBSITE WITH SIDEBAR FOR NAVIGATION AND EMAIL NEWSLETTER

导航有智慧!35个网页侧边栏创意设计欣赏

CHEF S WEBSITE WITH TOP WEEK MENU ENTREE SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

ISO ENTERTAINMENT INFO WEBSITE WITH NAVIGATION MENU TABS ON THE SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

CANDY’S CUPCAKES WEBSITE WITH FACEBOOK FANS SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

MARKETING WEBSITE TEMPLATE WITH WELL-DESIGNED SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

CIQUATTRO AGENCY PORTFOLIO DESIGN WITH NICE SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

CORNELL UNIVERSITY WEBSITE WITH NEWS SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

BALLARD DESIGNS WEBSITE WITH BEAUTIFUL IMAGE SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

MODERN FURNITURE WEBSITE WITH FACEBOOK SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

SALON WEBSITE WITH ACCURATE SOCIAL MEDIA FOLLOW SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

ERIC GARCETTI WITH THE SIGN-IN SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

AMERICA BLOG NEWS WITH RECOMMENDED ARTICLES SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

TIME WEBSITE WITH CONTENT-RICH SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

FOX SPORTS WEBSITE WITH GREAT SIDEBAR DESIGN

导航有智慧!35个网页侧边栏创意设计欣赏

THE DAILY BOARD WEBSITE WITH HANDWRITTEN SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

PLAYMAG SITE WITH BLACK ILLUSTRATIVE SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

THE PINK PLUMBER WEBSITE WITH QUESTION FORM SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

COFA MEDIA WEBSITE WITH COOL SOCIAL MEDIA SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

INFULE WEBSITE WITH FREE COURSE SUBSCRIBE SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

ADSY WEBSITE WITH CREATIVE ANIMATED SIDEBAR

导航有智慧!35个网页侧边栏创意设计欣赏

导航从诞生以来,纷争不断,孰好孰坏,读完以下文章自有定夺。

从头开始,理清思路,探秘抽屉导航的前世今生:
《交互设计新手必看!探秘抽屉导航的前生今世》

除此之外,更多导航设计一次性学完:
《设计师必备手册:五种移动应用导航设计总结》

看完总结看案例,学习如何将导航玩得出神入化:
《2014网页菜单新趋势!21例时尚创新的侧边栏菜单网页设计》

原文地址:onextrapixel
优设网翻译:@陈子木

导航有智慧!35个网页侧边栏创意设计欣赏

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量76万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

导航有智慧!35个网页侧边栏创意设计欣赏

收藏 7
点赞 2

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。