作者：(德)Smashing Magazine
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
众妙之门——网页设计专业之道试读：
版权声明
Professional Web Design
Copyright © 2012 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 ©2013.
本书中文简体版由德国Smashing Media公司授权人民邮电出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。版权所有，侵权必究。
内容提要
本书是知名设计网站Smashing Magazine上关于网页设计知识及经验的分享。这些文章都是来自于全球知名设计师的精华总结。全书分两部分：基础篇介绍了网页设计领域的最新知识和理论成果，结合实例、言简意赅，设计人员可以从中找到一系列现象背后的理论基础，极富启发性；实践篇结合实例介绍了许多目前网页设计的最佳实践，以及成功设计师的专业建议，对于网页设计师有很好的实际参考价值。
本书最大的价值在于其以结合大量实例的生动方式，详细阐述了网页设计知识和理论，帮助设计师用科学的知识武装自己。相信广大读者读完这本书之后，一定会有一种相识恨晚的感觉。第1章网页设计的现状Vitaly Friedman
网页设计是一个多变的行业。就像其他艺术表现形式一样，网页设计经历了曲折的进化历程。它曾经是一个爱好者们的“游乐场”，现在却变成了一个具有较强审美和宣传功能的成熟媒介。事实上，我们可能正经历着网页设计的黄金时代——至少是迄今为止的最好时期。在我们设计网页时，我们有强有力的新兴工具（CSS3、HTML5、font-embedding等）、一大堆的免费资源，也有强大的设计团队，以及在一些主流浏览器中Web标准的可靠支持。
我们看到了更好的交互式设计和更美观的界面，同时还看到了更独特的、动人的和令人难忘的网站。但是，到底是什么导致了这些变化？网页设计现今正朝向什么新方向发展呢？哪些新技术、观点和想法变得越来越重要？在本章中，我们描述了一些网页设计的现状。我们描述现有和未来的趋势，然后说明网页设计在未来的几个月或几年的发展趋势。这也涉及作为网页设计师的我们应该准备好跟上时代的步伐，迎接新的挑战。1.1 为愉悦而设计
作为设计师，我们的工作是高效率地交流想法。对于每一个特定的信息，我们创建一个环境，让信息能够发挥最大作用，引导用户完成某个任务，赢得他们的信任或者说服他们。当然，有无数的方法可以来创建这个环境。其中一类就是按照视觉美感、惊喜、愉悦、幸福来设计——一种使人愉悦的设计；一种令人难忘的和卓越设计。有吸引力的事物更加有效，有助于抓住用户注意力和让他们保持关注。令人难忘的设计增加了产品和品牌的感染力，从而获得更高的用户的参与度。实际上，若你的客户和用户之间存在一种强大的、可靠的情感关系，就能在事业上给你带来意想不到的帮助。虽然绝大多数的品牌仍然保持沉默、被动和客观的态度，但是我们已经观察到更多的网站在努力吸引我们的感官——不论是通过强大的审美情趣、内容版块的诙谐动画，还是干脆通过一点额外的小型设计元素。一些设计看起来很美观，导航起来很有趣，但最重要的是令人难忘——原因很简单，因为它们与众不同。给你的设计加入有趣的个人风格，使你脱颖而出，并且这会给访客一些能与朋友、同事分享的话题。这是一个好的开端。你可以在各种设置上引出令人愉悦的设计：在维护模式页面、404错误页面、预加载页面，或者其他页面。我们的想法是，令访客感到惊喜，并给予他们一些津津乐道的话题。Bounty Bev
漂亮的Bounty Bev是一个饮料公司的单页设计。除了其微妙的悬停效果和动画以外，网站还有一些不错的元素：如果你手动滚动页面，便会出现一个小的弹出提示，询问你“How’bout a lift”(是否需要搭个便车)。其呈现的效果是强大且令人难忘的，并且其设计也很俏皮、简单、清新和个性，这样的网站会给访客留下非常积极的印象。www.bountybev.comAnalog.coop
Analog向访客提供了一种非常个性化的体验。当访问该页面时，系统会显示出你当前所在的位置，并告诉你附近的团队成员。该网站隐藏着几个巧妙的彩蛋，你可能会想要探索一下刊头或团队照片。总而言之，此网页探索起来很有趣。analog.coopBilly Tamplin
Billy Tamplin在博客中集合了生平的一些小成就。每项展示都记录了个人成就，呈现出个性设计奖章和说明。Billy在整个网站中都使用这个方式，涉及“超级Web技能”（敏捷CSS、PHP入门准备、IE6增强等）和“超凡的设计能力”（以人为本的宗旨、敏锐的创意细节等）。他在网站上也有其作品集。请注意它的配色方案是如何匹配主题的。其设计简约美观，标新立意的“achievement”的效果令人难忘。billytamplin.comMIX
MIX是一个面向设计师和网页开发者的博客社区。该网站没有隐藏的功能、引人注目的动画或悬停效果。相反，它具有连贯的、极具视觉吸引力的设计。你能弄明白网站上彩色的圆圈如何以及往哪里重复漂浮吗？其设计在强调内容的同时颇具独特的风格，并且简洁美观。visitmix.comMailChimp
MailChimp在其各方面的设计中，大量采用了与猴子有关的形象。为了告知用户最近的更新情况，MailChimp呈现了ASCII动画，以告知用户后台所发生的变化。如果这个漂亮的细节不足为奇，公司还使用了个性、友好，并且有点古怪的语言回应用户的需求。下图中的图像在其Web应用程序中也得以保留。www.mailchimp.com1.2 Keypress导航
由于设计师们都在努力使设计更加直观，因此设计出来的网站也就变得越来越有响应力。它不仅适用于现代Web应用程序的用户界面（成为强劲的桌面应用程序），而且随着JavaScript库的广泛应用，“传统”网站也变得越来越强大，更具有交互性。一个令网站更具响应力的方式就是使用“Keypress导航”，虽然目前为止它还没有被广泛采用，但是最近很多设计已经有效地实施了这一方案。这类导航最受欢迎的的设置是在照片网站上，如Flickr和FFFFound。总之，给用户简单的快捷键，让他们能够执行单调乏味的任务。例如，在博文之间浏览、版块移动图片、改变当前视图（如从水平变为垂直）、链接到文章或网站版块之间的浏览，等等。Keypress导航是最常见的基于Flash设计的导航，但如今它也适用于基于CSS的设计。Google Reader是采用先进的Keypress导航的最好例子，其他很多网站也有很好的设计。They Make Apps
去年，They Make Apps开始向用户提供流畅和先进的Keypress导航代替先前的经典滑动导航。用户只需使用页面主导航菜单的下拉菜单即可在两个模式之间切换。在Keypress导航模式中，用户使用方向键在各内容版块之间切换：按“Enter”键查看详情，而按“Esc”键则是返回到主页。出于某种原因，这个导航不再可用了。patterntap.comMad-ar.ch
Marc Anton Dahmen的网站是基于Flash基础的，其导航功能也十分先进：用户可以通过“c”键直接进入“Contact”(联系)页面，使用“-”号或“+”号来缩放图像，然后通过方向键来使用导航或按顺序浏览图片。mad-ar.ch9GAG
9GAG是一个具有图片网址收藏夹。用户可以通过“j”和“k”键分别导航到下一个画面或之前的一个画面。在当前画面可以使用“l”键来投票，没有必要滚动鼠标。在这种情况下，有个网格视图的快捷键是非常有用的。9gag.comFeta
Feta是另一个基于Flash的网站。你能够在该网站上使用左箭头和右箭头来浏览每个部分的内容，“↑”键选择，“↓”键返回。www.feta.plNY Times: Times Skimmer
NY Times的快速浏览页面拥有非常先进的Keypress导航。用户可使用箭头来导航章节，使用“Shift”键来放大，使用“t”键返回顶部，使用“r”键刷新当前页面，使用“a”键和方向键来选择文章。虽然记住这些按键会花费一些时间，但是一旦你掌握了这些操作要领，浏览网页时会轻松很多。www.nytimes.comPictory
PictoryMag是一个专注于照片故事的在线杂志，也使用“j”键和“k”键导航来浏览图片。www.pictorymag.comCrushLovely
CrushLovely是一个单页作品集网站，让你能够使用方向键来导航至网页的各个部分。crushlovely.comPicnic Extraterrestre
这是我们迄今为止见过的最不寻常的设计之一。Iván Ferreiro的Picnic Extraterrestre拥有十分先进的Keypress导航，其设计模仿了老式显示器效果，并且惟妙惟肖。所有的导航项目都是可供加载的数字快捷键，十分有趣！www.ivanferreiro.es1.3 传统印刷设计的影响
虽说令人愉悦的设计主要是通过意想不到并且有趣的风格给访客留下深刻的印象，然而现代的网页设计师往往更进一步，对他们工作的底层细节进行试验，从而创造出更多创新和独特的布局。事实上，即使不是专家，也能看到网页设计对传统印刷设计日益扩大的影响力。它们往往表现在所谓的“art-direct”风格博客文章上，每篇博文都展现了其独特和精心的制作。这些网站的布局通常类似于一些传统杂志和海报，有着醒目的头条、多列文本、突出的标点、缩进文本，并且支持意象、旁注和脚注。设计风格通常坚持着网格式排版，给浏览者带来强烈的视觉冲击。Design Informer：基于网格的简单设计具有两列清晰的布局，将插图和文本分开。通过标题下面大字的作者名字，以及此页面的标点设计不难看出，内容决定了布局
在大多数情况下，art-directed风格的设计纯粹来自于创造者的内心和判断。这样的设计主要应用于自由职业者的网站（作为个人项目的成果），而非商业设计里。更广泛地采取这些技术的主要障碍是这类创作设计（或通过（X）HTML和CSS来实施）很费时。art-directed风格的设计在代码编写和维护上相当困难，而且它们需要内联CSS样式，并且其他设计师可能会在样式列表中以几十种非语意类别结束。此外，由于设计师布局上的限制，想要整合这些页面上的广告是很困难的。因此，对于经费不足导致更新很少的网站来说，这类设计更加适用。
如果你打算尝试art-directed风格的设计，你必须认识到文章的布局是次要的，并且一如既往地支持内容本身，而不是主宰它。问题是，一旦你开始设计一个博客，很容易过度设计页面的元素，这是因为你为了设计而设计，并非内容所决定的。事实上，设计界正在争议的是，art-directed风格的设计是否仅仅是“在Photoshop上做文章”，纯粹为了设计而设计。
好的设计是一种有效率的传达，而不是以牺牲易读性为代价的一种修饰。正如Francisco Inchauste所说的那样：“我认为这是一个两难问题。在优秀的内容、优秀的艺术方向和常规时间表之间难以取舍，但如果尝试去满足全部，就会发现其中一项功亏一篑。”1.4 如何与众不同
这是一个丰富多彩、图文并茂、并且有着独特布局的页面。注意到它的与众不同了吗？该设计拥有CSS布局。有时候，art-directed风格的设计是很有必要的。themanyfacesof.comEvan Dinsmore: 21
该网页的设计是海报式的。在简洁的页面中以生动的图片取代了传统的纯文本。但是这样做的弊端是：在用户使用内容的便利性上，不如基于文本形式的界面。evandinsmore.caA Way Back: Revised Font Stack
这是一个细节详尽的长版面设计。在art-directed风格的设计中，大型图片常被用来扩展布局的边界，如本例所示。这些图片往往是800～1000像素的宽度，填充了整个页面。www.awayback.comChris Coyier: the Safari Challenge
这是一个利用了宽边距、多列文本、脚本和缩进标题的巧妙设计。从美学的角度看，它更像是一本书的内页。chriscoyier.netKyle Fielder: Keeping Curious
这是一个经典之作。你是否还记得那些用大型标点符号和视觉效果来创建文本流向的旧杂志？请注意其标题是如何在这个问号标志中定位的。这是一个美观、简洁、新颖的设计。kylefiedler.comSleepover: A Critical Analysis of my Shoes
这是一个简单的基于网格和对齐文本的设计，使用了衬线字体排印和一张漂亮的鞋子插图。遗憾的是，对齐文本在网页上看起来并不怎么美观。www.sleepoversf.comYaron Schoen: Too Many Buttons
有时候，art-directed风格和博客文章需要涉及很多的元素，如背景图片、背景颜色以及CSS样式等。此例正好体现了这类设计。yaronschoen.comThe Bold Italic: Keep Off the Grass
还有另一个典型列布局设计的示例。thebolditalic.comThe Bold Italic: Cinderella Story
另外一种设计，将印刷设计的灵感发挥得极佳。thebolditalic.comTravis Neilson: Default Switch
以下是一个宁静、简洁、干净，并且带有个性标题的设计。travisneilson.com1.5 平面主义
在过去的几年里，我们注意到网页设计中文本加载方向的一个缓慢的转变。不仅设计获得了层次感和真实感，连导航也发生了改变。一些设计师用传统的垂直滚动和滑动导航，既可以水平滚动又可以垂直滚动，甚至是纯水平滚动。这就是所谓的“平面主义”。由于鼠标设计的是垂直滚动，因此采用水平滚动条的网站更难以浏览。但是随着多点触碰设备的出现，让我们可以重新考虑这种设计的可用性。毕竟在这种设备上，用户是垂直浏览还是水平浏览真的无关紧要，并且一些插件（如Scrollable和jScrollHorizontalPane）简化了用户横向浏览的操作，通过采用标准的垂直滚轮鼠标导航，从而减少了学习的负担。水平滚动条的历史已经有许多年了，但在今天看来，它们似乎还在添加新的内容。移动水平滚动条可能是一些设计师试图在提供一个更加独特的用户体验。这类设计是精心制作的，并且可以在一些精美的电子商务网站和作品集网站上找到它们。“平面主义”是否会扩展到更多类型的网站中，我们拭目以待。Thinking for a Living
这篇文章不仅讨论“平面主义”在可读性方面的优缺点，还展示了其本身很美观的水平布局和多个文本列。尽管其排列方向开始看起来很不同寻常，但是阅读起来还是相当惬意和舒适的。www.thinkingforaliving.orgJung v. Matt
此网站有一个水平的时间轴导航。值得注意的是，该网站并没有水平滚动条，需要访客使用垂直滚动来导航水平页面。www.jvm-neckar.deYour Auxillary
这是许多所谓的“单页”（single page）布局设计中的一个。这类网站的全部内容都在一个单页上。导航时，可以使用键盘，也可以使用鼠标或菜单（此网站使用了第三方插件）。在这里，我们拥有良好的（普通的）、横向或纵向的导航组合（展示jQuery ScrollTo插件）。www.yourauxiliary.comOne Twenty Six
此网站有不同类型的横向水平导航。除了“上一步”和“下一步”按钮以外，用户还可以在下拉菜单里看到选定内容的概述。一旦选中某个选项，页面就可以水平滚动了。带鼠标滚动的水平导航设计可能会提高此设计的实用性。www.onetwentysix.comC. L. Holloway
Candice Holloway作品集网站具有美观的水平布局。所有作品都被安放在一面“墙壁”上，水平导航用来滚动艺术画廊。很有趣的是，当鼠标悬停在水平箭头上时，滚动即被触发，而不需要你点击。
试读结束[说明：试读内容隐藏了图片]