Hello World
Spiga

为读者打造良好的文章阅读体验

2010-08-20 17:01 by 老赵, 3897 visits

几个月前我在微软“社区精英计划”上谈过“如何打造受人欢迎的博客”,其中一点便是“样式美观”,这也是如Scott Hanselman这样的业界著名博主给出的建议之一。对于写文章、读文章来说,我可谓完全是外貌协会的高级会员,一旦遇上样式排版不好的文章、再好的内容我也难以坚持阅读下去——我也相信很多人多多少少有和我一样的习惯。有人说,我们是程序员,做不来样式怎么办?其实在我看来,打造一个良好的文章阅读体验并不困难,甚至只有那么几点而已。虽然我不是设计师,但我现在也想来谈一下我在这方面的习惯和“品味”。

选择一个好的主题

其实,要写出样式良好的文章非常容易,一般只要选择一个样式美观的主题即可。各个BSP一般都已经提供了部分不错的主题,而对于像Wordpress这样的博客系统,华丽优雅的主题更加数不胜数,甚至已经形成了一个产业。因此,如果您可以找到这样一个主题,那么八成的工作就已经完成了。但是,有些时候令人满意的主题并不那么容易找到,而且适合英文内容的主题,也不一定适合中文博客(例如我现在的皮肤便是经过一番修改的)。稍后我也会提出一些“准则”,这可能有助于您订制出更容易令人接受的阅读效果。

选择了皮肤,其实就是选择了一套CSS样式,Web标准已经帮我们订制了HTML + CSS的黄金搭档(画外音:我TMD还脑白金呢)。CSS负责样式,HTML则提供内容,换句话说,我们文章的内容就是以纯粹的HTML形式提供的,不应该牵扯到样式。这大大减少了我们写作文章时需要考虑的因素,因为我们几乎只需要使用p、span、h1、blockquote、strong、a、span、ul、ol、li等最最简单的几种标记即可。因此我认为,最适合写博客的工具是Windows Live Writer,而不是Word或是其他的网页编辑器,因为它们都太复杂了,容易出现各种无用的标签及样式。

最后,在写文章的时候,也应该使用正确的标记。例如自然段就使用p,而不是使用div或是br。各级标题就使用h1等等,而不是使用p + strong的形式。如果您真希望标题和正文的文字大小一致,那么应该使用“样式”去控制,我们的文章内容应该结构良好,语义清晰。

如果您写好了一篇文章想要发布,也不放在最后检查一下它的HTML。应该是十分整洁的“顺序标记”,而不是混乱的标记、属性以及大量的嵌套——我们只是在写文章,不是在做网页。

怎样才是良好的阅读体验

各花入各眼,可能每个人眼中“良好的阅读体验”是不同的,我现在来谈一下“我眼中”良好阅读体验的几个特点。

首先,“文字”要大,“行间距”不能太小,“段间距”更要明显。我一直觉得中文在Web设计领域一直难以舒展手脚,且不说英文在网页上可以使用那么多的字体,而中文字体几乎只能使用单调的样式,就论英文和中文的大小吧,英文字体可以很小同时做到清晰美观,而中文字体却不能太小,否则便难以辨认。因此很多时候一个适合英文的博客皮肤,便不一定适合直接套用在中文内容上。此外,“行间距”和“段间距”过小,会给人头皮发麻的感觉,眼睛在扫视的时候很容易失去焦点,难以让人坚持阅读下去。

其次,对于程序员来说,代码格式也相当重要。代码且一定要使用“等宽字体”,如Consolas、Monaco等等都是不错的代码字体。代码的行间距则不能太大,如果说正文的line-height往往是160%到180%的话,那么代码的行间距则是120%到140%会比较合适。还有一点便是代码的着色,服务器端着色客户端着色都可以,事实上在我看来使用SyntaxHighlighter已经可以满足大部分要求了。

一般来说,文章的各部分内容都要样式良好,且容易识别。例如代码段和正文要容易区分,链接也要使用特别的颜色。此外您在代码中可能还会使用“引用(blockquote)”或“列表(ul、ol、li)”等功能,此时您就应该为这些标记定义良好的样式。这些工作往往并不麻烦,因为“良好”并不代表“华丽”或是“复杂”,一般来说我们只需要简单的样式就行了——例如一篇标记良好的“裸文”,使用浏览器默认的样式往往看上去都不错。

关于宽屏浏览器

由于现在宽屏显示器越来越多,例如,根据Google Analytics的统计,我的博客访问者中只有不到15%使用1024宽度的分辨率:

