网页排版：前菜——破格的好例子

网页排版：前菜——破格的好例子

破格是什么意思? 　　所谓网页设计上的「格」就是Standard Content Design Model，简称 SCDM，说穿了就是我们习以为常的两栏、三栏式的排版法。如今不论中英文的网页，这种排版法都占了绝大多数，导致我们有种错觉，就是网页上能看到的内容只能有这三种排版法。SCDM 会有今天的地位，其实是因为 SCDM 也是各类浏览器的预设内容呈现方式。 　　SCDM 不死，也没有逐渐凋零 　　当 1996 年的冬天，跨时代的伟大发明 CSS 出现后，设计师们就有能力简单快速的为内容量身订做排版设计。理论上，这早已宣告了 SCDM 的死亡。但实际上，SCDM 到 2012 的今天还是充斥各种网页，甚至因为博客、社群网站的兴起而更普遍。可能是为了省时间，所以就干脆使用同样一种版型去套所有的内容;要像设计杂志那样针对内容而设计排版，实在太花时间了。这也许就是 SCDM 以外的尝试仍然很少的原因。 　　但如今的印刷品之所以比网页更好读，其实是因为内容先于排版，也就是说是针对内容来设计最好读的 layout，而不是用同一种 layout 看所有的内容。可以看看 esquire 杂志的例子。下面是它们的网页版： 　　而以下是它们的杂志版，来自 UX Booth： 　　是不是差很多?他们的网站版就是 SCDM 的最佳范例：左、右、中间各有三个栏位，中间是文章，左边是网站按钮，右边是外部连结与广告。文章中的字，也就是主要的内容，就这么被一大堆混杂的资讯挤在中间，让读者在阅读时不容易专心。更不用说，这篇文章是有分页的，有研究显示这么一来会大幅降低易读性。 　　找回传统排版：让文字呼吸 　　杂志的排版则是好多了，至少让人乐意专心读下去。在杂志版面上，传统的Typography规则再度发挥主要的设计功用：清楚分明的栏位摆设把文章与装饰设计区分开来，对比明显，不至于混淆视线。文字有了呼吸的空间，看起来才舒服;两栏文字方块设计则会让读者的眼睛可以自然地从上到下、从左到右扫描。总之，遵照传统排版规则的杂志版面就是比较好读。虽然同样的内容可以一模一样的方到网页上，但你会比较想读哪个呢?(迷之音：搞不好网页设计得差，是为了逼消费者去买杂志而不是看免钱的……) 　　说了那么多，该上菜了 　　但还好，网络一直以来都是创意人的游乐场。随着大家越来越重视屏幕上的阅读，设备的解析度也越来越高，web font 服务如雨后春笋的冒出，连中文世界都有了 justfont，目前屏幕上的内容将变得越来越好读。以下介绍一些我们可以看齐的例子： 　　i love typography 　　i Love Typography 站如其名，是一个热爱字型排版的网站。除了有很多字型排版方面的最新资讯，他们在各种 feature 文章都会用不同的版型呈现，而不是用万年不变的 SCDM;而且预设的字型大小适中，读得很舒服，背景对比也让文字更容易辨识，双栏设计也可以让眼睛快速扫描。这种熟悉的阅读质感，就好像在看杂志一样啊! 　　Jason Santa Maria 　　Jason Santa Maria 最有名的地方就是重新设计文章，让排版呈现内容，而非用内容屈就排版。这个网站的「其它文章」也是特别经过设计的，用三个栏位，让读者可以快速地扫过年分、月份，找到他们真正需要的内容。定制化的版型还会附上截图，让我们更快的发现这些神奇的排版。 　　CRAIG MOD 　　Craig Mod的设计很有趣。虽然字体偏小，但栏位间距良好，所以文字呼吸空间足够。而且副标的摆放有助于分割栏位空间，所以读者可以快速的扫描内容。对，网路上的使用习惯仍然是扫描，而不是阅读，所以有副标是很重要的。 　　THE GREAT DISCONTENT 　　The great discontent 主要刊出的内容是大人物的访谈，通常是有创意有想法的艺术家或 hacker，例如截图上的 Seth Godin。每篇专访都用一个超级无敌大的图片开头，占满整个屏幕空间，就像是刚刚的esquire杂志封面一样(没错，跟以往的网页排版不一样)。 　　而每篇专访的设计其实都是采取内容放在中间栏位的版面设计;左上角的栏位是用在「about」，也就是约略介绍访谈的对象;而右边的栏位与 about 下面的栏位会截取访谈中的精采句子，或是相关的赞助性质广告。quote 另外截取出来，印在旁边，本身就是杂志设计的经典呈现方法，目的就是让读者可以立刻看出内容中特别精彩的所在。这同时也会帮助读者更专注：也许你本来对文章没什么兴趣，但翻着翻着看到一句打动内心的话语，就会阻止他们往下翻，回到前面，仔细地重新看起。 　　最后，每篇文章的网页两侧各有按钮，左边的按钮可以到前一篇，右边的按钮可以到下一篇。这些指标巧妙的指示读者还有更多文章可以读，而不必靠会混淆视听的 sidebar 按钮;另外，这样的设计让使用者不用捲动到下方，就能看到更多文章。 　　一起让中文网页变得更好读! 　　接下来的数年，HTML5 跟 CSS3 的发展会让设计师们更容易针对不同的内容设计网页排版。虽然还有一些障碍有待克服，但是有很多工具现在都可以使用了，而如同上述，先知们已经开始行动了。搭上这股潮流，非常希望能在中文网路的环境推广这些知识，让网页更好读，也期待正在看这篇文章的大家，不论是网页设计师或工程师，都能够留意网页排版的问题，一起合作，让好读的内容可以更方便、更普及。 　　这篇文章只是前菜，在接下来的文章中，我们还会深入探讨如何网页排版的技术细节，尤其是如何把传统的排版知识引进到新媒体上。 　　文：inside