web设计95%是排版！

    看到这个题目，第一感觉是耸人听闻。不管是95%或是更多或是更少，排版确实是一个不可忽略的问题。在我所遇到的web设计师中，或许是遇到的还少，我没有发现谁真正在意web排版。看到这篇文章，感触颇深（因为我刚使用linux的时候需要配置字体，顺便学习了不少的字体知识，也顺便成了一个爱好），周日在家挺闲，为了提高英语水平，顺手翻译了出来。希望对大家有所启发。

这篇文章来自一个研究并提供信息架构的网站：Information Architects Japan，原文：Web design is 95% typography.

又及，文章多次出现typography这个单词。正规的中文翻译应该是“排印”，但考虑web这个非印刷媒体，使用排印并不见得好。于是我根据语境，有时用“排版”，有时用“排印”，请读者明鉴。以下是翻译正文。

web中的信息有95%是成文的语言。为何web设计师应该好好学习一下设计成文信息的主要准则，换句话说，排版？这就是最佳的理由。

信息设计就是排版

回到1969年，Emil Ruder, 一个瑞士著名的排印大师，其笔下关于当时的印刷氛围，简直就是我们今天网站的写照：

今天印刷术的泛滥成灾让我们的个人价值被轻视，因为郁闷的我们现在并不能掌控印刷中的一切。分割、组织和实现印刷术的一切是排印师应有的任务，只有这样，读者才有更好的机会找出吸引她／他的东西。

信息设计师是21世纪的排版师

稍微联想一下（请用在线排版取代印刷），这就像是信息设计师的职务描述。分割、组织和实现印刷术的一切是“信息设计师”应有的任务，只有这样，读者才有更好的机会找出吸引她／他的东西。宏观排版（所有的文本结构）跟微观排版（样式和空间的细节方面）包括我们今天称为“信息设计”的很多方面。也就是说，信息设计师今天正在做排印师30年前的工作：

排版面临一个很直白的职责，这就是传达信息。没有理由能免除排版的这一职责。一个并不能阅读的印刷品只能变成一个无用的产品。

优化排版就是优化阅读，亲和力，可用性（！），综合文本平衡等。组织文本块并结合图片，难道不是图形设计师、可用性专家、信息架构师应该做的吗？但为什么这是一个被忽视的主题呢？

为什么这是一个被忽视的主题？

字体太少？分辨率低？
主要原因——抱怨连天的——不看好在线排版准则的观点是，能用的字太少了。第二个观点是屏幕分辨率太低，让像素或者反锯齿字体之一很难阅读。

文艺复兴：只有一个字体
认为我们没有足够的字体可用的观点是不切题的：在意大利文艺复兴时期，排印师只有一个字体可用，但这个时期还是产生一些顶级漂亮的排版品：

该排印师应该没有太在意他手中手能掌握的字体种类，实际上也不应该太在意字体的选择。他应该更关心时代能赋予自己手中掌握的，并尽力发挥。

选择字样并不是排版
第二个观点也并不见得好到哪儿去。在印刷初期，印出来的字母质量比我们今天在显示器上看到的更差。更重要的是，如果处理得专业，屏幕字体更易于阅读。信息设计不是关于使用好的字样，而是关于使用好的排版。两者的区别很大。谁都可以使用字样，有人可以选择好的字样，但只有少数人能够精通排版。

把文本当作用户界面
对，不同平台和不同浏览器如何处理字体是恼人的，也对，分辨率问题很难让注意力集中坚持到五分钟。但是，好啦，确保文本在所有主要平台和浏览器中赏心悦目是web设计师的职责。正确的行间距，单词和字母间距，留白，一定量颜色的使用有助于可读性。但还不彻底。一个优秀的web设计师知道如何跟文本而不仅仅是内容打交道，“把文本当作用户界面”。瞧瞧Kohi Vinh的网站，你大概会明白他的意思：

