浅谈博客网页设计

SMASHING MAGAZINE自前几周发布了《网页表单设计调查报告》之后，今天又为我们带来了《博客网页设计调查研究》。该份调查研究报告秉承了上次的风格，通过详尽的数据和客观的分析为网页设计和开发人员分析了当前流行的和已经过时的博客网页设计解决方案。下面天兔就为大家呈上这篇精彩的文章。

既然我们想要撰写一份尽可能客观的调查报告，我们使用了Technorati Top Blogs上提供的博客资源，并对其中的50个最流行的博客进行分析。

博客设计调研报告

我们设计了30个关于博客设计的问题，并对每个问题分别进行回答。

我们从Technorati前50排名中排除了那些社交网络和人为造势的博客网站——例如通过Wordpress主题进行回链的那些博客。而在SMASHING MAGAZINE所提到的那些备受赞誉，通过各种CSS花样设计的博客网站我们将在下周进行讨论。

请注意：不要将以下的调查结果作为你的博客设计方针。它们仅能提供给你一些建议，哪些解决方案相对于另一种解决方案好些而已。你需要根据你的博客具体内容进行权衡。

1. 布局

让我们从这些最流行的博客网站的布局设计开始。是两栏布局好还是3栏布局好？布局是否居中？布局是固定的，流动的还是弹性的？是否还在使用表格？在这个部分，我们将回答所有这些问题。

1.1. 需要几栏？

应该使用两栏布局还是三栏布局这个问题应该是个原则性的问题。不过，在我们的调查报告中似乎找不到任何结果，究竟该使用两栏还是三栏呢？通 常，这个设计问题基于你的博客内容来定。在某些情况下，很难在使用两栏布局设计主要内容和次要内容这个问题上找到均衡点。有时，你需要将次要内容或者说是 第二栏再进行切割，变成两个部分，而且这种情况是非常普遍的。

以上两种布局的设计准则就是让内容看上去清晰、易懂。使用4栏或者4栏以上的布局通常不是个好主意。

根据我们的调查报告显示：

▪ 58%使用了三栏以上的布局。(如：TalkingPointsMemo, CopyBlogger, Mashable, Lifehacker),

▪ 42%使用了2栏布局。(如：Zen Habits, GigaOM, Google Blog, Seth Godin, Boing Boing).

TPM 使用了多栏布局。排名靠前的博客网站中58%都使用了同样的布局设计。

似乎前50名的博客网站已经足够让我们发现独特的布局解决方案。Drudgereport 使用了我们称之为“anti-layout”（没有经过任何修饰、白底、默认的字体和链接颜色）的布局设计。TPM则有时侯使用2栏，有时侯使用3栏，甚至有时侯使用4栏的布局设计方式。而且我们对于TPM的文章标题为什么不能点击的这种设计方式的原因还不得而知。

1.2. 居中还是左对齐？

事实上，几年前居中的设计方式就已经变得很普遍了，通常此种设计是解决网站浏览者所使用电脑屏幕解析度大小不同的最佳解决方案。

ReadWriteWeb 使用了居中布局。根据我们的调查显示，94%的博客网站使用了居中布局设计。

1.3. 固定的？弹性的？还是流动的？

说实话，我们真没有想到固定布局会有如此强的趋势。而且值得注意的是，这50个顶尖博客网站没有一个使用弹性布局的（页面的宽度随字体的大小而改变，即相对于字号而设计元素的宽度），并且只有一小部分网站使用了流体元素（根据浏览器窗口的大小变化而变化）。

▪ 92%的博客网站使用了固定布局。

▪ 8%使用了流动布局或部分使用了流动布局元素。(例如Engadget, Smashing Magazine, Gigazine, Liars).

流体布局可以更好的适应用户界面，而固定布局可以让设计人员不用依赖字号和浏览器窗口大小而进行页面设计。

流体布局的主要缺陷是当使用宽屏的时候页面的宽度会产生问题：行宽变得过长。

1.4. 固定布局的宽度？

既然我们发现了固定布局这个趋势，那么我们就来进一步观察这些布局，并且归纳出他们的一些通性。我们来看看对应设计中通常使用的#container或#wrapper这两个容器的布局宽度。

▪ 9%使用了小于800px的宽度(PostSecret, Seth Godin, Google Blog, BeppeGrillo.it),

▪ 15%使用了801到900px的宽度(Neatorama, Kottke, DailyKos, Perezhilton, TUAW, Yanko Design, Scobleizer),

▪ 20%使用了901到950px的宽度(Huffington Post, BoingBoing, TreeHugger, Dooce, Blogoscoped, SearchEngineLand),

▪ 56%使用了951到1000px的宽度(ars technica, Lifehacker, TechCrunch, ProBlogger, A List Apart, TMZ, Wired, GigaOM, Joystiq, Zenhabis, Copyblogger, Consumerist, Slashfilm).

结论：951到1000px将成为固定布局的设计趋势。

1.5. 内容和侧栏的比例？（使用固定布局的情况下）

