Palmback™菜园地

现代Web设计中，JavaScript是不可或缺一部分。除了它的功能以外，JavaScript可以通过创建诸如淡入淡出和滑动等动画效果，以提高用户体验。归功于开源的JavaScript框架，我们不再需要从零开始定义JavaScript。下面是47个可以用来提高用户体验和网站功能的JavaScript插件。别忘了查看展示插件如何应用的案例网站。

图片缩放和弹出

Lightbox

你应该非常熟悉Lightbox——一个用于覆盖在当前页面上显示图像的JavaScript。最初版本的Lightbox发布于2005年，后续又发布了许多使用不同方法和JavaScript库但具有类似功能的脚本。

jQuery lightBox Plugin

和Lightbox极为相似，基于jQuery库。

Thickbox

Thickbox是一个和Lightbox非常相似的jQuery插件，但功能更多，可以用来显示：单张图片、多张图片、内联内容、iframe内容，或者通过Ajax读取内容。

注： Web Designer Wall使用Thickbox展示画廊图片和教程演示。

Highslide JS

Highslide JS可以实现类似于Thickbox的功能，而且有缩放效果，可以拖动窗口覆盖层。

FancyBox

FancyBox是一个旨在取代被过度使用的Lightbox的jQuery插件，和Lightbox具有类似的功能，而且有更好的过渡效果（Mac风格）。

jQZoom

jQZoom可以用来显示一个缩略图的局部放大图 ，这种技术通常用在电子商务网站（参见Gap site)。

画廊和幻灯片-Gallery and Slideshow

Slideshow 2! for Mootools

Slideshow 2!是一个Mootools 1.2 JavaScript类，用于在网站中滚动展示图像。

SmoothGallery

使用Mootools 1.11，这个JavaScript画廊和幻灯片系统可以实现简洁、平滑（交叉淡入淡出）的图片画廊、幻灯片、案例展示，以及其它很酷的效果。

jQuery Galleria

Galleria是一个用jQuery编写的JavaScript画廊，它从一个显示缩略图的无序列里一个一个地载入图像。它可以根据CSS定义的大小生成缩略图，成比例或者不成比例、居中或裁切皆可。

Noobslide

NoobSlide是一个可以用来创建定时幻灯片和滑动版的Mootools类， 访问网站查看演示。

Product Slider (演示)

基于jQuery UI库，用来创建像苹果网站一样的产品滑动条。

传送带-Carousel

jCarousel

jCarousel是一个用来控制水平或垂直排序列表项的jQuery插件。列表项可以使静态HTML或通过（不通过）Ajax载入的内容，可以来回滚动，可以创建动画效果。

YUI传送带组件

这个组件可以管理一个列表项（UL内的HTML LI元素）水平或垂直显示。内容可以有或无动画效果地来回滚动显示；内容可以是静态HTML或者动态创建（AJAX或者不通过AJAX）。

DynamicDrive - 旋转幻灯片

旋转幻灯片是一个令人难以置信的DHTML展示图片脚本，以3D、时尚的方式展示图片。

iCarousel - MooTools

iCarousel是一个开源（免费）的JavaScript工具，像widgets一样创建传送带，可以用来创建滚动新闻和图片。

滑动面板 - Panel Slider

Coda Slider Plugin

Coda Slider是一个jQuery插件，模仿Coda网站的滑动面板效果。

jQuery Coda Slide Tutorial (demo)

源自 jQuery For Designers 的教程，展示了如何创建Coda的滑动面板。

Sliding Tabs (demo)

Sliding Tabs是一个 mootools 1.11插件。模仿了Panic Software’s Coda网站的一些东西，和iTunes Music Store的widget有几分相似。

选项卡 - Tabs

jQuery UI Tabs

jQuery Tabs是一个强大、灵活的jQuery插件，让你创建自定义的tab导航（强烈推荐）。

jQuery Tabs Tutorial (demo)

另外一个令人敬畏的教你如何使用jQuery创建基本的tab导航的教程，来自 jQueryForDesigners.com。

MooTabs

MooTabs是一个很小的（3kb）MooTools类 。顾名思义，它主要用来创建简单的tab导航。

Sliding Tabs Tutorial (demo)

来自Nettuts.com的教程，教你如何使用jQuery创建滑动选项卡。

滚动到锚点 - Scroll to Anchor

jQuery ScrollTo (demo)

非常灵活的 jQuery插件，用来创建动画滚动到网页任何位置，可自定义速度等参数。

SmoothScroll (demo)

一个简单的创建平滑滚动到页面锚点的MooTools脚本。

Animated Scrolling with jQuery

Learning jQuery 教你如何使用几行代码创建动画滚动到锚点。

鼠标提示 - Tooltips

jTips (demo)

可以自定义的jQuery plugin插件，弹出显示提示信息——可以是静态html或者AJAX内容。

jQuery Tooltip Plugin (demo)

另一个很不错的鼠标提示插件。

Tooltip and Image Preview (demo)

一个非常简单的jQuery脚本，显示鼠标提示和图片预览（我在 Best Web Gallery 中使用它）。

折叠菜单 - Accordion

jQuery Accordion (demo)

可以用来创建折叠菜单，嵌套列表、定义列表或者div嵌套都有效。

Apple.com Sidebar Accordion (demo)

jQueryForDesigner.com 教你如何创建Apple website上的折叠滑块 。

MooTools Accordion

用精美的方式显示真正需要的内容。

MooTools Image Menu

Image Menu是一个创建水平折叠图片菜单的MooTools插件。

Flash和图片文本替换

sIFR 3 (demo)

sIFR用你所选在的字体替换短的段落或者浏览器默认字体，无论用户是否在安装了所选字体。通过JavaScript、CSS和Flash结合来完成。

jQuery sIFR (demo)

jQuery插件，用来完成 sIFR。

FLIR (demo)

Facelift Image Replacement是一个图像替换脚本，使文本动态生成指定字体的图像。生成的图片会通过JavaScript自动插入到网页中，而且在所有的现代浏览器中都是可见的。

CSS样式表切换 - CSS Stylesheet Switcher

A List Apart - Alternative Style

Paul Sowden原创的样式表切换。不管相信与否，这个技术是2001年发明的（终究不是一个现代的技术）。

Switch Stylesheets with jQuery (demo)

使用jQuery的样式切换器。

MooTools Styleswitcher (demo)

使用MooTools的样式切换器。

表单样式设计 - Form Styling

FancyForm - MooTools (demo)

一个MooTools插件，用定义的样式替换浏览器默认的复选框、单选框样式。

PrettyCheckboxes - jQuery

类似FancyForm，但使用jQuery库。

jQuery Selectbox Plugin (demo)

一个简单的插件，用定义的样式替换选择框默认样式。

Custom Checkboxes, Radio Buttons, Select Lists

使用JavaScript和CSS完全重新样式化表单。

jQuery Form Input Example Plugin (demo)

一个jQuery插件，在用户想要输入的区域给用户提示。

Unobtrusive Slider Control V2 (demo)

这个脚本可用来创建与输入区域有关的自定义滑动控制器。

更多的表单样式化参见 Noupe.com/css/form-elements…

表单验证 - Form Validation

jQuery Validate (demo)

一个真正让你创建客户端验证、AJAX表单的插件。

MooTools Validate

一个MooTools表单验证插件（类似于 jQuery Validate）。

JSValidate (demo)

JSValidate是一个利用利用prototype和scriptaculous来完成的表单验证脚本。使用最小化的设置，你的表单可以立即完全处理干净的数据。

via: Javascript in Modern Web Design

11 丰富的平面效果

许多web 2.0 风格的网站适当地使用精致的3D效果，以加强设计的质感。

我们都知道这些精细的效果感觉很好，但并不知其中缘由。

逼真的平面效果（如阴影、渐变及倒影）有助于让可视界面感觉更真实、结实、精致。这些效果也可以唤起我们对某些现实世界中物体的触觉和美感，比如水滴、闪亮的塑料按钮、大理石地板。让界面看起来结实、真实可以让人感觉是可触摸的，有呼之欲出的感觉。

何时、如何使用丰富的平面效果

这里金科玉律是慎重使用，而且不要过度使用。

正如我在 3D效果设计指导 中解释一样，这些效果不应该用于所有对像。

和所有的技术一样，敏感地、适当地使用丰富的平面效果可以增加设计的价值。

如果网站的导航/icon/logo/布局根本上很糟糕，那么并不能以此达到效果，正确的基本原则才是首要的。

保持一致的光源也很重要的。虽然可以借助逆光散射制作更复杂效果的按钮等，但是仍然需要把握总体设计感觉的一致。3D效果也可以是元素从页面中突出来，但仅仅在其余的页面相对平的情况下有效。

避免试图让整个设计3D化，因为：

• 更大的工作量
• 将会增加页面的大小
• 不需要这样做。3D效果使用许多不同的像素，而不同的像素应该是有意用来吸引用户注意关键内容，或者加强“软”信息外观的，少量即可见其效。

12 渐变效果

Web 2.0 设计使用中许多渐变效果。

为什么渐变如此有用？