那么,如果还是使用标准的960像素宽度的设计,在我看来已经不太合适了,它会造成横向的空白太多。但是,如果使用更大的宽度,又会让1024宽度分辨率的用户看到横向的滚动条,这也是令人无法接受的体验。最后我使用的做法是让页面进行“自适应”,如果您使用1024宽度的分辨率,您会发现正文和边栏的宽度差不多,这可能不够美观,但是您不会看到横向的滚动条。如果您使用宽度更大的浏览器窗口,就会发现我的博客对宽屏的“优化效果”了(点此下载全尺寸图片):

以上是1440像素宽度的显示效果。由于充分利用横向距离,我遍可以更好地利用侧边栏的空间,让用户可以浏览到更多的内容,也缓解了“侧边栏过高”的问题,如今我的绝大部分文章都是左侧正文评论区域的更高(当然这也有评论较多的原因在里面)。不过太宽也不是一件好事,这样会显得文章正文部分单行太长,内容过于松散,因此我的博客最大也只会有1600像素宽(点此下载全尺寸图片):

以上是在iMac27上的全屏显示效果,其宽度为2560像素。此外,如果您把浏览器缩到极窄,您便会看到横向滚动条,因为我保证了博客至少也有1000像素宽。在打造博客皮肤时我在这方面花费了很多精力。我就是个这么挑剔的人。

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

