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

作者：帕兰映像 on 八月 28th, 2009 | 0 评论

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 内容区域和设计的比例？（如果是固定格局的话）

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

• 开源软件中隐藏的复活节彩蛋
  Ars Technica...
• 可变成桌子的房子
  好吧，是可变成房子的桌子……这里还有变态形的完整视频演示：国外 |...
• Ubuntu 9.10 在 SSD 上完成启动仅用 5 秒
  自 Ubuntu...
• 5款支持多通讯协议的聊天工具
  LifeHacker近日评选出了5个网民最爱的通讯软件, 啦啦啦翻译，以下的通讯软件(IM)均是支持多通讯协议,...
• 职业博客每天起床后的二十分钟
  　　职业博客每天早起后都做些什么事情呢？Problogger博客作者Darren Rowse分享他每天早晨起床后20分钟的安排，Bilin...

随机推荐文章:

• 步入坟墓的音像业(gowers的网记)
• 创业的2008，还有期待的2009(飞扬新锐)
• 信任的强大驱动力(魏武挥的博客)
• 高性能网站建设指南是一本值得一看的书(SEO 网站优化推广)
• 图说南非印象（6）(对牛乱弹琴)
• Sharein：很棒的社会化分享服务(Web2.0 Share)
• 手机联系人管理(IT与人性)
• Lynx模拟蜘蛛视角插件（适用:遨游,世界之窗,360浏览器）(SEO实验室)
• 新浪UC2009Ⅱ支持多同时登入MSN/Gtalk/雅虎通(分享网络2.0)
• 华友：盛大娱乐帝国的“东风”(风梦阁)

==》进入“帕兰映像”专栏阅读更多文章