稍微著名把文本当作用户界面的 unornamental 网站例子有： google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious. 一个难以争辩的必然事实是，把文本当作用户界面是成功的唯一参数。成功的网站设法同时创建简单的界面和强烈的特征。但这是另外一个主题了。

从哪开始

web排版
为了“破除关于web排版的某些荒谬想法”，他已经“按照Bringhurst的工作原则来构建他的网站，并解答如何通过HTML和CSS中可用的技术来达成各项目标”。

优化排版的5个简单步骤
他所谈论的排版“并不是你典型的‘该用哪种字体’的排版”。对于相信让字号和行间距默认大小使得文本能够任意缩放会提高网站可用性的人，这是一个不错的阅读材料。

Khoi Vinh
behaviordesign的创始人之一。现为网址未加载的设计主管。非常天才的一个人。

Rod Graves
通讯设计师。令人赞叹的工作：“排版是我绝对的中心。排版网格和层次通常会成为我开发的视觉语言的基础。”

A List Apart
通过字样通讯。字体和布局。为读者设计。易读性。字样，图形设计。web排版的问题。控制web排版：字号、字体和颜色。CSS方法，浏览器问题，用户问题和解决方案。

Association Typographique Internationale
ATypl(Association Typographique Internationale) 是一个专注于样式和排版的主要国际组织。创建于1957年，ATypl为国际样式社区之间提供通讯的结构，信息和活动。

Thinking with Type
书籍Thinking with Type的在线伙伴：设计师，作家，编辑和学生的关键指南。

Typetester
比较屏幕字体样式。

Typophile
Typophile是一个会员制和赞助商支持的社区。2000年以来Typophile引领开放合作，并且我们总是能学习到好主意。我们他们伺服超过每月3百万的网页。

Typohile Wiki
一个有关样式和设计所有一切的用户创建百科全书。用户为建立协作，有用，平衡和相关的资源而创建和编辑条目。

The Next Big Thing in Online Type
比尔盖茨要计算机用户，哦，微软用户，能够拥有一个更舒畅的屏幕阅读体验——太重要以至于提高屏幕阅读成为他最重要的五件事之一。

Emil Ruder, Typographie (Amazon)
Emil Ruder’s Typography是一本永恒的书，几代排印师和图形设计师都从中学习基本原理。Ruder, 二十世纪最伟大的排印师之一，是一个抛弃并用新的规则取代Emil Ruder传统规则的先锋，来满足新排印技术的需求。

      标题表达的很清楚，95％，那么，美术设计（或者称为图形设计、GUI…总之，是关于色彩、背景图、图标…的设计）只有5％的重要性吗？我们的美术设计师就这么点儿价值？

      我们目前的工作中，界面原型基本上确定了网页的排版，而界面原型是由交互设计师完成的。看到这个95％的观点，我暗自欣欣然。然而，我想，这个95％的观点有待商榷。

交互设计目前的主要任务是可用性，所以排版很重要。

交互设计的任务包括：
1．创造出高可用性的界面；
2．让界面有良好的体验－让用户在使用过程中有愉悦感、成就感，感觉到被尊重…

这里所说的交互设计是指创造出用户界面以及相应的交互操作的整个设计，并不是仅仅指一些公司中被称谓交互设计师的那些人所作的特定工作。也许，您是一位美术设计师，您设计了一个表示下载功能的图标，这个图标能让用户更快的找到下载功能。您的工作也对提高可用性有贡献。因为，您设计的图标使得用户，在“找到下载功能－点击下载”这个与网页的交互过程中，效率更高了。

提高可用性是目前设计工作的主要任务，是产品质量的基本保障。良好的体验是更奢侈的要求，短期内，web设计是很难顾及到的。我们现在常说的“这个体验好…”往往只是意味着这个设计用户能看懂了，这个设计不会给用户带来太多的麻烦了，实际上，只是可用性高。又有几个网站能让用户在使用过程中有成就感，有愉悦的感受呢？让用户不骂娘已经很不容易了。开发周期短、开发流程差、人员水平低…这种种因素的限制，使得目前的web产品设计只能着眼于更高的可用性。

