2008/08/30

国外常用的10款博客系统概揽

编译:4EB Studio 原文出处:SMASHING MAGAZINE

选择一款博客系统软件是一件非常艰难的事情,特别是对一个新手来说。在当今的网络世界中,有太多的博客系统软件和CMS(内容管理系统)可供选择,因此如何从中挑选一款适合你自己类型的博客系统不是一件容易的事情。

在选择博客管理系统软件的时候有很多方面需要考虑,比如:

▪ 程序语言

虽然许多博客平台使用PHP或Rails语言,但是你还是可以找到你想要的程序语言。

▪ 你需要哪些功能

你所选择的博客系统软件完全取决于你需要使用的博客类型。一些博客系统专门针对新手,而一些是专门针对开发和设计人员的。因此你需要选择适合你自己的。

▪ 博客系统软件的社区大小

如果一个博客系统软件对于单独的一个博客体系来看足够大,但是相对于另外的博客系统社区相对小很多,而且活跃度相对较低的话,那么就应该选择更具社区活跃度的软件。开发社区中更多的活跃度和使用者意味着该软件代码的改善度也更快。

▪ 博客系统软件的新旧程度

博客系统软件的新旧程度意味着该博客平台的成熟度。全新开发的博客系统稳定性会较差,而且存在更多的bug。

▪ 你是否计划未来拓展你的博客

如果你考虑未来在你的博客上增加像论坛、网店或其它功能的模块,那么你就应该在最开始就选择具备这些功能的博客系统软件。

你所选择的博客系统软件对你的博客具有相当大的影响。你必须在最开始就选对才能够避免日后更换系统时带来的不必要的麻烦。下面介绍10款非常流行的博客系统软件,并列举各自的优势和劣势。

1. Wordpress

Wordpress是目前最为流行的博客平台。它具有非常直观的网页结构的安装模式,适合各个阶段的使用人群。

Wordpress社区可以说是博客系统软件最主要的财富来源。它有一个非常庞大的、极具影响力的、针对开发者和使用者的社区,用户可以在这里找到任何主 题和插件。而且,你可以任意扩展软件,许多网站和服务商都使用基于Wordpres的代码进行软件开发。Wordpress还集成了Akismet,一个最有效的博客软件防垃圾系统。

wordpress

Wordpress对于一个新手来说,无论是安装还是下载更新都是十分容易,只需一键即可自动完成。学习使用Wordpress只需要很少的时间,如果新 手遇到问题的话可以通过拓展文件进行查找解决。对于一个第一次涉足博客网站的新手来说,Wordpress已经相当完美了,而对于一个高级开发者来 说,Wordpress可以提供具有延伸性的稳定的代码,让你的博客更加与众不同。

如果你想创建一个多博客系统,你可以查看Wordpress MU。Wordpress MU和独立博客系统Wordpress的代码标准是一样的,而且增加了一些其他的功能。

基于Wordpress的网站欣赏

Web Designer Wall

wall

I Love Typography

typo

Binary Moon

binary

Superflous Banter

superflousbanter

2. Movable Type

和Wordpress作为最被广泛采用的博客平台不同,Movable Type更多的为高流量的博客网站提供更丰富的安装程序。这些高端安装程序包括(当然不仅限于)Huffington Post(网络上最流行的博客系统),Gawker blogs (如Lifehacker, Gizmodo等), BoingBoing以及dooce。

movabletype

这些高流量的网站之所以使用Movable Type最主要的原因是它内建了多博客平台,而且只需一步安装即可实现。你可以快速创建你希望数量的博客,以及创建一个博客网络,例如Huffington Post和Gawker。

虽然Moveable Type就用户友好度来说落后于Wordpress,但是Moveable Type在交互界面和安装上做了很大的改善,而且近期迈出了最具成就的一步就是转变了一个开源的平台,这对于社区来说意义非凡。

Movable Type对于创建多博客系统或网络来说是个最佳选择,而且它可以帮助创造巨大的网络流量。

基于Movable Type的网站欣赏

Kevin Kornell

bearskinrug2

Cameron Moll

cameron

Dave Shea

mezzoblue

Dan Cederholm

simplebits

3. ExpressionEngine

ExpressionEngine 是一款非常具有活力的博客平台,不过它不是免费的。ExpressionEngine最有特色的地方是它可以同时发布多个网站,无论是使用同一域名下的不同次级域名,还是直接使用多个域名。

你可以使用相同的代码基准进行不同域名的多网站开发。该款软件具有一个十分简洁的后台,让博客们可以轻易上手。开发者和设计人员喜欢ExpressionEngine是因为它的操作十分简单。

ee

ExpressionEngine是一款面向创建多博客网站使用者的工具,但是任何人都可以轻松的上手使用该软件,这都要归功于它深思熟虑而且近乎完美的设计。受价$99.95,如果你只想创建一个个人博客网站的话可以下载它的核心版本EE。

基于Expression Engine的博客欣赏

Jesse Bennett-Chamberlain

31three

Veerle Pieters

veerle

4. Drupal

Drupal并不是一个典型的博客系统软件。虽然它拥有一个庞大的社区而且很多博客都使用它作为博客系统软件,但是不仅仅是个博客软件。Drupal实际上是一个社区平台系统软件。

作为一个博客社区的系统软件,Drupal确实光芒四射。Performancing就是一个例子。无论你想创建一个独立博客网站还是多博客网站,Drupal都是一个不错的选择。

drupal

Drupal的另外一个亮点就是它的多功能模块性。它不仅具有充满活力的用户系统,而且还拥有很多社区友好功能,比如论坛、书籍(在"book"结构下中创建文件)以及可以随时追踪其它使用者的内容更新的tracker。

Drupal还拥有一个庞大的开发者和模块社区。利用这些模块可以创建任何形式的网站或者添加几乎任何功能。许多主流的大型网站都使用Drupal来发布他们的多博客以及用户社区。例如Performancing, Spread Firefox, The Onion, 以及Ubuntu等。

Drupal对于想要添加论坛或者其它扩展功能的博客创建者来说是一个非常棒的选择。

基于Drupal的博客欣赏

43 Folders

43folders.com

Abduzeedo

abduzeedo

5. Textpattern

Textpattern 是一款十分简单的博客平台。它甚至没有集成WYSIWYG编辑器,取而代之的是Textile,一个简单的标记语言工具来格式化文本。

Textpattern相对于ExpressionEngine来说是一款非常简单的软件,不像ExpressionEngine那样提供很多的扩展特 性。但是Textpattern是一款非常稳定和成熟的软件,它不是初级使用者的最好选择,毕竟它需要使用者懂得Textile语言,或者可以使用 html编写文章。如果你需要一个WYSIWYG编辑器,就必须安装额外的插件。

textpattern

Textpatter有很多的主题模版和扩展工具,虽然开发者社区不像Wordpress那样庞大,但是社区忠诚度非常高。

Textpattern对于喜欢简单而且并不介意使用Textile的高级开发博客创建者来说是一个不错的选择。

基于Textpattern的博客欣赏

Hicksdesign

hicksdesign.co.uk

UX Magazine

uxmag.com

NZRN

nzrn.com

Erratic Wisdom

erratic

6. Joomla

Joomla是一个CMS,和Drupal有些类似。相对Drupal面向于社区平台和博客来说,Joomla更倾向于电子商务平台。

joomla

不管它们有多大区别,Joomla在易用性上和Drupal非常相像。而且Joomla拥有一个非常有名开发社区,提供许多扩展功能。

Joomla对于想要创建一个博客社区网站,并且加入电子商务功能的人来说是个不错的选择。

7. b2evolution

b2evolution是又一款既可以创建独立博客网站,也可以创建大型博客网络的系统软件。不过,b2evolution的开发社区比较薄弱,仅提供200来个插件(Joomla社区大概能有3400多个插件)。

虽然b2developer的开发社区并不庞大,但是它具有一个大有可为的代码基准以及很多人仍然在使用b2developer来壮大他们的博客和博客社区。

evolution