如前所述，每个页面布局都需要至少一个侧栏，这个栏目将包括一些次要内容和网站的导航。但是，主栏和侧栏的比例应该是多少才能保证读者的阅读舒适度呢？

BoingBoing的页面宽度是870像素，主要内容是550px，占整个页面宽度的63％。

根据我们的调查报告

▪ 96%的网站使用了至少一半的宽度显示主要内容。(例外: CopyBlogger (48％), SlashFilm (48％))

▪ 54%使用了50％–60%的页面宽度显示主要内容。(Mashable, Lifehacker, Kottke, Blogoscoped, A List Apart, BoingBoing, DailyKos, TreeHugger, Scobleizer, Problogger, TUAW, bits.blogs.nytimes.com)

▪ 46%使用了60–70%显示主要内容(ars technica, TechCrunch, GigaOM, Dooce, Zenhabits, CNN Political Ticker, CrunchGear)

▪ 平均来看，58％的页面宽度用来显示主要内容

1.6. 使用CSS布局还是表格布局？

很明显，几乎所有流行的，每天都需要随时更新的博客网站都在使用CSS布局，这样可以更容易的更新内容，并且减少页面的加载时间。

▪ 90%的网站使用了CSS页面布局

▪ 10%使用了表格进行布局或者在CSS中加入表格布局(PerezHilton, Neatorama, CNN Political Ticker, Beppe Grillo, TreeHugger).

2. 排版设计

内容至上。这一准则不管是对普通的网站还是博客网站都是适用的。如何让读者能够舒服的阅读网站内容或者至少能够浏览一下文章标题，这是设计 师的一个重要工作。如何获得最好的内容阅读舒适性？该使用什么字体？适用多大的字号？我们的调查报告将为你的设计决策起到抛砖引玉的作用。

2.1. 浅底深字还是深底浅字？

正如所期望的，98％的被调查的博客网站都使用了白底深色调字。只有PostSecret 使用了黑底和浅色调的字。当然，到底该使用哪种设计方式还要取决于你的网站主题。

在排名前50名的博客网站中，只有PostSecre使用了底和浅色调的字

2.2. 每行需要多少个字？

确保最好的可读性的前提是确保阅读的舒适度。有的调查研究报告指出最合适的行宽是52－68个字符（包括标点符号和空格）。也有的研究表明行宽不管是多少都不会影响阅读的有效性。既然没有确切的标准提供，那么设计师们所使用的行宽也不尽相同。

为了测量每行最大的字符数量，我们使用了浏览器的默认设置和默认样式表。

▪ 10%的网站每行65-74个字符(PostSecret, Beppegrillo, Perez Hilton, Scobleizer, Blogoscoped),

▪ 18%的网站每行75-84个字符(Dooce, Blogs.nytimes.com, Joystiq, CopyBlogger, TUAW, Slashfilm),

▪ 34%的网站每行85-94个字符(Lifehacker, Huffington Post, Kottke, ars Technica, Huffington Post, BoingBoing, Seth Godin, Treehugger, Problogger),

▪ 18%的网站95-104个字符(Mashable, ReadWriteWeb, Smashing Magazine, Google Blog, A List Apart, Search Engine Land),

▪ 16%每行超过105个字符(Engadget, TechCrunch, GigaOM, Wired, TMZ).

基于以上调研，我们建议最常用的（不见得是最用户友好的）行宽是80－100个字符。

非常有意思的是我们发现没有一个博客使用两端对齐的文本排列方式——100％的博客网站都使用了左对齐的文本排列方式。

2.3. 正文文本使用的主要字体？

Sans-serif₁字体成为了非官方标准的正文字体，特别是用于在线设计上。曾经提出该建议是因为过小的字体出现在屏幕上会显的过于凌乱。下面我们看看在这些流行的博客网站上是如何体现这项建议的。

▪ 34%的博客网站使用了Verdana (sans-serif)作为正文字体。(A List Apart, Kottke, TUAW, CopyBlogger, Dooce, ars technica, TechCrunch, Smashing Magazine),

▪ 24%使用了Lucida Grande (sans-serif, 包括基于Mac OS X的该款字体)(Zenhabits, Mashable, Lifehacker, CrunchGear, Thinkprogress),

▪ 18%使用了Arial (sans-serif)(ReadWriteWeb, Engadget, Google Blog, CNN Political Ticker),

▪ 14%使用了Georgia (serif)(Scobleizer, GigaOM, Wired, BoingBoing, Huffington Post),

▪ 6%使用了Trebuchet MS (sans-serif)(Andrew Sullivan, Seth Godin, Postsecret),

▪ Helvetica Neue (ProBlogger)和Times New Roman (TPM)只被使用了一次

ars technica 使用了每行85-94个字符，12号Verdana字体作为正文字体。

2.4. 正文字体的大小？(假设以em作为衡量单位)

字号越大，读者越容易阅读。但是，如果如果字号过大，读者就必须不断的滚动屏幕，而且眼睛要不停地从一个地方跳到另一个地方。那么最合理的字号应该是多大呢？

下面是基于调研得出得结论：