怎样才能提高可用性？界面设计最根本的任务是－传达，以及更复杂的要求－交互。“我们这里有一些信息要告诉您，要让您看明白…”“我们为您提供了一项服务，它是这样操作的…”把这些交代清楚了，让用户看明白了，可用性就高了。而可用性的XX条准则，无非是为了实现上述任务的具体方法。

怎么就能传达清楚了呢？面对面交流使用的工具是语言，web设计师与用户之间的交流工具是网页。通过排版，设计师向用户说明内容之间的逻辑关系，向用户说明哪里是重点内容。“可点击的文字应该能够直接被识别出来”，类似的可用性准则在设计过程中是需要遵守的，不过，这样的准则是相对固定的，只要我们有共识就好了，相对来说，比较容易做到。而“哪部分文字需要用加粗的18px宋体？”“哪部分内容应该放在页面左上角？”要解决这些问题，需要深刻的理解产品，深入的了解目标用户的需求。排版需要花大量的精力。

目前设计工作的着眼点是可用性，提高可用性除了注意遵循那些准则，更多的精力要花费到如何传达，如何排版上，所以，排版很重要。

更好的视觉体验是件奢侈品，现在很难“重要”。

几年前，网页设计师是指那些“美化”网页的人（也曾经是我的饭碗）。难道这一阵“用户体验”之风吹来，“让网页更好看”就只剩下5％的价值了吗？

真正好的web美术设计应当是“大像于无形”的，或者说是比较抽象的图形设计。而不是给界面原型画花边儿。因为，表面上的“视觉美化”往往降低可用性。“那个花边儿吸引了用户的注意力，使得这个重要的按钮看上去不那么显眼了！”好的美术设计应该是不损害信息传达的。

美术设计更大的价值在于带给用户良好的视觉感受。良好的视觉感受是“良好体验”的一部分。赏心悦目自然比冰冷、生硬更令人愉悦。“这个网页看上去就舒服。”“不会让我觉得是在面对一个冰冷的web服务器。”

快速到达目的地是重要的，要是同时还能很舒适，并且一路美景相伴，当然更好。然而，web产品开发的现状往往是：开发周期中，美术设计师能得到的时间有限；开发流程中，美术设计师被孤立在产品设计的讨论之外，对产品的理解不够；部分美术设计师的水平有限…在这种现状下，要更舒适，风景更好，同时又不影响速度，很难。能保证网页有较高的可用性已经不容易了，为了保证可用性不得不否定掉一些质量不高的美术设计。又没条件做更好的美术设计，所以只好少“美术”一些了。

我的住所只有10平方米，我也喜欢一人多高的景德镇花瓶，但是，摆上几个大花瓶，就没地方睡觉了。

从这个角度来看web2.0的视觉风格，可以这样解释：“我们目前无法创造出既赏心悦目，而又不损害可用性的页面，所以，我们暂时不理会美不美的问题，只用最简单、最朴素的图形样式。”类似的，兴起于上世纪初的现代主义设计最初的理念也只是要制造成本低，易于维修的建筑，而视觉效果只是这种设计的衍生。现代主义设计大师们称这种设计为“好的设计”。之后的几十年中，这种“好的设计”真的作为一种风格被广泛的接受了，如同现在的web2.0风格被越来越多的接受。或许，web2.0的设计可以成为第二个“好的设计”。

总结

目前，我们能做的只是基础的设计－实现较高可用性的设计。清楚的传达是首要目标。所以，排版显得很重要。不损害可用性前提下的良好的视觉体验是件奢侈品，现在很难做到。

这并不意味着美术设计师将不再有价值了。当web设计的可用性水平普遍较高的时候，实现“良好的体验”就将成为设计工作的重心了（这也就是所谓的：未来的设计是体验设计）。那个时候，由美术设计师设计出赏心悦目的页面将是更为必要的一项工作。