渐变使原本平乏的色块变得柔和。

渐变可以创造非平面的错觉，在Alex Dukal作品集中达到了良好的效果。

渐变可以用来逐渐加亮或加深色块，以创造网页的整体氛围。

在网页背景中，渐变也可以创造距离的错觉。常用的渐变组合是由蓝色到白色，产生 空中透视（aerial perspective）的效果，创造背景在地平线消失的效果。

渐变经常被用在网页背景的顶部，以助于产生可视区域的分界线。

渐变也是阴影、内发光、镜面高光的主要部分，正如在玻璃质感或塑料质感的按钮中所见。

注意，渐变在并列区域颜色平铺的时候最有效。

在Curve2 主页中，渐变显得更加有效，因为每个渐变放在临近白色或灰色块的地方。这是常见的渐变加强基色（在Photoshop中使用诸如颜色加深、覆盖的混合效果），创造巧妙的不同的色调。

上图中，突出的绿色比深的基色更加温暖、更加友好，总体效果柔和、丰富兼具。

13 倒影Reflections

倒影的视觉错觉是在渐变中最经常使用的效果之一。

通常有两种实现方式：

• 光在有光泽的平面上反射产生的高光效果
• 有光泽的桌面效果

高光曲线-Specular highlights

水滴、玻璃珠、闪亮的塑料按钮等效果在过去几年已经很流行。我不知道这种趋势何时开始，但苹果的网站应该是最有影响力之一，以及以前的水滴界面外观Aqua interface look & feel。

下面是一些例子：

Apple.com 经典的标签按钮，现在仍然在使用。它们使用标签上的光源结合内外发光产生的高光实现塑料效果。

这些标签源自我最近的设计中，这里有一个抛光（从一个亮白色的高光里）碳纤维外观。碳纤维的效果来源于对角线中的图标发光。

更漂亮的光泽塑料，注意倒影如何附着在图形的边沿上，产生边缘圆滑效果的错觉。

类似的效果在方形上看起来像一个徽章。非水平角度产生活力的感觉。

来自 cafepress.com 的光泽按钮使用圆滑的倒影，如同一个宽光源反射在圆形表面上。

来自主机商 Mediatemple 的按钮有更多的漫反射，达到无光泽的玻璃效果。

桌面光泽（反光）效果！

这也是苹果开创的（我确定）。现在这个确实漂亮的效果如此流行，使其处于过度使用的危险中，现在已经开始审美疲劳并被设计师抛弃。

记住，网页设计师通常对这些东西更感性，这是理所当然的，所以即便这种效果被设计师抛弃，在未来的一段时间里一般公众也许仍然觉得这种效果很酷。

标准的苹果外观，白色基调上的灰色褪去。

在着色的背景上。

向两边淡出

更极端的角度，丰富的分层效果。

如何制作这样的效果（来源于photoshoplab.com） »

14 可爱的图标Cute icons

图标在Web 2.0 设计中扮演着一个很重要的角色。现在我们使用更少、更精致且具有更多含义的图标。

当图标易于辨别且带有明确含义时是有用的，而在许多其他案例中，一句简洁的话更有效。

在过去，图标被过度地使用，看起来每个人都想为每个导航链接或标签使用图标。现在，我们更广泛地使用清晰的文字，不愿再去用图标弄乱页面。

做图标的Web 2.0设计师被保留在价值更高的地方。

更简洁、更开阔的设计要求对丰富的图标更少关注和允许。

一些例子，说明各种情况。

简洁、干净的

可爱、古怪的

没有必要的特写小山！

丰富详细地

设计灵感源于Mac OSX， Enhanced Labs 查看更多案例。

15 星光闪耀 Star flashes

下面是粘贴在网页上的星形标签，用于提醒用户注意某些重要信息。

星形在低价商店中做价格标签吸引客户。由于这个原因，许多Web 2.0 网站中开始使用它，同样的原因是它可能比其他网站便宜。

星形标签很有效，当然只能用于吸引注意力到某些重要的信息。我建议一个页面上只用一个（最多一个）！

另一种风格看起来被过度使用了，在未来一年可能会按常规发展。

（译文完）

via：http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

5 固定的实色块

在区分明显的顶部引领下，许多网站定义了许多醒目、清晰的是固定区域。固定块有各种形式，包括：

• 导航 - Navigation
• 背景（画布） - Background / canvas
• 主要内容区域
• 其他事项
• Callouts / cross-links

设计一个使这些区域立即和它相邻内容区分开来的网页是可行的，最明显的方式是使用色块。

