主页> > D生活帮 >网页排版:前菜——破格的好例子 >

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


2020-07-30

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

「破格」是什幺意思?

所谓网页设计上的「格」就是「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 的发展会让设计师们更容易针对不同的内容设计网页排版。虽然还有一些障碍有待克服,但是有很多工具现在都可以使用了,而如同上述,先知们已经开始行动了。搭上这股潮流, justfont 非常希望能在中文网路的环境推广这些知识,让网页更好读,也期待正在看这篇文章的大家,不论是网页设计师或工程师,都能够留意网页排版的问题,一起合作,让好读的内容可以更方便、更普及。
这篇文章只是前菜,在接下来的文章中,我们还会深入探讨如何网页排版的技术细节,尤其是如何把传统的排版知识引进到新媒体上。想关心这个议题, 欢迎追蹤 justfont blog!


上一篇:

下一篇: