受欢迎博客页面设计的小调查

    我们非常好奇，尤其是对设计和网络开发，我们想了解关于它的一切。因此，根据我们的《网络形式设计调查》，我们决定对博客设计进行深入的了解，分析并找出哪些是通用的设计方法，哪些根本不被采用。

    为了使这份调查尽可能客观，我们用的是Technorati的博客排名并分析了它里面的前50个最受欢迎的博客。Technorati的排名是否正确其实并不重要，我们想找到大博客们（也称做最受欢迎的博客）青睐的设计方法。它们常常被认为是有效且有用的设计案例（事实并非如此）。

博客设计调查

    我们发现了30个设计问题并分别为每个问题提出了解决方案。我们已提出了30个问题并将在我们的博客调查进行解答。下面我们一一论述根据Technorati前100名中筛选出来的50个最受欢迎的博客进行调查的结果。

    关于Technorati的前50个博客，我们已经过滤掉了那些使用人为方式——比如，通过在Wordpress themes中发布反向链接——提高人气的社会性网站和博客。最乱的CSS代码的价格属于Smashing 杂志——不过，我们会在接下来的数周内解决这个问题。

    请注意：不要把下面所表述的结果当成是一个好博客的设计指南。它们只是要让你有一种直觉告诉你哪种方法好过另一种。但是你也得思考你正在做的内容，盲目地遵循我们的调查结果不一定会改善你的设计。了解受欢迎的博客做了什么，更重要的是了解他们不做什么，也是很有用的。

1.布局

    我们从博客空间中最受欢迎博客的布局入手开始分析。两栏的布局比三栏的多吗？布局集中吗？它们是固定的，变化的还是弹性的？还使用表格吗？在这一节中我们要回答这些问题。

1.1 多少栏？

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

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

    根据我们的发现，

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

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

    差不多50个博客就足以发现不寻常的博客布局。Drudgereport就用了我们称之为“反布局”的方法。TPM用了两栏、三栏和四栏的布局。我们不知道为什么后者的文章标题不可以点击。

1.2. 中间或左边对齐的布局？

    实际上，我们可以观察得到几年前博客中间对齐的趋势——这往往是出于为使用大大小小的屏幕的读者寻求最佳选择的目的。由于越来越多的用户趋向于换成分辨率更高的屏幕，因此设计者会尽力通过提供与布局周围空间数量相等的左右留白数量达到平衡，从而将读者的注意力置于视窗中间的内容上。

    显然，过去的几年里这种趋势已经成为标准做法。实际上，根据我们的调查，排行榜上94%的博客是中心布局。其中有CopyBlogger, Problogger, ReadWriteWeb, Mashable, Ars Technica, Techcrunch 和 Huffingtonpost。

 

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使用。

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

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% use 10-13px to highlight the headline.

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

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

结论

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

     • 大的博客需要多栏布局，通常三栏就够了；（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像素之间。

 敬请订阅RSS，我们将在下周发表调查的第二部分。