该博客软件的后台对于初级使用者来说极易上手。而且内建统计功能,这是大多数博客系统软件所不具备的。而且该软件还具有一个小型WYSIWYG编辑器,对于初级博客使用者来说非常不错。

8. Nucleus CMS

Nucleus 也是一款可以创建独立博客和多博客的软件。就功能和开发社区来说,它和b2evolution有些相像,具有一系列非常棒的扩展和有用的插件及主题,使用者可以根据需要个性化安装。

nucleus

Nucleus比b2evolution的界面更为优雅和舒服,并且后台也简单易用。而且,Nucleus更新非常快。你可以在下载安装该软件之前在其测试网站上试用该软件。

Nucleus对于需要一款简单易用的博客系统来创建独立或多个博客的使用者来说是个非常好的选择。

9. Serendipity

Serendipity 是一款对于初级使用者来说非常友好的博客平台。它可以自动更新插件。而且其内建的评论模块是其它许多博客系统在没有安装插件的情况下所不具备的。

serendipity

Serendipity使用了高性能的智能模版系统,并且使用了快速而简洁的PHP代码。如果你是一个博客新手,Serendipity提供了一个安装向 导帮助完成软件安装。和b2evolution及Nucleus不同,Serendipity不提供多博客安装,不过你可以进行独立博客的多用户安装。

10. Mephisto

到目前为止,我们所提到的博客系统软件都是基于PHP语言的。而Mephisto博客系统是基于Rails语言的。Mephisto提供一个非常简单界面的后台,并且极具直观性。你可以通过内建的模版编辑器控制它的每一部分的外观。

mephisto

Mephisto还没有提供更过的模版和插件来个性化博客外观。Mephisto更多的是一款博客框架软件。

对于有能力创建自己的主题和插件的网页设计人员和开发人员来说,Mephisto更多的是一个博客平台。而对于初级使用者来说,还是推荐使用Wordpress或者 Movable Type。这两款流行的博客平台可以通过插件和不同的主题更轻松的个性化博客。

2008/08/29

BBEdit 9.0发布

Bare Bones Software于本周四发布了其源码编辑器旗舰产品BBEdit 9.0。

使用mac系统的编程人员应该对该款软件并不陌生,甚至有些人会因为这款软件而专门购买了苹果机,足见其在源码编辑器领域的地位是不可动摇的。和其竞争对手Textmate相比较,因为BBEdit能够更好的支持中文,因此收到了中文麦饭们的追捧,今天又释放出了全新版本,看来远远超越Textmate的趋势不可阻挡。

BBEdit9对于前一版本8来说改进和增加了很多更强大的功能,包括rewritten项目管理,查找和文件比较功能的改进,还有全新的文本自动填充界面的完善。

全新的文本自动填充界面提升了用户友好性,和dreamweaver的文本填充一样,用户在写入代码的时候,文本填充会提供一个代码列表供用户选择。

在默认情况下,文本填充框会在用户键入后稍等片刻即出现。如果用户不想使用该功能的话可以在偏好设置里面关掉此功能,当使用的时候可通过菜单或者快捷键调用。

BBEdit的查找功能也有所变化和改善。9版本将查找(Find)和多文件查找(Multi-File Search)命令分成了两个,它们都可以在查找菜单中找到。和旧版查找对话框作为固定模块不同,新版的查找替换功能是非模块的,你可以在不同的窗口之间进行挪动和切换。


BBEdit在文件比较功能上的改进主要体现在提供了更多的比较结果。你可以看到两个文件非常细微的差别,也可以查看指定行或段落的差别。

BBEdit提供了一个全新的工具就是便签工具,使用者可以在上面写草稿以及任何需要的文字。它不需要保存,所有内容均会自动保留,甚至在你退出软件从新开启以后依然会看到之前的内容。

旧版本中的File Groups被Projects替代。新的项目窗口允许用户直接在文件中编辑文本,而且可以重命名,新建以及删除文件和文件夹。




新版本的BBEdit可以读取bz2格式的压缩文件。如果在你的任务窗口有一个压缩文件,你只要双击它,BBEdit将会自动显示其中的文件内容。而且,专为为开发人员设计的新特性允许用户在Xcode任务中进行查找。

