详情
图形设计原则,可视性，移动用户体验，网页字体，游戏应用设计原则，网页设计师比懂得访客心理学，针对网络电子商务设计样式
北京
《众妙之门——网站UI设计之道》一经推出，便受到了广大读者的热烈欢迎。为此，我们便立即着手第2册的出版工作。在众多方面的共同努力下，又推出了本书。
我们希望本书在各个方面都超过它以前的版本。它应该涵盖更有趣的主题，并且具有更多的篇幅；我们希望它成为一本制作精美，有收藏价值的好书。并且我们希望它的性价比也让您满意。
本书各章开头妙趣横生的插图是由澳大利亚艺术家 Yiying Lu 创作的，她是一位受人尊敬并且极具创意的插画家，因其享有盛名的“Twitter失败鲸”画作而闻名于世。
你可以在线查找本书中提及的所有参考和资源，它们列出在一个便于访问的概览中。[1]
寻回失落之章
最初，本书打算包含下面更多的章节：
Kat Neville 编写的“终极 Web 设计问卷和一览表”（The Ultimate Web Design Questionnaire and Checklist）。
Specider Schneider 编写的“Web 设计中的苦恼以及如何处理它们”（Plaguesin Web Design and How to Deal with Them）。
Steven Snell 编写的“访谈：来自有名望的设计师的专家提示”（Interview:Expert Tips From Renowned Designers）。
Paul Scrivens编写的“Web设计社区：未来之路”（Web Design Community:Where Are We Going?）。
不过，由于篇幅所限，我们没有将它们放入本书。作为替代，我们将这些“失落之章”以免费的电子书形式发布，作为本书读者的额外奖励。在Sm a shing Shop给注册客户免费提供了电子书。[2]
如果你对本书有什么看法，请通过评论、评语或电子邮件（地址是feedback@smashingbook.com）让我们知道。我们会衷心感谢你的信任和支持：它们对于我们来说就意味着全部。
Vitaly Friedman、Sven Lennartz和Smashing家族
注 释
[1].参见http://www.smashing-links.com/。
[2].参见http://shop.smashingmagazine.com/。
作者：Matt Ward和Alexander Charchar
尽管对于Web设计师应该做什么工作有一些流行的、先入为主的概念，但是有一个简单的事实始终未变：Web设计和图形设计并不是一回事。当然，它们是相关的，并且它们在许多方面具有一些交集，但是它们在某些领域具有明显的区别，需要考虑它们各自的优点和理论。
Nick Haas[1]编写的博客内容也许最清楚地说明了这两个主题之间的一个主要区别。他把设计师的工作描述为：
“有效地与印刷和Web媒体交流，并且认识到它们是彼此独立的，并不相同。理解图形设计师与Web设计师之间独特的区别可能会对你的下一个项目或者给你的设计之路带来帮助。”
虽然Haas所说的这种区别符合事实（并且文章的余下部分明确了一些优秀的要点），但是他所暗示的印刷与Web之间的区别可能过于简单化。毕竟，我们在Web设计中使用的许多概念都直接来源于图形设计的漫长历史。关于留白、对比、色彩理论和网格（寻根究底，它们都源于印刷世界）的思想已深入于全世界的Web设计师，从而模糊了印刷与Web之间若隐若现的界线。
本章将探讨图形设计的一些关键概念，因为它们与现代Web设计密切相关。我们还将探讨许多驱动设计行为本身的中心元素和方法论，并将考虑“仅仅良好”与“确实优秀”之间有时很微妙但总是很重要的界线。
为了能够讨论图形设计在Web设计领域所起的作用，首先必须准确理解图形设计是什么。在掌握它的定义之后，就可以开始详细研究这个主题。
那么，我们称为“图形设计”的这个概念准确地讲是什么呢？Katherine McCoy讲述了这个领域的多面性，并发问“图形设计是艺术、科学、商业、工艺，还是语言？”她没有提供权威性的答案，而是在其起源的环境内阐述了图形设计的简单概念。
为了自发地响应工业革命的交流需要，人们发明了图形设计，向日益增长的消费者社会推销大规模生产的果实。[2] 从这个角度讲，我们可能把图形设计理解成为广告业服务的创意行为。这几乎不能构成一个完整的定义，但是它清楚地阐明了任何图形设计的一个可能最重要的方面——交流。
任何形式的图形设计最终都是在视觉传达方面的练习。这种交流可能通过许多技术来执行，例如：版式设计、插图、形状和颜色，但是其目标总是有效地（偶尔也是即时地）把信息传达给观众。
这样，显而易见，设计的过程涉及做出慎重且适当的图形选择，以便最好地传达期望的消息。这同样适用于Web，就像设计印刷品一样。
我们之所以强调“图形”这个词，是因为我们在这里要着重讨论它。不过，我们确实承认，图形交流本身并没有考虑整个Web设计领域，它还包括诸如用户界面（User Interface，UI）和用户体验（User Experience，UX）设计这些方面。虽然设计的这些方面彼此之间当然会有联系，但是它们提供了不同的功能，并且彼此独立存在。
UI和UX更多的是系统设计的功能，它们重点关注的是可用性和响应。用户理解系统吗？他们能够找到并理解导航吗？他们能够快速、容易地完成所布置的任务吗？系统给他们提供了积极的体验吗？所有这些问题本质上更多地属于UI和UX，而不是图形设计。
通过我们将在下面讨论的许多技术，图形设计当然可以为这些领域做贡献并且被视为它们的一部分。但是为了完全理解它在Web设计中的作用，我们需要就其本身而言考虑图形设计——信息含义的可视化传送媒介。而且，我们需要理解其丰富而迷人的历史。通过这种理解，我们就可以领会这个主题的一些细微的要点。
设计不仅仅限于页面上的线条、形状和图像，它包含丰富的视觉语言。深究其历史有助于我们搞清楚出现在我们面前的这些元素有什么作用，以及它们是怎样定义和深化这个精彩的视觉世界的。随着关于设计的本质和应用的理论不断演化，它们描述的视觉语言也有了很大的发展。今天，这种语言坚定地来源于一组丰富的理论，这个领域的一些最优秀的人士对它们进行了试验和测试、编写和重写，以及证明和解释。
我们对这种语言掌握得越好，就越容易评估图形设计的实际情况，并且本能地识别应该保留什么以及应该抛弃什么。随着我们对图形设计的研究进一步深入以及对视觉语言的理解更成熟，这些本能也在不断演进。与文学非常相似，设计历史包含大量的经典，可供享用、探索和学习。
网格，设计师对它颇费思量并且花费了如此多的精力研究它，尽全力理解它在设计中的作用。网格用于像诗歌那样简洁以及像歌剧那样豪华地组织设计。然而还有许多人仍然乐于继续利用各种世俗的“庸招”制作作品，仅仅由于“看起来整洁”而对齐图像和文本。理解设计的历史有助于我们避免使用糟糕的“庸招”。
1.2.1 历史和理论的重要性
每当我们查看设计时，都在阅读以不同方式表达的设计的语言。我们将越来越熟悉词汇（理论和哲学的产物）怎样使内容带有结构。作为设计师，我们每个人都是“卓越经典的继承人”[3]，通过历史的潮流把创建的每个标志和构思的每个理论汇聚到我们面前。
我们行业中最优秀的从业者开发了他们自己的关于如何最佳地表达语言的哲学和理论。从他们独特的遗产（书面或其他形式）中，我们认识了他们如何证明自己的工作是正确有效的。如果我们分析单独一位设计师的足够多的示例，并且能够探索它们同时代的作品和影响，就会浮现一种可辨别的思维模式。
例如，设计领域最有影响的思想家之一Paul Rand有着与众不同的观点。简单看一下就会发现，LászLó Moholy-Nagy 对 Rand 的重要影响。Moholy-Nagy的仅仅一句评论就驱动Rand“大量阅读图书和短文，尤其是关于美学方面的。受到 Moholy-Nagy 的 The New Vision（新构思）和 John Dewey 的 Art As Experience（艺术即体验）的启发，Rand 形成了他自己的思想”。[4]
从 Paul Rand 扩展开的这幅粗略的关系图提供了讨论问题的环境，并且说明了简单的起点怎样给我们提供要遵循的历史和哲学线索。这类练习显示了我们要学习哪些知识以及要研究哪些设计师。他们之间所具有的联系以及发现的新联系甚至会进一步推进我们的教育。因此，我们不仅要学习Rand自己的作品，还要学习Moholy-Nagy的The New Vision和John Dewey的Art As Experience。如果这些著作对于成为像 Paul Rand 那样的顶级设计师是如此有影响，那么显然它们极其重要，不应该被忽略。
作为这样一份尊贵礼物的接受者，我们绝对不能因为这段历史与我们目前的思考和问题不相关而抛弃它。如果以前没有听人说过某种语言，设想一下怎样才能最流利地说这种语言。毕竟，如果“设计是操纵形式和内容”[5]，那么查看任何设计或者阅读任何设计哲学都是探寻视觉语言如何适应不同的需求，而不管它身处哪个历史时代。
最后，我们将研究杰出大师的设计，并且窥视他们的头脑。但是这样的工作并不仅限于模仿他们对文字、图像和形状的选择，而必须超越它。我们不必真正理解给定空间里的元素（以及元素之间的关系）并且证明它们是合理的，而必须使用他们的思想来指导我们自己，从而构成用于我们的故事的视觉语法，而不管使用的媒体是什么。通过研究设计历史和理论，可以了解许多杰出的大师，他们慷慨地分享了对设计语言的深刻见解。我们需要重视这些礼物——比如 Josef Müller-Brockmann（关于网格）、Jan Tschichold（关于合成）和Wolfgang Weingart（关于版式）的图书。这些图书允许我们不仅仅把给定的设计看作是一种视觉吸引力，而可以让我们更深入地洞悉和理解它为什么如此有吸引力。
合格的设计师会用心了解历史，并且能够指出谁在什么时候完成了哪些里程碑式的重大事件。优秀的设计师则会首先了解为什么会完成这些里程碑式的重大事件。在下面几页中，我们将探讨设计的持久性、极简抽象艺术、意象、版式和声音的概念，并将探讨它们对图形设计艺术的不同作用。
对历久弥新的设计任何评估都会鉴赏设计的品味、内涵和质量。为此，可以查看设计（或者它的元素）在十年、二十年或五十年内将如何表现。迎合时尚的元素将会凋谢，而那些根基合理的元素则会历久弥新。
这个练习使设计师重点考虑给定的解决方案是确实为内容量身定做的，还是如此普通以至于可以用于任何其他的项目。这方面的工作做得越多，就越能够更容易地把优质作品与那些随着时光流逝而过时的作品区分开。历久弥新的设计不会依靠虚幻的技法来增强其效果。相反，它完全依赖于传达良好的思想。
1.3.1 迎合一时之需的设计与历久弥新的设计之间的对比
为了理解历久弥新的设计，可以考虑它的对立面：迎合一时之需的设计。其中重点关注的是当前的趋势以及吸引特定群体或者利用流行基调的风格。它的长处时常也是其最终失败的成因。它在一段固定的时间内自然会吸引固定的受众，但是会把那些不适应那种特定的历史和文化环境的人拒之门外。
采用这类设计，内容通常会被时髦的效果所遮蔽，并且在设计层次中通常不会公正地对待它。因此，它只变成了具有美感的道具，并且它作为交流工具的价值也相应地减小了，这使得它无法抗拒人们品味的风向变化。
当然，这并不总是一件坏事：迎合一时之需的设计也有它的存在的价值。如果解决方案基于稳定的思想和合理的设计原则，那么针对特定受众的迎合一时之需的风格将不会使它过时。如果处置得当并做好平衡折中，那么它将不仅现时可以收到非常好的交流效果，并且在以后也仍然容易为人所接受。
另一方面，如果设计打算吸引广泛的受众并且历久弥新，那么它必须具有自己的长处。此时，持久性将产生一种神奇的魔力，并且设计师必须能够证明页面上的每个元素及其位置、大小和颜色都是合理的。这有利于制作出适应客户、历史、受众和声音的完全成形的设计。
它还强迫人们担任自己的最严格的批评家，这对于任何杰出的设计师都是必不可少的。
1.3.2 实现历久弥新的设计
实现历久弥新的设计要遵循的最简单的原则是：用于传达信息的元素越少，陷入迎合一时之需的风格和趋势的机会就会越低。除此之外，下面还介绍了用于实现历久弥新的设计的一些其他方式。
1.在内容自身中寻找解决方案
如果可以做到这一点，就能够胜任交流者的角色。问题中总是蕴涵着有待发现的思想。关键是还要找到关于问题的一些独特而有趣的方面，并且值得把它们放到显要位置。Paul Rand 设计的非常著名的 IBM 海报就是这方面的一个优秀示例：他使用眼睛、蜜蜂以及可立即识别的“M”的图像在公司的名称上创建了一句形象的双关语。
Bob Gill 是善于使用这种技术的另一位大师。他的解决方案之一是放大。“我们憎恨小印刷品”，来填充其中列出了汽车租赁公司的条款和条件的小册子的封面。Gill给出的最好的建议之一是：如果问题没有提供独特而有趣的解决方案，就要重新定义它，使之能够做到这一点。[6]
来看一看两位摄影师Melanie和Justin的网站。[7] 当然，摄影讲述的是它自己的故事，无需来自设计的支持，因此最佳的解决方案通常像下图这样简单。
设计只包含名字、一个简单的菜单和内容本身，以及用于大字标题（呈现在悬浮效果上）的柔和版式。一些细微的样式编排可能稍微具有迎合一时之需的倾向，但是设计的结构将是持久的。
2.大道至简
像形状、颜色、留白、插图和版式这样的基本概念仍然是设计的构件，甚至扫一眼历史亦会发现，这些是持续时间最长的元素，这是有原因的。它们可以引导人的视线、提供画面平衡感，以及分配视觉焦点。我们非常舒适地“把它们读作”设计的一部分，但是它们内涵丰富，足以吸收设计师赋予它们的任何价值和含义。通过依靠基本原理——比如网格系统、几何学、三分法、黄金分割定律、平衡、对比和并置——可以以几乎无限多种方式排列这些元素。
3.避免装饰
装饰只是出于视觉吸引力而添加的任何内容。它也许是不必要的标题下划线、粗体文字的多余的斜体样式、页面周围的边框、不会指引眼睛的渐变、大多数阴影、毫无价值且了无新意的意象，当然还包括用于“装点”设计的第四、第五或第六种字型。
使用大图形标题的趋势是装饰的一个优秀示例。像 Underworld Magazines[8] 这样的网站结合了常见的杂志版面设计以及页面顶部周围强烈的视觉效果。
这些元素显然是出于吸引视觉兴趣的缘故而存在的。它们可能暗示一些网站的内容（Apple、Adobe、社会媒体等），但是它们实质上只是迎合一时之需的设计，不会对总体的设计效果做贡献。如果页面上的某个元素对传达消息没有什么作用，那么它可能不需要出现在那里，并且很可能降低设计的持久性。
1.3.3 “使我感到惊讶！”
这些话被 Paul Arden 称为“给出的最佳建议”，从资深艺术总监到年轻的设计师都是如此。这种建议简单而有效，鼓励那些希望自己的作品能够历久弥新的设计师重点关注使受众（或者他们的老板、客户、同事或他们自己）感到惊讶。使人感到惊讶并不意味着大声喊叫或者上演大片，它意味着创造出因其内在价值而将被人们记住的作品。[9]
这是有一些优秀示例，比如经典的企鹅封面上的橙色条纹、The Man With the Golden Arm海报、Muhammad Ali Esquire封面，以及最近的Pixel Blog[10]，它在混合漂亮的插图与页面布局方面所做的工作引人注目。
这些以及许多其他的作品给我们显示了奇妙的思想驱动的设计看起来像是什么样子的，同时还可以担当长久的质量保证。当然，在墨水变干或者网站启动之后，不能想当然地认为任何历久弥新的设计都会被人们长久地敬重。创建长久经典设计只是为了利用实力和理性传达思想。它的持久性并没有超过这个奇特版本经遗传得到的品质。也许可以通过下面一个简单的并列句总结这一点：合格的设计师提供今天所需的解决方案；优秀的设计师则可以提供能满足未来很长一段时间所需的解决方案。
合格的设计师把各种不同的流行风格拼凑在一起，并尝试加入足够多的时尚元素以取悦于客户。然而，客户得到的满足感可能只是一瞬间的，如果解决方案不具有持久性——如果它没有认真周到地执行一种良好的思想，那么设计注定会渐渐湮没无闻。
它涉及职业道德。在我们竭尽全力学习了技艺之后，为什么要转向短暂的捷径呢？为什么不能给客户提供真正的、生命力长久的设计作品呢？如果我们把自己称为专业人士，那么我们需要让自己坚持标准，强迫我们使设计作品在许多年内都合情合理、风采优雅、有趣并且能够传达思想。
极简抽象艺术不是我们可以借用于今天的一些20世纪中叶的风格。它与“重新流行的旧风格”毫无关系。相反，它是用于理解和实践设计的非常特定的哲学。为了领会它，让我们假设页面上的每个元素都价值10美元。在具有10个元素的页面上，总价值将达到100美元。[11]
关于极简抽象艺术有一个被误导的观念：如果从10个元素中删除5个元素，那么余下的元素将吸收最近释放的价值，并且每个元素价值20美元——假定只有一半的元素则将使每个元素的价值加倍。这种思想来源于“少即是多”的模糊概念。事实是，余下的每个元素仍然价值10美元。
极简抽象艺术不是一种“风格”，它并不是简单地关于删除不必要的元素。它首先关注的是只需要少量的元素。在页面上具有较少的元素不会自动增加每个元素的价值。相反，它使余下的元素要承担更多的责任并使设计的质量被认可。是的，具有较少的元素绝对会更有效，但是需要使它们获得效力和响应能力，这通常是通过设计师对设计的基本思想的承诺来实现的。这意味着使用意象，它不会简单地填充空间，而是唤起感觉和刺激大脑，同时可以专注于基本的目标。它意味着使用的版式不仅仅“足够好”，而是可以直达信息的核心并赋予它生命，把设计与其受众联系在一起。
实际上这些有价值的元素自身不会组合成确实不同寻常的最简设计。相反，它们可以通过在彼此之间产生的联系获得它们的最大价值。培育这种联系需要具有这类交流方法中的原则和理论方面的知识，以及相关的准则和信念。
1.4.1 培育联系
“所有的艺术都是联系。设计就是联系。设计是形式与内容之间的联系……你的眼镜是圆形的，你的上衣领是斜的，这些也是联系。你的嘴巴是椭圆形，你的鼻子是三角形——这就是设计。”
——Paul Rand[12]
联系存在于给定空间里的任何两个元素之间，比如图像与其文字说明、标题与其正文副本、横幅与页面的边缘。随着空间里元素数量减少，它们的联系的价值也会随之增大。元素之间的紧密联系必须是经过深思熟虑的、相关的和令人兴奋的，而不会有装饰性的或者多余的元素弱化它们的潜在力量。
设计的效力取决于这些联系以及整体上对设计有用的任何元素。在一个领域中糟糕的决策可能会导致其他方面良好的元素失去价值，而良好的元素将把价值分给次要的元素。
我们可以培育这些联系中的许多方面。一些方面是页面的物理属性，而另外一些方面更多地涉及哲学或文化。内容与形式之间、形式与画布之间、画布与受众之间的抽象联系都需要考虑。在这里，有三种属性尤其值得我们注意，因为它们确实有助于架起联系形式与内容的桥梁。它们是对比、空白和张力。
1.4.2 对比
图形设计主要是以对比为基础的。它可以引导观者的视线并分配版面中元素的重要性，对它的使用技巧的探索是无止境的。当页面上只有少数几个元素时，要精心创建强烈的、考虑周到的对比才能使设计变得有趣。
对比的最基本的形式是明暗。白色背景上的黑色文本就是一个明显的示例。大和小、衬线字体和无衬线字体，以及黑色和白色之间的对比可以使标题与正文之间泾渭分明。在JonBrousseau的网站上可以看到这方面的大量示例。[13]
使用slap-serif字体的大块标题与使用sans-serif字体的小得多的正文之间形成了鲜明的对比，从而创建了一种醒目的联系。
当然，对比不仅仅出现在文本中。它可以存在于合成作品中的几乎任何元素之间，并且可以使用许多类型的对比来提高元素的价值和视觉吸引力。这些类型包括：
水平和垂直；
方形和圆形；
平滑和粗糙；
封闭和开放[14]；
旧和新；
陌生和熟悉[15]；
点和线；
直线和角线；
填充和外形；
绘图和摄影；
有序和混乱。
在讨论极简的 Web 设计中的对比时，Adham Dannaway 的代表作选辑网站就是一个很好的范例。[16] 在这一个页面上，具有多种类型的对比。
插图与摄影、抽象与具体、彩色与（几乎）无色，甚至有序与混乱之间都具有对比。更重要的是，所有这些对比在网站上都具有特定的目的，这涉及把Dannaway的两个专业领域（即设计和开发）放在了同等重要的位置。这种对比极有价值，因为它提供了比单纯使用文字快得多的引人注目的内容。因此，设计需要较少的元素，使之成为应用极简抽象艺术的优秀示例。
1.4.3 空白
有一条关于字体的公理，即字母不是创建的，而是从其周围的空白（white space）中雕刻出来的。大多数设计形式都是如此。对于设计来说，空白与它包围着的任何元素一样重要。它的不可见性意味着无需吸引人们注意即可产生非常好的效果——这是一个用于极简抽象艺术的绝妙工具。它可以构建平衡、定义比例、把元素集中起来以及把它们分开。它给元素提供了生命和趣味性，并且可以构建张力，比如极细的空白或者洞穴式狭窄入口。
在把标志添加到设计中时，空白的形状会发生变化，并且跨页面改变视线的轨迹。然后，随着元素的比例发生变化，空白的视觉重度和强度也会变化。它是一个动态的元素。设计机构Academy的主页[17] 在处理空白的方式上就是一个非常好的示例。
由于页面上只有很少的元素，因此在这里以确实迷人的方式使用空白。主要标志被分解开了，并且尽管明显缺少区分线，但是空白本身通过清晰地定义网格线可以使混乱变得井然有序。这颠覆了传统的阅读（从左上方到右下方）和扫描（比如在F模式中）模式。相反，眼睛立即被吸引到抽象的形状上，它是朝着页面右边构造的字母，然后将转到左上方的标志上，跨过菜单并最终落到介绍性文本上。
1.4.4 张力
在设计中可以存在两种形式的张力。第一种是以某种方式构建的，然后将会被释放。例如，可以使用图像来创建这类张力。图像可能使人触目惊心或滑稽有趣，或者只是显得神秘莫测，并且作为点睛之笔时——无论是通过一行文本、另一幅图像、一种形状，还是通过颜色或对比——张力都会立即烟消云散。
观者可以通过它把设计的细微部分联系起来。利用张力把观者吸引到设计中，在达到目的之后，通过释放和舒缓张力把他们的注意力移开。更重要的是，他们正在与设计交互，这是设计师的主要目标之一。例如，让我们查看Y3K网站。[18]
可以通过第二种形式的张力来鼓励交互，它存在于页面上的元素之间的关系之中，但是不会导致一种宣泄式的释放。像空白一样，元素用于引导视线以及定义页面的合成。
尽管它很简单，这种合成还是具有重要的张力，其中大多数都取决于单独的一条角线（angled line）。它在页面上醒目的大小和位置将立即把注意力吸引到它分割纹理化方框的方式上——该方框不是对半平分的，而是分成两个大小不等的部分。观众立即会被吸引，而由于看不到解释说明，则尝试自己去读出设计中的含义，尝试确定线条及其分割的目的。
通过与包含设计余下部分的水平和垂直线条形成鲜明的对比，把线条的角度添加到张力上。这使得它甚至更显眼，从而加强了观者对含义的探索。
张力驱动观众至少进入交互的前几个阶段，打开进一步联系的通道，这全都归功于简单的线条。并且这是设计中联系的威力，本节介绍的全都是这方面的内容。如Rand所指出的，艺术是联系的产品，并且在这些联系中各个元素变成了设计的强大工具。
极简抽象艺术是一块试金石，可以让我们领会如何开发、测试和使用这些联系。为了测试我们的理解，我们必须承认，合格的设计师把极简抽象艺术用作一种风格，而优秀的设计师则只创建设计所需的那些联系。
极简抽象艺术作为一种风格可以传达集成在设计自身中的信息。传统的极简抽象艺术仅仅借用了一些表层元素就使设计看起来很漂亮。而真正的极简抽象艺术可以以高明的方式实现强大的联系，从而展现出优秀的图形设计。
1.4.5 利用图像传达信息
如果极简抽象艺术只与尽可能少的元素交流，那么就值得探讨所有元素中可能最强大的元素——图像。一图可能并不总是能抵千言，但是它无疑可以比文本更快、更高效地传达信息（并且在一些情况下具有更大的吸引力）。如果像我们所讨论过的，图形设计的主要作用是传达消息，那么显而易见有效地使用图像是设计的视觉语言的关键组成部分——并且是所有的设计师都应该加以考虑的。
利用图像传达信息的基本方式有两种。第一种是直接展示，它可以准确地将其描述为图像表示实实在在的人、位置或事物。目的是为了吸引观者对主题的注意力，而不管是宣传、评论、批评，还是提醒。
具象派的意象的一种常见实例是肖像，比如设计师和企业家 Sue Rutherford 的个人博客。[19]
这个设计的焦点是Sue本人的照片。这幅图像是具象派的，因为它描述了作者本人。对于了解她的人，该图像可以立即使他们想起她；对于那些不了解她的人，该图像可以充当可视化的介绍。
在各种广泛的代表作选辑（其中将会看到以前的作品）和电子商务网站（其中将会看到产品）中有效地使用了相同的技术。流行的网站OnA[20] 包含了许多展示不同服装的模特照片。
网站的访问者可以真实、详细地查看公司作品的样式，从而可以自己判断作品的质量和价值。
利用图像传达信息的第二种方式是使用隐喻。当图像暗示某种思想而没有确切地表示它时，就会发生这种情况。这是一种强大的技巧，应该考虑周全地、有目的地使用。一些隐喻很清楚、明显，比如BrightBulb代表作选辑网站上非常显眼的灯泡插图。[21]
观察这幅图像的访问者脑海中想到的第一件事是灯泡是怎样隐喻新思想的。但是这种隐喻更深入。它里面不是一根灯丝，而是一棵发光的树，表明这个网站适合于“思想生长和发光”。因此，设计师使用隐喻，把额外的含义注入网站的视觉语言中。
Drowned Studio网站[22] 更抽象地使用了隐喻。主要意象显然旨在使我们想起一条隧道，而颜色和形状则给设计提供了一种类似于数字矩阵的感觉。
它暗示了一种节奏快速的想象和数字创意，把它称为电影最贴切。页面上的其他元素强化了这一点，它们借用了电影海报的众所周知的约定（它们使用了自己的一整组隐喻）。
无论图像是具象派的、隐喻，还是二者的混合（比如在讨论极简抽象艺术时看到的 Adham Dannaway 网站上的内容），它的主要作用应该总是支持设计的信息。并且这带给我们一条关于图像和设计的关键的经验教训：良好的设计可以装饰页面，而优秀的设计则可以组合含义。
无论何时使用图像，也无论以什么形式使用它，它都应该会对传达设计背后的信息有所贡献，而不仅仅是装饰。
设计的目的是传达特定的信息，所有设计中的所有元素都应该为实现这个目标而协同努力。
图像总是具有某种含义。可以在其确切的表示或者在其隐喻性的形状、颜色和抽象中找到这种含义。如果这种含义没有被仔细考虑，那么图像不仅不能支撑全部的信息，而且可能因为暗示了完全不同的含义而危及要表达的信息。
“版式为内容服务。”
——Robert Bringhurst[23]
那么现在就打开Robert Bringhurst的The Elements of Typographic Style的第1章，它是一本版式设计方面的圣经。Bringhurst优雅且简单地暗示版式不是为设计师、客户、受众或者甚至它自身服务的，而纯粹是为它的内容服务的。因此，它必须反映内容所要传达的思想，并且它既不能设置错误的基调，也不能喧宾夺主，吸引了观者本该给予内容本身的更多的注意力。
1.5.1 文字仍然很重要
无论何时摆放一系列字母，版式都在工作。它与在印刷页面、OpenOffice文档还是浏览器窗口中工作无关。不管用户的体验或者设计师的意图是什么，比例和位置操作总会涉及某种设计形式。
它取决于专业设计师来决定要多严肃地接受这项任务。合格的设计师理解他们的版式决策将对总体设计和消息产生什么样的影响；优秀的设计师则会确保这种影响服务于客户的信息。如 Oliver Reichenstein 所说：“Web 上 95% 的信息都是书面语言”[24]——像设计师一样，我们必须优雅地处理这种最丰富的资源。优秀的设计通常是在多个限制条件下而提出的巧妙的解决方案。如我们所见到的，使用较少的元素实现的解决方案越好，设计将越强大。对于版式也是如此，因为它与其他设计元素一样。就像我们不会随意地把图像贴在设计上一样，我们也不应该利用无意义的版式来亵渎我们的文字。
不要期望使用不同的字型就可以处理所有困难的任务。我们不能在CSS中为正文内容声明单独一种字体，然后考虑要完成的版式设计过程。字体大小、行距（即行间距）、度量值（即行宽）、颜色和位置等问题都需要仔细考虑。使用系统默认值将不能得到满意的效果，你需要付出思考和努力，把任何字型的潜力转变成现实。
1.5.2 版式的关系
在使任何新项目具有生命活力之前，设计师需要首先尽最大可能地理解项目。有时，这意味着研究客户及其目标。在另外一些时候，它意味着重新定义目标，以更好地适应手边的需求。不管用何种方法实现这种理解，有一件事都是固定不变的：必须通过语言的情调设置设计的基调。
版式也是如此，就像它是意象、颜色和其他任何元素一样。为了使版式为内容服务，我们必须像Bringhurst所指出的那样：“在文本的内部逻辑中发现版式的外部逻辑。”[25] 不同的字型具有不同的内涵，如果不仔细选择，它们可能会传达混合的信息。看看Bam Creative的网站。[26]
爆炸性活力充满了这个网站，并且在意象（明亮的绿色和黑色背板以及醒目的炸弹）和版式中体现了出来。加粗的无衬线字型完美地匹配页面的简单、现代的美感和充满活力的主要消息。想象一下如果这个设计使用精巧、优雅的衬线字体，那么效果将会差一些。图形设计必须源于它所表达的内容的含义和样式，以一种完全透明的方式把功能和形式与文本和设计联系起来，有效地使观者与内容思想产生共鸣。通过深思熟虑的版式决策，设计师允许信息通过被人阅读和吸收而闪闪发光。
1.5.3 和谐与平衡
一旦放置了一个文本块，就必须重视它在设计中的作用。为了使之有效，需要给它提供足够的空间，并且必须与周围的元素和页面本身之间进行平衡。就像图像从其位置及其指引视线的方式上获得活力一样，文本块也必须从其位置获得活力，包括在页面上以及沿着设计所暗示的视觉路径上。
通常，在设置了列和页边距之后，就可以把文本填入布局中。它被视为可以填入的任何空间的流体。不过，在大多数（如果不是全部）格式化决策中，文字都应该是关键的考虑事项。在狭窄的空间中填充有复杂医疗术语的文本段落将不会产生较好的效果，而抒情散文可能不适合于较宽的列。
关于设计的特定细节的决策通常开始于选择字型。x的高度、小写字母中高出x的部分以及小写字母中低于x的部分是字体大小和行距的考虑因素，它们反过来又会影响页边距（从而会影响列宽）。对每一种设计均采用这种方法不是必要的（或者甚至不是想要的），但它是在许多相关的部分建立和谐的一种有用的方式。
文字大小当中的和谐通常是通过逻辑和实践决策确定的。最明显的决策将是在传统的版式比例内工作，这种比例是指自16世纪起就在使用的一组文字大小，并且它一般被认为是开始工作的好起点。一直在使用的文字大小经过了长时间的证明。只需经过少许思考和对比，设计师就可以使它们极好地协同工作。
版式编排的关键是避免过多地使用文本。简单加粗的线条将不会像标题那样被忽视，它也不需要额外的下划线。我们的目标不是使之尽可能引人注目、令人惊愕以及使页面绚丽多彩。只需要精巧地改变字体的基调，就可以吸引足够的注意力。
1.5.4 透明度
观者不应该感觉到好像他们在阅读“代表”内容内在的文字，而应该感觉到是在直接体会——这些思想是通过在阅读时几乎不会引人注意的文字无缝地传递的。
Beatrice Warde 在其开创性的关于这个主题的短文中将版式比作水晶酒杯，其中通过干净、朴素的酒杯可以充分显示“信息”的葡萄酒。[27] 葡萄酒可以完全品尝，其颜色和质地闪闪发光。真正的葡萄酒爱好者将会享受这样透明的葡萄酒，“因为计划呈现关于酒杯的一切，而不会隐藏它打算装有的漂亮物品”。Warde提出了版式（更大程度上是设计）的思想，就像装有葡萄酒的酒杯，使得读者开始与内容交互时完全不会注意到版式的存在。
无论什么（甚至包括设计）都不应该给传达信息造成妨碍。相反，设计师必须在内容与读者之间培育一种透明的联系，不允许任何东西干扰这种联系，包括文字本身。良好的版式就是水晶，我们通过它把信息传递到人的头脑。
不过，为了使这种传递成功进行，我们必须理解，信息并不是我们所知道的字母和文字的标志。仅仅使文本有足够的摆放空间或者使标题可以吸引注意力和引导视线是不够的。页面和文字只是一个窗口，观者通过它与信息和思想交互，构建这个窗口是设计师义不容辞的责任。信息需要被观者无缝地吸收和领会，而不需要他们认为文字、字型或设计是“漂亮”的。如果他们确实这样认为，那么它应该只是第一印象或者事后对设计的看法。
文字是我们使用的最强大的元素，通常比意象和颜色更强大。它们在头脑中灌输信息。它们可以改变大脑的化学物质、创建精神图片和记忆，以及培育思想。作为设计师，我们具有设计和策划这些文字以尽可能产生最大效果的非常任务。
1.5.5 功能的问题
当在最清白的环境中呈现时，良好的版式将变得最强大。适当空间里的一组良好的文本是设计师展现的最漂亮的事物之一。它是我们努力实现的使人兴奋的平衡状况：文字必须吸引注意力，仅仅为了在阅读它们时放弃这种注意力，以便为它们传达的思想让路。它就像听故事内容本身，而不是听讲故事的人的声音（尽管声音当然会影响人们对故事的感受）。
版式可以是说明性的或者柔和的。前者通常出现在标题页面、杂志中的开卷语、广告和海报上。文字说明是版式艺术性的一些最漂亮的示例，因为它们同时说明和讲述故事，可以带来真正的喜悦之感。Elysium Burns 网站[28] 就是一个精彩的示例。
在这里，设计师利用优秀画家的所有技能和精度跨（数字）画布显著展示版式。在展现其含义时，文字将超越其本身的一般意义。它们相互争奇斗艳，通过重量、样式、位置和颜色创建视觉联系。在它们的协调作用下，展示出了极好的视觉效果，证明了设计师的精湛控制。
然后，如我们所看到的，柔和版式的原则并不是需要在各种情况下应用的刚性规律。设计历史给我们提供了今天仍在使用的许多原则、思想和理论，并且它们也适用于网页浏览器，就像在印刷的页面上一样。认可这些原则并不意味着必须盲从它们，更重要的是知道易读性、美学和交互性等经得起时间检验的原则——这些原则在今天仍然是适用的，就像在过去几个世纪一样。
在记住所有这些之后，我们就能够获得这个简单而意义深远的理解：合格的设计包含漂亮的版式；优秀的设计则构建在意味深长的版式之上。
在文本块中，优秀的版式是柔和、宁静、几乎不可见的。每个文字都会引导眼睛转到下一个文字上，并且这种引导是潜移默化地完成的。与它们所传达的信息相比，文字变得次要。在另外一些环境下，优秀的版式自身是喧哗、醒目和敏锐的艺术，它也会吸引注意力，稍后就放弃，同样通过形状、重量、位置和大小传达含义，就像通过文字本身的字面意义一样。
在这两种情况下，版式都不仅因其自身的美观而存在。通过设计师细心、慎重的选择，实现Bringhurst的声明——版式为其内容服务。
我们已经谈论了设计怎样具有它自己的视觉语言。但是每种设计也具有声音，可以把它理解成设计针对此种视觉语言的特定实现。如果设计打算传达信息，那么可以把它的声音理解成它递送该信息的方式。这涉及我们讨论过的许多事情。
声音不必有意识地添加到设计中，它始终都会出现在那里，使用声音的挑战就更像歌唱家所遇到的挑战一样，它涉及学习如何利用声音，使之适合于你的需要。
让我们查看一些示例。在学习过程中，要知道每个示例中的声音对设计背后的含义起到了什么样的作用。
1.6.1 喧哗
喧哗的声音可以让人们听得到。我们这个世界里充斥着大量的信息，它们都在竞相争夺我们的注意力，喧哗的设计可以通过“提高音量”而脱颖而出。
Armitage 网站[29] 是一个极佳的示例，它通过许多技术创建了自己的喧哗声音。要注意的第一件事是选择醒目的颜色。淡蓝色和淡黄色之间的强烈对比足以给人留下惊艳的视觉印象。
可以通过版式实现类似的效果。首先，标题都设置为大写字母，这种技巧被广泛理解为一种版式风格。其次，标题被设置为相当大的字体。第三，给它们提供强烈的重量感。这三个特性结合在一起和谐地工作，创建出视觉鲜艳的总体效果。
最重要的是，这种鲜艳性加强了信息的表达。在其主页上，Armitage把它自身称为制作“鲜明设计”的“最前沿的技术”和资产——这两种声明都受到页面上丰富的视觉声音的支持。
1.6.2 柔和
另一方面，设计也可以具有柔和或宁静的声音。虽然喧哗的声音可以吸引注意力，但是柔和的声音依靠平和、高贵的力量。它耐心地等待用户发现其信息的品质和重要性。
Kean Richmond 的个人网站[30] 是柔和设计的一个可爱的示例，并且与我们看到的Armitage网站形成了鲜明的对比。它没有使用淡蓝色和黄色，而是使用简单的基于浅褐色的单色模式，它的饱和度是如此之低，以至于几乎是灰色的。通过穿插进页面导航系统中的许多淡色调来补偿背景色。
设计师在这个网站中的设计选择是经过慎重考虑的。Richmond把他自己定位为一位低调的设计师，这有些自嘲的性质。在主页上，他指出了以下事实——这事实上是一个网站，其后接着附加的说明“但是你可能已经知道了”。在他的“About”页面上，他指出：“像大多数人一样，我并不非常擅长介绍我自己，但是这里要这么做……”
即使这可能是他的主要的自我宣传渠道，Richmond也非常有意识地尽量不过分宣传自己，并且他同时使用书面和视觉语言来实现这一点。他的多种选择（比如朴素的颜色和大量的空白）加强了这种效果。如果他结合使用明亮的颜色和许多细节，这些选择将与他的消息发生冲突。
1.6.3 创造性
创意通常可能不与字面意义上的声音的概念相关联，但是它当然适用于声音的广义环境。这终究是我们在这里的用意所在。让我们看看Joe Lifrieri在他的网站HugsforMonsters[31] 上如何使用多种技巧使他自己被认可为一种有创意的声音。
所有这些都开始于有创意的网站名称，打开主页，我们立即会看到具象、抽象的手绘拼贴画、非常醒目的颜色、有机的形状，当然还包括疯狂的单眼妖怪，它显然使整个页面洋溢着创意。不管你怎样考虑风格或者如何解释图像，这个页面都会给你留下强烈的创意印象。
当然，作为图形设计师和插画家，Lifrieri完全理解他所传达的信息，并且网站其他页面也采用非常相似的风格。代表作选辑页面具有四幅缩略图，显示不同的项目，用一幅插图包围它们，其风格类似于主页上的插画。其他插画用于美化博客和“About”页面。
版式在这里再次起到重要作用。以相同的自定义手写字体设置网站标题和菜单，它们出现在网站的多幅插图中。幸运的是，Lifrieri限制这种字体只在文本的少数关键区域使用，而为主要的正文选择无衬线字体（在标题中漂亮地进行了精简）。这是一个正确的决定，因为以手写字体设置所有的内容将明显妨碍文字可读性。
小心使用插图和版式可以使人们感受到极具创造性的活力，这显然是Lifrieri想要的。设计的声音对包罗万象的信息起着积极的作用，就像Armitage和Kean Richmond以他们自己独特的方式所做的那样。
在查看了所有这些网站并且理解了它们的设计怎样强调它们的内在信息之后，就能够开始理解，合格的设计是为它自身而存在的，而优秀的设计则是为其内容而存在的（或者是为内容的含义而存在的）。
语气、音量和音调与所说的话直接相关，与之相同，与颜色、版式和插图有关的选择同样与通过设计传达的思想相关。而且，这些元素将对你是否理解所做的选择产生影响。调色板总会影响我们解释事物的方式，并且每种字型都会通过其样式、重度、内涵和语境影响设计的含义。
因此，我们需要留意在设计中所做的一切。任何事情都应该不是率性而为的（或者至少不完全是这样）；所有的元素都应该和谐地工作，以创建一种十分和谐的含义。所有其他的一切将会给设计制造不和谐音，并且非常有可能削弱网站的效果。
合格的图形设计师努力为客户创建吸引人的设计，而优秀的图形设计师则更进一步，努力理解项目目标的要点。优秀的设计师依赖于我们讨论过的与持久性、极简抽象艺术、图像和声音相关的概念，制作出经过仔细考虑的、非常合理的解决方案。
对于Web和任何其他形式的设计都是如此。在关于可用性、导航、用户体验、HTML、CSS等的所有讨论当中，关于良好、一致的图形设计的讨论正处于被其他声音淹没的危险之中。通常，它被简化成趋势和常见实践的机械性操作。因此，这就给我们留下了典型的网站，它不是设计用于解决问题，而只是提供网站的外观，也许只适合于特定的领域。
至此，你应该认识到这不是合格的图形设计——甚至离优秀的图形设计相去甚远。当然，设计师必须在某些约束条件下（比如在方框模型的限制内）工作，但是最终，良好实现的设计会反映出深思熟虑的设计决策，它们构成、通知以及支持网站的内容和消息。
关于作者
“设计不仅是使事物看起来很漂亮，它涉及针对（通常的）视觉问题精心设计有目的、有意图的解决方案。”
Matt Ward（生于1981年）来自于加拿大的安大略省，拥有英语文学硕士学位。Matt是一位自学成材的视觉设计师，他重点关注的是前端编码，并且会结合做一些后端工作。他在线工作了差不多10年时间，并且有4年印刷行业的工作经验，他最喜爱的颜色是工作的颜色。在他的空闲时间，他喜欢与妻子和女儿在一起。此外，Matt还喜欢阅读、弹吉他以及玩视频游戏。Matte给读者的忠告是：永远不要停止学习，它只会帮助你变得更好。你今天可能不像你所希望的那样优秀，但是只要你比昨天更好，那就是进步！继续努力前进吧！
“理解这个过程比产品更重要。最终的结果是通过上百个细小的决策和思考达到最好的效果，你把它们结合得越好，所得到的结果将越好。”
Alexander Charchar（生于1985年）出生于澳大利亚的墨尔本，他毕业于斯温伯尔尼理工大学，并通过持续不断的学习和写作稳定地增进他的知识。Alexander有10年的设计经验，主要学习版式和思想驱动的设计。在工作之余， Alexander喜欢与妻子呆在一起，他有两条小狗，并且着迷于电影、音乐和阅读。他给读者的忠告是：只要你真正做到尽情享受其中，就可以制作出优秀的作品。
注 释
[4].Heller,Steven。“Paul Rand”。Phaidon Press出版：2008年。第77页。
[7].参见http://www.melanieandjustin.ca/。
[8].参见http://www.underworldmagazines.com/。
[10].参见http://www.thepixel.com/blog/。
[13].参见http://www.jonbrousseau.com/。
[16].参见http://www.adhamdannaway.com/。
[17].参见http://www.weareacademy.com/。
[19].参见http://www.justbcoz.co.za/headspace/。
[20].参见http://www.ona.com.co/web/。
[21].参见http://www.brightbulbstudio.com/。
[22].参见http://www.drowned.fr/。
[23].Bringhurst,Robert。“The Elements of TypographicStyle”（版式的要素）。2005年。第17页。
[25].Bringhurst,Robert。“The Elements of Typographic Style”（版式的要素）。2005年。第17页。
[26].参见http://www.bam.com.au/。
[28].参见http://www.elysiumburns.com/。
[29].参见http://armitagedigital.co.uk/blog。
[30].参见http://www.keanrichmond.com/。
[31].参见http://hugsformonsters.com/。
图书在版编目（CIP）数据
众妙之门：网站UI设计之道.2/德国Smashing Magazine网站著；陈宗斌译.--北京：人民邮电出版社，2012.4
ISBN 978-7-115-27433-5
Ⅰ.①众… Ⅱ.①德…②陈… Ⅲ.①网站—设计 Ⅳ.①TP393.092
中国版本图书馆CIP数据核字（2012）第017676号
版权声明
The Smashing Book 2
Copyright ©2011 by Smashing Media GmbH
All rights reserved.No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, by photocopying, recording or otherwise, without the prior permission in writing from Smashing Media GmbH.
CHINESE SIMPLIFIED language edition published by POSTS&TELECOMMUNICATIONS PRESS Copyright ©2012.
本书中文简体版由德国Smashing Media 公司授权人民邮电出版社独家出版。
未经出版者书面许可，不得以任何方式复制或抄袭本书内容。
版权所有，侵权必究。
众妙之门——网站UI设计之道2
◆著 [德]Smashing Magazine
译 陈宗斌
责任编辑 赵轩
◆人民邮电出版社出版发行 北京市崇文区夕照寺街14号
邮编 100061 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
北京捷迅佳彩印刷有限公司印刷
◆开本：880×1230 1/32
印张：9.75
字数：335千字 2012年4月第1版
印数：1-4000册 2012年4月北京第1次印刷
著作权合同登记号 图字：01-2011-5496号
ISBN 978-7-115-27433-5
定价：59.00元
读者服务热线：(010)67132705 印装质量热线：(010)67129223
反盗版热线：(010)67171154
