网站的布局和导航十分重要,想要兼顾美观简洁的设计又要保障友好的用户体验,使用侧边栏导航会是一种不错的选择。目前,已经有大量的网站摈弃了传统的导航模式,改为使用侧边栏导航,今天小摹精选了其中的30个作为灵感案例,一定会给你带来启发。
第一部分:为什么需要网站侧边栏?
侧边栏其实就是一种比较经典的网站导航设计,它的形式通常为竖向的一列,展示在网站的右侧或者左侧,具体的位置当然是取决于整体的设计。
但一般来讲,由于视觉习惯和用户行为,侧边栏位于左侧更容易第一时间吸引用户注意力,因而也能很高效地给用户提供导航;而右侧的侧边栏则常被看做是二级导航,因而可以丰富网站的结构层次。但总体来讲,侧边栏对网站的好处有以下:
● 放置导航菜单以快速引导访客;
● 突出显示关键信息,例如广告、联系方式或最新消息;
● 刺激用户进行点击和浏览,降低跳出率,提升转化;
第二部分:30个优秀的网站侧边栏设计
1.Anthony j rayburn
Anthony j rayburn的侧边栏位于网站右侧,突出显示了多种信息,包括logo、引导用户的链接、社交按钮和联系信息,使用了优雅、独特的字体,搭配插画风格的logo,比较精致。
![f78620869ae40e6fc4eb5bc426ab0535.png](https://i-blog.csdnimg.cn/blog_migrate/0a9e29f3f468503d5c3133cf19e9be92.jpeg)
2.Dollyave
Dollyave 是一个展示摄影和音乐作品的在线媒体,整体设计高端大气,使用粗文本作为侧边栏导航,与整个网站的设计融为一体。
![8c8c6e9d9ee62e0fde93022052de03ba.png](https://i-blog.csdnimg.cn/blog_migrate/ce2dcc915919a7993fd4374783cbb3e2.jpeg)
3. Grace chuang
Grace chuang是一个作品集单页网站,该网站布局分为三大部分,左侧为带有logo和社交按钮的侧边栏,中心是网站所有者的照片展示,右侧是自我介绍。
![be00fd6f3706631ddfb2aa06c64cbc3d.png](https://i-blog.csdnimg.cn/blog_migrate/3038b1ee37e2ee9d4cbe5ebdd34d0ee6.jpeg)
4. Kate vass galerie
Kate vass galerie是一家当代在线艺术画廊,为了帮助用户轻松浏览艺术作品,左侧的侧边栏展示了详尽的分类。
![5ffa44c0561b14985f6e72276fe5c114.png](https://i-blog.csdnimg.cn/blog_migrate/240ecf8f579e6e8bd1e15929a16b28fa.jpeg)
5. Nice cream
Nicecream 是一家手工冰淇淋生产网站,图文的布局和搭配很好的凸显了网站主题,侧边栏导航位于左侧,引导用户轻松访问感兴趣的内容。
![234b7d8a2a110ae1bfa47d29c73e912c.png](https://i-blog.csdnimg.cn/blog_migrate/e3ac73d2489d71aff836cad702f2f90d.jpeg)
6. Jasminestar
Jasminestar的侧边栏文本设计比较独特,看起来像一个左旋90°的顶部导航栏,并且使用留白突出显示,还提供了关闭按钮,方便用户以自己喜欢的方式浏览页面。
![a233352adc152fe4ffdd414bdd8517dd.png](https://i-blog.csdnimg.cn/blog_migrate/6b21c1b950307d072c421be1952136a7.jpeg)
7. Quinntonharris
Quinntonharris是一个非常美观的个人网站,以大图和文字讲述网站主人的生活事迹,侧边栏导航使用圆点,会有垂直翻页的幻灯片的感觉。搭配摄影图片,矩形色块和带有页面序号文字,可以让用户始终清晰地知道自己所处的页面位置。
![7d430052fe62c6ac131d4b36f94aec63.png](https://i-blog.csdnimg.cn/blog_migrate/3ce4bee4c2a6834dd412cef58aca3c12.jpeg)
8. Mike kelley
Mikekelley是摄影师Mike的个人网站,使用了比较常规的侧边栏,搭配高清的照片,整体看起来十分清爽。
![23be1f3e96cc0b1b556e9fb651799de1.png](https://i-blog.csdnimg.cn/blog_migrate/10145c58b5bed8709588b889b47a7bf7.jpeg)
9. The idle man
The idle man是一家网上商店,首屏使用了大面积的侧边栏展示最畅销的商品和最热门的商品,刺激用户消费。
![07fd83c245e0b6d0b99699b88ceff161.png](https://i-blog.csdnimg.cn/blog_migrate/7a87a36da48d0d1edc1be0661da7e889.jpeg)
10. Love billy
Love billy也是使用粗体字作为侧边栏,既可以作为导航来指导用户,也让整个界面看上去很具有时尚感和个性。
![7e17b519bd6fda54c1b07e84ac81a3a1.png](https://i-blog.csdnimg.cn/blog_migrate/5492d771d624550b5f65eae1b8224e91.jpeg)
11. Sophie kahn
Sophie kahn是数字艺术家和雕塑家Sophie Kahn创建的艺术网站,页面采用大面积留白,显得非常素雅,更容易体现静态雕塑摄影的表现力。
![34fbadf443342878076bb359455e7c38.png](https://i-blog.csdnimg.cn/blog_migrate/1a9a66cf9e34d9108f121f21bc29ff28.jpeg)
12. Deanie chen
Deanie chen的侧边栏具有留白、简单、素净的特点,和右侧轮播展示的色彩丰富的大图形成了鲜明对比。
![27412963b9f0be3dd7d6bb8146ff15a2.png](https://i-blog.csdnimg.cn/blog_migrate/027e88123723e41839c850947a15bdbc.jpeg)
13. The life church today
The life church today是一个儿童网站,整个设计连同侧边栏都是极简风格,但又有活泼的元素打破沉闷。
![5b418643b6a4b6ec342da745c5f8b75a.png](https://i-blog.csdnimg.cn/blog_migrate/49b3dc8f3cf2c6704103c811dca39da4.jpeg)
14. Mathieu stern
Mathieu stern是一个记录摄影和电影的网站,它的侧边栏具有两个层次结构,可以更好地引导用户。
![2f7a0f87f70d651917951229ecebf5d5.png](https://i-blog.csdnimg.cn/blog_migrate/ecbf4886011e8d9fd1ba7bedd6b7d3dc.jpeg)
15. Charliewaite
Charliewaite是由设计师Charlie Waite创建的个人网站,他使用了大尺寸的侧边栏,展示了自我介绍、设计按钮以及问候语。
![41e6e2ebef6abe83a7fcb895aef7cfb5.png](https://i-blog.csdnimg.cn/blog_migrate/6feda8554a3c569e404f0bb24468d854.jpeg)
16. Niche pod
为了让界面更清爽,Niche pod的侧边栏是隐藏起来的,只留下一个图标,点击即可查看。
![cc8b7846a11bdc77eafeb21863a11689.gif](https://i-blog.csdnimg.cn/blog_migrate/7515bb49231f9ce0a12992ccea922c20.gif)
17. Cccog
Cccog的侧边栏白色字体和黑色背景形成鲜明对比,高亮度的白色文字和这种暗色系的网站设计非常搭配。
![47afe6ec337c7fe2fda3fb4f44f22f3d.png](https://i-blog.csdnimg.cn/blog_migrate/0440bb0f30f0f6985dfffc3aeeaec5f6.jpeg)
18. Dylan perlot
Dylan perlot展示了不计其数的时装摄影作品,它的侧边栏在左侧,多个导航下还具有下拉菜单,方便用户更好定位。
![aa9bcf91f981dcdec29676c8b75c6751.png](https://i-blog.csdnimg.cn/blog_migrate/46d156dd5b99f230f93a24a24f89f602.jpeg)
19. Thomas defert
Thomas defert使用了非常详细的侧边栏展示了该网站的艺术作品。
![f6695bfd84667df838dff35c917b87b1.png](https://i-blog.csdnimg.cn/blog_migrate/21ec4e1ceebace9301d3988b5cc670ca.jpeg)
20. Goltz group
Goltzgroup的侧边栏具有少许透明的效果,缓和了和整体界面的分割。
![d5152ac5a02d4ebe4a09067be67cabe4.png](https://i-blog.csdnimg.cn/blog_migrate/a04aec46b764445d47204385d1f9f5c3.jpeg)
更多网站侧边栏设计
21. Intechnic
Intechnic具有纯文本排列的侧边栏,还有关闭选项。
![3479033cda75775abd7826f73c2e5366.png](https://i-blog.csdnimg.cn/blog_migrate/1b91355acb46038611d8ae390e75331c.jpeg)
22. Wiggs photo
Wiggs photo的侧边栏集Logo和导航于一体。
![58bc128f6ec0a2c9eea81d70983ab55d.png](https://i-blog.csdnimg.cn/blog_migrate/903400bf732ae45ee122aabf24c2468a.jpeg)
23. Pedron the world
Pedron the world的侧边栏不够“侧”,首页位于页面正中。
![8d491911614ec8f5f53ba3fbfeebd646.png](https://i-blog.csdnimg.cn/blog_migrate/9750b8b09d4c1dbd646a9269e4c16430.jpeg)
其他页面侧边栏位于左侧,如下图:
![dea398313ed51dabe4e58d59848778f9.png](https://i-blog.csdnimg.cn/blog_migrate/d4e2c464366cf66d71fa7278317a97e7.jpeg)
24. Gresham smith
Gresham smith具有多级导航的侧边栏。
![e6a8a58a40120eb9eece1d37758393f2.png](https://i-blog.csdnimg.cn/blog_migrate/c60fae429b76a02d7855763ecffda251.jpeg)
25. Rose datoc dall
Rose datoc dall使用了缩略图和文本提示展示最新作品的侧边栏。
![ed3146d2597038fc2f5e15368d3c0eba.png](https://i-blog.csdnimg.cn/blog_migrate/04d19eba70ec1e34462a95bd93974a1c.jpeg)
26. Paul David
Paul David具有非常简洁的侧边栏,没有过多的内容。
![6dee6c34d4438d4fa51fdc1f1f99a7cd.png](https://i-blog.csdnimg.cn/blog_migrate/aa0478ea53672446ff5f06593e24f167.jpeg)
27. Cookie and kate
Cookieandkate具有占据空间比较大的侧边栏,展示了profile,社交联系方希,以及最新推送。
![cfeaaa0d041db92d79730b74b1331817.png](https://i-blog.csdnimg.cn/blog_migrate/233586c211f2cdac2b81c415c637158f.jpeg)
28. Austin kleon
Austinkleon的左右各有一个侧边栏。
![f9b0dcd200c57a50450a4ae0621ad53e.png](https://i-blog.csdnimg.cn/blog_migrate/ed310fd18c96d69c270e66870e846c39.jpeg)
29. Pascal van gemer
Pascalvangemer具有比较经典的侧边栏,位于右侧。
![52a70993af726b21b95d3657a6193033.png](https://i-blog.csdnimg.cn/blog_migrate/d16a5af6a8fb2e0326baf52d8585819a.jpeg)
30. Elizabethy lin
Elizabethylin的侧边栏和整体设计融为一体,颜值很高。
![d2d36433d1086303e34016ccbeb1f200.png](https://i-blog.csdnimg.cn/blog_migrate/0b0b6f7b8f2ea46eb3ab68cacff5cbe3.jpeg)
第三部分:如何创建侧边栏?
侧边栏近来年更加流行,但要设计一个好的边栏也并不容易,不仅有很多设计原则,还需要充分考虑网站整体的布局和排版,甚至要考虑网站的性质。这里推荐一个YouTube的视频,详细地讲解了如何使用html、css和jQuery创建侧边栏侧边菜单。
https://www.youtube.com/watch?v=zPh0RbYiYGg
但如果你不会开发,也无大碍,可以使用设计工具制作,然后交付开发即可。快速呈现侧边栏设计,Mockplus会是一个不错的选择,它封装了大量的组件,其中就有导航栏,直接拖拽即可快速布局,全局查看界面设计,高效确认设计思路。这里有一个之前做过的网站模板,其中包含了侧边栏元素:
![7348905b0375479eccca4df8c8541218.png](https://i-blog.csdnimg.cn/blog_migrate/9da06b7cad4a816b52528087f1f11574.jpeg)
此外,使用一些现成的导航模板也是一个不错的方法,推荐这30个优秀Bootstrap导航模板,用户访问又快又准。