白色的空间也同样有效。使用强烈的颜色的风险是过度吸引用户眼球，转移了用户对其他页面元素的注意力。我认为把干净的内容放在白色的空间上建立简单的体验，有助于用户放松、自由地浏览。

6 简洁的导航

固定导航——作为整个网站模板必需的一部分，出现在每个页面，应当是清晰可辨的，而且应该易理解、易确定访问目标、易选择。

• Web 2.0 设计的整站导航应该是大气、醒目、简洁、显而易见的。
• 行内超链接（Inline hyperlinks） （文本里的链接）应明显区别于正常文本。

为什么要使用简洁的导航

用户需要能够识别导航，导航告诉用户各种各样重要的信息：

• 在网站的什么位置
• 从这里可以到达哪
• 有什么可以选择的事项

下面是简洁的原则、减少干扰以及使导航明晰的最好方式：

• 固定导航和内容分离
• 使用颜色、色调、图形区分导航
• 导航项目应该大气、醒目
• 为每一个链接使用明晰的文字，避免含糊不清

如何保持导航简洁

记住关键所在：导航应该清楚地区分于非导航内容。

遵循上面的原则，并通过定位、颜色、透明区分即可。

我关于导航的文章 »

行内超链接也应该从周围的文本中足够地突出，看下面的截图，每个案例中， 那些是链接毫无疑问。就个人而言，我比较喜欢用不带下划线的蓝色文本，鼠标经过时别为红色带下划线的。

7 醒目的Logo

一个清晰、醒目、大气的标识，象征着组织文化、语气，给用户第一印象，这是一个醒目的Logo能做到的。

下面是一些100%大小的Logo。注意这些Logo趋向于特别大，符合Web 2.0 的一般原则。

为什么？

大气、醒目的Logo告诉用户：这就是我们。在某种程度上我们可以相信组织（人）如其言。

何时、何地？

查看关于Logo的文章 及 基于文字的Logo。

很难表述如何设计一个好的logo，但简而言之，你的Logo应该：

• 有视觉效果，其他人能够使用于他们可能用的地方（像传单或者T-shirts）
• 被认可而且有特色
• 第一眼就能展现品牌的特点和质量

更多信息……

查看我收藏的近50个令人振奋的网站 »

8 较大的文本

与旧式的网站相比，许多Web 2.0 风格的网站使用大字号文本。

如果填充相同数量的空间，少一些“东西”，你有更多的剩余空间；有了更多的剩余空间，你可以加大更重要的元素。加大的元素比更小的元素更显而易见。这种效果应用贯穿于于整个印刷设计的历史中，用来突出标题、标题页和头条新闻。

这不仅仅使加大的文本突出，而且对更多人而言提高了可访性——不仅是对视觉缺陷的人，也包括在日光下查看LCD显示器的、离显示器比较远的以及只是粗略浏览的人。如果考虑到这些因素，那可能是相当多的人。

何时、如何使用大文本

大文本使大多数网页对更多人提高可用性，这是一件好事。

当然，大小是相对的。不能让一个正常的、繁忙的网站都使用大字体、让其更可用。这可能无法正常工作，甚至更糟。

为使用大字体文本，你应当简化、移除不必要的元素。而且你应该有让一些文字大于其他文字的理由，而且加大文本必须是有意义、有用的。没有必要为了oh-so Web 2.0而增加一些大文本。

如果一个页面上有许多信息，而且其重要程度持平，那么可以都保持小文本。

9 粗体文字介绍Bold text introductions

由于受大文本主题的引导，许多网站加粗了所有文字描述。

这些加粗的文字通常用来展现站点独特的地方、“电梯游说” 或主要信息。

他们往往是图形，而不是规则的文本，因为设计师能够更多地控制页面的视觉冲击，尤其是在早期的浏览体验中。

何时、如何使用粗体文本简介

如果想在页面中醒目地突出某个东西，那么能用且只能用一个粗体文本。（如果没有想醒目突出的东西，那么值得考虑一下网页/网站的目的，然后提出值得醒目突出的内容。）

如果有信息要让用户在第一时间看到，那么将其提前作为大标题并放置在相对纯色的背景上。

10 强烈的色彩

明亮、强烈的色彩吸引眼球，可以用来将页面分割为明确的几部分和突出重要元素。

对于简单、剥离的设计，可以使用强烈的色彩以区分不同的块或者吸引用户注意希望突出的信息。

The Treo Mobile site 使用三个强烈的色块标示和宣传该网站涉及的三个主要领域。突出背景颜色表明这不是网站的主要内容，而大号、粗体的文字让用户快速了解上面的内容并决定是否继续浏览。

Colorschemer 用许多强烈、明亮、喜庆的颜色把页面分块，和偏于中性的背景色协调。

Apple's design 经常使用许多平衡组合的色调（黑），用丰富的效果和颜色吸引用户眼球。在我看来，这是设计最完美的网站。如上图，深黑色区域和强烈的色彩被少量地使用以突出重要内容。

色彩也是一个很大的传达品牌价值的媒介。

如上图，所采用的颜色并不明亮，但是很浓烈，一个原因就是采用了大量的绿色。此设计使用绿色传达“品质”和“健康”的价值。

注意: 网站设计不要采用类似于上图的形式！

这个网站专门为女性销售户外服装，软色调加强了精选的品牌个性。

慎重使用强烈色彩做背景或包围重点内容。

上图中，一个精彩、有效的设计被外围的强烈色块区域折中了，这样的结果是用户的眼球从主要内容上被转移了。

The Aurum Newtech site 冒了同样的危险，但是由于颜色足够苍白以保持内容显而易见。 大气、醒目、适当间隔的内容元素也有助于把用户的注意力从“有吸引力的”背景转移回来。

记住，适度使用

用强烈的色彩吸引眼球仅在有许多区域未被浓墨重彩的情况下有效，如果试图所有内容都吸引眼球，结果适得其反，使页面混乱、令人迷惑。

2 居中布局

和几年前相比，现在基本上大多数网站都布局在浏览器窗口的中间，全屏（流体）、居左固定宽度的布局相对较少。（更多关于居中请查看 Current Style ）

为什么选择居中布局

Web2.0风格是简洁、大气、直观的。网站居中布局感觉更加简单、大气、直观。另外，考虑合理安排屏幕显示内容，避免过多的内容产生阅读压力。居中布局使用较小的空间展示更多的内容，留给用户更多自由和轻松的白色填充空间。

何时、如何使用居中布局

一般应该采用居中布局，除非特殊的需求，比如你想获得更多的创作空间，或者你想在屏幕上显示尽可能多信息（例如网络应用程序）。

3 少列

几年前，三列的网站最常见，四列的网站也不少见；现在，2列的网站更加常见，三列是主流的最大限度。

为什么使用较少的列

简单就是美。少列感觉更简洁、更大气、更直观。少列减少传达的信息量，使其更加明朗。

还有一个居中布局的副产品，因为没有完全填充屏幕，而且也不想任何时候都屏幕上都显示那么多，我们根本不需要多列信息。

37Signals一直将关于现状和前景的问答放在首页。

他们采用了两列布局，是研究简洁设计的一个很好的案例。这样让信息说明一切，而且不添加任何干扰的东西。

苹果公司是另一个简洁设计的引领者。

这种布局方式真的很出色。每次体验苹果的简洁设计，都使我更加确信它的禅意是设计的圣杯。有人经常问：“我们需要多少盒子/列/行？”典型的苹果布局回答了这个问题。然后他们大胆地删除不必要的元素，结果无可置疑地是最简洁最有效地和用户沟通。

如何确定适当的列数

我想肯定地推荐使用不要超过三列的布局，仅仅因为应当使用符合自己需要的列。

当然总是有例外的，下面是几个有效使用超过三列布局的例子。

Derek Powazek 的博客主体部分使用三列布局，而底部采用四列。底部是一种 pick & mix，强调“以你喜欢”的感觉。

Amazon (UK)有两个边栏，产品安排在中间另外三列里。

这样的效果很好，因为它的设计达到了明确区分每一列的目的。左列是确切的产品分类导航，右列是其他元素，中间区域清晰地平铺并用白色块分割，所以它看起来不压抑。

Popurls.com包含几块挑选&混合的信息，从类似 digg和del.icio.us这样的网站中整理热点链接，但主体文字区域仍保持三列布局。在往下，展示Flickr上的照片缩略图（而后有YourTube视频）。这些被平铺在几列里，给用户放松的空间。

也有很糟糕的网站……

All Things Web2.0使用四列布局：两个边栏、中间两列。

这个布局的缺点是不知道从哪里开始浏览，所有东西都不知到优先级（部分原因是因为浅黑的背景）。如我们所见，Amazon和这个页面有很大的区别，因为Amazon的设计协助用户区分屏幕上的各个区域，不会感觉混乱无序。

4 分隔顶部

这意味着是屏幕的顶端（品牌标识及导航区域）区别与剩余部分（主要内容）。 当然，关于这个原则没有什么新的内涵，这是一个很好的原则而且一直这么使用。但是现在比以往用得更多，而且区别还经常更大。

看看这些“页眉”如何清晰地区别于其他部分，即便是很小的尺寸：

