圆角还是直角?

去年底那篇非常流行的《Blog design trends》(《Blog 设计7大趋势》)中提到流行元素之一的圆角(Rounded corners),之后国内 Blog 和新站点设计中,大字号、明快色块、特别是高亮链接使用越发泛滥,也许不少人从此注意到“阅读体验”的问题,当然更多人的动因是追求时尚。

用 CSS 做圆角需要一点技术,下载也会浪费一点时间,事实上国外的新站点中很多也用的是图片,这样的问题是,一旦访问速度出现了问题,图片载不进来,圆角框经常缺一两个,这个页面看起来就非常的不舒服。

圆角框、大色块、大字号,这样的页面目的无非是减少页面元素,在生硬的矩形屏幕里加上了温和灵巧的形状和色彩,帮助用户/读者集中注意力,优化阅读体验,特别是对提供若干个(不是很多)服务的站点,鲜艳的圆角框把各种服务框起来,比如说sixapart,效果就非常明显。在一些将文本内容用过多的框框起来的站点,比如nationalgeographic,也能起到减少疲劳的作用。

但绝对不是每个人都适合,这里不是题材(当然 gov.cn 不用看也知道不会用的)或者时尚的问题。越大的圆角优化的效果越明显,但是占据的空间也相当可观,141px 的正方形和 173px 的圆角方形包含的内容很能一样多,但是后者占据的面积比前者大一半,安排不好的圆角设计更适得其反,这种现象在 Blog 设计中尤其明显。

旧版 msn space 主页多是三栏,分块版面,中间一般是最需要读者关注的内容,但是在旧版的许多 theme 中大量的使用圆角设计,并且平均用在各个分块中,读者的注意力被更加严重的分散了。

其实个人 blog 还是不适合大量的或者过大的圆角,直角做起来要简单得多,优化阅读体验有很多方法,我非常喜欢的 Phu Ly他推介的设计都是个中精华,比如说我现在这个叫什么?无角设计?

竖还是横?

四月 CNN 将导航条从竖的改成横的,如果这时你对比它和 MSNBC 你会说谁的内容丰富?除了后者是 800px 的缘故,横的导航条显示了炫耀内容丰富的功用——如果站点第一要义是让来访者知道你有多少内容,那么导航条,横的比竖的好,左边比右边好(从左到右的阅读习惯下),因此新闻站点多是选择上部、左边,而个人日志更多把这样的好位置留给内容。

Blog 设计越成熟,这个趋势应该越明显,甚至现在很多人已经将导航部分从首页拿掉(wisdumpthehotcrew),或者放在下面(Oliver Zheng5thirtyone,这也应该算一个流行趋势),这样即使页面没有完全加载读者也能开始阅读文字,最傻的设计就好像 sina blog,内容放在右下方并且最后加载,而新上线的 163 Blog 完全学 msn,如果说他们左边巨大而内容丰富的 sidebar 主要在于个人展示,还情有可原。

这样说来个人主页和 blog 应该分别对待,原来大多数受到传统设计影响的“个人主页 = 个人展示 = blog”,显然需要改进了,分享和展示不同,分享是把最有价值的东西突出给你的读者,因此需要考虑优化阅读体验。

宽还是窄?

老外喜欢用窄栏,国人倾向用宽栏,这很明显,wisdump 很窄,themes.wordpress 里下载量彪悍的vistered-little 更窄,并且还有越来越窄的趋势,改版前的 kineda 本来就不宽了,现在又分了栏,成了少有的 4 column。事实上,版面宽度超过 600px,稍长的文字阅读起来就会感觉疲劳,Wordpress default theme 的正文宽度放在报纸上也是没有的,16k 书岂能放在屏幕上读?

另外,好的设计师很少在页面放上 flash 小元素之类的东西(不谈 flash 建站),也很少罗列书签、最近阅读、最新评论、反向链接之类的东西,而 1024px 或者以上宽度对 blogger 新手往往会不舍得浪费,这就是我们在哪里都会看到豆瓣的原因。一个趋势应该是,越来越多的人会意识到空白的价值,少了一些没人去点的链接之后,会有更多的人访问这个站点。

还要不要 Banner ?

Banner 好看与否往往决定了别人对这个设计的第一印象,特别在自定义功能不强的 BSP 中,不过,这是从前了,我想理应有一个 Banner 也属于旧式设计的影响,去掉 Banner 可以省时间,直接进入主题,减少鼠标拖动,如果说一个优雅的 Banner 算是古典主义的遗产,那么现代主义崇尚结构就是外观,实用为美。(如果把后现代理解为将一切杂糅并且平等化,那么我就要说 Q-zone 了~)

去掉 Banner 后很多菜单置顶,这在 CSSReboot 2006 中不胜枚举,alistapart 做的非常经典,当然还有 cre8d 。菜单置顶后加上顶端粗边线(Top border),效果一个一个准。


此外的元素


小字体过时了吗? 如果你老看疯狂的 thehotcrew 当然会这样觉得,事实远没有,更多 flash 建站用比 11px 更小的字体,而且中文字体太大了走样会很严重。


顶端粗边线 这个却是放之四海皆准,原因可能是很好地把浏览器和页面分开,不会因为浏览器分散注意力。


高亮链接 还不够,现在流行 hover 时有浅色背景,加下划线,而且虚线也很流行,有些像我这样 hover 虚线,links 设为实线,或者反过来。(alistapartlivid)而图片的边框本来已经很流行了,现在边框更粗,hover 的变化更大。(kinedacssremix)


更多的系统支持标题显示和展开显示两种模式 这当然很有用,只是需要更多的技术支持。