Web前端: 全球著名博客设计调查报告

Smashing Magazine从Technorati Top Blogs 中的前100位里面选出50位(排出那些非自然排名的博客)。然后对这些博客的界面设计进行调查、总结出30个博客设计问题并给出解决方案。

在看这份博客设计调查报告之前，我们应该搞清楚一些前提：

Technorati的排名是否权威这没有必要讨论，至少这些被调查的博客都是全球比较受欢迎的博客，通过对这些博客的调查所得出的解决方案还是比较具有参考性的。
任何一份调查都仅为了供参考，并不会给出你一个好博客的最佳设计方案。它们只是要让你有一种直觉告诉你哪种方法好过另一种。但是你也得思考你正在做的内容，盲目地遵循我们的调查结果不一定会改善你的设计。
了解这些全球知名博客做了什么，更重要的是了解他们不做什么，也是很有用的。

1. 布局

布局是每一个网页设计的基础，我们从这里入手。该使用两栏，三栏或杂志型设计？固定布局或是自适应布局？是否还应该使用表格？

1.1 多少栏？

设计布局时应该使用两栏还是三栏这个问题几乎无法回答。不幸的是，我们找不到任何实际研究结果来说明哪一个方案比另一个受青睐。一般而言，它取决于内容和你的目标用户。在某种程度上来讲，要在使用二栏结构的博客中找到主次内容之间的平衡点是不可能的。在这样的情况下你可能需要将次要的栏（边栏）划分成两部分——事实上这种方案使用的相当多。

在两种情况下都要使结构尽可能地透明清楚。四栏和多栏的布局常常不是好办法。

根据我们的发现，

58%的博客使用三栏或多栏的布局（TalkingPointsMemo, CopyBlogger, Mashable, Lifehacker）

42%的博客使用两栏的布局（Zen Habits, GigaOM, Google Blog, Seth Godin, Boing Boing）

差不多50个博客就足以发现不寻常的博客布局。Drudgereport就用了我们称之为“反布局”的方法。TPM用了两栏、三栏和四栏的布局。

帕兰注: 如果你也想为自己的wordpress博客使用一个三栏或多栏主题，可以查看我们昨天发布的100款WordPress杂志CMS主题。

1.2 布局居中还是居左？

帕兰注: 这里SM的调查结果是“94%的博客是布局居中“。这似乎是个根本没有必要讨论的问题，不管是博客还是其它任何类型的网站，居中布局所占比例都应该能超过90%。但设计优秀的居左布局也能有很好的效果，帕兰个人比较喜欢的两个居左布局，一个是著名的Adobe官方网站，另一个是个人博客Playground Blues。

另外，这里没讨论到水平滚动布局和居右布局。居右布局我应该是几乎没见过。水平滚动布局的话，本身使用比例比较小，博客设计中使用的就更少。帕兰个人觉得水平滚动布局还是比较有其优势和特色的，只是一切缘于用户的习惯，当我们的视觉已经习惯了居中布局的时候，其它布局要么让我们觉得前卫大胆，要么就是烂透了。

1.3 固定，弹性还是自适应布局？

在50个博客里没有一个使用弹性布局（布局会随字体变化而变化），只有一小部分使用自适应布局（布局随浏览器的大小而变化），这着实引人注目。下面是有关的精确发现：

92%的博客使用固定布局

8%使用流动布局或夹杂了某些流动布局元素的混合式

自适应布局最好是根据用户喜好来调整，因为固定的布局更容易使设计者确信某一个设计决策不用考虑到字体大小和视窗大小。

自适应布局的主要缺陷在于使用宽屏电脑时他们的宽度会增加，一行会变得非常宽（这里是一个Engadget的例子，每行有150个字符）。你可以用最大宽度分布来算一算。

1.4 固定布局的宽度

由于我们已经注意到固定的基于像素设计的布局占有优势，因此我们想要深入了解这些布局并试图发现这些布局的一般特征。特别是，我们已经考虑到固定格局的宽度通常与container或wrapper的宽度相对应。显然，

9%小于等于800像素
(PostSecret, Seth Godin, Google Blog, BeppeGrillo.it)

15%介于801到900像素之间
(Neatorama, Kottke, DailyKos, Perezhilton, TUAW, Yanko Design, Scobleizer)