▪ 34%的网站使用了12号字(SearchEngineLand, TUAW, Mashable, ars technica, Engadget, Smashing, DoshDosh, TreeHugger),

▪ 30%的网站使用了13号字(Consumerist, CopyBlogger, Zenhabits, Valleywag, Lifehacker, Huffington Post, BoingBoing, Seth Godin, Google Blog),

▪ 14%的网站使用了14号字(TPM, GigaOM, Wired, ReadWriteWeb, Gigazine, ProBlogger),

▪ 12%的网站使用了11号字(A List Apart, Kottke, Neatorama, Dooce, TechCrunch, Dailykos),

▪ 4%的网站使用了15号字(Scobleizer),

▪ 剩下的三个网站各使用了10号字, 16号字和17号字。

Zen Habits 使用了13号，Lucida Grande字体作为正文字体。大多数博客网站使用12号Verdana字体作为正文字体。

2.5. 标题使用的主要字体？

既然sans-serif通常作为正文字体使用，那么设计师应该会考虑使用serif作为标题字体来强调文章标题。是否真的如此呢？

▪ 30%的博客网站使用了Arial (sans-serif)(CNN Political Ticker, Scobleizer, TPM, Crooksandlliars, Joystiq, Dooce, PerezHilton, ReadWriteWeb, Engadget, Google Blog, TreeHugger),

▪ 22%使用了Georgia (serif)(A List Apart, Andrew Sullivan, Blogs.nytimes.com, GigaOM, Wired, Huffington Post, BoingBoing),

▪ 8%使用了Lucida Grande (sans-serif)(Tuaw, ThinkProgress, Lifehacker, Crunchgear),

▪ 8%使用了Helvetica (sans-serif)(Zenhabits, Mashable, ars technica, Smashing Magazine),

▪ 6%使用了Verdana (sans-serif)(Blogoscoped, Neatorama, DailyKos),

▪ 6%使用了Trebuchet MS (sans-serif)(Slashfilm, Postsecret, Seth Godin),

▪ 4%使用了Helvetica Neue (sans-serif)(CopyBlogger, ProBlogger),

除此之外, Calibri (SearchEngineLand), American Typewriter (Valleywag), Lucida Sans Unicode, Franklin Gothic Medium, Tahoma (TechCrunch) 以及根本没有标题(Kottke)均被使用了一次。

Darren Rowse使用Helvetica Neue作为Problogger的标题字体。大多数设计师倾向于使用Arial和Georgia字体 (52%)。

2.6. 标题字体要多大？

最后，让我们看看标题字体的大小。标题字体越大，越容易引起读者的注意。但是，如果标题过多的话，会使读者很难进行选择该阅读哪条。因此，使用标题字号的准则就是：如果首页上的文章很多的话，要减小标题的字号，而通过其它的视觉特效来突出标题，比如使用极易抓眼球的颜色。

▪ 24%使用20-22号字(BoingBoing, PerezHilton, Blogoscoped, Google Blog, TechCrunch, ReadWriteWeb),

▪ 22%使用23-25号字(CopyBlogger, ProBlogger, Lifehacker, Mashable),

▪ 22%使用17-19号字(Tuaw, Scobleizer, TreeHugger, A List Apart, Gizmodo),

▪ 16%使用14-16号字(YankoDesign, Dailykos, ars technica, Seth Godin),

▪ 6%使用26-29号字(Engadget, GigaOM, Wired, Dooce),

▪ 没有网站使用10-13号字来突出标题。

而且没有网站使用30-31字号; Huffington Post 使用32号字，Zenhabits 使用34号字，Kottke 根本没有标题。Smashing Magazine使用了这些被调查网站中的最大字号：44号字。

我们总结出来似乎最有效的标题字号介于17到25号字之间。

总结

让我们简短的总结一下这次调查结果的第一部份。

▪ 大的博客网站需要多栏布局(通常是3栏) (58%);

▪ 页面布局通常是居中的(94%),

▪ 布局通常是固定宽度的(基于px单位) (92%),

▪ 固定布局的宽度通常在951至1000px之间 (56%),

▪ 58%的页面宽度用来显示主要内容，

▪ 通常使用基于CSS的页面布局(90%),

▪ 页面北京是浅色调的，正文文本是深色调的(98%),

▪ 最常用的（并非最友好的）行宽是80到100个字符,

▪ Verdana, Lucida Grande, Arial以及Georgia是最常用的正文文本字体(90%),

▪ 正文字体通常是12到14号字 (78%),

▪ Arial和Georgia通常用来作为标题字体(52%),

▪ 标题字号通常是17到25px。

注释1：在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif和 Serif，打字机体虽然也属于 Sans Serif，但由于是等宽字体，所以另外独立出 Monospace 这一种类，例如在Web中，表示代码时常常要使用等宽字体。Serif的意思是，在字的笔画开始及結束的地方有额外的装饰，而且笔画的粗细会因直橫的不同 而有不同。相反的，Sans Serif则沒有这些额外的装饰，笔画粗细大致差不多。