Home > Design > 科学设计博客侧边栏
2009November . 15th

科学设计博客侧边栏

sidebar layout design侧边栏,简称侧栏,英文叫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也是一个不错的办法。

设计子侧边栏

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

  1. 2009November . 15th - 4:24 PM

    拎不清 只能用别人弄好的

  2. 2009November . 15th - 5:26 PM

    侧边栏靠右放对SEO更有利,蜘蛛是从上往下,从左往右爬的

  3. 2009November . 15th - 5:35 PM

    恩,好的开发人员会站在用户的角度考虑

  4. 2009November . 15th - 7:38 PM

    @万戈
    这个不一定。看CSS排版而定,如果html中sidebar在content后面照样可以把sidebar定位到左边你说是吧?哈哈!

  5. 2009November . 15th - 9:44 PM

    @万戈
    请看keelii的正解
    @keelii
    简单来说搜索引擎是通过分析html源码来进行抓取的

  6. 2009November . 16th - 2:51 AM

    也可以用成用户自定义的

  7. 2009November . 16th - 9:29 AM

    这种尝试不错,相当支持

  8. 2009November . 16th - 10:52 AM

    的确不是一般的东西呀

  9. 2009November . 16th - 4:01 PM

    都是用别人设计好的
    还真没自己设计过呢
    太懒了

  10. 2009November . 16th - 4:15 PM

    自己设计的时候总是凭感觉来呵呵,现在看看还是需要好好研究啊

  11. 2009November . 16th - 7:18 PM

    没认真研究过,只是侧边栏不够宽就再放大一点,和

  12. 2009November . 16th - 7:55 PM

    选择250的蛮好的,和适合放广告

  13. 2009November . 16th - 7:58 PM

    大多数网站的侧栏都类似

  14. 2009November . 16th - 8:23 PM

    我还是便宜把边栏放右边,或者是宽屏三栏。
    印象中书上介绍ABCD四区,B区指正文,放在左侧会更好些。

  15. 2009November . 16th - 8:37 PM
  16. 2009November . 17th - 4:10 AM

    1. 小女子不知道分析的对不对哦:键盘靠左,人眼睛习惯直视,所以左边比较重要;人眼首先注意对比度大的,所以颜色重要;第二点重于第一点。像你这种有大container的还好,我的那种就算放右边人家也是先看的。至于你们一直说的spider的问题,如下解释:a,spider是按网页结构爬的,所以有些人会把自己不在首页的重要文章都写一个meta放到head里,sidebar左右无所谓;b,google和搜搜现在是爬你的rss,根本没有sidebar,一定影响都没。至于bolo的开Bookmarks的考虑,算是一种提法。
    2. 一直用黄金分割的飘。
    3. 子侧栏还要考虑字体大小的,本来就300px的侧边栏分两个150的,16px左右的字体基本放不了几个,11px又太小了。现在近视眼多啊。要是sidebar在下面,倒是可以分三个子栏。

  17. 2009November . 17th - 12:50 PM

    @Marguerite Su
    1.苏姐姐的留言怎么进SPAM里了呢?
    2.搜搜就是Google,Google不是搜搜。在Google的网站管理员工具里貌似是可以设置是否从rss里抓取的。
    3.我一般用12px的字体,有些浏览器用的不是点阵字库,小于12px中文就看不清了。

  18. 2009November . 17th - 3:06 PM

    借鉴了

  19. 2009November . 18th - 1:04 PM

    我已经摒弃了800*600分辨率的用户了,改用960px的页面宽度了~~

  20. 2009November . 18th - 1:41 PM

    Bolo,你这个主题支持评论分页啊?越来越喜欢你这主题了,我准备拿来用用o(∩_∩)o

  21. 2009November . 18th - 5:02 PM

    @最后块烧饼
    800×600早被抛弃了,现在的最低标准是兼容1024×768
    @一天一歌
    等我发布完善版再用吧,现在很多地方还是不完善的

  22. 2009November . 18th - 6:07 PM

    总感觉sidebar放在右边非常协调,所以我也是放在右边,但是看一下一些大型的门户网站,像sina的博客,他们默认的设计都是把sidebar放在左边,这点我比较疑惑

  23. 2009November . 18th - 6:39 PM

    我也喜欢把侧边栏放右边。。。

  24. 2009November . 18th - 7:30 PM

    嗯,很少有WP的sidebar放左边的吧……

  25. 2009November . 20th - 9:39 AM

    挺有道理的
    多数网站侧栏都一样。

  26. 2009November . 20th - 1:36 PM

    求正解

  27. 2009November . 26th - 6:15 PM

    没用过wp。。我也刚换了博客

  28. 2009December . 17th - 11:07 PM

    @万戈
    原来是这样啊

  29. 2010June . 30th - 8:05 AM

    网页设计师很强大,Sidebar的位置不重要,因为通过css可以调整的,源代码中是否先出现正文部分的内容才是关键。

Subscriber selector

Close