27 条回复

  1. pandaslow
    82.41.13.*
    链接

    pandaslow 2010-08-20 17:16:32

    没有考虑过不是所有人都全屏游览网页吗? 还有,阅读文字的时候,读者有个习惯的长度吧,这方面和传统的印刷制品统一比较符合用户阅读习惯吧。

  2. 老赵
    admin
    链接

    老赵 2010-08-20 17:31:16

    @pandaslow

    我观察和调查下来,似乎除了像iMac27这样的巨型屏幕外,大部分人都是全屏浏览的。而且不全屏又如何呢?只要浏览器窗口大于1024就行了,这也简直是一定的,呵呵。

    对了,你说的“传统的印刷制品统一”是指什么啊?

  3. ck
    202.101.162.*
    链接

    ck 2010-08-20 18:11:27

    对于宽度而言,完全可以用 Fluid Layout 啊

  4. infinte
    218.22.21.*
    链接

    infinte 2010-08-20 18:17:45

    我最近有把我的wordpress主题CSS改用cm和pt做长度单位的欲望。用media query做分辨率适配。

    另外一行行长不要超过30个汉字否则行太长不好找位置。

  5. ck
    202.101.162.*
    链接

    ck 2010-08-20 18:18:51

    而且我觉得,你的这个博客的评论,做成嵌套的就更好了

  6. 阅读
    220.169.4.*
    链接

    阅读 2010-08-20 18:29:06

    老赵,你的博客是全屏的,你确定大多数都习惯这样吗?

  7. ck
    202.101.162.*
    链接

    ck 2010-08-20 18:55:18

    (必填,仅用于Gavatar),单词拼错了嘛

  8. yemg
    125.112.110.*
    链接

    yemg 2010-08-20 21:06:28

    @老赵

    你好,你在博客园与firelong关于C#性能的大讨论,我也看过一些。你在MSDNWEBCAST的同事李建忠先生针对元数据在.NET中的地位和作用写了一篇博文,我个人看了分析的非常不错,不知道你有兴趣看一下吗!

  9. Crazy
    112.2.235.*
    链接

    Crazy 2010-08-20 22:22:34

    公司的和家里的显示器都是1080P的,嘿嘿

    程序员博客的对界面能做到这样的挑剔,可谓是到了极致哈。

    我就是在做Web后台时比较挑剔,从大网站上Down下来的后台管理,仅在HTML层发现的错误就不少,于是乎自己改了又改,终于也算是弄成一个像样的后台界面了。

    在此过程中也算是得出一个结论了:大网站也不见得就重视界面优化,尤其是后台界面(我用的后台界面发现35邮箱后台也在用,结果登录进去,我改良的地方他们一个都没改,体验性太差了)。

  10. 老赵
    admin
    链接

    老赵 2010-08-20 23:15:53

    @yemg

    看过了啊,几个星期前就看过了……

  11. 老赵
    admin
    链接

    老赵 2010-08-20 23:16:50

    @阅读: 老赵,你的博客是全屏的,你确定大多数都习惯这样吗?

    因为大部分人都不会去调整浏览器大小,要大就直接点“最大化”按钮了,这在Windows和Mac上的FireFox等浏览器上都是直接全屏的效果。

  12. icodon
    123.147.77.*
    链接

    icodon 2010-08-21 00:11:43

    赞成,一个好的博客,需要一个好的皮肤。

    老赵的默认字体是Verdana,其实Verdana不是理想的字体,中英文混合的时候,同样的大小(比如12px),英文会显得比较胖,比中文大一圈,不河蟹,我宁肯用Arial。

  13. 链接

    小城故事 2010-08-21 22:15:44

    1024分辨率,看着正文太窄了,不如留出滚动条,把边栏藏在屏幕外面

  14. 链接

    麒麟.NET 2010-08-23 09:53:03

    “文字”要大,“行间距”不能太小,“段间距”更要明显

    老赵,话说你原来那个皮肤。。。对于美观有强迫症的你,是怎么忍了这么长时间的呢?

  15. 老赵
    admin
    链接

    老赵 2010-08-23 09:55:40

    @小城故事

    如果最小宽度是1500的话,那么许多宽度都会有滚动条了。我觉得再窄也有500的显示效果,也算可以了,而且只有不到15%的人用1024宽度,他们窄点就窄点了。

  16. 老赵
    admin
    链接

    老赵 2010-08-23 09:57:56

    @麒麟.NET

    体会到我为什么要用独立博客了吧。以前我没把博客当回事情,所以还可以忍,越重视越忍不下去。

  17. amen
    61.232.0.*
    链接

    amen 2010-08-24 09:28:58

    老赵,对Sdo 的Bambook 您有什么看法?BLS排队系统 是您主导参与开发的吗?

  18. 老赵
    admin
    链接

    老赵 2010-08-24 10:56:27

    @amen

    Bambook不是SDO的,是创新院搞得。我虽然在创新院,但是没有参与开发过有关Bambook的任何东西……

  19. Rwing
    183.38.160.*
    链接

    Rwing 2010-08-24 12:26:52

    呃,看来访问老赵blog的用户都是相对高端的呢。例如分辨率,看cnzz的统计报告显示,国内1024分辨率占到44%左右

  20. amen
    61.232.0.*
    链接

    amen 2010-08-24 13:10:12

    @老赵

    呃……你是不是后悔kindle买早了啊……哇哈哈……

  21. amen
    61.232.0.*
    链接

    amen 2010-08-24 13:10:48

    还有 好像sdo的站点 主要用的是.net技术~

  22. 老赵
    admin
    链接

    老赵 2010-08-24 13:55:28

    @amen: 呃……你是不是后悔kindle买早了啊……哇哈哈……

    不后悔啊,我的Kindle是9寸屏,因为我要看A4大小的内容。要说后悔也是因为现在的Kindle DX 3比我当时便宜1000块钱——不过电子产品么大家都懂得,所以没什么好后悔的,嘿嘿……

  23. mikel
    222.223.3.*
    链接

    mikel 2010-11-30 16:59:41

    我怎么感觉老赵你的博客模板很不利于阅读,特别是右侧的导航占尽了屏幕大半,而且密密麻麻的标题 显得很乱

  24. 老赵
    admin
    链接

    老赵 2010-11-30 18:25:25

    @mikel

    没看文章?我这是为高分辨率浏览器优化的,低分用户就忍忍吧。

  25. mensmen
    125.119.237.*
    链接

    mensmen 2011-11-17 13:46:52

    屏幕1920x1080,单位里是1440x900,体验都不错,不过我想说我用win7以后的一种浏览习惯,或许不代表全部,就是把窗口拖动靠边(左或右),win7会自动将窗口半屏显示,对于这个尺寸如果刚好没有滚动条就好了。。 @老赵

  26. mensmen
    125.119.237.*
    链接

    mensmen 2011-11-17 13:53:48

    另外有两个问题:Chrome下最右上角的RSS图标位置貌似有问题,只显示了一半(刚开IE测试了下也有这问题,而且IE下还会有链接的下划线...);

    还有个是最下面评论的提交按钮和上面的风格及配色有点不是很协调。。。而且离输入框有点远。。。我开始还没找到- - 其实不用水晶质材挺好,你上面的H1那种简洁风格,换成灰色或绿色都挺好看的(这个纯个人喜好和建议,可无视)

  27. 老赵
    admin
    链接

    老赵 2011-11-17 13:55:33

    @mensmen: 屏幕1920x1080,单位里是1440x900,体验都不错,不过我想说我用win7以后的一种浏览习惯,或许不代表全部,就是把窗口拖动靠边(左或右),win7会自动将窗口半屏显示,对于这个尺寸如果刚好没有滚动条就好了。。

    这个太窄了吧,连1000都不到,现在的页面一般都是1000为标准的呢。还有Chrome下面应该没问题才对,因为我平时就用的是Chrome。配色什么的我就更不懂了,我是直接移植的一个皮肤,呵呵。

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我