侧边栏，简称侧栏，英文叫sidebar，几乎每个网站都会有。通常侧边栏的作用是整合站内部分资源，或者放置一些Widget，或者放置一些格子广告，对 访客起到提醒和相关导航的作用。合理地安排侧边栏的位置、比例和内容都能提高网站PV。那么如何去设计一个实用的侧边栏呢?本文谨代表个人意见，并不代表广大人民。

　　把侧边栏放在Layout的右边

　　这是很多人认可的一种设计，因为现在很多浏览器在某些时候都会打开一个工具sidebar，如IE的收藏夹等等。假如网站侧边栏放在左边的话，当打 开IE的收藏夹的时候，页面上的正文就可能被挤到窗口以外，看不见了。这时候访客就必须横向滚动网页才能看到全文。因此在用户体验为上的网页设计观念里， 把侧边栏放置在页面右边是照顾经常打开浏览器侧边栏的朋友。至少，要把起主要侧边栏放在右边，如果是三栏布局的话。

　　有些人喜欢讲正文全屏，而把侧边栏移到页面底部。个人认为这种做法弊端比较多。首先是不容易扩展，因为放在底部的话需要限制栏目的高度，否则就不美观了，而页面的宽度是相当有限的。其次是那个位置的导航意义不大，广告价值也地。

　　侧边栏的宽度

　　有些人觉得侧边栏的宽度很难设定。宽点，正文区域好像太窄了。窄点，好像太小气了。其实侧边栏的宽度应该以你的设计中侧边栏起到的作用为依据。

　　如果你想在侧边栏放置广告的话，应该先参考一下常见的广告位尺寸。比较适合放在侧边栏的广告有300×250、125×125和250×250三种，因此需要放置广告的侧边栏宽度可以定在250px~330px之间。

　　还有一个方法是根据网页的总体宽度来设计，这里比较常用的一种计算方法是黄金分割法，也就是数学上的黄金比例。使用黄金分割是非常简单的。比如你想找到你 主要内容和sidebar列表的宽度。你将使用你内容区域总的宽度除以 1.62. 然后得到555.55px. 我们不需要那么精确，所以我们就用555px。现在你就知道你的主要内容元素是555px的宽度，你的sidebar就是345px。

　　除了黄金分割外，把侧边栏宽度设为网页总宽度的1/3也是一个不错的办法。

　　设计子侧边栏

　　这种设计的一个好处是方便对侧边栏的栏目进行进一步细化，如大名鼎鼎的inove主题里把categories和archives这两个不需要 太大宽度的栏目设计成双栏，节省了空间。但是，这种设计的最大优点并不止这些。而是，通过子侧边栏的不同搭配，你可以方便地把侧边栏在单栏、双栏和单双混 合中变换!

　　原文：科学设计博客侧边栏 http://blog.imbolo.com/sidebar-design/