修改FriendFeed的网页风格

用FriendFeed的时候,总是感觉很头疼,UI设计相当成问题,本来主题内容就都很短小,link又多,每个内容下面又都来个Comment – Like – Options,于是满眼的link和Comment – Like – Options,本来应该可以一眼扫过的,还得一点一点捡。什么都想突出,最后结果就是什么都突出不了。 做了一个简单的userstyle,修改了一下,这个是修改后的效果,稍微好了一些: 下面是我用的userstyle (Firefox专用) @-moz-document url-prefix(http://friendfeed.com/) { .feed .body .entries .info {margin-top: 6px !important;font-size:.7em;padding-left:30px;} .feed .body .summary a:link {text-decoration:none !important;} .feed .body .summary {color:grey;} a.l_comment, a.l_like, a.l_options {text-decoration:none;color:grey !important;} .body .entries {border:1px solid #ccc;padding:5px 10px;margin:10px 0;} }

blog重构

上个星期看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里看过效果,不知道会不会是一团乱。。。