为什么要区分出顶部

顶部告诉用户“这是页面的顶部”。这听起来显而易见，但实际上清晰地知道页面从哪里开始，可以给用户更好的感觉；而且以强烈、直观的表述开始网站/网页之旅，更具Web 2.0质感。用户喜欢丰富、大气、简洁的设计。

上面的网站其中两个其顶部只包含品牌标识 (Protolize, Mediconmedia)，1个仅包括导航(Cross Connector)，其余三个两者兼具。在我看来Cross Connector的缺点是Logo在导航之后，我更倾向使导航更清晰、明确（如 Simple Bits ）。

何时、如何使用分离的顶部

无论任何网站，标识和主导航都应该是明显、醒目、清晰的。

所以设计网站的时候都应该建立一块清晰的空间，醒目地放置Logo和导航。始终把Logo置于屏幕上方；我推荐把主导航置于Logo之后。把网页的顶部置突出显示在屏幕上，并使其和主要内容区分开来，以达到更好效果。

网页的顶部应该在视觉上区分于其他内容，区分的最强烈方式是用一个醒目的颜色或色调块，当然也有其他方式。下面是两个顶部使用实线区分顶部的例子，而不是用颜色填充本身。

下面的两个网站中，顶部明显地在主要列区域之外。

本教程描述现代Web 2.0设计风格中常用的各种平面设计元素，然后解释它们为什么有效（例如为什么他们变得普遍），及在设计中如何、何时、何处使用这些元素。

这是继Current Style 之后的文章，分析时下Web 2.0设计风格更深入的特点。

特点涵盖概述

下面的列表是许多典型的Web 2.0网站的特点概述。很明显，一个展现所有这些特点的网站并不意味着好，而且展示这些特点不一定实现Web 2.0风格或者更好！

1. 简洁 - Simplicity
2. 居中布局 - Central layout
3. 少列 - Fewer columns
4. 分隔顶部 - Separate top section
5. 固定的实色块 - Solid areas of screen real-estate
6. 简洁的导航 - Simple nav
7. 醒目的Logo - Bold logos
8. 较大的文本 - Bigger text
9. 粗体文字介绍 - Bold text introductions
10. 强烈的色彩 - Strong colours
11. 丰富的平面效果 - Rich surfaces
12. 渐变 - Gradients
13. 倒影 - Reflections
14. 可爱的图标 - Cute icons
15. 星光闪耀 - Star flashes

免责声明

这些特点并非都适用于所有的案例，经常有例外，而且有许多在网站设计时错误的、过度的、毫无创意的混合使用这些特点的糟糕案例。

不是将所有这些元素扔在一起就能制作出好网页，就像不是鸡蛋、糖、面粉揉在一起就得到蛋糕一样。

制作网页需要许多灵感使各种力量一起工作，一个好的设计解决方案是可以平衡这些（经常对立的）力量的。

Web 2.0 ?!

在我的文章current style中，我用“Web 2.0设计”这个术语描述网页设计中盛行的风格。

很多人用“Web 2.0”描述：

• 网络经济的复苏
• 网站和服务交互的一个新水平
• 或者源于在线社区和社交网络的社会现象

也有许多人用这个术语表述有关网页设计的学校。在这样的背景下我使用这个术语也是适当的。

前言

我将引领你贯穿当下流行的优秀网站设计的特点，剖析最有意义的特点，解释为什么他们是优秀的，以及如何在自己的网站使用它们。

如果要我用一个词总结“Web 2.0”的话，我选“简洁”这个，这也是我们教程开始部分。

我非常支持简洁设计，我觉得它是网页设计的发展趋势。

简洁、醒目、优雅的页面设计用更少的元素传达更多的信息：

• 能够让设计师根据网站的目标，通过少而精的视觉元素指导用户访问。
• 使用更少的语言传达更多信息，精心挑选意象创造让用户渴望的感觉。
• 捉摸用户想从网站获取什么信息，据此设计创意。

1 简洁

网页设计比以往任何时候都更简单，这是件好事。

Web 2.0 设计意味着专注、干净、简洁。

但这并非意味着极简主义。我确实支持简洁，但并不是说所有网站都应该极度简化，而是我们应该用更少的必要的元素，实现所要达到目标。

我一直在坚持的原则是：假如某个问题有两个解决方案，那么简单更优。

下面是一些例子。注意，不必要的元素已经被剔除，虽然页面上还可以有更多元素，但这样能达到更好的效果吗？

结果是看内容的时候，你会发现用户恰好与设计师所希望的元素交互，而且你不会介意简单的页面，而你也达到了访问的目的。

为什么简洁更好

