blog重构
by Robin Lu on Jul.03, 2006, about blog, css, design
上个星期看css reboot看得心旷神怡，越看自己的blog越不像样，终于下决心给我的blog也来一次reboot。
1.干掉侧栏
无论是两拦还是三栏式的blog布局，侧栏都被过度利用了，就象一个垃圾箱，什么都可以丢进去。花里胡哨的侧栏转移注意力，而且实用价值并不高。例如包括我自己在内的很多人都有一个高耸入云的订阅图标列表，实际上排列在一起样貌相似的小图标即不好区分也不好点击。作为一个bloglines的用户，我从来没有在任何一个人的blog上费劲去找他们专门提供的订阅图标，我懒，我只点一下bloglines给我提供的bookmarklet。
2.重用底栏
Flickr是重用底栏的专家。SimpleBits是在blog布局中重用底栏的先行者。不仅是为了奖励把页面拉到最后的读者，去掉侧栏而使用底栏，内容和功能各得其所，主题内容更加突出。底栏也不象侧栏那样受到宽度局限，有更丰富地设计选择。由于在页面下方，即使内容多一些，占地大一些也不会影响主要内容的浏览。另外，我的FBO插件已经帮我搜集了我自己的有关信息，很容易就可以把它们都显示在底栏。
3.blog首页
blog首页到底放几条主题合适？我过去的选择是5条。但一个象我这样更新并不频繁，内容连续性不强，主要浏览来自于订阅和搜索引擎的blog，首页放5条主题的意义在哪里？我最后的选择是放一天的内容，将最近主题列表显示在底栏。blog的形式决定首页内容的数量。
4.内容布局
我花了不少时间，参考了很多设计，最终确定目前的内容布局方式。blog的内容象一个辞典的条目一样被展示出来，tag在sidenote的位置。每个人都熟悉辞典的布局，熟悉的布局就不会带来不舒服的感觉，自然就能理解每一部分要传达的信息。在内容右边放置了相关内容的链接，远比侧栏里几个显示月份的归档链接有意义的多，同时将这部分内容从以前每条主题的下方独立出来放在右边，功能和观感都更清晰准确。
5.配色及其他
我没有学习过任何有关配色的知识，我能做的就是找到我感觉好的配色，然后抄袭。目前的配色也是从我的blog内容出发，黑土地色系让我的blog可以显得稳重一些，划过链接时的绿色就象土地上的绿草，会给大多数人舒服的感觉，也是现在网上越来越流行的配色。没有用其他任何大的色块，或者说还没信心用，小的色块起一点点缀作用。
重构前后的效果比较：
重构前：
重构后:
对于这次blog的重构，美观是促使我开始动手的契机，更好的用户体验是我的目标。欢迎有同样兴趣的朋友和我交流。
还没在IE里看过效果，不知道会不会是一团乱。。。
6 Comments for this entry
1 Trackback or Pingback for this entry
-
Running Sandwitch » 页面重构
July 5th, 2006 on 1:29 pm[...] 某天看到了石锅拌饭的Blog，觉得自己的blog也面临着类似的问题：侧栏内容过多，抢了视线。于是想想，决定复制一下他的思路，减轻侧栏的分量，而大量使用底栏。对于颜色的使用，我是无所谓有什么心得的。只是觉得这样蛮不错的而已。 [...]
July 4th, 2006 on 2:21 pm
不得不说重构得很成功，IE下一样很整洁。
现在底栏代替侧栏的设计看来是越来越流行了。
July 5th, 2006 on 12:05 am
改得不错~
搞得我也想改自己的wordpress了~
July 6th, 2006 on 11:14 am
IE下很漂亮！
July 6th, 2006 on 11:19 am
一点小小的不足，正文中的链接不明显，如果不用鼠标滑过，就几乎不知道那里还有个链接:)
July 6th, 2006 on 11:41 am
我也发现这个问题了，
其实还有很多小问题需要调整：）
July 29th, 2006 on 7:47 pm
想法和实施的都还不错。
底栏说不定是未来发展方向。