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

2019-04-03    来源:inside

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

破格是什么意思?

所谓网页设计上的「格」就是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

标签: 网页排版 内容排名 网站排名 

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:看“爱情公寓”有感于打造网站的流量公寓(二)

下一篇:SKYCC组合营销软件热销 不仅仅是因为网络营销