• 网站有目标，每个网页也都有目的。
• 用户的注意力是有限的。
• 设计师应该帮助用户发现他们想要的（或者让让他们注意网站希望他们注意的）。
• 网页上的元素吸引用户的眼球，元素越多，用户去关注的不同事情就越多，用户注意到重要元素的可能性就越小。
• 我们需要很确定的沟通，而且需要尽量减小干扰。这就意味着我们需要寻找一个用尽量少的元素实现尽可能多功能的解决方案，那就是节约元素，即简洁。

何时、如何让设计简洁

何时？

始终应该如此！

如何？

有两个重要的原则可以成功实现简洁：

1. 在不影响效果的前提下，移除不必要的元素。
2. 能达到同样效果的可选方案中，选择简单的。

似乎并不是当没有东西需要添加的时候就达到了完美，而是当没有东西需要删除的时候。

"It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away."

Antoine de Saint-Exupéry,Terre des hommes, 1939

设计的时候，把有意识地移除不必要的元素作为一个准则。

特别应该浓缩与网页目标相关性小的区域布局，因为这些区域会分散用户对主要内容和导航的注意力。

利用视觉细节，不管是线条、文字、形状、颜色去传达信息， 而不是仅仅为了装饰。

下面是一个页面设计不够简洁的案例。Yaxay's 页面使用了大量元素，但是许多元素都是装饰性的，一部分是页面背景。相对少的元素用来让用户查找或理解信息、和网站交互。

看看这个页面上元素如此之多，但明确用于实际内容、导航和交互功能的又是如此之少。

Edward Tufte 用“数据墨水”（如可以传递信息的细节）和“非数据墨水”（如仅作装饰细节）描述这个现象。托佛特衡量信息设计（图形，图表，演示等）有效性的一种标准是数据墨水和非数据墨水的使用比例，数据墨水使用比例越高，设计的有效性可能越高。

以上面Yaxay的细节图（第二幅）为例，有太多称之为“繁忙”的元素，如边缘、色调变化、颜色变化、形状、线条。有许多的元素，但有用的仅仅是：

1. 网站Logo
2. 导航按钮上标签：art gallery

剩余其他的“繁忙”元素：背景形状、界面上的斜纹、格子、渐变……都是干扰，都是非数据墨水，因为它们都不能传达信息。

我并不反对丰富、复杂或者美感的网页设计。

简洁意味着：

使用需要的元素，不管你需要什么，达到传达需要传达信息的目的。

当然，通常要传达的不是硬数据，而是软数据。

硬数据

指事实，诸如新闻、股票价格、列车时刻，或者你的银行帐户里有多少钱……

软数据

设计信息传达性质的方面，诸如对公司质量的第一印象、服务提供者的亲和感，及一个产品是否适合你的感觉。这些都是同样重要的！

无论传达硬数据或软数据，都应有意识地、慎重使用元素。

看下面的例子：

Alex Dukal 的网站很丰富、有趣而且吸引人。网站使用一系列视觉技巧来吸引用户的注意力，让用户感兴趣，而且Alex的作品给用户一种温暖的质感。

但它也是简洁的，因为他慎重、敏感地使用元素、墨水和繁忙元素，这不是无缘无故地，而是简约而丰富。

无论如何，明智地选择何处使用墨水、像素，用来传达首要信息，然后考虑能否用更少的元素有效地传达，如果能，就这样做。

你是否正在寻找创意设计一个单页作品集网站？或者你需要的仅是一个单页设计的网站？如果你没有太多的内容，仅仅是想展示一下你的作品，那么采用单页设计是可行的。这样可以节省时间和成本，因为你不需要搭建CMS和模板。换句话说，这对非程序人员是不错的选择。下面是30+单页作品集设计的酷站，希望它们可以给你一些灵感。

We Bleed Design

点击顶部的按钮享受有趣的滚动动画吧。

TapTapTap

在一个页面上用极具创意的方式布局、展示iPhone应用程序信息。

Luke Larsen

水族馆主题、水平滚动设计（点击顶部菜单可滚动访问相关页面位置）

Dean Oakley

水平滚动的作品集展示网站

Benjamin David (Nyxen)

Benjamin David 唯美的作品集（载入图形动画很可爱）

Paolo Boccardi Photographer

缩略图鼠标提示与水平滚动完美结合

Contreforme.ch

很nice的滚动和导航效果——全部依靠 Javascript 和 Mootools 完成

YouLove.Us

点击链接查看天空的北京由黎明到晚上滚动

Marius Roosendaal

Marius Roosendaal的作品集，三个主题供你选择：白天、黑夜、日出。