BBEdit 9.0提供了对MobileMe的支持。如果你有一个MobileMe账号的话,你可以同步BBEdit的偏好设置以及Application Support文件夹,从而备份你的文件,Clipping以及所有通过BBEdit生成的数据信息。

新版本的BBEdit还提供了对VMWare Fusion 2.0的支持。如果你的mac机上安装了VMWare Fusion 2.0,那么你可以通过该虚拟机直接在windows上的Firefox, Opera, Safari, 以及Internet Explorer预览你的HTML文件。

BBEdit 9.0的其它变化包括修改了Ruby语言的支持,加强了对JavaScript的支持,更新了ObjC,Obj-C++和YAML语言模块,以及对Clipping的改进。

2008/08/19

学习如何进行iPhone的网页开发

原文作者:James Black 原文出处:NETTUTS


该文章主要讲述了如何通过使用javascript和一些Safari移动版的特殊CSS代码来设计专供iPhone和iTouch使用的页面和样式表。而且这些网页可以根据iPhone的手持状态显示不同的方向,垂直或者水平。

准备工作

在正式开始之前,我先准备了两个psd文件作为iPhone的页面样式。我使用图形作为页面背景和页眉,当然你也可以直接使用背景颜色设计这两个部分。其余的不使用图像的部分在水平和垂直切换的时候将会得到快速的加载。你可以查看我设计好的资源,或者你可以使用你自己的。不过请切记,这些网页都是专门针对iPhone或iTouch设计的,不一定会适用于日常使用的浏览器。如果你手头没有iPhone或iTouch这两个设备,你可以从苹果的官方网站下载iPhone SDK,它包含了一个iPhone模拟器。如果你希望通过标准的浏览器预览iPhone页面或者通过有条件的注释加载iPhone CSS和HTML,请使用以下代码:





  1. <script type="text/javascript">

  2. var browser=navigator.userAgent.toLowerCase();

  3. var users_browser = ((browser.indexOf('iPhone')!=-1);

  4. if (users_browser)

  5. {

  6. document.location.href='www.yourdomain.com/iphone_index.html';

  7. }

  8. </script>


上述代码解释如下:  
  • 第2行: 设置一个变量来检测使用者浏览器

  • 第3行:如果当前使用是iPhone浏览器则分类给浏览器类型一个值

  • 第4-8行:这是一个条件语句来重定向正在使用“iPhone格式页面”的用户,如果"users_browser"返回一个值的话(也就是说当前的用户正在使用iPhone或iTouch浏览页面)

下面的代码将使用html有条件注释来隐藏标准浏览器的代码。



  1. <!--#if expr="(${HTTP_USER_AGENT} = /iPhone/)"-->

  2. <!--

  3. place iPhone code in here

  4. -->

  5. <!--#else -->

  6. <!--

  7. place standard code to be used by non iphone browser.

  8. -->

  9. <!--#endif -->


第1步:建立HTML文件

我们现在已经知道了如何让用户指向你的iPhone页面,如果他们现在正在使用iPhone或iTouch。现在,我们将开始编写iPhone的HTML页面。下面的代码是区别于常规XHTML transitional文件的最主要的地方。


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  4. <head>

  5. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">




  6. <title>My iPhone Page</title>




  7. <link rel="apple-touch-icon" href="images/myiphone_ico.png"/>

  8. <link rel="StyleSheet" href="css/iphone_portrait.css" type="text/css" media="screen" id="orient_css">





上面这段代码的意思是:  
  • 第1-5行: 这是标准的1.0 XHTML Transitional Doctype,没有什么特别的地方。

  • 第6行:这行是针对iPhone和iTouch的特殊代码。它为设备的浏览器窗口设定了一个初始值。width=device-width设定了页面宽度和设备宽度相同。initial-scale设定了页面可放大倍数的初始值,maximum-scale设定了页面可以被放大的最大倍数。

  • 第9行:这行的链接目标是页面的icon图标。该图标当用户将本页作为主页的时候将会显示出来。

  • 第10行:iPhone样式表的外部链接。该样式表被定义了一个名为“orient_css”的id,可以通过javascript指向其,并且当设备的方向发生改变的时候通过改变css文件来适应布局。

第2步:创建页面布局

在加入执行方向感应的javascript功能之前,我们先继续完成剩余的HTML部分。先完成页眉的部分,然后开始进行body部分。在body元素里面,我们将添加onorientationchange=orient()代码。该代码用来实现"orient"方向感应的功能。




  1. </head>




  2. <body onorientationchange="orient();">




  3. <div id="wrap">

  4. <div id="header">

  5. </div>

  6. <div id="content">

  7. <p>This is the main content area of the page. </p>

  8. <p>Using css and javascript we can manipulate any of these divs using an alternate css file. The css files in this project are for landscape and portrait views.</p>

  9. <p>Some more filler text here to demonstrate the page.</p>

  10. </div>

  11. <div id="bottom">

  12. </div>

  13. </div>

  14. </body>

  15. </html>

第3步:方向感应Javascript

在页面的head部分,你需要加入以下代码:



  1. <script type="text/javascript">

  2. function orient()

  3. {

  4. switch(window.orientation){

  5. case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";

  6. break;

  7. case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";

  8. break;

  9. case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";

  10. break;

  11. }

  12. window.onload = orient();

  13. </script>


switch(window.orientation)用来完成body中的norientationchange()行为。这将查看当前的旋转方向是否和"case value"相同。如果返回的值是true,那么将继续执行冒号后面的事情。window.onload()将执行当页面第一次完成加载时的方向功能。

在每一个事件值之后,我们将使用javascript指向CSS文件的链接id。根据事件值的不同,0,90,或者-90(当然还有180,但是iPhone此时不支持),代表"垂直"或者"水平"的CSS文件将会被应用于link元素中的href。0代表垂直方向,90代表按顺时针旋转的水平方向,-90代表逆时针旋转的水平方向,180即使不被支持,不过要说的是它代表翻转过来的方向。

第4步:完成CSS

我们将创建两个CSS文件,一个命名为iphone_portrait.css,另一个命名为iphone_landscape.css,前者将作为默认的链接样式表。



  1. body

  2. {

  3. background-color:#333;

  4. margin-top:-0px;

  5. margin-left:-0px;

  6. }

  7. #wrap

  8. {

  9. overflow:auto;

  10. width:320px;

  11. height:480px;

  12. }

  13. #header

  14. {

  15. background:url(../images/header.jpg);

  16. background-repeat:no-repeat;

  17. height:149px;

  18. }

  19. #content

  20. {

  21. background:url(../images/middle.jpg);

  22. background-repeat:repeat-y;

  23. margin-top:-5px;

  24. }

  25. p

  26. {

  27. margin:5px;

  28. padding-left:25px;

  29. width:270px;

  30. font-size:10px;

  31. font-family:arial,"san serif";

  32. }

  33. #bottom

  34. {

  35. background:url(../images/bottom_corners.jpg);

  36. background-repeat:no-repeat;

  37. height:31px;

  38. margin-top:-5px;

  39. }


上面是iphone_portrait.css文件的代码,非常简单,不过还是有几点要说明一下:

  • 在"wrap"样式中使用"overflow:auto"以确保浮动元素均在wrap div内,从而保证页面的干净整齐。

  • 页面的尺寸设置为宽320,长480,以确保页面元素均在wrap div内。

下面的代码是iphone_landscape.css文件的代码。和iphone_portrait.css唯一不同的是背景图片、wrap尺寸的长宽调换以及相应的空白边改变。



  1. body

  2. {

  3. background-color:#333;

  4. margin-top:-0px;

  5. margin-left:-0px;

  6. }

  7. #wrap

  8. {

  9. overflow:auto;

  10. width:480px;

  11. height:320px;

  12. }

  13. #header

  14. {

  15. background:url(../images/l_header.jpg);

  16. background-repeat:no-repeat;

  17. height:120px;

  18. }

  19. #content

  20. {

  21. background:url(../images/l_middle.jpg);

  22. background-repeat:repeat-y;

  23. margin-top:-5px;

  24. }

  25. p

  26. {

  27. margin:5px;

  28. padding-left:25px;

  29. width:370px;

  30. font-size:10px;

  31. font-family:arial,"san serif";

  32. }

  33. #bottom

  34. {

  35. background:url(../images/l_bottom_corners.jpg);

  36. background-repeat:no-repeat;

  37. height:37px;

  38. margin-top:-5px;

  39. }


如果你是用的是我设计的背景图像,那么你垂直方向的网页现在应该和下面这张图一样。



这是水平方向的样子,看看是否一样呢?


接下来要做什么?

现在你已经完成了一张具有iPhone和iTouch格式和样式的页面,那么接下来还可以作些什么呢?好的,如果你的页面不仅仅是一个网页,你可以尝试用Joe Hewitt来验证你的IUI。Joe Hewitt是一个框架模型,可以确保你的页面看起来更像iPhone或iTouch的原生应用程序。而且,必须切记,你需要制作3个不同的CSS文件,一个垂直的,另外两个都是水平的,一个是顺时针旋转的页面,一个是逆时针旋转的页面。好了,快点动手试试看吧。祝你好运!

2008/08/14

35款超炫商业名片设计欣赏

当我第一眼看到这些商业名片的设计的时候,真的令我很诧异且打开眼界,不知作为设计师的你是否会从中得到一些灵感和启发呢?

Eric Kass | design by funnel.tv

Eric Kass business card

Heads Inc | design by headsinc.com

Heads Inc business card design

Melvin | design by www.jenimattson.com

Melvin business card design

Thielen Designs | design by thielendesigns.com

Thielen Designs business card design

Diesel Design | design by dieseldesign.com

Diesel Design business card design

Promptt | design by promptt.com

Promptt business card design

National Greyhound Adoption Program | design by lauriedemartinodesign.com

National Greyhound Adoption Program business card design

Steven Belkowitz | design by lauriedemartinodesign.com

Steven Belkowitz business card design

Kinos Aarau | design by heinz wild

Kinos Aarau business card design

Digitopolis

Digitopolis business card design

Actual Size | design by actualsizecreative.com

Actual Size business card design

How’s my designing ?

How's my designing business card design

Joe Duffy | design by duffy.com

Joe Duffy business card design

Richard E. Smith

Richard E. Smith business card design

Vorderman Photography | design by oneluckyguitar.com

Vorderman Photography business card design

Manicurist Card

Manicurist business card design

Sensus Design Factory

Front :

Sensus Design Factory front business card design

Back :

Sensus Design Factory Back business card design

The Church

The Church business card design

Ben Grosz | design by Ben Grosz

Ben Grosz business card design

Cehovin Eduard

Cenovin Eduard business card design

Cehovin Eduard business card design

Mass Envelope Plus

Mass Envelope Plus business card design

Marian Bantjes | design by bantjes.com

Marian Bantjes business card design

Coffee Industry
Coffee Industry business card design

Design Your Life | design by design-your-life.org

Design your life business card design

Ed Fella

Ed Fella business card design

Space 150 | design by space150.com

Space 150 business card design

Thomas Wood Products | design by johnstonduffy.com

Thomas Wood Products business card design

Tania Hannaford

Tania Hannaford business card design

Kaypee Soh

Kaypee Soh business card design

Sack Wear | design by whois3.com

Sack Wear business card design

Austin Walsh | design by konnectdesign.com

Austin Walsh business card design

B. Uhrig & Son

B. Uhrig and Son business card design

John Bragg | design by funnel.tv

John Bragg business card design

2008/07/25

浅谈博客网页设计

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

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

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

1.2. 居中还是左对齐?

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

rww

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. 内容和侧栏的比例?(使用固定布局的情况下)

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

boing

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 使用了黑底和浅色调的字。当然,到底该使用哪种设计方式还要取决于你的网站主题。

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

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

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)均被使用了一次。

drowse

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则沒有这些额外的装饰,笔画粗细大致差不多。