网页设计中 95% 是排版

产品

在网络中,95% 的信息都是文字。也就是说作为一个合格的网页设计师,一定的文字编排功底是必须的,也就是我们所说的:排版。

早在 1969 年,Emil Ruder,一个著名的瑞士的排版设计师,他根据当时的印刷材料写了一段话,我认为对于现在的网页设计,这段话依然管用:

当今,印刷品如同洪水猛兽般将我们淹没,个人的才华能不到施展,因为对同时代的人来说,担忧的是这些印刷品并不是那么简单就可以搞定的。读者之所以能够很快找到自己感兴趣的作品,正是由于排版设计师将这些混乱不堪的印刷品规整分类。

稍微联想一下(就像在线打印),这样的工作听起来像是信息设计师。信息设计师的任务就是将这些混乱的信息进行分类,解释,让读者能够更好的发现他所感兴趣的内容。

我们称之为“信息设计”的东西,包括了宏观排版​(文本的整体结构)和微观排版(有关字体的类型以及间距等)。这么说来,信息设计师的工作其实和 30 年前的排版设计师没什么区别:

在排版之前,有一个很明确的责任,就是将信息以书面的形式传达出去。不经深思熟虑的排版是不会注意到这点的。如果一件印刷品失去了阅读的功能,那它还是什么存在价值呢。

好的排版其是就是拥有优秀的可读性、可访问性、可用性以及画面的整体平衡。有效的组织文本框,以及将文字与图片相结合,这不应该是平面设计师,可用性专家以及信息结构师干的活么?怎么会没有人注意到这点?

字体太少?分辨率太低?

这是最主要的问题 —— 也是人们经常抱怨的,在线排版的困难在于只有少数的字体可用。第二问题就是分辨率太低,使得像素字体和反锯齿字体都变得难以阅读。

而事实上,我们所抱怨的字体太少其是根本就不算个问题:在意大利文艺复兴时期,当时的排版设计师只有一种字体可用,但在那个时代还是出现了不少优秀的排版作品:

![](https://i1.wp.com/cloudfront4.ia.net/wp-content/uploads/2006/11/speciamen.gif?w=960)
排版设计师不应该在乎有多少可用的字体。事实上,字体的选择本不应该是你关心的重点。你更应该关心怎样在有效的时间内做出最佳的作品。

排版不是挑字体

第二个问题也不重要。在这之前,信件的印刷质量比我们现在的屏幕显示质量要差很多。而且,更重要的是,经过一些专业的处理,显示字体也可以做到很好的可读性。

信息设计并不是关于如何用好字体的,而是关于如何用好排版。这两者有着天壤之别。任何人都可以使用字体,有些人也懂得选择好的字体,但并不是每个人都懂得排版。

对待文字就像对待用户界面一样

而另一个令人烦恼的问题就是不同的浏览器和操作系统,他们都用各自不同的方式来呈现字体,因此确保每个平台和浏览器都有同样出色的表现也是网页设计师的责任。要用正确的行间距和字间距以及一些留白和色彩来帮助读者更好地阅读。但这还不够,一个优秀的网页设计师知道如何处理文本,而不是内容,他对待文本就像对待用户界面一样。去看看 Khoi Vinh 的网站,你可能就会明白这其中的意义:

![](https://i1.wp.com/cloudfront4.ia.net/wp-content/uploads/2006/11/koih.gif?w=960)
像这样对待文字如用户界面一般,[视装饰为犯罪](http://en.wikipedia.org/wiki/Ornament_and_Crime)的网站还有很多,比较出名的比如像:[Google](http://www.google.com/)、[eBay](http://www.ebay.com/)、[Craigslist](http://www.craigslist.org/)、[YouTube](http://www.youtube.com/)、[Flickr](http://www.flickr.com/)、[Digg](http://digg.com/design/Web_design_is_95_typography)、[Reddit](http://reddit.com/search?q=typography)、[Delicious](http://del.icio.us/post?url=/the-web-is-all-about-typography-period)。对排版的控制不只是设计的必要条件,知道如何对待文本如同用户界面一般是网页设计成功的关键。成功的网站运营还需要同时创建[一个简洁的用户界面和高度的一致性](http://ia.net/the-interface-of-a-cheeseburger)。不过这是另外一个话题了。

更新:既然都说了这么多,我随后写了这篇文章来详细解释以上内容。

第一步,寻找方法

网络上的学习资源

  1. 《网页排版》:为了消除一些围绕在网页排版身上的神话,​作者认为使用 Bringhurst 的工作原则来对网页的结构进一步调整,一次来解释如何更好的使用 HTML 和 CSS 来完成每一步。
  2. 《简单五步让排版更好》:说起这种排版,作者觉得,并不是说排版的时候该用什么字体,让人一看就是你的风格。对于那些觉得网页上的文本和行间距、字间距都恰到好处的人来说,阅读体验才是最佳的。
  3. Behaviordesign 的创始人 Khoi Vinh。目前也是 NYTimes.com 的设计总监,是一个极具才华的人。
  4. Rod Graves,通讯设计师。他说,“排版是我的一个重点。排版中的网格和层次机构通常是我开发视觉效果的基础”
  5. 一些问题列表:与字体的交流。字体以及布局。以读者为中心设计。易读性。字体、平面设计。网页排版的问题。控制网页排版:大小、字体和颜色。CSS 方法、浏览器问题、用户问题以及解决方案。你确实应该阅读这篇文章
  6. 国际排版协会:ATypI(Association Typographique Internationale)是国际上一个主要研究字体和排版的协会。ATypI 成立于 1957 年,它为国际间的字体和排版提供相互交流,沟通和活动的社区。
  7. 字体思维:网上的内容和书本是一致的:为设计师、作家、编辑以及学生提供关键的指导。
  8. Typetester:在线对比各种屏幕上的字体显示
  9. Typophile:Typophile 是一个会员和赞助商社区。从 2000 年开始,Typophile 就在不断的学习和遵守开发写作的思想。他们每个月为客户提供超过 300 万页的服务。
  10. Typohile WiKi:一个由用户创建的关于字体和设计的百科全书。用户可以创建和编辑条目,这样做的目的是希可以成为一个协作、有用、平衡以及有价值的社区。
  11. 下一个大事件是在线字体:比尔·盖茨为了使计算机用户,事实上是微软的用户可以得到更好的屏幕阅读体验,所以他将改进屏幕阅读作为前五大优先级项目之一。

相关书籍

  1. 《Typographie》by Emil Ruder:Emil Ruder 的《Typographie》是排版设计师和平面设计师的历代经典之作。Ruder,二十世纪最伟大的排版设计师,它抛弃了老式的过时的排版规则,使用的新的方法取而代之,以满足的现代需求。
  2. 《网格系统与版式设计》by Kimberly Elam:网格系统是几乎所有版式设计的基础,但它却经常被误以为是固化的,公式化的解决方案。然而所有伟大的设计师的作品都是基于网格系统(即使是那些颠覆性的),值有少数几个设计师才能真正理解网格蕴含的巨大财富。
  3. 《Grid Systems: A visual communication manual for graphic designers, typographers and three dimensional designers》by Muller-Brockmann:为专业人士提供的专业信息,在这里你可以找到关于网格系统的权威信息。虽然 Muller-Brockmann 是在 1961 年第一次提出并解释了网格的概念,但是这些信息在今天的电脑设计中依然有用。

**作者:**Oliver Reichenstein
**翻译:**Max Cheung
原文链接:Web Design is 95% Typography