Volll.com

注意查看活生生的云朵和页脚的乌贼，他们并不是Flash动画。

Keithar.com

Portfolio of Brad Candullo

Kinoz

点击顶部的色块可更换背景图片和配色

Stoodeo

页眉的插画很美！

Seb Design

Tanya Merone

早期的单页作品集网站，长时间未更新但看起来仍然很不错。

Puneet Sakhuja

复古、垂直滚动的单页设计

Sroown

页面设计比较独特，鼠标提示很酷。

Simona Munteanu

很艺术

Suffolk Software

Chama Inc

Frojd

Dale Harris

Todd Miller

B.N.Weiss

Grafikas

Janic Design

Hot Meteor

字体很酷！使用jQuery

Julien Dassonval

Pikaboo

导航的平滑过渡效果很有趣，基于JavaScript和Mootools

Studio E-Space

Contrast

简单直接

via: Single-Page Portfolio Sites

IE对Web标准支持不足一直被广大开发人员和设计师诟病，也让反IE反微软人士多了一些说辞，但不管怎么样，IE占有很大的浏览器市场份额，这无可置疑，更不可忽视。所以开发人员和设计师往往是嘴里埋怨着IE种种bug和不足，心里却琢磨着该用什么样的hack来使自己的设计在IE里依然能完美呈现。

我真正接触的电脑的时间并不长，算下来也就差不多四年。在前三年里，我几乎一直在使用IE（或者IE为内核的浏览器）浏览网页，并没有觉得IE有什么不好，而且某些场合还非IE不可的。过来的时间随着对Web标准了解不断加深及对CSS的接触增多，在制作网页编写CSS的过程中，逐渐开始有点受不了IE——有的时时候不是一般折腾人。

IE7也许给开发人员带来了些许的惊喜，但它依然不够完善。在IE6及更低版本中，对于解决“盒模型”、“断头台”这类耳熟能详的bug，你也许早已轻车熟路；你无法想到的是，一个空格竟然成为IE7的致命伤。

问题起源

关于图片自适应宽度问题，我先后尝试了几种方案，但都不够完美：最初使用的方法在IE下会使小的图片也被拉大，惨不忍睹；单纯使用JavaScript则要网页载入完成才生效，对IE7及其他浏览器可以用CSS的overflow属性隐藏宽出来的部分，但IE6及更低版本不支持此属性，刚载入时图片总是浮在页面上，甚是难看。昨天晚上尝试采用针对不同浏览器采用不同CSS规则的方法，对IE7、Firefox及其他浏览器而言，简单的max-width属性就可以搞定宽度自适应问题，对IE6则使用条件注释引入额外的规则lteie6.css,其内容为：img {imgsize:expression(onload=function()
{this.style.width=(this.offsetWidth > 400)?"400px":"auto"});}
<!--[if lte IE 6.0]>
<link rel="stylesheet" type="text/css" href="lteie6.css" />
<![endif]--> 这样处理以后在IE6和Firefox中测试了一下，没问题；可在IE7下却出大问题了：网页完全无法渲染，只有背景颜色，源代码中有内容，开始怀疑是编码问题，试了一下结果不是。这下我有点没辙了，IE6下不还挺好的吗？难道IE7还不如IE6？让我百思不得其解。

都是空格惹得祸

折腾了大半晚上我还是没发现问题所在，最后在我近乎绝望、打算放弃的时候，元凶显现——一个空格，就是[endif]和-->之间多了一个空格，不论是全角还是半角，都使IE7完全无法渲染网页。

2005年末，IE7测试版发布以后，IE的布局和CSS项目经理Markus Mielke要求网页设计师和开发者们一起放弃对CSS hack的使用，并转换到微软所专有的条件注释（conditional comments）行来：

我们请求你更新页面，让它们不再使用CSS hack。如果你仍然想锁定或者忽略IE，请使用条件注释。

Markus Mielke（Call to action: The demise of CSS hacks and broken pages）

微软官方都推荐，用条件注释解决IE bug应该来说是一个不错的选择。IE素以容错性著称，但IE7却不堪一击，一个空格就让其从一个绝顶高手变成完全散失功力的懦夫，有点让人大跌眼镜。严格意义上来讲，这是我犯的一个小错误；但对于浏览器而言，一定的容错性也是必要的，更何况在HTML里空格是被忽略的，为何对条件注释里的一个空格IE7偏偏这么计较呢？

PS：今天把样式表小修改了一下，主要是添加了一两条CSS 2.1的属性选择符，你会发现在IE7及Firefox中带有rel属性的图片链接具有灰色边框，而在IE6里看不到这个效果。