详情
本书是知名设计网站Smashing Magazine上关于网页设计知识及经验的分享。这些文章都是来自于全球知名设计师的精华总结。全书分两部分，共20章。前10章的基础部分介绍了网页设计领域的最新知识和理论成果，结合实例、言简意赅，设计人员可以从中找到一系列现象背后的理论基础，极富启发性；后10章的实践篇结合实例介绍了许多目前网页设计的最佳实践，对于网页设计师有很好的实际参考价值。
书名：众妙之门——网页设计专业之道
ISBN：978-7-115-32113-8
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 ［德］Smashing Magazine
译 赵俊婷
责任编辑 赵 轩
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
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上关于网页设计知识及经验的分享。这些文章都是来自于全球知名设计师的精华总结。全书分两部分：基础篇介绍了网页设计领域的最新知识和理论成果，结合实例、言简意赅，设计人员可以从中找到一系列现象背后的理论基础，极富启发性；实践篇结合实例介绍了许多目前网页设计的最佳实践，以及成功设计师的专业建议，对于网页设计师有很好的实际参考价值。
本书最大的价值在于其以结合大量实例的生动方式，详细阐述了网页设计知识和理论，帮助设计师用科学的知识武装自己。相信广大读者读完这本书之后，一定会有一种相识恨晚的感觉。
Vitaly Friedman
网页设计是一个多变的行业。就像其他艺术表现形式一样，网页设计经历了曲折的进化历程。它曾经是一个爱好者们的“游乐场”，现在却变成了一个具有较强审美和宣传功能的成熟媒介。事实上，我们可能正经历着网页设计的黄金时代——至少是迄今为止的最好时期。在我们设计网页时，我们有强有力的新兴工具（CSS3、HTML5、font-embedding等）、一大堆的免费资源，也有强大的设计团队， 以及在一些主流浏览器中Web标准的可靠支持。
我们看到了更好的交互式设计和更美观的界面，同时还看到了更独特的、动人的和令人难忘的网站。但是，到底是什么导致了这些变化？网页设计现今正朝向什么新方向发展呢？哪些新技术、观点和想法变得越来越重要？在本章中，我们描述了一些网页设计的现状。我们描述现有和未来的趋势，然后说明网页设计在未来的几个月或几年的发展趋势。这也涉及作为网页设计师的我们应该准备好跟上时代的步伐，迎接新的挑战。
作为设计师，我们的工作是高效率地交流想法。对于每一个特定的信息，我们创建一个环境，让信息能够发挥最大作用，引导用户完成某个任务，赢得他们的信任或者说服他们。当然，有无数的方法可以来创建这个环境。其中一类就是按照视觉美感、惊喜、愉悦、幸福来设计——一种使人愉悦的设计；一种令人难忘的和卓越设计。有吸引力的事物更加有效，有助于抓住用户注意力和让他们保持关注。令人难忘的设计增加了产品和品牌的感染力，从而获得更高的用户的参与度。实际上，若你的客户和用户之间存在一种强大的、可靠的情感关系，就能在事业上给你带来意想不到的帮助。虽然绝大多数的品牌仍然保持沉默、被动和客观的态度，但是我们已经观察到更多的网站在努力吸引我们的感官—不论是通过强大的审美情趣、内容版块的诙谐动画，还是干脆通过一点额外的小型设计元素。一些设计看起来很美观，导航起来很有趣，但最重要的是令人难忘——原因很简单，因为它们与众不同。给你的设计加入有趣的个人风格，使你脱颖而出，并且这会给访客一些能与朋友、同事分享的话题。这是一个好的开端。你可以在各种设置上引出令人愉悦的设计：在维护模式页面、404错误页面、预加载页面，或者其他页面。我们的想法是，令访客感到惊喜，并给予他们一些津津乐道的话题。
漂亮的Bounty Bev是一个饮料公司的单页设计。除了其微妙的悬停效果和动画以外，网站还有一些不错的元素：如果你手动滚动页面，便会出现一个小的弹出提示，询问你“How’bout a lift”(是否需要搭个便车)。其呈现的效果是强大且令人难忘的，并且其设计也很俏皮、简单、清新和个性，这样的网站会给访客留下非常积极的印象。
Analog向访客提供了一种非常个性化的体验。当访问该页面时，系统会显示出你当前所在的位置，并告诉你附近的团队成员。该网站隐藏着几个巧妙的彩蛋，你可能会想要探索一下刊头或团队照片。总而言之，此网页探索起来很有趣。
analog.coop
Billy Tamplin在博客中集合了生平的一些小成就。每项展示都记录了个人成就，呈现出个性设计奖章和说明。Billy在整个网站中都使用这个方式，涉及“超级Web技能”（敏捷CSS、PHP入门准备、IE6增强等）和“超凡的设计能力”（以人为本的宗旨、敏锐的创意细节等）。他在网站上也有其作品集。请注意它的配色方案是如何匹配主题的。其设计简约美观，标新立意的“achievement”的效果令人难忘。
billytamplin.com
MIX是一个面向设计师和网页开发者的博客社区。该网站没有隐藏的功能、引人注目的动画或悬停效果。相反，它具有连贯的、极具视觉吸引力的设计。你能弄明白网站上彩色的圆圈如何以及往哪里重复漂浮吗？其设计在强调内容的同时颇具独特的风格，并且简洁美观。
visitmix.com
MailChimp在其各方面的设计中，大量采用了与猴子有关的形象。为了告知用户最近的更新情况，MailChimp呈现了ASCII动画，以告知用户后台所发生的变化。如果这个漂亮的细节不足为奇，公司还使用了个性、友好，并且有点古怪的语言回应用户的需求。下图中的图像在其Web应用程序中也得以保留。
由于设计师们都在努力使设计更加直观，因此设计出来的网站也就变得越来越有响应力。它不仅适用于现代Web应用程序的用户界面（成为强劲的桌面应用程序），而且随着JavaScript库的广泛应用，“传统”网站也变得越来越强大，更具有交互性。一个令网站更具响应力的方式就是使用“Keypress导航”，虽然目前为止它还没有被广泛采用，但是最近很多设计已经有效地实施了这一方案。这类导航最受欢迎的的设置是在照片网站上，如Flickr和FFFFound。总之，给用户简单的快捷键，让他们能够执行单调乏味的任务。例如，在博文之间浏览、版块移动图片、改变当前视图（如从水平变为垂直）、链接到文章或网站版块之间的浏览，等等。Keypress导航是最常见的基于Flash设计的导航，但如今它也适用于基于CSS的设计。Google Reader是采用先进的Keypress导航的最好例子，其他很多网站也有很好的设计。
去年，They Make Apps开始向用户提供流畅和先进的Keypress导航代替先前的经典滑动导航。用户只需使用页面主导航菜单的下拉菜单即可在两个模式之间切换。在Keypress导航模式中，用户使用方向键在各内容版块之间切换：按“Enter”键查看详情，而按“Esc”键则是返回到主页。出于某种原因，这个导航不再可用了。
patterntap.com
Marc Anton Dahmen的网站是基于Flash基础的，其导航功能也十分先进：用户可以通过“c”键直接进入“Contact”(联系)页面，使用“-”号或“+”号来缩放图像，然后通过方向键来使用导航或按顺序浏览图片。
mad-ar.ch
9GAG是一个具有图片网址收藏夹。用户可以通过“j”和“k”键分别导航到下一个画面或之前的一个画面。在当前画面可以使用“l”键来投票，没有必要滚动鼠标。在这种情况下，有个网格视图的快捷键是非常有用的。
9gag.com
Feta是另一个基于Flash的网站。你能够在该网站上使用左箭头和右箭头来浏览每个部分的内容，“↑”键选择，“↓”键返回。
NY Times的快速浏览页面拥有非常先进的Keypress导航。用户可使用箭头来导航章节，使用“Shift”键来放大，使用“t”键返回顶部，使用“r”键刷新当前页面，使用“a”键和方向键来选择文章。虽然记住这些按键会花费一些时间，但是一旦你掌握了这些操作要领，浏览网页时会轻松很多。
PictoryMag是一个专注于照片故事的在线杂志，也使用“j”键和“k”键导航来浏览图片。
CrushLovely是一个单页作品集网站，让你能够使用方向键来导航至网页的各个部分。
crushlovely.com
这是我们迄今为止见过的最不寻常的设计之一。Iván Ferreiro的Picnic Extraterrestre拥有十分先进的Keypress导航，其设计模仿了老式显示器效果，并且惟妙惟肖。所有的导航项目都是可供加载的数字快捷键，十分有趣！
虽说令人愉悦的设计主要是通过意想不到并且有趣的风格给访客留下深刻的印象，然而现代的网页设计师往往更进一步，对他们工作的底层细节进行试验，从而创造出更多创新和独特的布局。事实上，即使不是专家，也能看到网页设计对传统印刷设计日益扩大的影响力。它们往往表现在所谓的“art-direct”风格博客文章上，每篇博文都展现了其独特和精心的制作。这些网站的布局通常类似于一些传统杂志和海报，有着醒目的头条、多列文本、突出的标点、缩进文本，并且支持意象、旁注和脚注。设计风格通常坚持着网格式排版，给浏览者带来强烈的视觉冲击。
Design Informer：基于网格的简单设计 具有两列清晰的布局，
将插图和文本分开。通过标题下面大字的作者名字，以及
此页面的标点设计不难看出，内容决定了布局
在大多数情况下，art-directed风格的设计纯粹来自于创造者的内心和判断。这样的设计主要应用于自由职业者的网站（作为个人项目的成果），而非商业设计里。更广泛地采取这些技术的主要障碍是这类创作设计（或通过（X）HTML和CSS来实施）很费时。art-directed风格的设计在代码编写和维护上相当困难，而且它们需要内联CSS样式，并且其他设计师可能会在样式列表中以几十种非语意类别结束。此外，由于设计师布局上的限制，想要整合这些页面上的广告是很困难的。因此，对于经费不足导致更新很少的网站来说，这类设计更加适用。
如果你打算尝试art-directed风格的设计，你必须认识到文章的布局是次要的，并且一如既往地支持内容本身，而不是主宰它。问题是，一旦你开始设计一个博客，很容易过度设计页面的元素，这是因为你为了设计而设计，并非内容所决定的。事实上，设计界正在争议的是，art-directed风格的设计是否仅仅是“在Photoshop上做文章”，纯粹为了设计而设计。
好的设计是一种有效率的传达，而不是以牺牲易读性为代价的一种修饰。正如Francisco Inchauste所说的那样：“我认为这是一个两难问题。在优秀的内容、优秀的艺术方向和常规时间表之间难以取舍，但如果尝试去满足全部，就会发现其中一项功亏一篑。”
这是一个丰富多彩、图文并茂、并且有着独特布局的页面。注意到它的与众不同了吗？该设计拥有CSS布局。有时候，art-directed风格的设计是很有必要的。
themanyfacesof.com
该网页的设计是海报式的。在简洁的页面中以生动的图片取代了传统的纯文本。但是这样做的弊端是：在用户使用内容的便利性上，不如基于文本形式的界面。
evandinsmore.ca
这是一个细节详尽的长版面设计。在art-directed风格的设计中，大型图片常被用来扩展布局的边界，如本例所示。这些图片往往是800～1000像素的宽度，填充了整个页面。
这是一个利用了宽边距、多列文本、脚本和缩进标题的巧妙设计。从美学的角度看，它更像是一本书的内页。
chriscoyier.net
这是一个经典之作。你是否还记得那些用大型标点符号和视觉效果来创建文本流向的旧杂志？请注意其标题是如何在这个问号标志中定位的。这是一个美观、简洁、新颖的设计。
kylefiedler.com
这是一个简单的基于网格和对齐文本的设计，使用了衬线字体排印和一张漂亮的鞋子插图。遗憾的是，对齐文本在网页上看起来并不怎么美观。
有时候，art-directed风格和博客文章需要涉及很多的元素，如背景图片、背景颜色以及CSS样式等。此例正好体现了这类设计。
yaronschoen.com
还有另一个典型列布局设计的示例。
thebolditalic.com
另外一种设计，将印刷设计的灵感发挥得极佳。
thebolditalic.com
以下是一个宁静、简洁、干净，并且带有个性标题的设计。
travisneilson.com
在过去的几年里，我们注意到网页设计中文本加载方向的一个缓慢的转变。不仅设计获得了层次感和真实感，连导航也发生了改变。一些设计师用传统的垂直滚动和滑动导航，既可以水平滚动又可以垂直滚动，甚至是纯水平滚动。这就是所谓的“平面主义”。由于鼠标设计的是垂直滚动，因此采用水平滚动条的网站更难以浏览。但是随着多点触碰设备的出现，让我们可以重新考虑这种设计的可用性。毕竟在这种设备上，用户是垂直浏览还是水平浏览真的无关紧要，并且一些插件（如Scrollable和jScrollHorizontalPane）简化了用户横向浏览的操作，通过采用标准的垂直滚轮鼠标导航，从而减少了学习的负担。水平滚动条的历史已经有许多年了，但在今天看来，它们似乎还在添加新的内容。移动水平滚动条可能是一些设计师试图在提供一个更加独特的用户体验。这类设计是精心制作的，并且可以在一些精美的电子商务网站和作品集网站上找到它们。“平面主义”是否会扩展到更多类型的网站中，我们拭目以待。
这篇文章不仅讨论“平面主义”在可读性方面的优缺点，还展示了其本身很美观的水平布局和多个文本列。尽管其排列方向开始看起来很不同寻常，但是阅读起来还是相当惬意和舒适的。
此网站有一个水平的时间轴导航。值得注意的是，该网站并没有水平滚动条，需要访客使用垂直滚动来导航水平页面。
这是许多所谓的“单页”（single page）布局设计中的一个。这类网站的全部内容都在一个单页上。导航时，可以使用键盘，也可以使用鼠标或菜单（此网站使用了第三方插件）。在这里，我们拥有良好的（普通的）、横向或纵向的导航组合（展示jQuery ScrollTo 插件）。
此网站有不同类型的横向水平导航。除了“上一步”和“下一步”按钮以外，用户还可以在下拉菜单里看到选定内容的概述。一旦选中某个选项，页面就可以水平滚动了。带鼠标滚动的水平导航设计可能会提高此设计的实用性。
Candice Holloway作品集网站具有美观的水平布局。所有作品都被安放在一面“墙壁”上，水平导航用来滚动艺术画廊。很有趣的是，当鼠标悬停在水平箭头上时，滚动即被触发，而不需要你点击。
在此，你会见识到设计师独特的设计视角。有时候，布局可能是倾斜的。
有时候，设计的布局可能是悬挂在空中的。
多年以来，排版在网页设计中一直扮演着重要角色。大胆、强烈、沉重的刊头能够有效地宣传电子商务网站或作品集网站；然而一个巧妙的刊头则更有助于呈现内容的结构，并且提升易读性。很显然，我们见到了更大的变化，更灵活的排版，在一定程度上使@font-face属性和字体嵌入式服务的出现成为可能，如TypeKit。丰富的版式元素能够在浏览器中选择和复制，这在几年前可不是一件容易的事。未来追求的是夸张和大胆的排版。丰富的字族不仅将运用到标题上，还将运用到正文和副本中，将排版技术从印刷界带入网页设计界。此外，设计师们还将大胆尝试更多丰富的、复杂的衬线字体，以及有气势的slab字体。网页设计师还可以通过CSS3文字阴影属性为排版添加了更多深度。当然，这些细微之处与布局的选择密不可分。这些排版设计通常是基于网格的设计，并且是从印制界引入的技术，如旁注和脚注。我们进一步了解到，设计师正在扩大他们的字体集合，添加越来越多的阴影字体，避免特定的字体不可用。这样很好，毕竟字体的大小（或粗细）不太一样；一些字体会显示得比其他字体更宽或更粗一些。因此，更大的长宽比例意味着，一些用户在查看你的页面时，将比你看到更小的字体尺寸。
Kilian Muster采用了相当宽松的衬线字体来完成设计，包括字族中的Palatino、Palatino Linotype、Book Antiqua、Constantia、Times和Times New Roman字体。在Kilian的博客中也含有便笺。
kilianmuster.com
请注意，这家波兰网页设计机构网站上的文本大多数设置为大写，如导航菜单、简介，甚至联络地址都是大写。尽管如此，其设计仍显得平静、大气、干净且精致。
此网站仅采用了衬线字体贯穿整个设计。字体为：“skolar-1”、“skolar-2”、Georgia和Times。值得注意的是，文本被区分成列。直到去年我们还没有看到过此类设计。
此网站结合了生动形象的图片和俏皮的排版。和“传统经典”的网页比较起来，该设计更像是一本小册子或一张海报。
Simon Collison巧妙地将访客的注意力引向最微小的细节，从而呈现出排版之美。没有加粗字体和令人感到惊艳的排版，只有简单易读和美观大方的设计。
colly.com
此网站将衬线字体运用到了极致。该字体配合主题，完美地适应了布局。请特别注意，这样美观的视觉设计是如何与传统经典的排版布局相融合的。
不错的风格和视觉的组合，使页面很醒目。但是到目前还不清楚为何设计者在该页面使用了三种不同的标题字体，理论上两种就已经足够了。
terminalbrewhouse.com
还能再大胆一些吗？大型加粗字体，大写字母贯穿了整个页面。当用户滚动页面时，能观看到非常漂亮的背景效果。这是一个非常简单而有力的设计。
现代网页设计应该更好、更丰富且更便于用户使用。我们注意到，使用良好的视觉设计可以获得更美观和更好的用户体验。传统的技术，从印刷排版逐渐被应用到网络，作为布局技术或丰富的多功能排版技术，水平甚至是对角线布局的排版给多年来我们所熟知的平面设计带来了崭新的视角。这些进展都是网页设计时代到来的一个标志。在这个时代中，设计师可以使用新的工具和技术，并使其潜能发挥到最大。网页设计师理应期待激动人心和有有前途的时代到来。
在之前的章节中，我们讨论了印刷设计技术、keypress导航、横向布局、丰富的排版和美观的设计所带来的强大影响。今日的网页设计发展迅速，打破了传统方法的局限性，以探索即将到来的技术的可能性。设计师们不仅在尝试新的技术和设计方法，也在技术和理论方面改善他们的设计质量。现代的网站有很多优势，例如在灵活性方面、跨浏览器的兼容性方面、个性化方面，等等。另一方面，现代网站也变得越来越简洁和直观。这是通过微妙的可用性增强应用程序来完成的，无论是在网络本身还是离线交互系统。当今网络日益复杂，而网络的使用则越来越简单。在本文中，我们将探索一些新的设计方法和技术来让你开发自己的项目。我们将呈现不寻常的或标新立异的设计方法，并尝试了解什么才是真正有趣的话题，以及我们应该如何将它们应用到我们的设计中。
也许现代网页应用程序和服务最突出的特点之一就是提供了丰富的用户体验。在这类系统中，用户交互变得非常简单和直观，甚至“本土”。但是这种意义上的直观不仅来自应用程序在传统原则上良好的视觉设计,还来自于更好的信息架构。我们已经看到了更多的网页设计，其设计元素通过让用户做出更多有限和简单的决定，来模仿生活中的隐喻或隐藏选择的复杂性。
按钮的发明就是个很好的例子。在现今的网页设计中，按钮的外观和用户交互就像现实生活中的按钮一样。按钮往往看上去非常逼真，它们脱颖而出，具有鲜明的色彩并且非常灵敏：当用户用鼠标悬停或点击此按钮时，它们通常会给予视觉反馈。如果将这些按钮和ATM机上的按钮作比较（从形状、颜色和反应灵敏度方面），就能发现一些惊人的相似之处。
可供性（Affordance）是设计元素的一个关键属性。它指的是对象或环境，允许用户执行某些方面的操作。正如Donald Norman所陈述的那样，可供性为正在运作的事物提供了强有力的线索。当可供性得到很好的运用时，用户只要一看就知道怎样去做，而不需要图片、标签和指令。对于用户而言，页面上的元素看起来越熟悉，就越容易将具体的、实际的应用和任务与它联系起来。
这个方法并不只是涉及“文字-动作”按钮，正如你将在下面看到，它是关于使用恰当的隐喻来传达某些设计元素的一般含义和目的。很明显，这种做法减少了用户交互的复杂性。另一种达到这个目的的方式是注重设计元素的外观，更确切地说，给它们一个不同的类别，或者减少它们在页面上的视觉重量感。
越来越多的网站开始摆脱过时、笨拙、无法使用界面和陡峭的学习曲线。转而使用直观、本土的隐喻。例如，滑块有时候会比某些常规选择器更有效（如在显示预算和时限时）；开启/关闭旋钮比复选框更加合适，等等。同时，复杂性最好隐藏起来，以简化用户交互。现代网页设计应该是具有吸引力的、直观的和简单的。
这家T恤服装店使用了现实生活中的隐喻——晾衣架。如果你的商店里没有太多产品的话，这将是一个不错的主题。但是，如果你有成百上千的产品的话，实现这样的设计会有一定的难度。
XHTML Cafe采用了生动形象的促销版块，丝毫不会使访客感到烦闷。该设计的外形很好地适应了现实生活中的隐喻，既有吸引力，又令人难忘。
xhtmlcafe.net
Culture Code的开发者将航班到达状态作为当前的任务，列举在状态页面中。列表中的每个项目都有说明、人员分配和状态。其设计有些类似机场常见的经典航班时刻表。这是一个将现实生活中有趣的隐喻应用到网页设计中的例子。虽然这并不适用于所有情况，但用在这里却相得益彰。
culturedcode.com
虽然这个网站乍一看很一般，但它的有趣之处在于右上角区域的切换开关。通常情况下，这是一个复选框，允许用户选择正在寻找的人是否应该已经具备了某些限制条件。在这里，它并没有采用传统的复选框，设计师决定使用一个切换开关旋钮。这是否是一个好主意，目前还不清楚，因为这个功能是否会起作用并不明确。这很容易让用户误以为这是一个滑块，但使用滑块的用户交互体验是不同的，它更像是一个切换开关。
这是众多有吸引力的、突出的、微妙的和可点击的按钮中的一个好例子。按钮右边的小图标按钮非常微妙地模拟了工作行动或进展，虽不易察觉，但是的确很有用，既简单、又抢眼。
iPhone的用户界面拥有简单的偏好开关和转换按钮。这个设计比喻的是现实生活中相似的物体，利用简单的开关来开启或关闭功能以执行某个转换，非常直截了当。
幻灯片本质上是一个来隐藏网页复杂性的很好的方法，因为它们在一个紧凑的互动区域重组多个信息点。SlideDeck是一个来展现设计解决方案的好例子，此方案集成了水平和垂直滑动导航到一个元素中。布局简洁大方，并且为可用的功能提供了很好的描述。
Nosotros拥有一个有趣的非传统导航。通过减少导航文字，成为一些有意义的图标，非常巧妙地减少了其复杂性。博客页面有6个图标，作为博客导航选项。一旦用户点击图标选择某个类别，其他类别的图标就会消失。很难说这类操作是否会大规模采用。虽然在设计上有所不同，但是Calicott采取的就是类似的做法。
密切关注那些能够为用户体验提供更多直观性和本土性的小细节。如果你正在Google Mail写一封邮件，并且你需要添加一个附件到邮件中，在你忘记附加它时，系统就会发出一个友好的警告信息，这是一个很好的例子。卓越的网页应用程序和优秀的网页应用程序之间的区别就在于此。如果你觉得有点夸张，那么我们就来打一个比方：一位客户亲自拿着包裹走出邮局，没走出多远，友好的工作人员会提醒客户他忘记发出包裹。
matthewlyle.com
KBB,一个汽车交易资源网站，为销售业主提供预先写好的邮件模板。如果用户感兴趣，他们只需要输入自己的姓名、地址、电话号码，然后一键就能发送邮件。当然，消息是可以定制的。这是一个卓越的网页应用程序，精心设计繁琐的任务，让用户能够一键简单地完成操作。
usedcars.kbb.com
Moof在联络表格方面采取了相似的做法。目前尚不清楚这种做法是否会增加订单转化率，因此，对此进行一个可用性测试将会很有意义。
moof.com
许多网页应用出现了具有多种定价计划的功能，如Livestream。其设计清晰地传达了适合特定类别用户的最佳计划，注意其帮助工具伴随网页“流动”的这种设计和出现在表格底部的红色丝带。黄色按钮也是能够响应的，并且能够提供视觉反馈。这是一个简单、有引导力的设计。
突出最流行的计划会是一个好主意，因为这会帮助用户在不需要查看整个表单的情况下快速做出决定。这是一个绝好的例子：当用户在社交场合时，他们将会观看其他人如何表现。这并非是有意识的，但也是能帮助我们解决困难的一个决定。
降低复杂性的一个简单解决办法是将多个相关的功能组合成一个单独的功能。例如，你可以提供给用户一个单独的“登录或注册”按钮来提供两种服务，而不是提供两个独立分开的链接和页面来登录和注册。当用户选择了一个单选按钮之后，表格就会通过JavaScript得到更新。在登录表格时，请注意“提交”按钮表达了“登录”的意思，此外，还有一个链接可以帮助用户找回丢失的密码。注册表格时，在密码字段的标签提示用户“选择一个密码”并且“注册”，同时还要接受相关的服务条款。另外一种方法是提供两个输入区域，标签标有“电子邮件”和“密码”，并且在附近呈现一句“还没有账户？现在就注册！”的链接。这样的设计对于新访客或回访的访客来说都很合适。
blog.leahculver.com
Vitaly Friedman
尽管消极的言论很多，但是我们依旧相信Flash在现代网页设计中仍占有一席之地。现在，我们观察到HTML/CSS网站和Flash网站已经明确分开。尽管HTML/CSS已经成为基于文本的Web标准，但是重点却要放在信息消费上，而Flash正在通过它丰富的视听效果和丰富的用户交互来支配着娱乐和多媒体网站，但是这并不意味着HTML/CSS网站仅限于单纯的用户交互。我们看到越来越多的HTML/CSS网站变得交互、有趣和优秀，更多的动画用于视觉反馈（如鼠标悬停或点击时），视觉效果被用于更加微妙的用户体验。当然，这些效果都依赖于JavaScript库。尽管如此，基于CSS的设计师往往会避免使用极端的交互，而是有节制地使用微妙的交互，以达到精致的效果。
CoTweet网站是一个很好的例子，简洁、有吸引力，并且拥有响应式按钮。虽然鼠标悬停效果比较微妙，但是点击效果却是醒目的。请注意“注册”（Sign Up）按钮和“了解更多”（Learn More）按钮在文本颜色和尺寸上的区别，还请注意“注册”按钮上醒目的黄色丝带，非常夸张却并不突兀。这就十分微妙，所以，为用户行为号召（call to action）按钮添加小图标是十分有益的。例如，考虑添加一个锁的图标（意为安全）来说明该登录是安全的。
cotweet.com
Veerle最近翻新的设计十分惊艳。链接、内容版块和插图都在鼠标悬停时巧妙地做出反应，包括：不同的透明度、混合动画、突出链接、更改背景图片、色彩淡出、呈现评论和更改导航。其设计十分诱人，具有吸引力和响应力。Veerle的设计还使用了键盘导航。业内都相传，这是一个美妙的、一流的设计。
veerle.duoh.com
Fuel Brand Inc的官方网页具有多种漂亮的动画：鼠标悬停时图像尺寸发生变化、背景图片的变化、幻灯片被用作导航交互式提示和其他显而易见的特效等。交互式技术似乎也在公司官方网站的设计中极为流行。
fuelbrandinc.com
这又是一个运用趣的微妙互动设计技术的网站：三张并列在顶部的图片自动垂直滚动，同时也更新着顶部水平导航的背景图片。值得一提的是，此处并没有使用Flash。
这是一个交互式展示产品的模拟动画。许多电子商务网站现在也开始更多地利用交互的方式展示产品。
addyawards.dtelepathty.com
Carsonified集成了微妙的色彩过渡和淡入淡出效果，用于快速展示会议上发言者的信息。
carsonified.com
这个网站巧妙地应用了交互式悬停效果和丰富的版式，但是由于Flash网站的性质，造成文本管理麻烦且加载时间过长。其实这个网站可以用JavaScript轻易地设计出来，以便于文本的复制和粘贴、灵活的字体大小和native鼠标交互（例如，从指针到链接悬停的改变）。
这是一个拥有交互式设计元素的“关于”页面。鼠标悬停时图片会发生更改：访客可以通过职位来轻松地筛选团队成员，筛选出的图片消褪成灰色。
arc90.com
此网站也拥有微妙的悬停效果。在这个作品集网页中，每个项目都占据了一格。刊头总共有18个格子，当用户将鼠标悬停在某一个格子上方时，它就会扩大以填补6个相邻的格子以显示所选项的额外信息。这里并没有使用Flash技术。再次申明，微妙的交互是相当有益的。
另外，还可以更深层次地使用交互。在Ricardo Mestre的作品集网页中，设计元素缓慢地悬浮在页面上。你能发现那个危险的Twitter-birdie怪物吗？当然，此处也没有使用Flash技术。
duplos.org
上下文精确（context-sensitive）导航是一种很有效的导航（往往附加在主导航上），这取决于用户的上下文页面（例如，他们正在做什么）。其最大的用途就是去除无关的干扰，控制用户当前的内容。上下文精确导航只显示用户实际需要的选项。显然，这种模式将对用户界面设计相当有帮助，它有助于简化界面，将用户的注意力集中到他们所执行的任务上来。
这种方法已经在网页开发中使用多年，但是根据我们的观察，现在越来越多的网站和Web应用程序开始使用它。Vimeo是上下文精确导航的一个典型的例子：当视频开始播放时，播放控件就消失，当有需求时它又再次出现（例如，当用户将鼠标悬停在视频界面时）。当执行上下文精确导航时，确保在用户需要时该导航是可用的。谨记各种设置和用户方案，并测试最坏的情况。对于播放控件而言，由于触屏界面的用户（如iPhone或iPad用户）无法切换导航，因此悬停效果在此是不可用的。针对这种情况，你可能要考虑用触摸手势来代替。
Vimeo是一个视频分享平台，通常在用户开始播放视频时才会呈现播放控件。一旦开始播放视频，控件就会消失，当用户将鼠标悬停在视频界面时控件才会再次出现。这是一个典型的上下文精确导航。这类导航正越来越广泛地被应用于某些视频网站，例如Blip.fm。
《纽约时报》网站在文章中巧妙地展现了相关的特色故事，这样做不但推广了文章中的实际内容，还将它们移动到了一个适当的位置：当用户浏览到文章的结尾时，一个滑块从右下角滑下来，给予用户便利和帮助。当然，最终要通过可用性研究来确定用户是否满意这个设定。此外，请注意，当点击文章中任何单词（链接除外）时，一个带“？”的提示工具就会出现，通过它能够查询已选择的单词。将这项服务呈现在内容中，比隐藏在顶部导航菜单或侧边栏更有意义。这使得上下文精确导航的作用发挥到极致。
下拉式（drop-down）导航是另一种常见的上下文精确导航。《路透社》网站的下拉式导航相当先进，不仅提供了导航选项的访问，还提供了有价值的信息,如当前股票和热点问题，并且是实时的。注意右边栏的“Open”按钮（没有在以下截图中出现），当点击它时，一个详细的信息框（起初是隐藏的，按需求显示）会覆盖当前页面并呈现相关信息（见第二幅截图）。《路透社》网站还允许用户根据喜爱的主题来保存文章在稍后阅读。可见个性化设置的确是未来网络的发展趋势。
当右上角的信息被触发时，Alltop将根据用户需求来确定显示类别，而不是默认显示所有的几十个类别。这又是一个隐藏辅助信息的例子，提供了一种友好的用户体验。
user-interface.alltop.com
DailyMile拥有简洁且吸引人的用户界面，主要导航选项呈现在左边栏。当用户将鼠标悬停在其中一个选项上时，就会出现该链接的说明。在其他网页应用程序中，当鼠标悬停时，它会突显导航选项和二级菜单。此外，还应注意底部边栏的“More”（更多），它提供了二级导航选项。但是，这仅在用户积极寻找这些选项时有用，否则它们是隐藏的。
默认状态下，图像部分不显示实际图像以外的任何内容。但是当用户将鼠标悬停在图像上时就会显示标题、描述和评论数。请注意右上角的“SHARE”（分享）气泡。在鼠标悬停时（仅仅是悬停时），它滑出可转发到Tweet、Facebook、Digg和Stumble的超链接。当鼠标悬停在一个特定区域时，所有的信息都会呈现出来（特定的文本），一旦鼠标移开，它就会自动消失。
theblackharbor.com
随着主流浏览器对CSS3功能的支持和完善，设计界似乎对这一新的进展和发展潜力十分兴奋。每个人似乎都在尝试CSS3，无论是在RGBa透明度、先进的CSS3选择器、CSS3变换或其他属性上。结果是令人惊讶的，我们见识到越来越多的网站比以前更加美观、先进、多功能、强大，并且阻挡了更多的讨厌的浏览器黑客。
到目前为止，最受欢迎的CSS3功能似乎是圆角（border-radius）、动画（animation）、多背景（multi-background）和盒阴影（box-sholow）。这点很容易理解，因为它能用来替换早期古怪的解决方案，可以用所需的工作区和第三方工具来执行任务。此外，@font-face正在迅速普及，但是请明确，它并不属于CSS3功能，因为它是被CSS2提出的，并且应用于早期的IE浏览器版本中（此后才是其他的浏览器——火狐3.5及以上版本、Safari3.2及以上版本、Chrome4.0及以上版本、Opera10.1及以上版本）。这就是为什么现在你可以在设计中安全地使用@font-face。
现今最受欢迎的浏览器（如IE浏览器版本家族中的）只支持CSS3盒大小（box-sizing）属性。IE或IE8浏览器广泛支持CSS3属性选择器([att$=val]、[att^=val]等）和组合器(E~F)，但是不支持CSS3伪类(:nth-child()、 :last-child等）。IE9浏览器支持CSS3媒体查询、CSS3色彩 (HSL、HSLa、RGBa)、CSS3选择器和圆角。以前，通过纯CSS3设计似乎是不可能的，现今已经实现，并推动了设计界的创新思维。我们或许已经进入了资源丰富的网络新时代，当关键的CSS技术诞生后，如2003年～2005年时期，CSS精灵（sprite）和CSS滑动门也被开发出来。实际上，我们可以期待令人兴奋的创意时代的到来。
在SxSW Beercamp的设计中，创作者提出了一些十分大胆的想法。对于页面顶部的每一个字母，他们使用了49次文本阴影（text-shadow）属性。此外，还应用了各种动画和转换效果，以及盒阴影和HSLA。顺便提及一下，你是否注意到顶部的日出效果？这一效果是设计师通过使用20个“<hr>”标签来实现的。
sxsw.beercamp.com
当巧妙地将细节添加到简洁、简单和含义丰富的设计中时，CSS3就能发挥出最佳状态。Tapbots使用CSS3来得到圆角、鼠标悬停和一些透明效果，这些效果起初不容易发现。这是一个CSS3功能应用得当的好例子：没有加粗的、带阴影的标题，没有夸张的渐变和过多的动画，有的只是扎实的、优秀的设计。
tapbots.com
文本阴影属性似乎特别有效果，尤其是当浅色的文本阴影被应用在深色的背景上时。这又是一个深色文本阴影（比背景稍微深一点）应用在白色的标题上的简单例子。此外，网页还使用圆角和盒阴影来处理每个发言者描述下方的快速链接。
full-frontal.org
有时候使用深色的文本阴影搭配浅色的背景效果也不错。但是在这种情况下，你或许想自己添加一个更“强烈”的文本阴影。
desandro.com
一个更为实用的CSS3功能，即使用圆角、盒阴影、渐变和文本阴影处理多层次下拉菜单来达到良好效果。此处没有使用图像。
Kristof Orts使用文本阴影属性来为标题添加深度。浮雕效果干净利落，使字体脱颖而出。
adifferentdesign.be
Dan Cederholm已经准备了一个漂亮的CSS3演示来说明现今设计师可以在设计中使用的一些新功能。尤其请注意其边栏的微妙动画——CSS-transition
（转换）和CSS-animation（动画）。设计师为用户提供了更佳的视觉享受，创造了更多具有响应能力和参与性的交互。
css3exp.com
Faruk Ates的博客是使用CSS3动画和转换来达到很好的鼠标悬停效果的实践范例。请注意在充满活力的蓝色背景上文本阴影的有效利用。
farukat.es
Mindgarden使用了CSS3媒体查询来呈现在不同分辨率下的不同布局。使用宽屏浏览器窗口的用户会得到多列布局，使用小浏览器窗口的用户只会看到一栏。此外，图片的尺寸会根据用户屏幕的大小自动缩放。网页设计师多年以来一直使用JavaScript来达到这个目的，但是现在，我们可以使用基于CSS的解决方案来创建自适应布局。媒体查询是CSS3的扩展媒体类型，能够让设计师在站点渲染布局上有更多的控制。它们当前支持火狐浏览器3.6及更高版本、Safari 4及更高版本、Opera 10及更高版本，以及Chrome。不支持IE8浏览器。
Chirp会议网站采用了CSS动画来得到演讲者照片的旋转动画效果。
chirp.twitter.com
在Tim Brown的试验中，他使用了渐变（gradient）、遮罩（masking）、圆角、转换和多背景图像。当鼠标悬停时，顶端的标题看起来与众不同。
nicewebtype.com
此处没有使用图片，只是单纯地使用CSS3转换、旋转、阴影和其他调整。
neography.com
设计师正在尝试使用不同的布局技巧和CSS3技术。这里的例子是用简单的CSS规则设计的。事实上，是一种使用@font-face的非常简单的字体嵌入方法。但是它看起来十分不错，并且很好地达到了其目的。
designinformer.com
David Desandro在他的网站页脚使用了多种CSS规则。阴影、动画和转换都非常生动，色彩丰富且具有吸引力。这是大多数网站使用CSS3代码片段和微妙的CSS3技术的一个相反面。
desandro.com
在CSS3中，多种视觉效果的实现成为可能。带有一点艺术创造力，你可以创造出真正不平凡的事物。例如，此处Opera的Logo就是纯CSS3设计的：渐变、阴影和圆角。
desandro.com
该“雨滴”效果是又一个通过纯CSS3技术达到视觉效果的有趣例子。
mozilla.seanmartell.com
现今，我们通过观察发现，在使用CSS3上存在一个普遍的问题，那就是在设计时使用CSS3只是为了好看。一个最好的证明就是文本阴影的过度使用，有时会被大量用于标题和正文。请谨记，CSS3是一个强大的工具，也是有效率的工具，但是很容易被滥用，造成新一轮的实用性和可读性问题。这似乎是个再明显不过的道理，但是仍然值得提及：CSS3添加到网站之前，确保只用来加强效果，添加的目的是为了美观和实用，而不是以牺牲实用性来达到美观的目的。一个明显而重要的规则是：你的设计不应该依赖于CSS3的改进，而是应该为用户使用现代浏览器融入丰富的附加层。先进的CSS3属性的不足之处是：由于它们尚未标准化，而且由于Gecko和Webkit需要专有的属性才能实现一定效果，在相当长的几年内，我们或许会以包含无用风格的相当臃肿的样式包来结束。因此，你可能会想要提取所有的CSS3增强的独立的样式表，以简化日后的维护。此外，谨记CSS3码应该总是由标准化CSS3规则结束（如圆角）。这样做的话，你可以确保在未来的几年，CSS3规则在新版本网页浏览器中得到更好的支持，实际上你的规则仍然要适应主流的浏览器。
在Windows系统上，通过文本阴影设置的导航、标题、正文在默认的文本设置情况下会很难阅读。有时候实在没有必要使用文本阴影来处理正文、副本和导航部分，这样做会影响仍然使用旧版本浏览器的用户的阅读体验。
media.twitter.com
Brandon Cash采用文本阴影属性处理其正文部分。尽管文字还是很清晰，但是比起纯文本，阅读起来还是困难得多。比较Chrome浏览器（左边）和Safari浏览器（右边）的视图，差异十分显著。很可能用户没有使用ClearType或其他任何版本的字体平滑工具。作为一名设计师和用户需求倡导者，你不得不考虑这个问题。
blog.brandoncash.net
新的技术虽然很新潮，但是也会被滥用。好的设计会被快速纳入网页设计（通过现实生活的隐喻、反应灵敏的界面和上下文精确导航），我们已经观察到太多利用CSS3的功能“过度设计”的网站。设计的存在不是为了追随，而是为了打破，通过设计重塑或激发创造力。从本质上来看，这不是一个好的趋势：它们分散设计的主要目的，扰乱美学和功能之间的平衡。应该使用正确的工具在适当的范围内为了正确的目的而设计，而不是盲目追随趋势。这就是信息设计之美，这使一个漂亮的设计和一个漂亮而且很实用的设计之间产生巨大的差异。
