科学设计博客侧边栏
侧边栏,简称侧栏,英文叫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也是一个不错的办法。
设计子侧边栏
这点是从主题大人mg12那里学到的。这种设计的一个好处是方便对侧边栏的栏目进行进一步细化,如大名鼎鼎的inove主题里把categories和archives这两个不需要太大宽度的栏目设计成双栏,节省了空间。但是,这种设计的最大优点并不止这些。而是,通过子侧边栏的不同搭配,你可以方便地把侧边栏在单栏、双栏和单双混合中变换!






拎不清 只能用别人弄好的
侧边栏靠右放对SEO更有利,蜘蛛是从上往下,从左往右爬的
恩,好的开发人员会站在用户的角度考虑
@万戈
这个不一定。看CSS排版而定,如果html中sidebar在content后面照样可以把sidebar定位到左边你说是吧?哈哈!
@万戈
请看keelii的正解
@keelii
简单来说搜索引擎是通过分析html源码来进行抓取的
也可以用成用户自定义的
这种尝试不错,相当支持
的确不是一般的东西呀
都是用别人设计好的
还真没自己设计过呢
太懒了
自己设计的时候总是凭感觉来呵呵,现在看看还是需要好好研究啊
没认真研究过,只是侧边栏不够宽就再放大一点,和
选择250的蛮好的,和适合放广告
大多数网站的侧栏都类似
我还是便宜把边栏放右边,或者是宽屏三栏。
印象中书上介绍ABCD四区,B区指正文,放在左侧会更好些。
嗯。
1. 小女子不知道分析的对不对哦:键盘靠左,人眼睛习惯直视,所以左边比较重要;人眼首先注意对比度大的,所以颜色重要;第二点重于第一点。像你这种有大container的还好,我的那种就算放右边人家也是先看的。至于你们一直说的spider的问题,如下解释:a,spider是按网页结构爬的,所以有些人会把自己不在首页的重要文章都写一个meta放到head里,sidebar左右无所谓;b,google和搜搜现在是爬你的rss,根本没有sidebar,一定影响都没。至于bolo的开Bookmarks的考虑,算是一种提法。
2. 一直用黄金分割的飘。
3. 子侧栏还要考虑字体大小的,本来就300px的侧边栏分两个150的,16px左右的字体基本放不了几个,11px又太小了。现在近视眼多啊。要是sidebar在下面,倒是可以分三个子栏。
@Marguerite Su
1.苏姐姐的留言怎么进SPAM里了呢?
2.搜搜就是Google,Google不是搜搜。在Google的网站管理员工具里貌似是可以设置是否从rss里抓取的。
3.我一般用12px的字体,有些浏览器用的不是点阵字库,小于12px中文就看不清了。
借鉴了
我已经摒弃了800*600分辨率的用户了,改用960px的页面宽度了~~
Bolo,你这个主题支持评论分页啊?越来越喜欢你这主题了,我准备拿来用用o(∩_∩)o
@最后块烧饼
800×600早被抛弃了,现在的最低标准是兼容1024×768
@一天一歌
等我发布完善版再用吧,现在很多地方还是不完善的
总感觉sidebar放在右边非常协调,所以我也是放在右边,但是看一下一些大型的门户网站,像sina的博客,他们默认的设计都是把sidebar放在左边,这点我比较疑惑
我也喜欢把侧边栏放右边。。。
嗯,很少有WP的sidebar放左边的吧……
挺有道理的
多数网站侧栏都一样。
求正解
没用过wp。。我也刚换了博客
@万戈
原来是这样啊
网页设计师很强大,Sidebar的位置不重要,因为通过css可以调整的,源代码中是否先出现正文部分的内容才是关键。