realazy


web设计95%是排版

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

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

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

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

信息设计就是排版

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

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

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

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

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

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

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

字体太少?分辨率低?

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

文艺复兴:只有一个字体

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

SpecimenBook

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

选择字样并不是排版

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

把文本当作用户界面

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

koivinh

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

从哪开始

web排版
为了“破除关于web排版的某些荒谬想法”,他已经“按照Bringhurst的工作原则来构建他的网站,并解答如何通过HTML和CSS中可用的技术来达成各项目标”。
优化排版的5个简单步骤
他所谈论的排版“并不是你典型的‘该用哪种字体’的排版”。对于相信让字号和行间距默认大小使得文本能够任意缩放会提高网站可用性的人,这是一个不错的阅读材料。
Khoi Vinh
behaviordesign的创始人之一。现为NYTimes.com的设计主管。非常天才的一个人。
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传统规则的先锋,来满足新排印技术的需求。

更新:该文作者在疑问下迅速推出 第二部分,感兴趣的朋友可以看看。本想翻译出来,但太忙了,有心无力,见谅。

另外,小小抱怨一下,很多朋友都对这篇文章有很多热烈精彩的讨论,但是为什么不发一个 trackback 回来呢?这样可以方便读者追踪文章的各种观点。

60 Responses to “web设计95%是排版”

  1. sike Says:

    网页可以从传统的平面中学到许多,比如网格系统。

  2. 沈蚊 Says:

    偶一直觉得是这样的——对于95%的Web设计而言(还有5%的其实和排版确实关系不是那么大的)。

    但就某些设计师来说(偶认识的),在他们看来排版似乎不是那么重要呢。。。

  3. yang Says:

    网页设计首先应考虑是否方便阅读,再考虑美观.很多网站用12号的宋体小字,看起来比14号更容易造成眼睛疲劳

  4. 白鸦 Says:

    这个观点我一点也不质疑

  5. heiyo Says:

    这个网站的排版就体现了这一点。windows下用户看起来字体有点突兀,大字体锯齿问题,不过相信在linux下会好很多,但是linux下被羽化过了的楷体就更加难看了….还是装wenquanyi,然后把ms的黑体考过去。小字体用wqy像素字,大字就用黑体….跑题…

  6. xw Says:

    确实不错的文章,感谢realazy给我们带来这么精彩的文章,不过英文字体牌排版和中文字体排版有着很大的区别,好多英文的网站很漂亮但是换成是同样的中文的话就不好看了,排版最根本的还是文字呀。

  7. onling Says:

    把排版过程当成设计页面交互过程未免不可,因为在思考位置的时候起,其实就是在思考读者的阅读方式~
    看到这篇文章,感触也是颇深啊~

  8. iceshow Says:

    非常同意

  9. The 4th letter Says:

    web designer…

    感謝 realazy 所翻譯的兩篇文章:

    realazy.org:
    web設計95%是排版
    原文: Web design is 95% typogr…

  10. daisy Says:

    不错滴文章:)

  11. CnLei Says:

    >>> 确保文本在所有主要平台和浏览器中赏心悦目是web设计师的职责。正确的行间距,单词和字母间距,留白,一定量颜色的使用有助于可读性…

    不知文中所说的Web设计师到底是如何定义的,按文中的意思去理解它至少应该兼顾现在通常所说的美工和程序员这两种角色的职责。

    现在网站的页面内容几乎全是后台程序发布生成。如果用户所使用后台的CMS发布系统,就已经把排版格式的HTML\CSS代码(用于控制字体大小,颜色,行距等等)夹杂于文本内容之中,则最终通过程序所生成的网站页面,在排版上将与信息设计师的设计稿有很大的出入。

  12. 麦田 Says:

    同意白鸦和xw的意见。:)

  13. ourr » links for 2006-10-31 Says:

    [...] realazy » web设计95%是排版 字体+排版 (tags: my网摘) [...]

  14. wude Says:

    对xw的意见有一点反对.虽然中文和英文都是文字,但他们只是都叫文字而已,或许在印刷等领域,英文已经找到最适合其表现的方式,但对于中文而言,也一定有一种或多种很和谐呈现方式(排版),如果非要拿在英文状态下的版式直接换中文,那肯定不会好看到哪里去的了.

    P.S.上面这文章很不错!

  15. Rage Says:

    从美学上来说横向段落式的简体中文字的确有弊端,如果竖排的话会好很多.可惜咱们丢弃了很多传统的好东西.想想如果都是篆体竖排文字,太有韵味了.

  16. litcat Says:

    I agree your point

  17. jjgod Says:

    Garamond 万岁~

  18. 七彩色 Says:

    技术还有多少?

  19. 辛晶晶 Says:

    设计就是排版吗?还有其他更重要的吗?

  20. 雨夜不归家 Says:

    网络到了现在这个信息年代,排版还重要吗?
    还有其他的吗?他们在做什么呢?

  21. wo Says:

    看的多了,就可以形成规律。你认为重要的信息,别人也不一定认为重要。所以我感觉应该发挥网络的交互优势,由每个用户自己定制自己的版式。 或者干脆就模仿现在比较流行的大网站的方式。因为大家已经接受了这种方式。

  22. PQQ Says:

    ~~~95%夸张了些,55%。30%色彩,15%细节。而且要看是什么网页,门户首页排版差不多95%。

  23. 谈红尘 Says:

    中西方文化的差异。

  24. 小甲 Says:

    受教了…

  25. Information Architects Japan » Blog Archive » Webdesign is 95% Typography - partII Says:

    [...] An avalanche of comments, 200 applauding and ranting blog entries, forum discussions, translations in Chinese and partially in Italian and even blunt plagiarism was incited by one of my recent notes. In order to not answer to each commentator individually, I decided to write a summary that answers most of the raised concerns, accusations, questions. [...]

  26. rrr_1122 Says:

    分辨率问题很难让注意力集中坚持到五分钟

    现在还会这样????

  27. Ajax Revolution » Web Design is 95% Typography Says:

    [...] 29/10/06 at 8:03 pm realazy » web设计95%是排版 [...]

  28. Aether Says:

    返朴归真:)
    正好迫使我又把页面大肆破坏一次……

  29. 大虾出版社 Says:

    设计和功能相比,在视觉上有先入为主的特点,
    在功能雷同的情况下,价值往往体现在设计当中~

    支持~

  30. staved Says:

    很好…很值得思考…需要学习.

  31. sebastiendr.com » Blog Archive » Web Design is 95% Typography (2) Says:

    [...] An avalanche of comments, hundreds of applauding blog entries, honorable mentions from cooler and more sublime and hotter and higher places, forum discussions, translations in Czech, Chinese and partially in Italian and even blunt plagiarism was incited by one of my recent notes. In order to not answer to each commentator individually, I decided to write a summary that answers most of the raised concerns, accusations, questions, etc. As a result I think that managed to make things a little clearer. [...]

  32. don't let me think Says:

    我不同意您的看法!
    那是舊式的WEB,WEB的技術與發展已不是以往的文字加幾張圖就唬過去了
    互動式影片及資料庫與動態資料連結使得WEB早就跳出你所謂的95%是排版
    最多說是美術設計佔了一定的比例!
    但美麗的外皮的背後卻有著許程式技術架構與支撐

  33. Says:

    排版是很重要,但色彩,细节也是至关重要的

  34. 33o3el Says:

    将网页比喻成一个人的话,排版就是人的骨架。

  35. MightyWorks » 我谈页面设计之排版 Says:

    [...] 在开始之前,建议大家看看这篇文章: 《Web Design is 95% Typography》(英文原文) 《web设计95%是排版》(中文译文) [...]

  36. 不想长大 Says:

    排版的页数怎么把握?

  37. 观心.新看点.Blog Says:

    web设计95%是排版…

    极为同意本文的观点。其实在计算机上很多工作都是排版,在我们用Word,Excel,PPT等等的时候,排版太重要了,在网页设计的时候更是如此。没有好的排版,哪里谈得上美观,用户在观看你的…

  38. 观心.新看点.Blog » 博客文章 » web设计95%是排版 Says:

    [...] 感谢realazy翻译的下述文字,本文转自他的BLOG。 [...]

  39. Chyming Says:

    完全赞同,但是有时候单纯的文字排版还是没互动炫丽的网站来得有吸引力,还是以网站的性质考虑以什么形式来设计网站,我不赞同一小部分人的同一个观点就能决定某一事物的发展趋势,或者就如现在所谓的web标准,是否真的是一个标准…

  40. 鸿 Says:

    这个排版让我们初学者是很头疼的,动了一个地方全部都动了,要花很多时间才弄得回原来的样子

  41. nightheart Says:

    我最早就是做印刷品设计的,所以到现在仍然坚持用文字和线条,色块就足够建立漂亮的页面了,只是很多时候迫于外界压力,不得不做一些迎合大众口味的阴影,倒影,还有园角矩形….其实我最喜欢的设计都不在网上,而是那些DM杂志^_^

  42. elee Says:

    相当赞同这一观点~~

  43. a-ji Says:

    标题有明显的误导。Typography不是排版的意思。Typography应该译作字体排印,事集这四者于一体的一种工艺。

  44. 虎仔(610956299) Says:

    排版是非常重要的,想了解它,或研究它,不知你们有什么方法?

  45. 多远的距离 Says:

    我刚学校毕业,想学设计,不知排版跟设计可是一样?可想来想去不知该学习那个软件,看了大家的留言,也有一点想法了,学这个难吗?是自学好呢,还是请教别人教呢?希望得到学长们的帮助,再此先谢谢咯

  46. wincy Says:

    感谢楼主的翻译,我不是从事见面设计的,但有接触,也从来都觉得web design 主要系排版,不知道为什么很多设计师都没察觉到这点。

  47. wincy Says:

    sorry,打错字了,是“页面设计”才对

  48. WEB设计 Says:

    本人觉得你翻译的对,但大多数网友表达的意思有点不对。
    事实上是有“排版”和“排布”这样专门的职业的,国内在很早以前“排版员”也是挺受人尊重的职业,对专业技能要求也比较高,非现在大家所理解的浅薄层面,所以国外的文章提到“排版”,我想还是比较尊重这个行业,大家不用这么相互蔑视。
    国内做WEB的人设计水平确实不怎么高,但大家在一行业里,总体上讲比之以前还是提高不少的,所以,他们也是挺聪明的,不至于有“不知道为什么很多设计师都没察觉到这点”这样的疑问。
    这里的氛围挺好,博主也是挺有想法的人,“白鸦”也是名人,宜对同行或者后辈多些鼓励。
    欢迎探讨
    http://hi.baidu.com/isee114

  49. WEB设计 Says:

    本人觉得你翻译的对,但大多数网友表达的意思有点不对。
    事实上是有“排版”和“排布”这样专门的职业的,国内在很早以前“排版员”也是挺受人尊重的职业,对专业技能要求也比较高,非现在大家所理解的浅薄层面,所以国外的文章提到“排版”,我想还是比较尊重这个行业,大家不用这么相互蔑视。

  50. WEB设计 Says:

    国内做WEB的人设计水平确实不怎么高,但大家在一行业里,总体上讲比之以前还是提高不少的,所以,他们也是挺聪明的,不至于有“不知道为什么很多设计师都没察觉到这点”这样的疑问。
    这里的氛围挺好,博主也是挺有想法的人,“白鸦”也是名人,宜对同行或者后辈多些鼓励。
    有空 探讨
    http://hi.baidu.com/isee114

  51. WEB设计 Says:

    唉,难怪“蚂蚁”那么难看。。。

  52. xiaowen Says:

    如果web是一个人的话 排版只能算其皮肤

  53. sea ci Says:

    赞同don’t let me think的说话.
    33o3el说 将网页比喻成一个人的话,排版就是人的骨架。
    那话本没错.

    “把文本当作用户界面”。
    那话也没错.
    如果是用在一幅画上.
    当然,不管一幅画还是一个平面,设计.
    还是大关系重要.就是所谓的整体.
    可是,你们忘了,只有设计者本身才会看到大关系的.
    网友上网看到的页面只是一部分而已.

  54. lyan Says:

    从视觉设计的角度,我同意这个观点
    但交互设计与web前端设计&文案设计就不会同意这个观点了
    以偏盖全

  55. 天使也疯狂 Says:

    使我受益非浅,刚工作的我,现在正在设计我们公司的宣传册,只把封面做好了,可到排版这里,不管怎么弄都不满意,哎!非常感谢噢!

  56. 斯拉万月 Says:

    我是初学者,刚开始还很懵懂呢,现在有点懂了

  57. madwww's Blog Says:

    精彩文章:web设计95%是排版…

    很同意这个观点,一个好的web设计就是要有好的排版,尤其对于内容不是很多的页面,将它们完好的优雅的放在页面上并不是一件很容易的事情。…

  58. seo技术精华与实践-陈迪 » Wordpress 上手指南(收藏) Says:

    [...] 有篇文章说,web设计95%是排版,所以花点时间选择一个好的主题是值得的。选择主题就是选择你网站/博客的样式,每个人审美观不同,喜好也不同。我对 Wordpress theme 的要求是:适合各种流行的浏览器,版式简洁大方,导航方便,运行速度快。几款我先后用过并且感觉不错的主题有:Duralbe,K2,Unnamed One,bloxpress2。你也可以根据自己的喜好来选择适当的主题。 [...]

  59. 周一智 Says:

    我从事平面设计二年多了,感受到这行真的很难做下去了,现代的社会对平面这行不会太重注,我建议从事这行的大帅们,转行做3D或者说做室内设计还点

  60. lrk Says:

    不錯的文章,
    博主在前文有提到“顺便学习了不少的字体知识”,我正對字體有興趣,可以指點一下小弟嗎,關於“字體”都有那些網站可以去學習一下?

Leave a Reply


realazy (懒到死) is proudly powered by WordPress | Entries (RSS) and Comments (RSS)