20%介于901到950像素之间
(Huffington Post, BoingBoing, TreeHugger, Dooce, Blogoscoped, SearchEngineLand)

56%介于951到1000像素之间
(ars technica, Lifehacker, TechCrunch, ProBlogger, A List Apart, TMZ, Wired, GigaOM, Joystiq, Zenhabis, Copyblogger, Consumerist, Slashfilm)

结论：可以证实使用951至1000像素宽度的布局成为趋势。

1.5 内容区域和设计的比例？（如果是固定格局的话）

正如你上面看到的那样，每种布局都需要至少一个包含次要内容并向用户提供导航的边栏。但是，如果要清楚地展现出所有的导航条的话，什么是令用户感觉舒服的最佳方式呢？或者，换句话来说，主要内容区和整体布局之间的比例如何选择？主要内容区域空间越小，边栏的优势就越大，反之亦然。在哪里找到平衡？

根据我们的调查：

96%的博客用一半以上的空间呈现主要内容；特例是：CopyBlogger (0.48), SlashFilm (0.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因为它们允许更好更容易维护，并且减少缓冲时间。因此毫无疑问：

排名前50的博客有90%都用基于CSS的布局；

10%用的是表格或是表格与CSS的组合；
(PerezHilton, Neatorama, CNN Political Ticker, Beppe Grillo, TreeHugger).

而且，TreeHugger用的是传说中的Onmouseout－JAVA事件去模仿环绕效果——一种我们多年来一直想要忘记的设计方案。

2. 排版

内容为王。这一条适用于一般的网站，也适用于博客。而且，让读者在阅读或看到文章的第一眼就感到舒服是设计者的职责所在。这就是排版发挥作用的地方。如何使你的内容的可读性做到最好？用什么字体？用哪个字号？我们的调查也许能为你的设计决策提供一些有用的起点。

2.1 亮底暗字还是暗底亮字？

可以预料到，98%的顶尖博客用的是白色背景黑色文字。只有PostSecret用的是黑色背景色和亮的文字。不过，这种设计策略有可能与站点的内容高度相关。

帕兰注: 文字为主的网站通常都白底黑字，黑底的网站多见于图片展示类网站或是比较个性化的博客。很久之前帕兰和一些朋友讨论过这个问题，有许多朋友都认为黑底白字更利于眼球的舒适度。直到现在其实我还挺疑惑的，白底黑字的主流是因为白底黑底就利于阅读还是又因为习惯问题呢？

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个字符之间。

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和Times New Roman字体只分别被ProBlogger和TPM使用。

帕兰注: 对于中文博客设计来说，使用最多的应该是Arial, Verdana, Tahoma, 宋体。另外值得一提的是，一些朋友喜欢使用微软雅黑字体，从字体本身上来说，微软雅黑是个非常漂亮的字体。但我个人觉得雅黑并不适合做为Web字体，尤其是如果你的内容字体比较小，比如12px，这个时候的雅黑锯齿效果是非常严重的，尽管总体效果漂亮，但不清晰，不利于阅读。

2.4. 文章正文字体多大？

字体越大，读者越容易看到呈现在网页上的内容。但是随着字体的加大，读比较长的文章时就越费劲，因为需要更频繁地滚动页面——并且需要眼睛更频繁地从一处跳到另一处。那么最佳选择是什么呢？

这里是一些我们调查所得最常用的字号：

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像素，各有一个站点使用。

帕兰注: 在权衡正文字号的大小时，设计者往往会考虑整体美观和易读性。比如帕兰映像的正文字号一直是使用12px, 尽管我自己也认为这个字号有些小了，大一点可能会更利于阅读，可我总觉得字号扩大后，哪怕是13px，很影响整体的美观

2.5. 大标题的主要字型

由于sans-serifs体通常用于正文，因此人们常常以为设计者们会倾向于使用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 Granda字体（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压根儿就没有大标题。

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；

此外，0%的博客使用的是30－31像素的字号；Huffington Post用的是32像素字号，Zenhabits用的是34像素字号，Kottke没有大标题。Smashing Magzine自然是“最大标题尺寸”那一型的：我们的字号是44像素。

我们的结论是似乎大标题使用17－25像素的字号是最佳选择。

3.结构

信息设计通常甚至比视觉设计更重要。内容的结构和分级（内容呈现的方式）对访问者如何感知当前信息以及他们在寻找某一特定信息时如何快速浏览当前信息具有非常大的影响。从信息架构的层面上讲，导航的地位最为重要。

3.1 导航菜单：置顶，居左还是居右？

几年前，在博客的浪潮席卷互联网之前，将导航菜单置于页面左手边是一条不成文的规则。当然到现在这条规则并不为顶尖博客们所采用。

我们发现：

58%的博客使用居右（垂直）型导航（如Scobleizer, TPM, CrunchGear, Neatorama, Google Blog, DailyKos, Engadget）

52%的博客使用在顶端水平对齐的主导航（辅之以居右的二级导航）（如A List Apart, Google Blogoscoped, Dooce, GigaOM, TreeHugger, Smashing Magazine, Mashable, ReadWriteWeb, Ars Technica, TechCrunch, Huffington Post）

12%的博客使用居左的垂直导航。

实际上，访问者并不在乎你的导航菜单放在顶端还是边栏。只要你的可用性测试证实大部分新访问者可以轻易地确认菜单栏并使用上面的可选项，你就做对了。因此从根本上来说你可以使用上面提到的任何一种方法。

ReadWriteWeb 使用的是在页面顶端的横向主导航

实际上，当导航栏的设计没有完全遵循惯例时，访问者也不会真的感到困惑。但是，确保导航清楚不含糊是设计师的职责所在，这与到底如何设计导航无关。有一些用户偏好居右的菜单，因为从人机交互的角度来看，它更便于使用。因此75%至95%的人是右撇子，这也不难推测鼠标的指针通常会回到视窗的右半边。

为什么？滚动条被置于浏览器窗口的右边。因此，如果鼠标没有滚轮，用户使用滚动条的需要就更甚于使用浏览器工具栏上的浏览按钮。由于在大部分（至少是很多）网站中都需要使用滚动条，所以鼠标的指针更有可能靠近滚动条。因此，去往右边导航栏需要的位移就比去往左边导航的要小。

3.2. 起始页上多少贴子？

从用户的立场来看，没有什么情况比某个网站给人造成的过度的认知负担更糟糕了。我们Smashing Magazine清楚地知道要找到长篇文章和信息过多之间的平衡是多么地困难。

当呈现过多的信息给用户时，他们会试着逃避这种认知负担－－他们将该页面加入书签以备将来访问（其实再也不会来了）或是干脆关掉窗口，因为他们无法应付呈现给他们的信息。

呈现适当数量的内容对留住访问者很重要，更重要的是，要确认他们还会回访。

28%的博客在起始页上有14至18篇贴子。（如Tuaw, Slashfilm, Gizmodo, TMZ, Lifehacker, ArsTechnica）

26%的博客有10到12篇。（如ProBlogger, TechCrunch, Dooce, ReadWriteWeb, CrunchGear）

14%的博客有20到26篇。（如ValleyWag, Seth Godin, Search Engine Land）

10%的博客有2到6篇。（如A List Apart, Smashing Magazine, CopyBlogger）

10%的博客有27到35篇。（如Kottke, Boing Boing, ThinkProgress, Neatorama）

8%的博客有7到9篇。（如GigaOM, Mashable, TreeHugger）

2%的博客有36篇以上的贴子。（如Andre Sullivan有50篇）

Ars Technica在首页上有18篇贴子的摘要。28%的受欢迎博客在首页上有14到18篇贴子。

3.3. 相关贴或受欢迎的贴子要显示出来吗？

我们无法证实将与用户当前浏览的贴子相关的文章链接显示出来是否是一种趋势。54%的受欢迎博客显示了相关链接（如GigaOM, CopyBlogger, ProBlogger, ReadWriteWeb, Mashable, Engadget, TreeHugger），但其他的没有（如Dooce, TechCrunch, BoingBoing）。

只有48%的博客显示了受欢迎的贴子。其中有Zen Habits, CopyBlogger, DailyKos, Mashable, ReadWriteWeb, Smashing Magazine and Huffington Post。

16%的博客显示了最新的评论（如ReadWriteWeb, BoingBoing, TreeHugger, TMZ, Tuaw）。但是大部分的博客完全没有在首页上显示最新评论。

GigaOM 是那54%博客之一，每一篇文章都有相关贴的链接列表。事实上，这个博客显示了两次相关文章的链接。

3.4. 页脚放什么信息？

大部分网站的页脚都用来展示诸如服务条款、互联网联盟协议、帮助、版权和“关于我们”的链接。但其实可以有更多的选择（见现代网络设计中的页脚：创意实例与理念）。非常有意思的是，我们的调查也提供了一些页脚设计的实用方法。

页脚可以包括：

版权、合法性、隐私条款、服务条款、用户条款（90%），如GigaOM, TMZ, ProBlogger, ReadWriteWeb, Ars Technica

“关于我们”的链接（38%），如Slashfilm, Dooce, GigaOM, ReadWriteWeb, Gizmodo

相关信息的链接（30%），如Kottke, GigaOM, ReadWriteWeb, ProBlogger

RSS订阅的链接（22%），如Slashfilm, Ars Technica, BoingBoing

常见问题或帮助的链接（22%），如Gizmodo, ArsTechnica, Andrew Sullivan

搜索框（14%），如Dooce, Tuaw, Engadget

到页面顶端的链接（10%），如TreeHugger, Zen Habits

到起始页的链接（10%），如Kottke, CrunchGear, Joystiq, TPM

网站地图的链接（8%），如Andrew Sullivan, Wired, Tecaucus @ NY Times

Joystiq 的页脚既不美观也不实用。有时候少一点更好。页脚下面的图片是一个广告。

4. 广告

很多情况下，尤其是排名前列的博客，要维持其生存、支付流量费用、支持编辑团队从而使作者们真正出版其作品，广告对是必需的。大部分的用户希望将广告放在他找到的信息后面。不过尺度在哪里？并且受欢迎的博客网站上广告是怎么呈现的？用户习惯于什么？让我们一起来找原因。

4.1. 每页多少广告？

坏消息：博客空间广告泛滥。只有极少数的网站完全没有广告而且大部分情况下每页只有2到3个广告条。通常博客由主打广告和类似google广告链接组成。12%的博客上有扰人的情景广告（突然冒出来的带下划线的链接）。

一篇文章页面上广告条的数量通常与起始页上的广告数量相同，甚至要稍微多一些。其理由是：很多博主倾向于在文章里或贴子下方使用诸如google广告一样的文字链接广告。更多的发现：

平均每个起始页使用5.84个广告条，如Mashable 广告最多，有20个，TechCrunch位列第二，15个

平均每篇文章页面使用5.96个广告条

68%的博客使用google广告，只除了Kottke, Scoble, Joystiq, Tuaw, CopyBlogger, Valleywag, GigaOM以外

最宽的广告条莫过于Kotaku，它在页面中间的广告条有1000像素宽。

4.2.广告要放在正文里吗？

在页面的内容区域，广告通常被置于贴子的下方。我们观察到文章中间的广告仍然常见，但是使用得相当少。

根据调查，

76%的文章中没有广告（但文章下方或上方可能会有），如Dooce, A List Apart, ReadWriteWeb, Mashable, TechCrunch, BoingBoing

44%在文章下面和评论前有广告，如ProBlogger, Zen Habits, Engadget, Smashing Magazine, Tuaw, CopyBlogger, GigaOM

18%的博客在正文里有广告，如Huffington Post, Yanko, PerezHilton, Slashfilm, Search Engine Land

6%在标题正下方和文章正文前显示广告，如Smashing Magazine, Neatorama, Yanko

4.3.广告放在页面什么位置？

除了正文，人们通常希望广告…嗯，到处都是：页面顶端、右边甚至底端。其实，在调查过的博客中只有12%遍地是广告——顶端、底端、主要内容的左右两边。这不好。但是显然，用户已经习以为常了，硬是漠视了与内容一起强加给他们的扰人的广告。

其他发现：

88%的博客右侧有广告，如GigaOM, CopyBlogger, Engadget, TechCrunch, Smashing Magazine

42%的博客顶端有广告，如Gizmodo, Talking Points Memo, Autoblog, TreeHugger, TMZ, PerezHilton

34%的博客左边有广告，如Lifehacker, Mashable, Gizmodo

24%的博客底部有广告，如Andrew Sulivan, Tuaw, Wired

8%的博客没有广告，如Google Blog, Think Progress, Seth Godin

5. 功能

为了达到设计的主要目标，要兼顾用户友好性和功能性。所有主要的功能都要有并清晰地呈现，使用者必须有一种简单的直觉，知道使用这些功能需要做什么。比如，新访问者应该知道哪里是RSS按钮，哪里是互动性按钮，哪里是搜索框以及如何与博主联系。

5.1. 使用互动性按钮和图标吗？

互动性图标正在普及，但还远远不是一种标准。图标比单纯的文本链接使用得要多一些。网络服务商如Addthis将大量的流行互动按钮藏在一个“交互”按钮后面，当这个按钮非常受欢迎时才显示出来。这种办法的好处是：正文区保持整洁，为可选项提供了好的视觉效果。缺点在于：某些用户在一个互动性网站上找不到为文章投票的路径。

根据调查：

54%的博客在文章下面使用了互动性图标，如GigaOM, ProBlogger, Mashable, Ars Technica, BoingBoing, ReadWriteWeb

38%的博客没有用互动性图标，如Dooce, Google Blogoscoped, Scobleizer, Political Ticker

8%的博客在文章上方使用互动性图标，如Smashing Magazine, TreeHugger, The Huffington Post

Netorama 有很多交互性图标，也有RSS订阅和email订阅。

5.2.RSS订阅：位置和视觉外观

由于RSS按钮可能是将访问者与博客联系在一起的最重要的设计元素，因此应该在网站布局中给它一个醒目的位置。实际上，在Web 2.3 时代设计大而炫的RSS按钮的一个好理由就是：这些按钮需要第一眼就看得到。

所以在博客的顶端仍然并且通常看得到RSS按钮并不奇怪。实际上，

只有38%的受欢迎博客在顶端有RSS按钮

但有28%的博客将其放在边栏的顶部

8%放在边栏的中间区域，14%放在边栏底部，8%放在页脚，但这些都不如放在页面上方那么常见。然而，这里的RSS按钮常常是对页面上方按钮的补充。

有意思的是，只有66%的站点使用了标准的RSS图标显示订阅，其余的则使用了简单的文本链接。

关于RSS订阅的数量：

我们发现64%的博客只有一个主要的RSS订阅。往往也具备评论的订阅和标签的订阅；但是似乎只有少数博客真正提供了多种渠道（如对某些特定主题的订阅）。

56%的博客提供了email订阅，作为RSS订阅的另一选择。

24%的博客一般借助Feedburner，公开了RSS订阅者的数量。Wordpress的用户可以考虑将Feedcount 作为一种方便的选择来订制自己的RSS图标。不过，在这里也一样需要Feedburner。

5.3. 使用标签云？

标签云为一篇博客所涉及到的流行话题及其在文章中的分量提供了良好的概括。但是，90%的博客并没有任何标签云或是给出标准导航的选项。我们的直觉是只是没有空间，这就是为什么即使标签云被使用，它也是相当的小而紧凑。

在调查的站点中有一个标签云的是The Huffington Post, ReadWriteWeb and Joystiq。你可以在我们的文章标签云集锦：实例与实践中了解更多相关信息。

5.4. 使用分页？

令人惊讶的是，在我们调查的站点中只有22%使用了分页（其中有Dooce, GigaOM, Mashable, ReadWriteWeb）。大多数情况下（60%）使用的是“下一页”“上一页”这样的标准导航。

分页有很多好处，因为它告诉访问者有多少内容并能使他们快速跳转到以前的文章去。标签群集锦：实例与实践提供了一些用分页取得成效的创造性例子。

有些博客也用日历导航（6%，如 Thecaucus, Andrew Sullivan）或是档案文件包（12%，如A List Apart, TPM, The Huffington Post）。

Treehugger的不寻常的导航。不是分页和常用的下一页/上一页的导航，该站点显示了当前文章的前几篇和后几篇。

5.5. 搜索框放在哪里？

只有62%的博客在页面的右上角有搜索框。

其中58%的搜索框是放在顶端的。其余的放在边栏的顶部。

边栏中间和更低位置的搜索框不多见（占16%）。

只有一个站点在页脚位置放搜索框（Dooce），Kottke根本就没有搜索框。

5.6. 联系页面的链接放在哪里？

大部分博客将联系页面的链接放在边栏。通常这个链接在右侧导航或左侧导航菜单提供的下一级导航选项中。有时候也使用图标（尤其是email图标）来表达该链接的目的。

52%的博客将联系页面的链接放在边栏（如Engadget, TMZ, DailyKos, Smashing Magazine）

40%放在顶端（如A List Apart, Dooce, CopyBlogger, ProBlogger, Ars Technica, Tech Crunch）

30%放在页脚（如ReadWriteWeb, ProBlogger, Mashable, TMZ）

4%藏在“关于”部分里（如TreeHugger）

值得一提的是大部分博客（64%）都为读者提供了联系邮件，只有28%的博客有需要在线填写的联络单。8%的博客两者皆有（如Yanko, TechCrunch）。Zen Habits请读者在博客首页写评论来与博主取得联系。

5.6. 受欢迎的博客遵循一致的标准吗？

实际上，在开始这项调查之前我们已经预计到对大部分博客来说内容比设计更为重要。但是我们并没有料到只有4%的博客在实际上遵循了标准。

显然：

96%的博客没有统一的标准

8%的博客有500个以上的错误，如Ben Smith’s Blog, Neatorama, Search Engine Land

28%的博客有200到499个错误，如BoingBoing, ProBlogger, Google Blog, Engadget

24%的博客有100到199个错误，如TreeHugger, Mashable, ReadWriteWeb, Gigazine, TUAW

22%的博客有50到99个错误，如TechCrunch, CopyBlogger, Dooce, Ars Technica, Lifehacker

10%的博客有1到49个错误，如Kottke, GigaOM, AutoBlog, Google Blogoscoped

4%没有错误，如A List Apart

Neatorama 不支持Xhtml1.0转换。毫无疑问，其页面是用表格做的。

错误最多的非Ben Smith’s Blog莫属，它有2286个错误，没有文本格式定义，其次是Neatorama（1428个错误）和Search Engine Land（1116个错误）。

导致无效HTML代码的唯一理由是：从网络标准的角度来看，广告服务商太可怕了。他们几乎从不生成有效的代码，这就是为什么大部分的博客几乎都没有遵循统一标准的原因（他们需要广告来生存）。作者们常常别无选择，要为了得自于广告商的“糟糕的”源代码的收入而向代码的质量妥协。

结论

让我们对上述主要调查结果进行简述，作为第一部分调查的总结。请记住不要拿这个调查的结果作为一个好的博客设计的指南，这个问题要另外撰文叙述。

大的博客需要多栏布局，通常三栏就够了；（58%）
页面布局要居中；（94%）
布局要有固定的宽度（按像素计算）；（92%）
固定布局的宽度介于951至1000像素之间；（56%）
整个站点布局的58%用来呈现主要内容；
使用CSS布局；（90%）
背景用亮色，文字用暗色；（98%）
最常见的（不一定是最具备用户友好性的）行长是介于80至100个字符之间；
在正文中使用Verdana, Lucida Grande, Arial 和 Georgia；（90%）
正文的字号介于12至14像素之间；（78%）
大标题用Arial和Georgia体；（52%）
大标题的字号介于17至25像素之间。
52%的博客通常使用右边栏（58%）和顶端横向导航
50%的博客起始页显示10到20个贴子的摘要
50%的博客在每篇文章的页面上显示相关贴和最受欢迎的贴子
90%的博客页脚包含版权信息，40%的博客有“关于”页面的链接，30%的博客有联系信息的链接
平均每个起始页上有5.84个广告条
平均每篇文章页面上有5.96个广告条
76%的博客文章通常不包含广告
88%的博客广告常常在右边栏
54%的博客其交互性图标常常在贴子下方
66%的博客的RSS按钮显示在页面的上部
66%的博客使用“标准的”RSS图标，用得比文本链接要多
64%的发布方只用一个主要的RSS订阅而不是多个订阅
90%的博客不使用标签云
分页少见，只有22%的博客使用
62%的搜索框放在页面的右上角
96%的博客都不规范

本文是来自Smashinag Magazine总结的一份博客设计调查报告(1,2)，中文译文由网友春水碧于天首发于译言(1,2)，帕兰映像重新精简整理和加注后发布。

再提醒一下各位爱好设计的朋友, 调查只是为了参考, 设计应该遵循基本理论和潮流趋势,但也要大胆创新和勇于实验, 才不会扼杀设计中的创意.

来源于全球著名博客设计调查报告 | 帕兰映像

Web前端

2011年8月27日星期六

全球著名博客设计调查报告