英文原文：Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

译文原文：固定 vs. 流动 vs. 弹性：哪种布局更适合你？

©请尊重作者和译者   若需转载   请依原样保留本声明

另有一篇《自适应CSS布局——流动布局新时代》，在我草稿箱里放了快一个月了，一直没翻译完。但另有高手已经完成，请看：http://www.denisdeng.com/?p=324

有一个问题已经困扰网页设计师们很久了：该使用固定、流动、弹性，还是混合布局呢？它们各有优缺点。最终的决定取决于网站的可用性，单用某一种布局就想达到目的，可能没那么容易。那么，既然如此令人困惑，是否有做出正确决定的诀窍呢？考虑好几个问题，恰当地设定目标结果，你也能做出融合各方优点的成功布局设计。

本文将讨论每种布局方案的利与弊。其实，只要你时刻注意可用性，每种方案都能实现成功的网站布局。

您也可以参考一下我们以前的文章：

• Flexible Layouts: Challenge For The Future
  讨论弹性布局对未来的挑战
• Applying Divine Proportion To Your Web Designs
  阐述如何将神圣比例（divine proportion）运用到固定布局中

为什么要争论这些？网页设计受可用性的大棒指引，而由于网站用户的多样性，已经很难做出对不同用户都有足够可用性的网站。

当设计的网站会面向众多用户时，设计师必须考虑访客之间的下列潜在差异：

• 屏幕分辨率
• 用的哪款浏览器
• 浏览窗口是否最大化
• 是否启用占位置的浏览器的额外组件（如历史、书签、Google工具栏等等）
• 乃至操作系统和硬件情况

由于并无标准规定网页大小，网页设计师工作时就需要解决不计其数的问题。

1. 固定布局和流动布局的差异

尽管大部分设计师和开发者都对固定和流动网页布局有基本的了解，我们还是简单明确一下概念。

固定网页布局

固定网页布局指网站内容被一个固定宽度的容器包裹，容器内的区块都有固定的百分比或者像素宽度值。最重要的一点——容器是不能移动的。不管屏幕分辨率如何变化，访客看到的都是固定宽度的内容。

上图显示了固定宽度网页布局大体上的实现方式。内部组件被分别设定为固定的520、200、200像素宽。960像素宽度已经成了现代网页设计的一项标准，因为大多数用户的屏幕分辨率都在1024×768及以上。

流动网页布局

流动网页布局，也称为流体网页布局，其实现方法则是大多数组件（包括主容器）都设成百分比宽度，并且根据用户的屏幕分辨率自适应。

上图展示了一个流动网页布局。尽管大多数设计师会给流动布局内某些特定元素（如外边距和内留白）以固定宽度，整个布局大体上还是使用百分比宽度，并根据用户不同而自动调整实际宽度。

2. 固定布局的网页设计

很多设计师都更喜欢固定布局，因为他们觉得固定的比较保险：设计师看到什么，用户看到的就是什么。不过，说到其利与弊，则同流动布局一样让人揪心。

利

• 固定宽度布局的设计更简便，更容易自定义。
• 任意浏览器下的显示宽度都一样，对于图像、表单、视频等宽度固定的内容，潜在的冲突更少。
• 不用设定min-width（最小宽度）和max-width（最大宽度），这两个属性并不被所有浏览器支持。
• 即使网页被设计成兼容最小屏幕分辨率800×600的大小，在大分辨率显示器下，内容仍然足够易读。

弊

• 固定宽度的布局可能会给高分辨率屏幕用户带来巨大的页面空白，从而破坏“神圣比例”、“三分割法则”、整体平衡，乃至其他设计原则。
• 小屏幕上可能会出现水平滚动条，影响用户体验。
• 无缝材质拼图，纹样和其他连续图像需要针对大分辨率做出优化。
• 总体来说，固定宽度的可用性更低。

固定布局的设计实例

下列五个网页的设计师都充分利用了固定布局网页的特征。这些网站无不融合了大量设计元素，利用固定布局创建出完美的场景。在固定宽度的助益下，设计师方能更好地控制站点内容周边额外的设计元素，从而更为精准地调节内容和导航的宽度。

请特别注意设计师们是如何针对宽屏幕设计连续图像的（不妨把你的屏幕分辨率调高一点试试）。

3. 规避固定布局的坏处

如果你已经决定要用固定布局，下面这些小技巧你可就不得不知。它们帮你弱化固定布局的坏影响，助你做出成功的设计。

译注：下面这段有凑字数赚稿费之嫌，点此跳过这段。

先看下统计数据

现在大部分设计师都是假定大部分互联网用户都使用的1024×768或更高的分辨率。 W3Schools公布的一份投票结果显示，事实并非如此（请注意W3Schools的数据并不能完全相信，后面会有详细解释）：

如您所见， 640×480 甚至不够格在这张表上出现。W3Schools的数据表明这个分辨率似乎已经完全被用户抛弃了。而事实上，确实还有用户在使用这个分辨率，只不过用户数量太少，设计师完全把他们忽略掉，去做一些更合适、对较高分辨率有更佳可用性的设计。

即使对于使用这种分辨率的用户来说，他们也可能只是在一些方便携带的小型电脑商使用，并不是他们平常使用的主要屏幕分辨率。

不过，这里的统计数据可能也没有大家期待的那么准确。因为W3Schools的访客基本上都是一个特定群体（设计师和网页开发者），结果会和普通公众有点偏差。不过，其他调查也都大同小异。根据一些独立公司在2009年的调查显示，800×600的分辨率使用者比例在10%以下。（译注：根据笨活儿的网站统计数据，这个数值在2%以下）

下面这张有趣的表格来自SohTanaka.com，他们研究了一些大型网站对屏幕分辨率的兼容情况：

调查中涉及到的所有网站，最终都完成了华丽大变身。即使是最大的互联网公司，也都确定他们的主要受众是拥有较大屏幕分辨率的用户。

关于屏幕分辨率的其他研究，您还可以参考下面的资源：

• W3Counter
• TheCounter.com Global Stats
• OneStat.com

960px 还是 760px?

综上所述，大多数设计师都是要么选择960，要么选择760作为总的像素宽度。前者更适合1024×768以及更高分辨率的屏幕，还能有一点留白。后者则是800×600分辨率下的最佳显示宽度，设置成这一宽度能够照顾到那10%，而较大屏幕上看起来也还不赖。

总是将布局整体居中对齐

如果要使用固定宽度设计，务必保证主容器居中对齐，以保持平衡（一般利用margin: 0 auto;就可以了）。不然，遇上宽屏用户，你的内容就会被挤到某个角落，很不好看。

4. 流动页面布局

设计师有很多理由不使用流动布局，不过大家很多时候也看不到流动布局的好。下面列出有运用流动布局时的打算时需要考虑的利与弊：

利

• 流动网页布局拥有更强的亲和力，因为它能根据客户端的情况自适应。
• 在不同浏览器和屏幕分辨率下的额外空白量都差不多，更符合视觉吸引力要求。
• 如果设计得当，流动布局能避免在小屏幕上的水平滚动条。

弊

• 设计师对客户端的显示效果更难以控制，由于他们使用特定大小的屏幕，也更不容易发现潜在问题。
• 图片、视频以及其他拥有固定宽度的内容不得不被设置上不同宽度，以配合不同的屏幕分辨率。
• 对于特别大的显示屏，内容不够多的话就会造成过量空白，破坏美感。

流动布局的实例

下面两例都使用了百分比宽度来适应不同屏幕分辨率。第一个例子通过调整内容区块的宽度来适应，第二个例子则调整空白区域大小。

5. 设计适用的流动网页布局

尽管流动布局会带来某些问题，但这些问题其实能通过一点小把戏解决。

采用简单设计

应用到流动网页布局的图案和复杂技巧越少，其建立和维护也就越容易。同时也能更方便地适应不同屏幕分辨率。有了更加精炼的代码和设计，就能更好得避免、发现和解决兼容问题。

以Smashing Magazine为例，他们就采用了流动布局。设计非常简单，只有顶部的黑色+橘色导航条是延伸开的，各内容区域的宽度会根据情况有一定的改变。利用CSS兼容了所有可能的情形，杜绝了侧边栏和内部内容发生错位。

最小宽度(min-width)和最大宽度(max-width)

这两个CSS属性，min-width 和 max-width，可以用来为过大或过小屏幕的用户指定一个固定宽度。屏幕过小的时候，内容区块固定成指定宽度，屏幕下方也出现一个水平滚动条；屏幕过大的时候，内容也固定到最大宽度，以免延展得太开，影响文字的可读性。更多细节请参考：

• W3School上关于CSS最大宽度属性的页面，
• W3School 上关于CSS最小宽度属性的页面。

不幸的是，大多数版本的IE浏览器都不支持这两个属性值。这一问题可以通过IE特有的expression来解决：Maximum and Minimum Height and Width in Internet Explorer（另：中文参考）。

6. 弹性设计

其实设计网页布局时还有第三种选择。部分设计师更喜欢采用糅合了两种主要布局类型特点的所谓“弹性布局(elastic layout)”。其要点就在于使用单位em来定义元素宽度。下面的引言介绍了何谓em，而它又是如何发挥作用的：

“电脑屏幕上的‘像素’是一个不可缩放的点，而em则是相对于字体大小的单位宽度。它随着字体大小的变化而变化，反应用户对字体大小的设定。”
- Patrick Griffiths, A List Apart

尽管弹性设计貌似会带来很多好处，它仍然像前两种布局一样有利有弊。

利

• 如果合理运用，这种布局设计能带来非常友好的用户界面。目标效果是所有东西都能根据用户的偏好增大或缩小尺寸。
• 弹性布局更适合面对流动和固定布局难以抉择的设计师，因为二者的优点弹性布局都有。

弊

• 尽管第一条“利”说得没错，弹性布局还是为可用性埋下了很多地雷。得需要十分的聪明才智和不断测试才能让布局适合所有用户。
• 这种布局比前述两种要难实现得多，可能那一小点的可用性并不值得你花这么多功夫。
• 由于这种布局的特殊性，有些弹性布局设计可能需要额外的样式表，并针对IE6做些特别的调整

弹性布局的实例

弹性布局的流动布局表面上看起来十分相似，因为大部分时候大家都把它们混淆了。其根本区别在于，弹性布局的长宽单位是em，而流动布局使用百分比，并且弹性布局的尺寸主要根据字体大小而变化。这类设计根据用户浏览器中的字体大小来做出自适应。

7. 哪一种布局更适合你？

选择何种布局应该由网站的性质决定。权衡上述利弊，根据你的网站需求找到合适的解决方案

以作品集网站为例，这种网站可能固定宽度布局最为适用。这样你就能做出更有设计感的东西。你不仅能更好地控制设计中的单个元素，作品的图像展示也变得更易处理。对很多设计师来说（包括那些非作品集站点的设计师），固定布局就是一个既容易相处，又能给人安全感的好朋友。

而那些要追求100%的兼容性的设计师最好就考虑一下花点时间在流动布局上。最大的挑战不在于宽屏上的可能出现的过多留白，而是那一小撮小屏幕上的显示效果。对于有大量用户的网站来说，百分比很小的用户群，绝对数目也相当可观。就算不考虑这点，大网站也应该有简洁干练的设计感，而这可以利用流动布局高效率地实现。

还是做不了决定？别担心，还有弹性或部分弹性的布局设计可供选择。如果运用得当，弹性布局能完全整合两大主要布局的优点。聪明的设计师懂得如何利用弹性设计的原则，在字体和容器大小上使用em单位，然后混合运用百分比和像素宽度来设定其他布局元素。

其他设计师怎么说

Heidi Cool 在帖子 Fixed vs. Liquid vs. Elastic Layout 上的回复

这位设计师的发言针对与他人合作运用布局的情况，而这些人可能对网页设计了解得并不多：

“我反复思考过这一问题。在case.edu上我们最终采用了固定布局，因为：

1. 流动布局更复杂，我们为那些有不同技能的用户提供了模板化的设计，而他们的工作非常容易破坏流动布局（模板只是一些普通的HTML文件，并不是Dreamweaver模板）。
2. 我们不想看到网站维护者们做出太宽的页面——那种文本行很长，非常难以阅读的页面。
3. 我们想限制那些总是想填满所有空白的人所面对的空白量。如果他们用的是大屏幕显示器，就很容易把页面填满，而忽略了在小屏幕上其显示效果是多么糟糕。

大家都看得出来，最主要的问题还是集中在我们的网站是由拥有不同技能水平的人所维护、构建、增删内容这一事实上。如果是我一个人做网站，写代码的时候我可能就会更多地根据目标、内容等等来做决定。”

madr 在 Where Have All the Flexible Designs Gone? 上的回复

他提出了固定宽度布局的另外两个优点：

“barner和广告通常都是用图像和Flash来实现的，这些内容让弹性或灵活的布局更难制作。我曾在newspaper world工作过一年半，广告给区块真的特别难伺候。文章配图也是，如果用上弹性布局，阅读区就可能变得过大，相对顶部图片而言。

除了Safari 3及以下（Safari 4马上就要来了[笨活儿:已经来了…]）、Firefox 2及以下、IE6及以下（马上就要被淘汰了…）的所有浏览器都支持了按照页面整张缩放，而不是只缩放字体。这种情况让设计灵活的弹性布局显得更无实用性，大部分用户甚至都注意不到你的一片好心。”

jphilapy 在 Where Have All the Flexible Designs Gone? 上的回复

流动布局的两个值得支持的地方：

“流动布局的网站可以适应很多分辨率。这样你就不用去调查讨论用户的屏幕大小。况且，屏幕分辨率的统计数据始终是个谜；几乎没人在全屏模式运行浏览器，然后还有很多工具栏、边栏、小工具之类的东西，造成了不计取数的屏幕状况。

移动电话（就说iPhone吧），游戏机等也渐渐成为网页浏览器家族的一大成员。总之，这类设备的屏幕分辨率都很小，能够从灵活的网页布局设计中获益。

Calrion 在 About Fluid- and Fixed-Width Layouts 上的回复

明确说明了运用弹性布局的情况：

“我觉得‘弹性’布局是最佳选择。某种程度上是流动的，但又有固定宽度来保证文本行不会变的过长。

我是Windows用户，一般情况下都最大化窗口。

之所以要最大化，是因为这样我能更好的关注我正在使用的应用程序。要知道我桌面上总是有很多东西。另外，最大化我的浏览器（Firefox）能给界面元素提供最多空间，尤其是书签工具栏和标签卡区域。

说到可用性，流动布局对有经验的用户可能最好用了。因为他们会主动控制浏览窗口尺寸。对于经验较少的用户，弹性布局可能最好用，因为它能自发的阻止自己变得过分宽大。

Georg 在 About Fluid- and Fixed-Width Layouts 的回复

为什么混合运用三种布局能获得最佳结果：

“我更喜欢主区域流动，侧边栏固定，（也可以）再加一点弹性部分。我也总是为文本区设定600像素的最大宽度。

使用min/max来设定整个页面，宽度保持在600至1200像素之间，并且居中对齐。

在600到2400宽度的屏幕上全面测试，其他宽度就等用户自己解决吧。文本行从不会太宽（600就是最大宽度了），页面也不会在挤压下过早错位。

我收获的大部分反馈是，用户几乎没注意到有什么东西让他们困惑。网页很易读。说明我的做法是一项有用的妥协。

你的站在我这儿看起来不错，所以我觉得它是有用的妥协。我年迈的双眼觉得文字实在太小了，那我就在1280宽屏上的Opera里把页面放大至120%。始终不会有问题。”

更多资源

您可能会愿意参考下列文章：

• CSS Layouts: The Fixed. The Fluid. The Elastic.
  讨论了三种布局的优缺点：固定、流动和弹性布局。
• Fluid vs. Fixed Websites: Which is right for you?
  解释了选择正确布局类型的问题所在，告诉你如何正确选用。
• Fixed or Fluid, you decide
  聚焦于某位设计师的选择过程。
• 960 Grid System
  固定宽度布局的流行解决方案。
• Fluid Grid System
  和960网格系统类似，不过适用于流动布局。
• How Much Longer Will We Design for 1024?
  讨论近期的屏幕分辨率统计数据。

关于作者

Kayla Knight 是一名大学生，兼职网页开发，自由职业者，blogger。他利用业余时间维护Webitect.net，一个面向网站管理员的博客，提供教程、文章、技巧和资源等。

©2009 笨活儿 | 永久链接 | 已经有7条评论了 | 推荐到豆瓣

在这篇文章中，我们将讨论八个布局解决方案/技巧，这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括滑门(sliders)、标签式、渐进布局(progressive layouts)、结构网格、模态窗口(modal window)、翻转元素、手风琴效果(accordions)以及超大下拉菜单(mega drop-down-menus)。

1. 滑动样式与传送带(Sliders and Carousels)

滑门(Sliders)，也可称为传送带(carousels)，是一种有序的、交互性强、十分平滑地展示内容的方式。滑门样式是一个非常流行的技巧，大家都觉得它很好用，能让你在固定的区块内填充上大量内容。没有滑门的帮助，这些内容可能就要分开放到页面中的各个地方。而大多数时候，你在使用页面空间时总是捉襟见肘。或者，有些内容是你希望“用户要求”后才出现。这有助于让用户一次只关注一个内容区块，也符合他们自己的便利需求。

滑门样式的实例

导航区提供缩略图与图标
运用滑门和幻灯样式时，最好在导航区提供图标或缩略图，以便使导航更加简单直观。缩略图和图标给用户指出明路，向他们解释当前所在位置，以及有哪些浏览选项可供选择（比如说幻灯片的导航可以是水平的，也可以是垂直的）。另外，还能方便他们快速选择特定滑门页。

Coda网站的滑门顶部设计了标签卡，他们使用的是“滑动门+标签卡”的混合样式。这个主意绝顶聪明，因为通过看缩略图，用户就能快速得知特定滑门页的内容。而且，这些图标也提供了强大的、令人印象深刻的、干净整洁的视觉支持。除了图标和标签你也可以在标题前加上小图片， 或者只用数字也行。

用于展示产品的滑门样式
与上面的例子对应，滑门不仅能用于大容量信息的组织，也能为用户浏览大量产品条目提供方便。 SourceBits (见下图)使用了多层滑门（一个水平的，一个垂直的），用唱片封面作为导航条目。

水平滑门两端都有大的圆形箭头图标，实时反映左右导航的可用性。滑动的时候有平滑的动画，用起来非常舒服。同时，你也能看到，各个元素间距都精心设计过，这有助于内容组织，也提升了可用性。鼠标滑过时，每个条目还有漂亮的聚光灯效果。

垂直滑动的内容以及超大的水平“点击条”
接下来看看 QuickSnapper 的滑门。这是一个完美融入页面整体布局的十分好用的垂直滑门。滑门内容中有大量截屏图，内容被有序地组织起来。这个滑门最赞的地方就是上下方的按钮导航。按钮宽及整个滑门，大的按钮让“推拉”滑门更加容易。

还有，这些按钮的:active和:focus效果也很漂亮。

滑门脚本

你可以参考下面的脚本、技巧和教程制作你自己的滑门：

• Slick Accessible Slideshow using jQuery
• Coda-Slider 1.1.1
• jquery.scrollable 1.0.2
• Create an Amazon Books Widget with jQuery and XML
• Agile Carousel
• Easy Image or Content Slider
• Slider Gallery
• Coda Slider Effect
• iCarousel

2.标签卡导航元素

本质上标签卡导航和滑门效果是差不多的技巧。它们都能帮你把一大片内容放到一小块区域里。标签卡导航很常见，但也有很多不常见的运用方式。我们这里关注的是在一个页面内部的标签卡，而不是用于在不同页面之间跳转的标签样式主导航。标签卡很明显地将内容划分到不同区块，最终又把他们融合到占地面积很小的一个区块中。

标签卡的样式范例

出众的背景，大的可点击区域，明显的分割
第一个例子来自 Mac Pro网站 的“Performance”部分，其标签元素的组织非常值得学习。这些标签卡上的文字都十分易读，可点击区域很大，各标签视觉上的区分也很明显，这正是大部分用户期待的样式啊。你也应该能注意到，当前标签卡上还有着十分微妙的渐变背景，与主内容区块很好地融合在了一起。未激活的标签背景则略暗，主内容区块在其上有微弱的投影，这种做法加强了深度感和立体效果。十分简单而有效的技巧。

按钮区分的简洁标签卡
以下是另一个利用标签卡紧凑地展示信息的实例。根据 Atebits 的布局结构，介绍性内容的空间被挤压，不太适合做成多区块样式。所以他们介绍内容的三大部分被组织到了标签中，保持了布局的整洁有序。再一次地，当前标签卡的背景与主内容区融合，不活动标签卡则是较暗的灰色背景。你同样也会发现标签卡之间有着漂亮的分割线，使得每个标签卡看起来都像是独立的按钮。

为整个标签集提供清晰的分割线
Fontcase 的标签卡设计也很精妙，很有现代感。尽管在未激活标签之间没有分割线，当前标签却有明显的边线。你也能注意到，在整个标签集的上方和下方各有一条边线。标签卡使用了图标与留白来突出文字，提高了易用性。

标签卡效果脚本

• Create a Slick Tabbed Content Area using CSS & jQuery
• JavaScript tabifier
• Yetii – A JavaScript Tab Interface
• Tabbed Page Interface
• Updated JQuery Nested Tab Set
• Scriptaculous Tabs
• Accordian Tabs

3. 模态窗口

模态窗口（Modal windows），或者称为浮窗，一般用于在空间紧张的页面中展示额外信息。在模态窗口中，你可以放置放大版的图像、额外内容、警告/提示信息、视频等等。用模态窗口展示信息时，记得要同时明确地提示用户如何关闭它。

同时，用于打开模态窗口的链接、缩略图、图标或者其他图形元素，一定要保证与模态窗口要展示的内容有足够的关联。相似的图标、摘要、图形元素都能帮助用户建立原始链接与打开的窗口的联系。

模态窗口的例子

运用到登录和注册流程中的浮窗
模态窗口最典型的运用就是登录／注册窗口了（与诸如图像、音频、视频、Flash等“传统”媒体文件相比）。登录和注册表单不是用户每次浏览页面都要用到的必要部分，所占页面空间理所应当被节约下来。而使用浮窗，则又为用户省去了重开一个页面的时间，毕竟这只是一个很简单的非常用动作。他们能在网站的任何页面中登录/注册，而不用中断现有流程——只要网站的设计者能提供基于Ajax的“静悄悄的” 登录/注册。

Grooveshark 整个站点的每一个页面中，这个漂亮的登录窗口都触手可及。注意，点击登录（ Lodin> ）按钮后并不会载入一个新页面，而是直接把注册表单替换成了登陆表单（使用了手风琴效果）。非常方便，非常友好的用户界面。

消隐页面/使用投影
如果要使用模态窗口，让窗口下面的页面淡出焦点十分重要。你可以用半透明背景覆盖或者为窗口添加投影，或者两者结合。这么做有两个作用：一是能让用户将注意力集中到浮窗上，然后暂时忽视掉背后的页面。另外，也能增加窗口和页面之间的深度感和区分度，让人在视觉上觉得这窗口确实是漂浮着的。注意看下面的例子(KissMetrics)，半透明的黑色背景让页面消隐，有助于登录浮窗暂时成为视觉重点。另外，取消和关闭窗口的按钮也设计得很好，够明显，够漂亮。

RealMacSoftware 的浮窗只做了投影，而没有让整个页面消隐。只要深度感和区分度做得足够，这样也很有效。

模态窗口的脚本

• Fancy Lightbox
• Lightbx 2
• Facebook Image/Content Viewer
• Woork Mootools Lightbox
• nyroModal JQuery Plugin
• JQuery Alert Dialog
• LightWindow
• ThickBox 3.1

4. 翻转元素 Rollover Elements

翻转元素目前被越来越多地运用于商业网站、作品集站点和产品展示页。翻转元素的核心概念就是当用户鼠标移到某个按钮或网页元素上时，处于另一个布局区域的元素就自动显示出来。请看下面的例子深入了解我说的“翻转元素”究竟是什么。

翻转实例

标签卡翻转
下图是 Miro主页 的截屏，他们设计了一个十分精妙的巨大翻转元素。这 本质上和滑门类似 —— 只不过内容切换时不需要点击罢了。

小地方的微妙翻转
TaoEffect 向我们完美展示了如何通过设计精巧漂亮的翻转元素来添加清爽整洁的额外信息（这种效果最早是应用于前文提到过的Coda网站，但我们选择了TaoEffect作为这一节的实例）。信息的展示十分友好，您只需要把鼠标移到按钮上即可。

访问网站你会发现，翻转时有非常轻柔的动画，垂直跳动 + 淡入淡出。你应该也能注意到它的背景是半透明的，跳出来的卡片边缘还有高光和投影，与背景很好的区分开来。

内容地图上的翻转元素
OneHub 则利用翻转元素实现了另一种效果。这个页面有点像地图，在不同区域做出了标注。鼠标移到标注上时，会显示该标注的额外信息。这种方法用在需要分区域详细解释的产品介绍页上将有特效。

与幻灯切换结合的翻转元素
另一个蛮有趣的设计来自 SquaredEye —— 他们在导航按钮上用翻转元素来展示下一页内容的预览图。

小提示/翻转元素的脚本

• Prototip 2
• Coda Popup Bubbles
• Build a Better Tooltip with jQuery Awesomeness
• jQuery plugin: Tooltip
• Create a Simple, Powerful Product Highlighter with MooTools
• Easiest Tooltip and Image Preview Using jQuery

5. 渐进布局Progressive Layouts

“渐进布局”的意思是站点内容按照一定的顺序一块一块地显示给用户。这种组织内容的做法比较反常，但也能在很多网站上看到。渐进布局能帮助用户更容易地深入一长串信息。

渐进布局的实例

整个站点都由渐进布局构成
Sursly.com（貌似被墙，请点击这里代理访问）的整个作品集站点都基于渐进布局。您应该能注意到，页面右上角有一个“GO”按钮，每一页面都是从上一页面中的GO按钮链接过来的。这种页面之间的渐进系统代替了传统的导航和菜单。当然，这样做也有一个很明显的缺点：导航的交互性下降了，用户只能按照网站建设者想要的顺序获取内容。（译注：还有一个缺点是，在不同分辨率屏幕上的显示差异太大，因为你必须考虑到页面内部各区块的位置问题）

尽管单个页面布局能被存为书签（使用# 锚记），但对于随机访问者来说，则无法通过一个明晰的导航对站点内容建立起直接的整体感知。而且，这种布局一般只有一个“航向”，从易用性的角度上来说，所谓“导航”的概念在这里几乎不能适用。

译注：这种水平布局的网站大都采用了渐进布局。和上面的站非常类似的一个网站是： peter-pearson.com 相对于简单的滚动，这个站还在背景里做了非常可爱的线条，十分漂亮。另外推荐 26个水平布局网站设计，在英文原文的留言里还有很多bonus可看。

垂直方向的渐进布局
Danny Blackman 的作品集也是仅通过一张渐进式布局页面来实现的。各块元素相互独立，在一张页面上垂直展示。相邻元素之间有滚动按钮，每个元素都有返回顶部的按钮。菜单或所谓导航还是没有被使用。

译注：推荐一个做得更好的例子：searchinsidevideo.com 他们使用了固定在顶端的导航，字体也非常大的，极富视觉冲击力，用起来也很方便。

ScrollTo 脚本

• ScrollTo – 使用这个jQuery插件，就能轻松建立渐进式布局。

6. 网格

讨论布局的文章是不可能避开网格不谈的。网格通常被认为是任何平衡、有序、简练的网页布局的基础。很多设计师都认为网格是处理信息容量很大的页面时的必备武器。有时候单独使用网格就能很好的展示信息，甚至不需要其他技巧。好的网格能够将一个页面中的全部内容都整合进流动布局里，而内容的可读性，或者如果用户想快速浏览，都不会受到影响。

下面的网站使用了严格的网格布局。整个站点只有一张页面，需要融入大量信息。不过，全部信息被整合进这整洁的两栏布局网格中。整个布局严谨、强健、稳固，留白恰到好处。浏览或仔细研读内容都非常方便。

使用不同背景区分网格区域
使用网格一般是因为你需要在一个很紧凑的区域内放置大量内容。你想要创建整洁有序的网站布局，但是又不能随意添加很多留白来区分区块。如此的话，你就需要使用不同背景来区分网格区域。没了网格间的大量留白，只要网格内还有少量的内边距，也可以看起来很不错。Valleycreek.org 就用了这种战术，尽管已经有一条细线来分割网格区域，背景色的差异还是被用到，以提供更明显的区分。

网格生成器、模版和更多工具

• Grid System Generator
• Variable Grid Systems Generator
• 960 Grid System
• Grid Designer
• Grid Calculator
• 50 Useful Design Tools For Beautiful Web Typography (including grid-resources)

7. 手风琴效果（折叠菜单）

折叠菜单和滑动门以及标签卡涉及同一个概念：把大量信息压缩到一小块区域里。“手风琴效果”指的是一些被水平或垂直组织的区块，通过点击，一个内容区块滑向另一个区块，并将其内部内容展示出来，和手风琴的推拉过程有点相似。

手风琴效果的实例

功能性和大点击区域
Alex Cohaniuc 的手风琴菜单设计的很好。把作品项目藏到手风琴里是的做法其实挺有道理的，因为这能把每个项目的不必要信息隐藏起来，等访客有需要的时候再显示。说这项设计好是因为：一，每块画布的标题都很大，很好点击；二，每块标签卡都使用了一个小箭头来反映开合状态；三，鼠标滑过时，当前标签卡有将它区分出来的不同背景色。

水平内容滚动
Jason Reed 使用手风琴将整个站点糅合进一张页面里。他没有赋予手风琴以特别不一般的视觉特征，而是让它融入了页面之中。另外，这是一个水平方向推拉的手风琴（尽管标签卡是垂直方向的）。请注意看他的标签卡，每个标签卡之间的距离很大，这些标签卡，或者说标题，并不像上一个例子有那么明显的区分，设计师利用了留白来将它们各自独立。鼠标移上去的时候，这些十分易读的标签就会变成橙色，让用户能够非常明确地了解到自己将要点击的标签后面都有什么。

包含图像和信息的手风琴
Marius Roosendaal 使用另一个非常漂亮的手风琴来“储藏”他的作品图像。与上面两个例子一样，每一个内容区块都是一个项目的展示。不过，此例的手风琴里的每个图像还附加有一些文字介绍。你能注意到一个小按钮被用来显示/隐藏介绍。他同时也提供到更详细介绍或者更大预览图的链接。在一个小小的手风琴里当然不能塞进特别特别多的信息，所以如果可以的话，还是尽量给每个项目都加上到详细内容的链接吧。

手风琴脚本

• Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
• Apple.com Downoads Page Slide out and drawer effect
• UI/API/1.7.1/Accordion jQuery Plugin
• jQuery UI Accordion
• Simple JQuery Accordion menu
• jQuery Accordion Madness
• jQuery Examples – Horizontal Accordion

8. 超大下拉菜单

导航不一定非得是几个简单的超链接组合。最近，导航设计有一个流行趋势：不仅仅提供“航向”选择，也提供网站内各“终点站”位置以及“终点站”之间的从属关系。所谓“超大”下拉菜单常见于电子常务网站，用于展示他们庞杂的商品分类。这种样式正成为设计趋势，因为它能通过普通的翻转就提供大量分类信息，而不需要用户额外的点击。

超大下拉菜单的实例

超大下拉菜单的一个经典例子是 Ruby On Rails Guide 的Guide Index。这个菜单提供了一个组织良好、样式精美的二级导航。注意，与一般的做法不同，激活二级菜单需要用户点击，Guide Index右边有“切换” 图标，并且有着与将要弹出的二级菜单相融合的背景色。弹出的二级菜单也有细微的投影。

译注：这站点在IE的Quirks模式下有显示异常……（话说显示不异常的页面还基本上没有……）

下面的截图里的投影，我也看不到……

带更多信息的多级菜单
Porsche 对于上面说到的技巧来说，简直是一个完美的例子。Porsche 的主页提供一个多级菜单，让用户不用一次点击就能快速了解他们生产的所有汽车。第三级菜单中，所选汽车的信息被直接提供：包括图片、许多链接、以及其他关于本车的快读信息。当然，这个更大的区块就是一个巨大的可点击区域。所有细节和特别介绍都直接链到相应页面。要了解究竟是怎么回事，就点击下面的图片自己去看看吧！

在下拉列表里显示搜索结果
最近还比较流行的一个技巧和上面谈到的有点类似：在下拉列表里显示搜索结果。 Media Temple Knowledge Base 就使用了这一技巧。他们没有使用一个新页面来显示用户的搜索结果，搜索结果在一个下拉列表里随着你的输入而实时变化。不过，请注意，完整搜索结果页的链接仍然存在，您若要在自己的设计中使用这种设计，还请不要忘记这一点。

在下拉区块中显示额外信息
Gateway.com 继续登场。你能看到他们在顶部菜单中使用了超大的下拉区块来展示产品。下拉区块中的产品排列组织得非常好，图片提供了强健的视觉支持。这个菜单还提供了诸如价格和屏幕尺寸等额外信息，让顾客能够在查看具体页面之前就有所选择。因为很多人都很关心产品价格——至少对于很多有购买需求的人来说。

菜单脚本

• Animated Drop Down Menu with jQuery
• Superfish v1.4.8 – JQuery Drop Down Menu
• Make a Mega Drop-Down Menu with jQuery
• How to Make a Smooth Animated Menu with jQuery
• Designing the Digg Header: How To & Download
• Create a multilevel Dropdown menu with CSS and improve it via jQuery

更多资源

你应该也会喜欢（全是英文）：

• 5 Useful Coding Solutions For Designers and Developers（代码解决方案）
• Designing Drop-Down Menus: Examples and Best Practices（下拉菜单）
• Slideshows in Web Design: Where And How To Use Them（幻灯片）
• 40 Creative Design Layouts: Getting Out Of The Box（40个创新性布局）
• Web Design Trends For 2009（2009年网页设计趋势）
• Table Layouts vs. Div Layouts: From Hell To… Hell?（表格布局vsDiv布局：走出地狱，升入……地狱？ ）

关于作者

Matt Cronin 是一位富有激情的平面设计师，网页设计师/开发者，Cocoa程序员，摄影师，数字艺术家，等等。他也热爱写作，已经为Smashing Magazine写过很多好文。他现在正着手于一个叫做i VAEOU 的项目，不久之后就能面试。 Follow Matt on Twitter.

译文原文来自笨活儿，转载请保留本链接：提升设计品质的8个布局方案。

英文原文：8 Layout Solutions To Improve Your Designs

本文译自Smashing Magazine。从今以后，凡是译自Smashing Magazine的文章都在标题后加注SM，不再另行说明。

然 后，刚才发现译言上已经有本文的翻译了，不过是分上下篇发的。虽然有译文，我还是自己独立把本文给译完了。我想说的是，我这人比较耿直，绝对不会把 原文切割，分为几个部分来发。翻译的时候忠实原文也是我很看重的，所以我不会随意精简原作者的话，大家如何觉得罗嗦，还是多多包涵吧！

©2009 笨活儿 | 永久链接 | 已经有14条评论了 | 推荐到豆瓣

英文原文来自Smashing Magazine。由笨活儿翻译。转载请注明出处。

正则表达式(Regular Expression, abbr. regex) 功能强大，能够用于在一大串字符里找到所需信息。它利用约定俗成的字符结构表达式来发生作用。不幸的是，简单的正则表达式对于一些高级运用，功能远远不够。若要进行筛选的结构比较复杂，你可能就需要用到高级正则表达式。

本文为您介绍正则表达式的高级技巧。我们筛选出了八个常用的概念，并配上实例解析，每个例子都是满足某种复杂要求的简单写法。如果你对正则的基本概念尚缺乏了解，请先阅读这篇文章，或者这个教程，或者维基条目。

这里的正则语法适用于PHP，与Perl兼容。

1. 贪婪/懒惰

所有能多次限定的正则运算符都是贪婪的。他们尽可能多地匹配目标字符串，也就是说匹配结果会尽可能地长。不幸的是，这种做法并不总是我们想要的。因此，我们添加“懒惰”限定符来解决问题。在各个贪婪运算符后添加“?”能让表达式只匹配尽可能短的长度。另外，修改器“U”也能惰化能多次限定的运算符。理解贪婪与懒惰的区别是运用高级正则表达式的基础。

贪婪操作符

操作符 * 匹配之前的表达式零次或零次以上。它是一个贪婪操作符。请看下面的例子：

preg_match( '/<h1>.*< \/h1>/', '</h1><h1>这是一个标题。</h1>
<h1>这是另一个。</h1>', $matches );

句点(.)能代表除换行符外的任意字符。上面的正则表达式匹配 h1 标签以及标签内的所有内容。它用句点(.)和星号(*)来匹配标签内的所有内容。匹配结果如下：

这是一个标题。
这是另一个。

整个字串都被返回。* 操作符会连续匹配所有内容—— 甚至包括中间的 h1 闭合标签。因为它是贪婪的，匹配整个字串是符合其利益最大化原则。

懒惰操作符

把上面的式子稍作修改，加上一个问号(?)，能让表达式变懒惰：

/<h1>.*?< \/h1>/</h1>

这样它会觉得，只需匹配到第一个 h1 结尾标签就完成任务了。

另一个有着类似属性的贪婪操作符是 {n,} 。它代表之前的匹配模式重复n次或n次以上，如果没有加上问号，它会寻找尽可能多的重复次数，加上的话，则会尽可能少重复（当然也就是“重复n次”最少）。

# 建立字串
$str = 'hihihi oops hi';
# 使用贪婪的{n,}操作符进行匹配
preg_match( '/(hi){2,}/', $str, $matches );  # matches[0] 将是 'hihihi'
# 使用堕化了的 {n,}? 操作符匹配
preg_match( '/(hi){2,}?/', $str, $matches );  # matches[0] 将是 'hihi'

2. 回返引用(Back referencing)

有什么用？

回返引用(Back referencing)一般被翻译成“反向引用”、“后向引用”、“向后引用”，个人觉得“回返引用”更为贴切[笨活儿]。它是在正则表达式内部引用之前捕获到的内容的方法。例如，下面这个简单例子的目的是匹配出引号内部的内容：

# 建立匹配数组
$matches = array();
# 建立字串
$str = "\"This is a 'string'\"";
# 用正则表达式捕捉内容
preg_match( "/(\"|').*?(\"|')/", $str, $matches );
# 输出整个匹配字串
echo  $matches[0];

它会输出：

"This is a'

显然，这并不是我们想要的内容。

这个表达式从开头的双引号开始匹配，遭遇单引号之后就错误地结束了匹配。这是因为表达式里说：("|')，也就是双引号（"）和单引号（'）均可。要修正这个问题，你可以用到回返引用。表达式\1,\2,…,\9 是对前面已捕获到的各个子内容的编组序号，能作为对这些编组的“指针”而被引用。在此例中，第一个被匹配的引号就由1代表。

如何运用？

将上面的例子中，后面的闭合引号替换为1：

preg_match( '/("|\').*?\1/', $str, $matches );

这会正确地返回字串：

"This is a 'string'"

译注思考题：

如果是中文引号，前引号和后引号不是同一个字符，怎么办？

还记得PHP函数 preg_replace 吗？其中也有回返引用。只不过我们没有用 \1 … \9，而是用了 $1 … $9 … $n （此处任意数目均可）作为回返指针。例如，如果你想把所有的段落标签 <p> 都替换成文本：

$text = preg_replace( '/<p>(.*?)< \/p>/',
'&lt;p&gt;$1&lt;/p&gt;', $html );

参数$1是一个回返引用，代表段落标签

内部的文字，并插入到替换后的文本里。这种简便易用的表达式写法为我们提供了一个获取已匹配文字的简单方法，甚至在替换文本时也能使用。

3. 已命名捕获组(Named Groups)

当在一个表达式内多次用到回返引用时，很容易就会把自己弄糊涂，判断N个数字（\1 … \9）都到底代表哪一部分会比较困难。这是就可以用到带名字的捕获组（下文简称“有名组”）。有名组使用(?P<pattern>)来设定，name代表组名，pattern是配合该有名组的正则结构。请看下面的例子：

/(?P<quote>"|').*?(?P=quote)/

上式中，quote就是组名，"|'是改组匹配内容的正则。后面的(?P=quote)是在调用组名为quote的有名组。这个式子的效果和上面的回调引用实例一样，只不过是用了有名组来实现。是不是更加易读易懂了？

有名组也能用于处理已匹配内容之数组的内部数据。赋予特定正则的组名也能作为所匹配到的内容在数组内部的索引词。

preg_match( '/(?P<quote>"|\')/', "'String'", $matches );
# 下面的语句输出“'”(不包括双引号)
echo $matches[1];
# 使用组名调用，也会输出“'”
echo $matches['quote'];

所以，有名组并不只是让写代码更容易，它也能用于组织代码。

4. 字词边界(Word Boundaries)

字词边界是字串里的字词字符（包括字母、数字和下划线，自然也包括汉字）和非字词字符之间的位置。其特殊之处就在于，它并不匹配某个实在的字符。它的长度是零。 \b 匹配所有字词边界。

可惜，字词边界大多数情况下都被无视了，很多人并不知道如何实际运用。 下面举个例子。比如说你想要匹配单词“import”：

/import/

注意了！正则表达式有时候很调皮的。下面的字串也能和上面的式子匹配成功：

important

你或许觉得，只要在import前后加上空格，不就可以匹配 import 这个独立的单词了：

/ import /

那如果遇上这种情况呢：

The trader voted for the import

当 import 这个词在字串开头或者结尾时，修改后的表达式仍然不能用。因此，考虑各种情况是必须的：

/(^import | import | import$)/i

别慌，还没完呢。如果遇到标点符号呢？就为了满足这一个单词的匹配，你的正则可能就需要这样写：

/(^import(:|;|,)? | import(:|;|,)? | import(\.|\?|!)?$)/i

对于只匹配一个单词来说，这样做实在是有点大动干戈了。正因如此，字词边界才显得意义重大。要满足上述要求，以及很多其他情况，利用字符边界，只需如此写：

/\bimport\b/

上面所有情况都得到了解决。\ b 的灵活性就在于，它是一个没有长度的匹配。它只匹配两个实际字符之间想象出的位置。它检查两个相邻字符是否是一个为单字，另一个为非单字。情况符合，就返回匹配。如果遇到了单词的开头或结尾， \b 会把它当成是非单词字符对待。由于import里面的 i 仍然被看成是单词字符，import 就被匹配出来了。

注意，与\b相对，我们还有\B，此操作符匹配两个单字或者两个非单字之间的位置。因此，如果你想匹配在某个单词内部的‘hi’，可以使用：

\Bhi\B

“this”、“hight”，都会返回匹配，而“hi there”则不会返回匹配。

5. 最小组团(Atomic Groups)

最小组团是无捕捉的特殊正则表达式分组。通常用来提高正则表达式的效能，也能用于消除特定匹配。一个最小组团可以用(?>pattern) 来定义，其中pattern是匹配式。

/(?>his|this)/

当正则引擎针对最小组团进行匹配时，它会跳过组团内标记的回溯位置。以单词“smashing”为例，当用上面的正则表达式匹配时，正则引擎会先尝试在“smashing”里寻找“his”。显然，找不到任何匹配。此时，最小组团就发挥作用了：正则引擎会放弃所有回溯位置。也就是说，它不会尝试再从“smashing”里查找“this”。为什么要这样设置？因为“his”都没有返回匹配结果，包含有“his”的“this”当然就更匹配不了了！

上面的例子并没有什么实用性，我们用/t?his?/ 也能达到效果。再看看下面的例子：

/\b(engineer|engrave|end)\b/

如果把“engineering”拿去匹配，正则引擎会先匹配到“engineer”，但接下来就遇到了字词边界，\b，所以匹配不成功。然后，正则引擎又会尝试在字串里寻找下一个匹配内容：engrave。匹配到eng的时候，后面的又对不上了，匹配失败。最后，尝试“end”，结果同样是失败。仔细观察，你会发现，一旦engineer匹配失败，并且都抵达了字词边界，“engrave”和“end”这两个词就已经不可能匹配成功了。这两个词都比engineer短小，正则引擎不应该再多做无谓的尝试。

/\b(?>engineer|engrave|end)\b/

上面的替代写法更能节省正则引擎的匹配时间，提高代码的工作效率。

6. 递归(Recursion)

递归(Recursion)用于匹配嵌套结构，例如括弧嵌套， (this (that))，HTML标签嵌套

。我们使用(?R)来代表递归过程中的子模式。下面是一个匹配嵌套括弧的例子：

/\(((?>[^()]+)|(?R))*\)/

最外层使用了反义符的括号“(”匹配嵌套结构的开端。然后是一个多选项操作符( * | * )，可能匹配除括号外的所有字符 “(?>[^()]+)”，也可能是通过子模式“(?R)”来再次匹配整个表达式。请注意，这个操作符会尽量多地匹配所有嵌套。

递归的另一个实例如下：

/<([\w]+).*?>((?>[^<>]+)|((?R)))*<\/\1>/

以上表达式综合运用了字符分组，贪婪操作符、回溯，以及最小化组团来匹配嵌套标签。第一个括弧内分组([\w]+)匹配出标签名，用于接下来的应用。若找到这尖括号样式的标签，则尝试寻找标签内容的剩余部分。下一个括弧括起来的子表达式和上一个实例非常相似：要么匹配不包括尖括号的所有字符 ?>[^<>]+，要么递归匹配整个表达式(?R)。表达式最后的<\/1>代表闭合标签。

7. 回调(Callbacks)

匹配结果中的特定内容有时可能会需要某种特别的修改。要应用多重而复杂的修改，正则表达式的回调就有了用武之地。回调是用于函数preg_replace_callback中的动态修改字串的方式。你可以为preg_replace_callback指定某个函数为参数，此函数能接收匹配结果数组为参数，并将数组修改后返回，作为替换的结果。

例如，我们想将某字串中的单词全部转换为首字母大写。十分不巧，PHP没有直接转化字母大小写的正则操作符。要完成这项任务，就可以用到正则回调。首先，我们要匹配出所有需要被大写的字母：

/\b\w/

上式同时使用了字词边界和字符类。光有这个式子还不够，我们还需要一个回调函数：

function upper_case( $matches ) {
return strtoupper( $matches[0] );
}

函数upper_case接收匹配结果数组，并将整个匹配结果转化成大写。 在此例中，$matches[0]代表需要被大写的字母。然后，我们再利用preg_replace_callback完成这次回调：

preg_replace_callback( '/\b\w/', 'upper_case', $str );

一个简单的回调即有这般强大的力量。

8. 注释(Commenting)

注释不用来匹配字串，但确实是正则表达式中最重要的部分。当正则越写越深入，越写越复杂，要推译出究竟什么东西被匹配就会变得越来越困难。在正则表达式中间加上注释，是最小化将来的迷糊和困惑的最佳方式。

要在正则表达式内部加上注释，使用(?#comment)格式。把“comment”替换成你的注释语句：

/(?#数字)\d/

如果你打算把代码公之于众，为正则表达式加上注释就显得尤为重要。这样别人才能更容易看懂和修改你的代码。和其他场合的注释一样，这样做也能为你重访自己以前写的程序时提供方便。

考虑使用“x”或“(?x)”标记位来格式化注释。这个修改器让正则引擎忽略表达式参数之间的空格。“有用的”空格仍然能够通过[ ]或\s，或者\ （反义符加空格）来匹配。

/
\d    #digit
[ ]   #space
\w+   #word
/x

上面的代码与下面的式子作用一样：

/\d(?#digit)[ ](?#space)\w+(?#word)/

请时刻注意代码的可读性。

更多资源（英文）

• Regular-Expressions.info Comprehensive website on regular expressions
• Cheat SheetInformative regular expressions cheat sheet
• Regex GeneratorJavaScript regular expressions generator

关于作者

Karthik Viswanathan 是一个喜欢编程和做网站的高中生。你可以到他的博客上查看他的作品：Lateral Code。你也可以关注一下他的线上Twitter应用。

©2009 笨活儿 | 永久链接 | 已经有10条评论了 | 推荐到豆瓣

“高品质”是所有人追求的目标，在网页设计的世界中也不例外。不过何为“品质”，如何判断一项设计的品质是好还是坏？笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里，你就掌握了让自己的设计更趋完美的大量技巧。

接下来我会给大家列一些要点，并附上相应的例子，与大家分享一下我在别人的网页设计中寻找“高品质”的过程。

01. 留白

在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。

我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。

出色的留白处理的实例

Good.is

页面整洁而有开放感，全都得益于设计师对文字和图像之间留白量的准确把握。

Digital Mash

在大空白上展示的元素往往更具吸引力。Digital Mash的网站创造了极佳的亲和力。

Creatica Daily 的大量空白

优秀的留白运用又一次让网页内容成为焦点。每篇文章中都有大量内容，不过该站点的设计师们并不惮于给这么多内容之间填上大量留白。并不是说你的文字不够多，就不能用很多留白。

Postbox 上也有很多空白

仔细观察Postbox的网站，你能看到边缘处的留白应该如何处理。它的方框边缘有60像素的边内留白。听起来似乎挺大的，实际看起来效果却好极了。

留白时的错误

大家在设计留白时的最常见问题就是各个区块的内容到边缘距离太小。不论你的设计多么有风格，如果你硬要把东西塞得紧紧的，这些风格连同设计的品质，就都流失了。

留白不够的例子

我们已经看到PostBox的网站那些大留白创造了多么动人的效果，所以下面我们修改一下它的页面，看看减少留白会是什么效果：

品质感明显下降了。留白的影响就有这么大。

高效控制留白的技巧

各种不同情况下，留白要求都不尽相同。你需要不断训练自己，做到对留白所能带来的改变时刻心中有数，从而有效地利用留白满足设计需求。这要靠个人感觉的，不过都能从实践中锻炼出来。

• 使用网格辅助设计
  利用网格当然能帮助你理解元素之间的空白。
  
• 不断尝试
  不断尝试—失败—尝试，直到找到最佳方案。
  
• 留白并不是浪费空间
  空白并不总是等着你去填充的。
• 没错，少就是多
  与其用尽心思填满某个区域，不如就把它留空，只保留至关重要的信息就好。

02.  像素级的完美

有一个方法能够看出某人在完成一项网页设计时是否真的用心了。有时候创造奇迹的就是一些小细节，一些别人几乎无法察觉的细节。我所说的“像素级的完 美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线，不如多加一些细节。细节可以是细微的渐变，也完全可以只是一条1像素宽的细线（用作表现阴影或高光）。有了这些细节， 你的设计会大不一样。有些设计师在这方面特擅长： Collis Ta’eed, David Leggett 以及 Wolfgang Bartelme.

像素级完美细节的实例

Envato的细节鉴赏

下图的Example 1 (例子1)中，绿色内容框的边缘有一条更亮的绿色线。而Example 2处，区块内边缘有柔和的渐变阴影，而边缘之上还有一像素的白色描边。这做法非常聪明，用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果，有助于将注意力吸引到下面的白色区块中那清新脆爽的细节上去。 尽管这种做法并不是总能让设计看起来更加精致，不过它们的确能帮助你赋予设计以三维的真实感。于是设计元素就成了镶嵌在页面上的宝石，而不是平铺在上面的一张毫无动感的纸。

Tutorial9.net上的细节

David Leggett 对于如何制造 单像素顶边条 有很深的理解。他最近重新设计的 tutorial9 集合了很多非常棒的像素化技巧。 Example 1 处你能看到，他是如何仅仅通过添加一条1像素的高光，而将导航标签变得更有质感。Example 2 处使用的技巧则更多了。相机图标的投影，下方白色区域的阴影与高光，以及导航条上的1像素高光。

RedBrick Health上 按钮和分割线上的完美像素级细节

这个漂亮的导航菜单，由Ryan Scherf 创造，是使用完美像素级细节提升设计品质的绝佳实例。红色按钮有1像素的高亮，链接之间的分割线也有同等的品质与细节。正如你所看到的，他没有满足于只用一条灰色线分割，Ryan还在下面添加了一条1像素宽的高光线，避免了设计看起来过于平坦。

完美像素级细节也适用于Grunge风格: AvalonStar

译注：Grunge风格有“做旧”、“迷幻摇滚”、“做脏”等几层意思在里面，算是平面艺术中的一个流派。

下面的例子是漂亮的AvalonStar：Distortion（扭曲）主题博客，有着极赞的grunge风格。不过，即便是肮脏做旧的grunge风，利用1像素高光也能创造大不同。下图的Example 1 处，上面的棕色区域有一个渐变阴影，下面的绿色区块的顶部则有着一条1像素高亮线。阴影与1像素线的结合，让这些区块显得更为精致。

完美细节小贴士

要在这一技巧上达到完美，不断的实践尤为重要。如您所见，一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角或渐变，费尽心力做一些实实在在的置于某对象之上的效果。

• 一定得是细节
  小细节完善内容感官是关键。
• 思考像素级问题
  描边、渐变、线条、阴影等等，不用太宽大也能有效增强设计
• 前后对比
  应用效果后注意与没有这种效果之前进行对比。如此你就能知道这些细节到底带来了哪些改观。

03. 文字排列与字体选用的诀窍

尽管设计师大都不会亲自撰写网站的实际内容，不过他们对于内容的整体品质仍然至关重要。设计师的作用就是要保证内容的展现方式足够易读。有很多方法能保证你的字体易读易用，不过我不会给大家列一些该做什么或者不能做什么的规矩和条款，我带给大家的是一些聪明运用字体的实例和分析。

仔细考虑了字体的实例

The Netsetter上大而漂亮的字体

网页设计中，标题很重要，对于博客设计来说尤为如此。最近流行在标题上使用大而粗的字体。这样做有很多好处，不仅能提高特定内容区块的可用性，而且有助于组织设计中的空间和结构。 Netsetter 在这方面做得非常好，如您所见，标题字体很大，周围有大量留白，十分易读。

行间空白和字符间距

Viget 的网站是字体究竟对网页设计有多重要的完美实例。下面的截图来自他们的作品集展示页，再一次展示了大字体是如何帮助创建开放空间的。即使是这种清爽的细线体，他们也使用了宽阔的空白。另一个值得称道的地方是他们对于行高 (line height) [行间空白]的的绝妙选择。行间距被设定得比默认值大很多，大大增强了文字可读性。也许下次你可以在自己的设计中也试一试这个技巧。

Web Design Ledger, 配合情绪的字体

要找到完美的字体需要不断的尝试和失败，或者你还可以根据字体所代表的“情绪”来选择字体。下面的例子，Web Design Ledger， 在给人以复古和做旧感的同时，也饱含开放的情绪与现代感。他成功的关键就在于选择了能唤起人们相应情绪的字体。Henry Jones (该站的设计师) 为标题选择了一种流行的传统衬线字体：Georgia，为怀旧复古风的实现提供了很大裨益。现代感则来自与标题完全不同的字体——主内容使用的Helvetica字体，一种无衬线的、滑溜的、开放的字体。

网页设计中字体选用的快速决断

看了上面这么多好例子，将来你选用起字体来应该会更加得心应手。不过，为什么他们给人的感觉这么好？下一次在你自己的设计中，你又该如何运用？

• 是否可读？
  不要怕尝试粗大的字体
• 你可否考虑过间距？
  间距对于可读性有很大决定作用
• 你的字体带给人什么情绪？
  确保字体选择适合你的设计风格

这方面还有大量值得关注的地方，不过我不是这方面的专家，我也只是刚刚学会了如何鉴赏那些用得极好的字体而已。如果你想在这方面了解更多，强烈建议你看一下来自Smashing Magazine的这篇文章。

04. 元素的组织

设计师这一职业对很多人都有吸引力，因为那些制造创意的过程，实在是十分有趣。我知道组织内容的过程就没有那么有趣了，不过一旦你养成了组织内容的好习惯，你就会发现其实它也没有想象中那么枯燥。组织内容的方式总是需要看情况而定，比如说，这站点是什么类型？某项特定内容在页面上的重要性如何？

如何放置内容，以及放到哪里，可能的排列组合实在太多了。不过还是有一些技巧可循的。最基础的就是，先决定你的设计需要达到的效果。例如，你是在做卖东西的网站吗？是要做内容展示吗？或者是在做一个用户注册页？推广页面？等等……

靠设计做买卖: 37Signals

看看这个广受欢迎的 37 signals 的网站。他们的东西能卖这么好，可不是靠的运气。他们的网站让你尽可能容易地了解了他们的产品， 帮你做出最终决定。你所看见的东西都被精妙地设计而呈现。

如图中所示，他们提供了四大理由让你购买他们的产品。吸引注意力(Attention)是第一步，他们做了一个黑色区块，放上关于产品的简单介绍，并且使用了粗大的标题。 接着，他们通过一些漂亮的插画把你的兴趣(Interest)吸引到对产品优点的介绍上。再然后，他们想要让你产生购买需求(Desire)，这能通过放置客户评论引言和产品获奖证书来实现。在这一实例中，他们是通过几个“What our Customers have to say”（我们的客户如是说）的视频来实现的。最后要实现的即促成购买行动(Action)； 37Signals 的网站上有大量行动点(action points，即引导用户进行下一步操作的链接)贯穿于整个页面，由于页面很长，页面底部还放置了更多的行动点。

为内容(Blog)而设计: Well Medicated

设计博客页面时的情况则大不一样了。你不用花力气劝说你的用户信任你的产品，你的“产品”已经展示在他们面前—— 也就是你的博客内容。你要做的就是确保用户能轻松阅读你的文章，探索内容，与你和你的博客产生联系。

内容(Content) 应该是博客中出现在读者眼前的首要部分（之一）。在下面的例子中，一个粉红色粗体字的标题，很好地吸引了你的注意力，引导你直接关注文章内容。左侧放了张大小合适的预览图，右边则是两三段文章摘要，和一个“继续阅读”的链接。当然，也有标准的日期和作者信息。这简直就是我心目“内容设计”的完美实例。注意力(Attention) 可以被引导到任何有趣的事物上。在这个例子中，漂亮的RSS订阅按钮成为了焦点。且不说这个焦点让读者产生了与内容的联系感，它还能帮助网站获得更多的订阅量。鼓励你的读者探索你的内容相当简单，只需在边栏上加一些最新文章或最受欢迎文章的链接列表，或者制作一个下拉菜单，或者组织一个其他你想要推送的内容的高效列表。做起来很简单，效果却足够有效，尤其是对博客来说。博客是一个私人领地，通过不同的途径告诉读者你的联系方式(Connect) ，能帮助他们了解你，也说不定会带来意外的好处。

组织内容小贴士

你当然可能会遇到需要打破常规，选用非同寻常方式的时候，不过你还是可以遵循这些简单技巧，以保证内容结构和阅读顺序的良好。

• 你为何而设计?
  如前所述，确定设计的目标。
• 利用网格
  网格帮助你发挥页面的最大潜能。
• 测试元素位置
  以访问者的角度考察内容的易用性。
• 移除所有不必要元素
  不必要的东西都应该被消灭，或者至少不要放到显眼的地方
• 注意力的均衡
  有些东西需要被简单化，好让另外的事物闪耀光辉

05. 自我克制与精妙细节

设计师总是在寻找制造冲击力的方式，总是想做一个独一无二的设计，创造些前所未有的效果。不过有时候通过自我克制也能形成冲击力。量变产生质变，过多的“好”也会带出不好的结果。好的设计师晓得平衡点在哪里，并且能避免让过多的特殊效果毁了一项设计。

“Things”网站上的柔和渐变

对于我访问过的站点，我总是很关注他们的细微渐变。听起来可能有点恼火，不过我就是忍不住要去研究别人的那些小细节，以积累我将来设计时的灵感。渐变是最被滥用的设计方法之一，不过运用成功的话，还是能让设计增色不少，它所能提供的真实感和深度感是其他技巧所不能达到的。大部分人都不太注意渐变，不过别人对渐变的运用确实是我最好的灵感来源。

Icon Dock 上的投影

Icon Dock的网站简直就是各种精妙细节聚在一起开大会。像素级高光，渐变，以及投影。不过在这里我们只关注它的投影。不是很大，透明度也被调高，小心翼翼地烘托着内容区块，让其成为真正的焦点。实在漂亮~

精细的背景材质：Scouting for Girls

材质性背景要么成全你的设计，要么毁掉你的设计。很多复杂的背景除了分散读者注意力，没有带来任何好处。最终使得设计品质大为降低。所以，最好还是一直保持你的背景材质细微而柔和。 Scouting for Girls的网站在运用材质打造整体风格和设计品质方面做得极好。

做旧与撕碎的启发： Viget Advance

我从来不觉得越细微越好，任何细节的“细度”都以可见为前提。可能人们并没有清楚地意识到，不过这些细节必定确实产生了影响。博客Viget Advance的例子中，在做旧与撕碎效果方面，能给我们一点启发。 只是非常细微的做旧，不过如果没有这效果，这张人造纸就会显得平淡无奇，枯燥乏味了。正是这些小小的“不完美”让这画面显得更可信，更真实。

WebDesignerWall 上的水彩效果

使用水彩效果的时候，关键是要确保颜色混合得足够柔和，浓淡变化适宜，而且… 足够“水”。水彩效果为你的设计提供很多好处：精细而和谐的多种色彩，感染力极强的材质感…… 正因如此，越来越多的设计师选择了在他们的设计中创造水彩效果。

精妙的植物：Dara’s Garden

下面是一个充满智慧的关于精妙植物细节的设计。网上还有很多更加栩栩如生的植物图案，而且也非常漂亮，不过这个例子中，我关注的是背景上那些更清淡更微妙的细节。这个例子展现了细节的重要性，柔和的色彩，做旧的效果，唤起你对细节的感知，不过却并不形成为主要焦点。

运用精妙细节的小贴士

我认为，精妙细节能让一项好的设计升华为灿烂夺目的设计。如果你还在寻找让设计与众不同的方法，精妙细节是个不错的尝试方向。 以下是关于运用精妙细节的小贴士：

• 创建细节图层
  不要在一个笔刷或材质上吊死，多加些图层，多做点细节
• 尝试不同透明度和色彩
  有时候只有 3% 的不透明度也能产生正面影响
• 拒绝缩手缩脚
  不要担心太多细微，或者太不明显

06.  发挥色彩的全部潜能

设计师一般喜欢按照自己的品味来选择颜色，这可实在太不专业了。要决定哪种颜色是最适用的，你的脑子里想的应该一直是品牌需求，然后选好色彩的搭配组合，指定其专属的主题和目标情绪。

网页设计中色彩运用的绝妙例子

无趣并不代表无色：Oypro

Oypro的网站让我喜欢的地方是，他们告诉了我们，一项“无聊”的行业相应的设计并不一定也得“无聊”。通常企业的网站都不允许设计师有太多视觉创意上的发挥。保持简单、单调、淡彩色成了不成文的规定。不过Oypro的例子证明，不用束缚自己，你也能创造出一个有足够“企业感”的网站。

让色彩相互联系：Tennessee Summertime

Summertime in Tennessee(田纳西州夏日观光) 是一个充满活力的、明亮的，非常温暖的站点。所有一切看起来都是为了推送夏日活动而设计。该站点使用了非常多不同色相的高饱和度色，但每一种颜色都切中要害，没有一种是不适合主题的。高品质设计的色彩搭配必定与其要呈现的服务或产品密切关联。好的设计并不总是需要费尽心力选一些出奇制胜的颜色，那些最明显最该用的颜色反而能创造更好的效果。比如说 Hell Design(地狱设计)，不用象征地狱的火红色简直说不过去。

背景还可以大作文章：Saturized Studio

只涂一层单调的背景色可没法让你的设计变得有趣。有一点变化的背影才是最好的背景。此例中我们看到，漂亮的橙/红色被运用到各种各样的光照和渐变效果中。这种为背景增加变化的做法，有效避免了平淡和沉闷。另一个需要特别注意的地方是，暗深橙色背景与上层明亮内容区的对比产生了非常戏剧化的漂亮的视觉冲击。

在网页设计中运用颜色的小贴士

颜色永远是值得探索和尝试的区域。尝试不同的组合变化能为设计带来无限可能。不过选择颜色和色彩搭配时，应该做到对下面的要点心中有数：

• 尝试突破
  无趣的主题并不一定得使用无趣的色彩组合。
• 多变
  尝试在你多彩的背景上使用渐变、重复图案、笔刷，光有颜色可不容易让设计显得好看。
• 坚持主题
  确保你的用色与你需要呈现的产品/服务有关联。

07. 做别人没做过的事

最好的网站中有一些非同寻常的，奇怪的，甚至可以算得上诡异的设计。不过那些挑战传统的尝试说不定会已经改变了传统的定义。话说回来，要做到完全原创，创造出没人做过的东西实在是设计过程中最难做的事。

打破常规之后，成功与失败只有一步之遥。你要么做出令人惊艳的聪明设计，要么做出一堆垃圾饱受批评。别人从来不这么做是有原因的，因为有些点子实在是糟透了。要从人们知道并喜欢的区域走出来，你得非常勇敢才行。下面是一些相关实例：

MB Dragan 上的独特导航

不是你通常所见的站点导航，但看起来还是一个网站，同那些标准导航同样的好。这样做有点冒险，但结果非常符合该网站特质。十分切题的设计，很难让人不欣赏这导航与整个设计之间的配合呼应。

Visualbox(视觉盒子) 非常视觉化的导航

Visualbox的网站只有一个目标，向你展示他们充满智慧的作品。所以他们没有用多少文字，你第一眼看到的就是他们的名字和作品选集。 鼠标滑过预览图片时，会显示出项目名称，点击时会带你滑到页面中该项目的相应位置。这是非常高效而实用的解决方案，而且比简单地堆一个列表出来要吸引人得多。

废话不多说的Nikola Mircic

假设你是位交互设计师，你需要别人看了你的作品，能感动得雇用你。Nikola Mircic 为我们展示了“直截了当”对建造一个令人难忘的站点有多大的作用。一打开他的站点，各种风格的作品就向你问好，他的名字和职业放在页顶的醒目位置，当然，联系链接没少。没有大量多余文字来劝说你雇佣他，作品本身就证明了他的实力。当然，点击作品缩略图会出现一个详细介绍页，里面就有足够的文字了。实在喜欢他组织内容的方式。

实践新鲜想法的小贴士

上面的例子并不是为了“激发”你的独特创意，只是一些我发现的一些很独特的站点，仅此而已。事实上，你也不应该到处搜寻，寻找新想法的灵感，因为这样你的点子也是受别人的启发，与完全创新是相悖的。所以如果你打算做真的非同寻常的东西出来，就赶快忘掉这一部分！

• 保证事物之间的联系
  如果你打算做一些特别特别特立独行的事，先问问自己“真的有必要吗?”，“这样说得过去么？”，“和品牌诉求符合吗？”…… 如果答案是肯定的，再采取行动！
• 忘掉所有已知事物！
  好吧其实也并不是所有，基本原则还是要的。话说回来，也没必要从全新的想法里面寻找灵感，因为那样很容易误入歧途。
• 保证品质和水准
  基本上我觉得如果你的新想法足够好，判断品质究竟如何对你来说应该很容易。

对于高品质设计你有什么看法？

让一项设计因高品质脱颖而出，实在涉及到太多方面。我只能说我列出了一些基本要点。所以我希望能听听您对这一问题有何高见？在判断一件网页设计作品是否显示出高品质时，你最关注的是什么呢？

推荐阅读(均为中文译文)：

• 对于设计细节中的光影效果，你还可以参考：《五个为你的设计添加光影效果的简单技巧》
• 与此文类似，但更加简洁的分析和技巧：《十个简单好用的设计技巧 》
• 关于建立作品集网站的更多注意事项：《构建完美作品集网站十步走》
• 更多漂亮的博客页面设计鉴赏：《优雅的原创博客，一场视觉盛宴》

关于作者与译者

原文出自WeFunction，作者是 liam，初发表于2009年4月13日。
译文由笨活儿翻译。原始网址：http://blog.benhuoer.com/2009/05/quality-within-web-design/ 。

转载请保留出处。

©2009 笨活儿 | 永久链接 | 已经有20条评论了 | 推荐到豆瓣

现实生活中无时无处不存在着光照和阴影。你看到的每样东西都是通过光影反射形成它的形象。视觉上，光影帮助我们辨别事物，认知他们的材质、尺度和透视。

所以如果要让我们的网页设计更加自然、有动感且真实直观，正确理解光影效果就变得非常重要。以下是助你更好利用光影的五个技巧，好好运用它们，能让你的设计更加精致，从众多的页面中脱颖而出。

光照与阴影的原理快速剖析

下图中，光源来自左方。高光是光照最强的部分，阴影位于距离光源最远的地方。光影的存在帮助我们感知有关物体表面材质的大量信息。

不过你可能要问，这和网页设计有什么关系？

如果你打算创造丰富、有质感的界面和网站，光影能助你一臂之力。如同许多传统艺术家们在绘画上对光照的运用，你也可以利用光照给你的设计以深度和视觉趣味。

1. 使用光源

应该说利用光照时了解光源在那里是最为重要的基本问题。光源位置决定了高光和阴影的位置（不过在网页设计中你能打破这些规则）。在Photoshop中，你可以利用图层样式中的“全局光照”保证你创造的所有光影效果的光源都在一个位置。

控制好光源位置能够为你的页面设计创造独特气氛（即使仅仅是一个简单的线性或径向渐变也能达到效果）。光影效果还能引导视觉中心的转移。

网络上的例子

Campaign Monitor 使用发散光源，创造出一种日出效果。

Icebrrg 利用光照使页面潜入水下。

Mike Precious 使用了不止一个光源，增加了视觉趣味，而且各处都使用的是桌面台灯的光照效果。

Deaxon 在logo后有一个微弱的光源，使页面的焦点集中在了logo上。

2. 渐变

现实世界中，没有什么事物总是平坦色调。光影附着在一切事物上。利用渐变是创造深度和真实性的好方法。

运用渐变的关键是不要做得太过了。在Photoshop里绘制渐变时，请在图层样式里做渐变叠加，这样能保证你的渐变的可编辑性，而且随着图层的缩放，渐变也能跟着无损地缩放。

网络上的例子

nclud’的网站使用微弱但有效的渐变，用以区分和组织内容。

一眼看去， CSS Ninjas 似乎使用的是平直颜色。不过其实每个色彩区域都有微弱的渐变，创造出迷人的材质效果。

3. 高光

高光能平衡阴影，应该位于物体靠近光源的边缘。高光大部分时候都被忽视了，因为如果用得好的话，你几乎感觉不到它的存在。不过并不是所有情景都适合高光的存在，一个细微的高光就能造成物体表面抛光度的巨大不同。高光越“尖锐”，物体表面的光泽感就越强。

要鉴赏高光，我们需要放大这些细节。做高光设计的时候，把你的设计稿放大一倍以上是个好办法，因为按原始比例显示的时候，你可能都没法弄清自己在捣鼓些什么。

网络上的例子

Icon Dock和Newism 都在页面上边缘使用了半透明的白色制造高光效果。虽然很不起眼，但是却为设计提供了强烈的光泽感。

苹果公司的网站 大家应该都很熟悉。不过你大概没有注意到导航菜单底部的细微高光。正是这一高光，给与菜单以凸出感。

4. 基本阴影

同渐变一样，投影也被网页设计师们广泛运用。当正确使用时，投影的确能为设计增加视觉深度和质感。关键还是不要做的过度或者滥用。

阴影深度取决于光照方向和强度，以及物体和投影面的距离。光照越强，阴影越锐利越暗；光照越弱，投影也就越弱。

网络上的例子

网络上关于投影的例子实在太多了。

LinkedIn在边栏底部添加了极为细微的投影，创造出深度感。

Google — 可能是互联网上最难设计的页面了 — 仍然在搜索页上使用了细微的投影。

5. 高级阴影

要赋予物体立体感，除了简单的投影，你还有很多选择。长阴影能极大地改变页面中物体的空间关系。

下面的例子中，同样的可乐罐，被赋予不同的阴影和暗部之后，整个空间位置就显得完全不一样了。

网络上的例子

Emotions by Mike 聪明地运用了阴影（以及光照），硬是把平面页面转换成了一个地板。

Superkix 使用投影，让运动鞋漂浮于页面之上。当你缩放页面时，投影还能移动，就像光源也在转移一样。

Sofa 在纯白背景上，通过极佳的光影运用，生生造出了一个地板。

更多资源

以下内容为英文：

• Photoshop Cafe
  在Photoshop中创建光影的教程
• Advanced Shadow Techniques
  在Photoshop处理阴影
• PSDtop Blog
  理解投影
• Peachpit
  在Photoshop处理光影
• Aviva
  创建真实阴影
• PSDtuts
  用光影赋予文字以生命
• Build Internet
  光照与阴影：Photoshop中的高级渐变
• PSDtuts
  用简便制作光影效果… 以及一个咖啡杯！

另外推荐：35个极佳运用光影效果的网站（英文）

关于作者

Rob Morris是在日本工作的澳大利亚设计师。作为自由设计师，他的别名是 Digitalmash，客户遍及世界各地。你可以在 Twitter上关注他的冒险。

关于译者及版权

译者笨活儿，以学英语为目的为大家翻译优秀的外国教程。你可以订阅我博客，或者加我饭否。

本文遵循CC协议 [署名-非商业性使用-相同方式共享] 原则。转载请注明原文以及译文的原始出处。

(al)

©2009 笨活儿 | 永久链接 | 已经有8条评论了 | 推荐到豆瓣

下面的35个博客都有着令人难以忘怀的布局，优雅的外观设计，良好的可用性。不用一言一语即显示出出其高雅和美丽。通过小心翼翼的规划和精打细算的细心布置，这些布局为Web设计界带来他们独一无二的创意。

或许你可以通过享用这场盛宴，获得灵感，从而创造你自己的视觉魔法。

你可能也会愿意参考一下以前的文章：

• 50个漂亮的博客页面

原创博客的优雅设计

Istok Pavlovic
典雅的水彩效果，细节非常丰富。注意导航菜单，RSS按钮和边栏的标题。页脚设计也不可思议地美妙！

Chris Guillebeau
这个博客也有这巧妙的细节。

Hicks Design
此博客采用固定导航，滚动内容的做法。静谧的主色调中采用了明亮的橘红色，为整个设计带来生机，并显得协调统一。

Ma.tt
非常漂亮的亮光图案。屏幕上充满了梦幻般的图像，简洁的导航条引领读者进入一场梦幻世界的探索之旅。

Newtoyork.com
非常具有独创性的布局设计。大留白运用的典范。独树一帜的的评论区位置设计。

Ayakaito
安静的色彩，似乎在叙述过去的故事。整个设计给人以舒服的怀旧感。顶部的插画非常漂亮，简洁的导航放置到了边栏，让这个博客与众不同。

Alpha Aesthetica
基于网格设计的优雅布局，字体设计让人惊叹。

Hugs for Monsters
作者的个人作品被用到了页面中，带来这令人惊艳的设计。布局简洁而艺术感强。更令人欢喜的是，不仅视觉上给人以享受，作者还利用了自己的幽默细胞娱乐读者。

Outlaw Design Blog
大胆的用色，高超的绘图水准，为这个博客带来令人惊艳的效果。暖色的运用和漂亮的背景结合，让人感受到博主的热情好客。

Le Bloe
蓝色的阴影，三原色水彩溅洒，构成了极具艺术性的效果。内容展示整洁有序，视觉效果也很惊艳。

Typographica
字体们的庆功宴。巧妙的内容组织，简单的导航，让读者深深陷入字体简单的美妙之中。

Agami Creative
水彩效果的巅峰之作。细心挑选的颜色，绘图技巧娴熟。

retinart
Grungy效果，漂亮的字体选择，对设计元素极具个性地扭曲放置。

Belvoir George
很有视觉冲击力的博客。字体设计极赞。这一设计完美地利用了复杂而引人注目的背景。

Stephen Caver
简洁设计的典范。主导航就是焦点，完全没有分散人注意力的元素。

Amour Chaleur
漂亮的原创插画。极具创意地发挥了单栏布局的长处。

Neural Net Effect
精妙的设计。有趣的页面架构。优秀的图片运用。漂亮的字体。简单，干净，优雅。

Bert Timmermans
整洁紧凑。这个博客借用了书本的形式组织内容。导航放在书签的尾端，鼠标滑过时会优雅地跳出来。

Good Little Wee Blog
简单的形状，配上卡通图案，让这个博客设计令人难忘。内容组织简单而有逻辑，让导航异常简单易用。

Forgetfoo
简单，整洁，极简主义，漂亮。

Web Science Man
色彩和绘图很强势，但是一点都不过。顶部的导航优雅易用，使这个博客显得有趣而极具可用性。

Talking of Design
一眼就能看出这个博客的设计师是位艺术家。logo那儿精妙的小细节动画，给设计增加了趣味，却并不带来混乱。

Kris Colvin
非常优秀的内容组织，略带grungy的感觉。顶部的插画十分有趣，吸引访客的注意力。正文内容紧紧跟上，不留给读者无聊的余地。

Lyrical Media
大胆而简单的设计。好用的导航，给站点内容一个直观的体现。虽然大面积的、占据强势地位的图片在优雅的设计中并不多见，这一设计的布局看起来也十分轻松。

The Design Superhero
大胆的色彩，简单的方块，将内容直观地展示给访客。内容组织整洁有序，没有分散注意力的无用元素。

Visual Nightmare
个性的博客设计，采用了grunge元素，简单但独特的结构。

Kimberly Coles
三色博客主题，手绘的设计元素，水彩效果背景。

Chengis.me
大胆，明亮，漂亮，彻头彻尾的简洁。鼠标滑过图片的时候，菜单平滑地显示，吸引访客品尝美味的内容。

David Torondel
“传统”的双栏布局。运用了很多插画，非常可爱。

Escaping the Word Cage
铁丝网从来没有这么漂亮过。奇妙的软硬结合，给这个博客带来不一样的美丽。

Fubiz
色彩对比度和意外的内容组织，给访客带来的不仅有视觉享受，还有实用的导航。内容整洁地展示在简单的方框中，让用户获得轻松的浏览体验。

Bert Timmermans
明亮的用色，背景和文字间的高对比，充满想象力的字体运用，让这个博客即使没有图片也看起来很漂亮。所以作者在他的简介里说自己喜欢色彩和字体实在是自有道理。

Blogless
极简主义 + 非凡的字体 + 单栏设计 =  简单 + 优雅

特供

Pixelpretation.com
这样的页脚实在让人难以忘怀。

Northern Classics
… 这位也是……

更多资源

• 45 Excellent Blog Designs
• 30 More Excellent Blog Designs
• 45 More Excellent Blog Designs
• Now More Than Ever: 50 More Excellent Blog Designs

关于作者

Gerri Elder 是自由作家，Web开发师，社会媒体狂人。你可以在Twitter以及Digg上找到她。

关于译者以及版权

本文由笨活儿翻译。 原文来自Smashing Magazine。转载请务必保留译者和原始出处。

(al)

最后再来囧一下，我这儿快成SM中文版了…… 目前还有一个关于Sprite的文章在翻译计划中。因为最近在做的博客模板里就想用到Sprite技术。希望翻译这篇文章来了解多一点。

©2009 笨活儿 | 永久链接 | 已经有9条评论了 | 推荐到豆瓣

简单的效果和技巧是建造当今设计的基石。比方说，如果你都不知道如何正确选择颜色和文字效果，灿烂的 星光效果又能有什么用？

本着“少就是多”的理念，我们为你精选了十个简单好用的设计技巧 ，它们能大大提升你设计的专业性和感染力。

更多技巧可参阅(英文)：

• 12 Useful Techniques For Good User Interface Design
• Grid-Based Design: Six Creative Column Techniques

基础先行。 学会走之前要先学会爬，让我们从最基础的简单有效设计的概念开始。

1. 增加对比

很可惜，添加额外的对比是最被忽视和弃用的技巧之一。

Joost de Valk 采用了细的高对比度边线，让访客能更容易区分页面的不同区域。在上图中放大了的部分，你可以看到，大多数时候这种对比只是一条1像素的高亮线挨着1像素的暗线。

话说回来，这个页面上的“More”和“Go”按钮与周围的对比度太小，即使你刻意在找也很容易被忽略掉。

WordPress 为页面中最受欢迎的链接 “Download(下载)” 使用了对比色。 这种红色在冷灰色调的页面中自己跳了出来。但这红色在明度方面有所收敛，避免了影响页面整体效果。

如果你对于该不该使用对比犹豫不决，就把这一决定过程当做是化妆。你要做的不是让人们大吼“看呐，对比色！”，你需要的是自然而然的吸引他们注意页面中重要的内容，高亮出已经存在的重点。

2. 渐变

技术的发展为所有想使用渐变的人提供了各种创造渐变的工具。但渐变真的很好么？

Media Temple 网站的每一个页面都使用了渐变，不过其渐变使用的节制和精妙才是设计成功的关键。logo，大标题，按钮和背景都有细微的或者镜像的渐变，以强调内容。最复杂的渐变用在了那些简单的120像素宽的按钮(子页面中的“ACTIVATE”和“LEARN MORE”)上，因为它们是需要访客注意的重点。

Commission Junction的渐变运用远没有Media Temple的细致，而且采用了过于丰富的渐变类型：

1. 从黑色到灰色的水平线性渐变，位于页面顶部
2. 页眉处的绿色径向渐变
3. 登陆框背景的“CJ” 标志上方模糊的斜向渐变
4. 输入框背景中淡淡的垂直线性渐变
5. 导航条背景的垂直渐变
6. Webinar广告中明亮的线性渐变
7. 另一个垂直线性减弱，用在了大标题处

这种设计有点冒险，大部分渐变式有用的，但还是存在一些问题。最突出的一点是，设计丧失了一致性。同选择可辨性强的色彩组合一样的道理，设计师也需要为每个项目选择合适的渐变组合。

例如，大的水平渐变(1)引导眼睛横向注视页面。这本没有什么问题，但就在此渐变的正下方又出现了把视线吸引到中心的径向渐变(2)和把视线引导到右下角的斜向渐变(3)。这会给访客造成困扰，起伏变化的视觉流（visual flow）也削弱了可读性。

使用渐变时，保证好的视觉流很重要：请保守而精致地使用渐变。最重要的一点，仅当对整体设计有帮助时才使用渐变。

3. 色彩

合理使用颜色很有挑战性。在挑选完美的色彩组合和为各种色调找到合适位置的过程中，时间哗啦啦地就流走了。

Realmac Software 大胆地在404页面采用了全色系渐变。这样做有以下原因：首先，Realmac已经将页面背景设成了中性灰色，更重要的是，页面其余部分没有明显的色彩的，除了蓝色的文字链接和一些零星的毫无冲击力的色彩。

全谱色彩渐变完美地吸引了人们的注意。它保持了简单性，有着灰色的配合，也不会让眼睛感到不适。但在一项设计中采用四种或五种以上的颜色通常都显得太过了。除非你非常确信你的设计需要那么多颜色，还是采用简单的四色组合比较好。

当你在设计中克制而明智地使用色彩时，吸引访客对重要项目的注意力就变得相当容易。在 Interspire的 “About Us（关于我们）” 页面中，访客的注意力被迅速吸引到页面顶部LOGO那红色的一点上，然后是标题，然后是页面右边的LOGO照片。

在字体上花点功夫。字体的艺术博大精深，远远超出我们大部分人的想象。字体中超出x高度部分（ascenders ）和边位（side bearings）处的创作空间巨大，你可以在此处添加一些有趣的细节。不过还是运用接下来的一些技巧更重要。

4. 字符间距

字符间距，或者称为字距调整 (kerning)，能对标题、段落、logo等文字相关内容造成巨大影响。其远不止每个字符之间的距离那么简单。

Krop’s 的新作品集创建器，在处理文字的时候，十分吝啬空间。该网站上大部分基于文字的图片中的字符间距都很小，使叙述内容显得更为简洁有力。

上图表现了字符间距对你的设计可能产生的负面影响。小而无抗锯齿的字体如果没有适当的字符间距，将更加难以阅读。

如果你以前没有在意，试试现在对你设计中的字符间距做一些调整，你会为调整后带来的不同而震惊。推荐图片中使用“Myriad Pro” 字体，HTML文字中使用“Trebuchet MS”字体进行尝试。

5. 大小写

改变字母大小写不过是按一下Shift或者Caps Lock键的功夫，但很少有设计师好好利用了这一技巧的潜能。

MSNBC’s 对大小写的使用很值得参考。logo是全小写的，页面其他部分的字体大小写更有着微妙的变化。页面上方的大横幅通告，一般用大写字母写着“WATCH LIVE（观看直播）”或者 “BREAKING NEWS（最新消息）” 。这些通告都是非常重要的内容，这种方式很好地吸引了访客的注意。

另外，采用纯大写的按钮，让他们的小按钮足够清楚易读。 在这种5像素高的应用里，小写字母，如a, m, x，可能只有2到3像素高，非常难以辨认。

继续关注新闻站点， CNN 在字体大小写上缺少变化来平衡页面。导航条是全部大写的，但页面中的其余部分则很传统地几乎全部采用了首字母大写。

6. 消锯齿

虽然技术上比较复杂，消锯齿仍可以归纳为“使边缘平滑”，在各种设计中都有运用到。在Web设计的世界里，是否消锯齿部分决定于文字是要出现在图片还是HTML文字中。另有一个让事情变得复杂的情况，部分浏览器或操作系统会自动在一定程度上消锯齿，但总的来说，HTML文字是不具有抗锯齿功能的。

Stockxpert 非常聪明地在广告页面中部分使用消锯齿，而部分文字不消锯齿。大部分文字都有平滑边缘，但页面顶部和底部的小字则保留了锯齿。同上面说的MSNBC按钮一个道理，5像素高的文字需要有尽量锐利的边缘来保持可读性。这种情况中的模糊或平滑边缘会让眼睛很累，最终放弃阅读。

混搭是王道！ 完美的东西一般都显得很假或者乏味。树木的枝叶并不完全对称；任何形式的照明都不会产生平衡的影子；照相机镜头有时会让部分景物模糊，以及产生镜头光晕…… 有些设计需要干净的人造风格，另一些则需要混搭一点~

7. 制造瑕疵

任何人都能在使用一台电脑十分钟后告诉你它并不完美。但在设计过程中，电脑可以为你创造完美的结果。在你最喜欢的设计工具中使用直线工具时，只需要采用默认设置，你就能画出特定两点间的完美直线。

这个怀旧Ace牌的教程提供了很多步骤来让这张牌看起来不完美。不得不说，这一过程并不简单。不过其中的概念十分简单——让事物显得老旧，创造不完美，给你的作品以独特的肌理。

这张蝴蝶照片看起来就像是20世纪中期拍摄的，另一个不完美的例子。其实它是用数码相机拍摄的，使用了一些滤镜和颜色调整，赋予其怀旧效果。

为设计创造艺术风格化的瑕疵比你想象中要容易。你只需要将素材变成灰色或褐色，再添加一点细节……

8. 模糊

如果你还在为如何让内容突出、消隐而一筹莫展，请试试各种不同的模糊方式。通过模糊前景、模糊背景，甚至整个设计，你可以动态地增加你的项目的冲击力。模糊的焦点，需要至少部分地相关联。通过模糊一个元素，焦点被带向另一内容。

Ios V2 壁纸使用简单的模糊创造平静的、生机勃勃的感官。一些明锐的线条用来形成图像的焦点，而模糊的背景对于壁纸的整体效果至关重要。

模糊亦可形成深度和层次覆盖的感觉。 Windows Vista的Aero效果将窗口后面的内容模糊掉，形成很酷的漫反射玻璃效果。使用高斯模糊 即可创造类似效果。

9. 对齐

即使我们强调保证整洁和直线，你仍然有需要为你的设计添加一些额外趣味。

这个示例标志中的“logo”几个字母被提到了右上角。更改设计元素的对齐方式可以让它们更容易被记住，更容易被人们讨论起，结果是让整个设计更高效。

这一技巧并不只是用于文字。部分设计师在思考一项设计概念时会利用模板化内容或者个人工作习惯。这可以加快给客户回应的速度，但也经常会限制了创意——尤其是在内容对齐方面。

Icon Designer通过旋转某些元素让自己与众不同。这一页面很容易成为稀松平常的无聊之作，但简单的几个旋转让它趣味十足。

现在的网页大部分是700到900像素宽，一般在浏览器中居中，并且是方盒子式的构造。大部分案例中，这样做使内容安排有序，但也有一些站点，需要设计师考虑跳出盒子，创造特色。

接下来，最重要的是…

10. 消除累赘

这可能是最重要也最被忽视的设计技巧了。去掉不必要的部分，也是最难做的部分之一。

通过去掉所有不必要的部分， CSS Remix只留下了必要部分，可以同时展示7个大广告 (128 * 96 像素),，53个favico广告 (16 *16 像素) ，以及一大群网站（56个）——全部在页面上方1000像素内！甚至网站的logo都被削减到了53乘 7 像素。

生活中也是如此，好事做得太好就不是一件好事了。上面的logo太小以至于难以辨认，特色站点也难以同彼此区分开来。奇怪的是，页面顶部的Twitter feed，相对于站点logo和导航来，又过分突出。

关于作者

Mark Praschan是一位具有将近十年经验的网页设计师，Web开发师，Web项目经理人。 他拥有并负责运行 Arrival Media . You can follow Mark on Twitter as well.

(al)

©2009 笨活儿 | 永久链接 | 已经有4条评论了 | 推荐到豆瓣

JavaScript库的灵活性给我们的工作提供方便，但有利也有弊——比如说JavaScript文件过大的问题。尽管放弃这些著名的JavaScript库能显示你的聪明才智，但你可能还是会愿意采用一些体积小巧、专注于特定任务的JavaScript库。

以下是40个帮助你达到特定目的的独立JavaScript库。 网上能用的当然不只这些，但每位网页设计师和程序员应该都能在这里有所收获。

1. 表单

wForms
wForms 是一个开源的、 无入侵的(unobstrusive)^注*代码库，能够简化大部分与表单相关的常用JavaScript函数。 它能对表单的用户输入值进行验证，只需为表单元素添加一个特定的类即可使用。另外，wForms 还具有强大的表单同步（例如“全选/全不选”）和条件表单（如，当x被选择则显示y）功能。

注* 这个词也被译为“不唐突”，“有的放矢”等。意即JavaScript代码和HTML代码分离，同时也对不同版本浏览器选择性地做出反应，以提高用户体验。更多解释，请参照“为之漫笔”。译者认为“无入侵”贴合英文原文，作为术语更加简洁易懂，应该成为这个词的通用译法。

Validanguage
Validanguage 是一个无入侵的 JavaScript表单验证框架。 它有一个继承逻辑，可以全局定义，也可以对每个表单或每个元素分别定义。 利用作者提供的两个API，以及诸如综合的AJAX支持(integrated AJAX support)、缓存和调用函数等特性，该框架可以提供强健的(robust)验证体验。两个API用以高级设置，分别是加在注释里的像HTML语言的 API和基于JavaScript对象的API。

LiveValidation
LiveValidation是一个轻量级的JavaScript库，提供一系列验证函数。除了经典验证法，此库还具有实时验证(live validation)特性，能根据你键入的文字实时控制特定区域。 Ruby on Rails的开发者会发现LiveValidation异常好用，因为二者的命名规范和参数设置非常相似。虽然它是独立库，不过也有一个Prototype版^注*。

注* 也就是依赖于Prototype库，但是本身代码更简洁的版本

yav
一个功能强大、可扩展、使用灵活的表单验证代码库。yav可处理多种情况，从日期、email、整数之类的基本验证到掩码文本框和自定义正则表达式之类的高级应用，都得心应手。该库内建AJAX支持，并且可以轻易在每个对象层自定义错误显示信息。

qForms
处理表单的完全解决方案。为开发者提供诸如多样验证规则，阻止多次提交，锁定/禁用域等特性。

formreform
不用表格来实现多栏布局通常都很有挑战性。这个小巧的代码库能够把一个简单表单转换成一栏、两栏或四栏格式化布局的表单。利用formreform能自动让表单样式适应任何设计。

2. 动画

$fx()
$fx() 是一个用户为HTML元素添加动画效果的轻量级代码库。利用此库，你可以指定在一定时间内改变任何CSS属性。对于复杂动画，你可以合并效果，给各效果分组，让它们链式反应或者同时发生。你还可以为每一步动画设定不同的回调动作，进行更深入的自定义。

JSTweener
补间动画的JavaScript库。它的API和著名的ActionScript补间动画引擎 Tweener 相似。你可以调用动画时间，定义形状变换方式和延迟。在几乎任何时间点（如onStart – 开始时, onComplete -完成时, onUpdate – 更新时），你都可以引发新动作。

Facebook Animation
用于创建基于CSS的自定义动画的强大代码库。利用一两行Facebook Animation，你就能改善用户界面。本代码库的语法遵循FBJS（在Facebook实用工具中使用的代码库），一旦学会，你也就具备了创建Facebook实用工具的能力！

FX
一个轻量级代码库，拥有和YUI类似的使用句法。FX可以为几乎所有CSS属性创建补间动画。支持颜色和滚动动画。你只需要设计任意对象，任意属性的起始值和结束值就够了。

3. 视觉化和图像特效

JS charts
JS charts 可以输出柱状图，饼图和曲线图。只需从一个XML文件或JavaScript数组里调用数据，它就能提供极佳的易用性。图表被输出为png图像文件。该库支持大部分流行的浏览器。

Canvas 3D JS Library (C3DL)
C3DL让编写3D应用更加容易。它提供一组算法、场景和3D对象类，对于想在浏览器里开发3D内容，但是对3D图像的深层算法不甚了了的程序员真是不小的福音。

Processing.js
这个JavaScript库指向 Processing 语言 （一个用于图像、动画和交互编程的语言）。它有丰富的特性用于创建2D输出，提供形状/图像绘制方法、颜色处理、字体、对象、算法函数等等。

Rapha?l
一个极赞的代码库，简化在网页中使用矢量图形的工作。Rapha?l 利用SVG和VML来创建图像，并能为这些图像绑定动作处理器。该库功能强大，包括旋转、动画、缩放和绘制曲线、矩形、圆形等。

ImageFX
可以为图像添加特效，例如模糊、锐化、浮雕、变亮等等。ImageFX使用画布元素来创建效果。兼容所有主流浏览器（你可以在其页面看到兼容性列表）。此库简单易用，只需要在网页中插入.js文件然后用一行代码调用就够了。

Pixastic
Pixastic 使用HTML5的画布对象，此对象可以直接处理像素级数据。支持的效果包括减淡和去色、反相、翻转、亮度和对比度调节、色相和饱和度、浮雕、模糊等等等等。由于画布对象相对较新，各个浏览器对这一JavaScript库的支持程度不尽相同。

Reflection.js
自动创建倒影效果的无侵入JavaScript库。倒影的高度和透明度可以自定义。使用该库就像给图像添加一个“类”一样简单。在所有主流浏览器中都能正常工作，文件大小不过5 KB。

4. 数据库

Taffy DB
可以作为浏览器中的SQL数据库来使用的JavaScript，也可以看做是一个高级的“数组管理器”。在AJAX化的Web应用中，它可以工作在数据库层。你可以创建、读取、编辑和删除数据，也可以使用循环、归类以及各种高级查询方式。

ActiveRecord.js
此库支持Google Gears和Chrome，Aptana Jaxer，Adobe AIR ，以及任何支持W3C HTML5 SQL规范的平台（现在Webkit和iPhone也支持了）。它使在JavaScript利用数据库变得简单。使用ActiveRecord.js, 你能自动创建数据表、验证和同步数据等等。

5. 字符串和数学函数

Date.js
和日期打交道总是很容易把人搞昏掉。如此多的点、斜杠和格式。Datejs以令人耳目一新的方式提供或简单或复杂的日期函数。它可以处理如下格式的日期：“Next thursday”(下星期四), “+2 years”(两年后) 以及诸如2009.01.08, 12/6/2001的所有格式。

译注：此函数很有用啊，哪位朋友来把它汉化成可以支持中文就好了。

Sylvester
此JavaScript库可以轻松处理矢量和矩阵。有了它你就不用被一串串循环和大量数组搅得头昏脑胀了。此库包含模数化矢量和任意维度的矩阵的类，从而可以计算无限直线的模数和3D空间里的平面。

译注：太高级了，直冒冷汗“` -_-||

Pretty Date
一个聪明的JavaScript解决方案，让过去一个月内的日期以更加漂亮和用户友好的方式显示。它能让日期以距离现在多久的方式显示，如“3天以前”，“昨天”。

XRegExp
正则表达式可以在JavaScript里通过RegExp对象加以利用。 XRegExp 能使正则表达式变得更加强大，它提供一些在将来的浏览器才会实现的特性（据 ECMAScript 4 – ES4 的开发愿景）。使用该库，RegExp对象可以被缓存和再利用，还能为已经存在的RegExp对象添加修改器等等。

JavaScript URL Library
一个用与方便处理URLs的JavaScript库。如果需要，它可以控制到将URL内每一个部分当做字符串来处理。这一URL代码库刚出炉不久，但已能像刚才所提一样工作。

6. 字体

typeface.js
一个用以在网页上使用任意字体的代码库。与流行的解决方案（如sIFR 和 FLIR）不同，typeface.js 并不需要Flash，是100%的JavaScript应用。要使用任意字体，只需上传其字体文件到一个 基于网页的字体生成器，然后下载渲染过的JavaScript文件，把它添加到你的网页中即可。

Cufón
与typeface.js十分相似， Cufón 也是一个让你在网页中使用TrueType字体的代码库。同样，它也使用一个生成器来将字体文件转换成VML图像。只需在网页中插入generated .js文件，你即可像使用普通字体一样使用你指定的字体。

译注：这两个工具对于中文网页不太实用…… (⊙_⊙)

7. 调试与记录

Blackbird
在JavaScript开发过程中，经常会用到alert()函数来添加断点。Blackbird 提供一个风格化的控制台，用以记录、查看和过滤JavaScript中的消息，如此即可消除在每个alert()的停顿，并且更好地分析它们，从而加快开发进程。

NitobiBug
基于浏览器的，跨浏览器 JavaScript 对象记录和检测组件。通过在你的代码中插入规则（和JavaScript对象的用法类似），你可以轻易区别简单类型，如字符串、布尔值和数值，以及复杂元素，如错误信息和JavaScript对象。

Firebug Lite
Firebug，大概是世界上最好的JavaScript调试工具，可惜只能在Firefox中使用。要在所有浏览器中拥有一个类似工具，向你的网页添加这个Firebug Lite .js文件吧，面对你的是你所熟悉的功能和界面。

8. 其他

swfobject
swfobject 是最流行的，扩展性最好的插入Flash影片的方式。此库符合Web标准，生成可以通过验证的标记，能够自动检测用户的Flash播放器版本，如果版本不匹配，它还允许你向用户显示代替内容。你可以看一看“为什么应该使用swfobject”这篇文章，写得不错。

sorttable and dragtable
不管你喜不喜欢，表格仍然是展示数据的最佳方式。不过表格还可以更好用： sorttable 让表格数据可以排序，升序降序均可。你指向为添加class=”sortable” 属性。你还可以排除某些特定的栏，让他们不自动排序，以及指定升序或者降序哪一个为默认值。dragtable 使表格的行列变得可拖动。在网页中插入此库后，同样，给表格添加一个class=”dragtable”即可。如果需要两个功能都用，只需在网页中包含同时两个库，然后添加class=”sortable dragtable” 。

DD_roundies and DD_belatedPNG
DD_roundies 是一个极佳的不利用图片创建圆角的JavaScript解决方案。它处理的重点在IE，通过使用VML来解决问题。其他浏览器被忽略，因为他们支持CSS的 border-radius 属性。(译注：Really?)

DD_belatedPNG为臭名昭著的IE6 PNG问题提供了一个可自定义的解决办法。不论PNG图像是用于“src”或是“background-image”中， DD_belatedPNG 都能把它解决掉。与其他解决方案不同， “background-position” 和 “background-repeat” 属性也能正常工作！

译注：这个太实用啦！O(∩_∩)O 哈哈~

Custom JavaScript Dialog Boxes
用于创建自定义对话框的轻量级（约 4.5 KB）代码库。四种对话框可用： alerts(出错), warnings(警告), prompts(提示), success(成功)。利用一个简单的函数，你可以自定义对话框的标题，内容和显示时间。

GameJS
GameJS 是一个JavaScript版本的 Microsoft’s XNA 游戏框架， 使用 “画布” 作为渲染机制。JavaScript不是编写游戏的最佳平台。不过如果是那些帧速要求较低的游戏，而你又是一个JavaScript开发者，何乐而不为？ 此库包含一些控制游戏元素、屏幕显示和键盘操作的方便好用的类。

Shortcuts.js
自从Google Reader和Gmail之后，Web应用里的键盘快捷键变得越来越流行，因为他们大大提升了易用性。Shorcuts.js提供更为方便地处理键盘快捷键的函数。 使用该库，创建快捷键，然后在按下键盘的同时就运行函数成为更易实现的可能。

Mapstraction
几个不同的地图供应商都提供了各自不同的API。如果你想在供应商之间转换（比如说从Google Map转到MapQuest），则需要重写一些代码。Mapstraction就是用来帮你解决这个问题的。它提供一个通用 API ，帮你在大多数流行的地图供应商之间转换。只需更新一行代码，即可转换完毕。

Amberjack
一个小巧的JavaScript库，为你的网站添加上漂亮的导游信息。 一旦启用，一个模式化的内容框就能像到导游一样介绍您的站点，框内可以添加任意你想要的内容。导游内容的代码可以手工编写，也可以用线上工具自动生成。当然，你可以通过编写css或者利用即刻可用的主题来使导游信息符合内容框的样式。

JsLoad
JavaScript库的远程载入API。JsLoad这个简单的API能够让你从Google的服务器上导入大体积JavaScript文件。JsLoad能自动载入任何版本代码库的依赖文件。

关于作者

Umut Muhaddisoglu是一位网页设计师，同时也是程序员。他维护网站WebResourcesDepot，一个每天提供免费网页设计和开发资源的网志。要联系作者，你可以在Twitter上关注他。

(完)

©原文 40 Useful JavaScript Libraries 来自Smashing Magazine ，作者为 Umut Muhaddisoglu。译者笨活儿保留译文版权，转载请保留出处和此版权信息。欢迎留言指正错误。

©2009 笨活儿 | 永久链接 | 板凳还在 | 推荐到豆瓣

个人作品集网站的一切围绕推销自己展开。你是一个品牌，你的名字就是品牌名。如果你不建立自己的品牌形象，就没人会了解你这个品牌；如果你是名网页设计师、程序员、网评家、游戏作者或者其他创意产业人员，拥有一个好的作品集网站是树立品牌形象的基本要求。

你可能会对下列文章感兴趣（英文，如有需要可留言让我翻译）：

• Creating a successful online portfolio(造一个成功的在线作品集)
• 50 beautiful and creative portfolio websites(50个极富创意的漂亮作品集网站)

一个好的个人作品集网站需要些什么？

1. 标志Logo

通常用户最先注意的应该是你的logo。我们的阅读习惯是从左到右，从上到下，所以请把logo放在网页左上角，这样可以方便用户立刻认出谁是该网站的主人。

logo不一定要是你的名字，但如果要在网上推广你自己，用名字做logo是个不错的选择。另外，请务必保持logo链接至首页。这是大部分用户的习惯要求。

Mohit 使用了CSS Jockey这个别名。

Jason Reed 采用自己名字的手写体作为logo。

2. 宣传词(tagline)

一旦用户知道了网站的主人是谁，就会想知道他到底是干什么的。此刻即是宣传词的用武之时。宣传词应该短小精悍，并且概括了你的工作。

构思宣传词时先问自己：

• 你是的职业是？设计师？写手？程序员？
• 你做些什么事？设计网站？开发游戏？
• 你来自哪里？国家？城市？? Country? City?
• 你是自由从业人员还是属于某个工作室？或者你还在找工作？

Sarah Longnecker 说得很清楚，她的工作是编辑视频并且擅长于此。

3. 作品集

我们毕竟是建立个人作品集，所以你的作品决定了这个站点的有趣与否。人们希望看到你以前的作品，才好对你的能力做出判断。退一步说，大部分访都会希望知道你过去都干了些啥。

根据你所从事的工作，作品集需包含大尺寸的高质量图片，清晰地呈献给用户。介绍作品时务必包括一个相关项目在线版本的链接，并记得截屏图也应该要链到此项目的在线版本（另一个大部分人的习惯要求）。给每个项目都添加简短介绍，包括你在此项目中采用的与众不同的技巧。

让客户为你做能力见证永远不会是个坏主意。访客们也有可能会对项目的开发步骤，以及你如何达到最终结果感兴趣。

Leigh Taylor 为他以前的工作成果展示了优质的清晰截屏图，谈到了开发过程中使用的软件。

4. 服务

宣传词归纳了你的工作，但你还是需要对你能提供的服务做更多说明。不要企图潜在客户会根据你的作品集猜出你是做什么的。恐怕你也不想让他们去猜你到底能不能提供某项服务。

说清楚，分条列举：网页设计，开发，视频，文案，品牌推广，等等。 或许你想更专攻些：企业品牌推广，教堂网站设计，Flash条幅广告……

Chris Spooner 在网页中和页脚处都说清楚了自己能够提供的服务。.

5. 关于我

一切都与你有关。让大家看到面具（也就是你的网站）背后的人吧。分享你的背景，你来自何方，进入该行业多久了，等等。 提供越多细节，你的用户越容易和你建立联系和产生信任感。

如果面对镜头不会害羞，那就贴一张自己的相片吧。这能让潜在客户更加清楚自己在和谁打交道，更放心。

大胆秀出你曾经获得的荣誉（各种奖项或者媒体采访之类）。你需要让人们知道你很擅长你的工作。

Chikezie Ejiasi 贴出了自己的照片，甚至还告诉我们怎么念他的名字.

6. 联系信息

这是作品集网站最重要的部分，却通常被隐藏或者忽略了。潜在客户浏览了你的网站，被你的作品所打动，知道了你的能力。现在他们想雇佣你！

你的联系信息应该明显而容易得到。不要把它藏在页脚。用一段引言或者对话告诉人们他们可以联系你。做一个表单，使联系你更加方便（这样用户们就不用再记下你的E-mail然后去开软件写信）。表单也让你事先可以向访客询问某项特定信息，比如名字，Email地址，网站URL，各种细节……

Stuart Johnston 在他的整个网站里都提供了清晰便捷的联系信息，并且还提供了一个联系表单。

7. 日志

写点日志永远是个好主意。写点你所在领域的专业问题，让大家了解你知道你在说些什么。这样做可以推广你自己，并且防止网站过于沉寂。

让大家订阅你的RSS供稿，找机会向新读者推荐你最受欢迎的一些文章。

确保允许评论，以获得反馈。不要采用注册用户才能添加评论，也别用防垃圾留言验证软件，这东西的唯一作用就是让人们丧失评论的热情。有很多反垃圾软件并不需要用户做额外功。

Chris Wallace 使用他关注于网页设计的博客来帮助业界的其他人，也吸引大家前来留言讨论。

8. 引导用户动作

问问你自己你想在你的个人作品集网站上突出你的什么需求。你想找份工作？吸引更多博客读者？也许你只是想人别人知道你是谁。

每一个页面都应该有一个对用户行为的引导(call to action)，一个 “下一步操作” 。实现此过程的最佳方式就是添加一个显眼的语义明确的“引导”按钮。链接到你的博客、作品集或者联系信息页，使用适当语言（如，“雇用我”，“垂询报价”，“查看作品”）。

Matthew Brown 的“引导”按钮采用的对比色从网页中跳了出来。

9. 使用社交网站

现在人们已经对你和你的工作产生了兴趣，你可以鼓励他们在其他网站上关注你。让他们清楚地知道他们可以在Twitter, Facebook, Flickr, LinkedIn等网站上关注你。.充分利用社交网站的功能，如果有需要还可以列举一些你在这些网站上的朋友。

Sam Brown 提供了清楚的社交网站链接。

10. 语言与交流技巧

你的言语和行为至关重要。请记住，这是个人作品集网站，那就“个人”一点。你不用表现得像一个没有情感的公司组织一样。言语要友好而有个性，同时保持清楚准确，别瞎扯淡。写好网站所需文字之后，通读一遍，看能不能把字数减半。

Marius Roosendaal 在他自己的网站中使用了友好的口气。

其他建议：

• 告诉人们你住在哪儿。有些客户更喜欢和临近地区或者在同一个时区的人合作。
• 通过Web标准验证很重要，尤其是对网页设计师来说。如果你打算为客户建立专业的网站，那你自己的网站至少要通过验证。
• 为图片添加链接，而不仅仅是文字。大部分人会点击图片，期待被带到某处。
• 如果还没有遇到什么客户来让你建立作品集，那就做一个WordPress主题，设计一套图标，开发一个Twitter内容聚合(mashup)…… 你可以找到很多可能。作品集里面有一个作品和一个都没有大不一样。

40+ 漂亮的个人作品集网站

Robbie Manson

F. Claire Scroggins

Timothy van Sas

Ole Martin Kristiansen

Maru Velázquez

Chikezie Ejiasi

Miki Mottes (Flash)

Jakub Krcmar

Mopa

Chris J. Lee

Pedro Lamin

Cartonblanc (Flash)

Leigh Taylor

Alex Coleman

Sarah Longnecker

Toby Powell

Jay Hafling

Elliot Jay Stocks

Tony Geer

Marius Roosendaal

Ryan O’Rourke

<img /> is everything (Phil Thompson)

Leigh Taylor

Design Me (Marek Levak)

Matt Dempsey

Brad Candullo

Andre Augusto

Rob Hawkes

Magnus Jepson

Corking Design (Daniel Cork)

Evan Eckard

Alexandru Cohaniuc

Miles Dowsett

Andrew Bradshaw

Shannon Moeller

Vitor Louranco

Mark Dearman

Wong Yeng Kit

Chris Wallace

Spoon Graphics (Chris Spooner)

Fabiano Meneghetti

Mark Wallis

Chris Morris

Paiko (Heiko Br?mmelstrote)

Conan Robbins

Henry Jones

Winnie Lim

Greg One (Gregoire Hoin)

Mark Hadley

David Appleyard

Design Moves Me (Roy Vergara)

Brian Murchison

Mike Precious

Digital Deceptions (Duncan)

Chirag Solanki

Jason Reed

Johnston North (Stuart Johnston)

Penflare Designs (Sean Farrell)

Nine Lion (Chikezie Ejiasi)

Brian Wilkins

Jason Santa Maria

David Hellmann

Guillaume Pacheco

Dave Lam

Luke Stevens

James Lai

Alessandro Cavallo

CSS Jockey (Mohit)

Kerry Nehil

Darren Hoyt

Matthew Brown

Digital Mash (Rob Morris)

The Things We Make (Mike Kus)

Ed Merritt

你觉得一个好的作品集网站上应该有些什么？

我们有遗漏任何重要的东西吗？什么会让你决定雇用某人？什么让你决定离他远远的？

延伸阅读（英文）：

• 10 characteristics of excellent portfolio websites
• 50 excellent designer portfolio websites
• Creating a successful online portfolio
• 50 beautiful and creative portfolio websites
• Call to action buttons

关于作者

Lee Munroe 是位于贝尔法斯特（北爱尔兰首府）的自由设计师。 你可以在他的博客上找到他的其他文章和设计作品。你也可以在Twitter上关注他。

© 原文：10 Steps To The Perfect Portfolio Website 来自 Smashing Magazine 作者 Lee Munroe
允许转载，但请保留出处。翻译者：笨活儿。

©2009 笨活儿 | 永久链接 | 已经有8条评论了 | 推荐到豆瓣

Photoshop的“动作”功能可以帮助我们完成一些枯燥的重复性工作。本教程就是这项功能的应用实例。

有时候我们会需要把截屏图拿到Photoshop里面处理，添加固定的风格样式，如模糊、残边、投影等。一两张倒无所谓，图片多的话就显得烦人。在Photoshop里面添加一个处理截屏图的动作，可以节省很多时间。

“动作”功能的原理是记录下你的一系列操作，今后遇到同样的效果要求时，可以“播放”动作，让Photoshop自动帮你完成这一系列类似的操作。 在Smashing Magazine 上有很多免费的动作脚本供你下载使用： The Ultimate Collection Of Useful Photoshop Actions(英文)。

开始行动吧

以下教程将为Photoshop添加一个简单的对截屏图进行倾斜、模糊、黑角处理的动作。

第一步

在Photoshop中新建一个你所需尺寸的文档，我这里采用的是575px × 250px。抓取截屏图（比较简单的方法是点击键盘上的“Print Screen”键）， “Ctr+V”黏贴到文档中。

第二步

现在转到你的动作调板。如果找不到，点击菜单栏上的窗口->动作（快捷键Alt+F9）。 如果你是第一次使用改功能，则可以看到Photoshop已经为我们预设了一些默认动作。你可以查看一下这些动作能提供的操作，有些动作可能对你有用。点击面板右上角的小三角按钮你还能找到其他预设动作。考虑到本教程的目的和以后的使用需求，我建议你新建一个组。点击动作调板下方的文件夹图标，新建一个组，并命名。

第三步

点击文件夹图标右边的“新建动作”图标，创建一个动作，并将其命名为“截屏”。当然，你也可以在名字里面添加一些细节说明，如“截屏-模糊并黑角”。点击“记录”按钮确定。

第四步

新建动作后会自动进入录制动作状态。请注意，Photoshop并不是像录音录像那样在实时记录，它只会记录下你实实在在的图像处理操作。所以你用不着慌忙，如果你愿意，让 Photoshop 等上个三五天都没有问题。另外，可以看到，当你进行处理时，动作面板里你的动作名下方会列出你的操作步骤。如果你不喜欢某一步操作结果，只需暂停录制，然后将这一步操作拖到面板下方的垃圾桶图标中即可。当你准备好重新来过时，别忘了再点击圆形的录制图标重新开始记录。

我们需要录制的第一个操作是倾斜图像。“Ctr+T”，使用自由变化工具对图像进行旋转。在这里我使用了菜单栏下方的选项栏，设置旋转角度为“-5°”。请注意动作调板，“变换 当前 图层”的操作已被记录。

第五步

接下来我们移动图像到合适的位置。再次使用“Ctr+T”自由变换工具，拖动截屏图到你认为最佳的位置。在将来播放动作的时候，这一步的参数可能会根据所处理图片的情况有所变化，所以你应该在这一步加上一个暂停。 点击勾号“√”右边的“切换对话开/关”，给这一步变换当前图层添加一个暂停，好让将来应用动作时能重新调整参数。

第六步

接下来，点击“Ctr+J”复制当前图层。

第七步

下一步我们将对原始截图的拷贝进行模糊处理，以便通过给上面这个图层添加蒙版来达到效果。所以我们需要选择原始截图所在的图层，但是如果只是简单地点击这个图层来选择，动作功能就会按照图层名记录下选择操作。因此，将来应用这个动作时就有可能因为图层名不一致而造成动作失效。 不过，通过使用键盘快捷键，我们可以利用图层间相对位置来达到目的。也就是说，点击“Ctr+[”移动当前复制图层到原始图层之下。

第八步

现在设置模糊效果。滤镜->模糊->高斯模糊，我这里半径为2像素。

第九步

接下来我们要选择最上面的图层，以便添加蒙版实现渐变模糊效果。应用同样的技巧，这一次我们需要选择当前活动图层上面的图层，所以点击“Ctr+]”（注意，不是Ctr+[）。

（译者注：第七步和第九步这里貌似作者脑子犯毛病了。原文里写的是“选择(Select)”各个图层，结果操作的时候是在移动图层。配的图片也显示的是Move Current Layer。其实哪用这么麻烦移过去移过来，直接在复制的图层上就可以完成高斯模糊、加蒙版的操作。我这里之所以不纠正，是觉得第七步说的那些东西在将来还是会有用的。这个理念还是好的，现在用不到这个方法，不保证将来不用，对不对？

在Windows里，选择前一图层和选择后一图层的快捷键是“Alt+[”和“Alt+]”。原教程是针对Mac用户的，根据作者的解释，Mac里的“Alt+[”和“Alt+]”是前后置图层的快捷键,他的本意还是要移动图层。但最开始的时候他把“Alt+[”写成了“Command+[”，所以搞得我很糊涂。）

第十步

为上面的图层添加图层蒙版：图层->图层蒙版->显示全部（亦可使用图层面板下方的“新建蒙版”图标）。选择渐变工具（快捷键“G”），设置一个白-灰-白的渐变，如下图。 在你的截屏图上沿着你刚才旋转的倾斜角度点击并拖动。如此便为图像边缘添加了模糊效果。

第十一步

新建一个图层：图层->新建->图层（快捷键Ctr+Shift+N。或者图层面板的新建图标。囧，感觉我好啰嗦啊。）。使用矩形选区工具，新建一个选区并羽化，设置羽化半径为20像素。

关于羽化：你可以在建立选区前先在选项栏设置好选区的羽化半径，也可以建立选区后在选区上右键单击-> 羽化… ，来设置选区羽化。

第十二步

“Ctr+Shift+I”反选（选择->反选）。点击“D”复位色板，“X”交换色板，以使背景色为黑色（你也可以直接设置背景色，但我认为这样更快捷一点）。“Ctr+Backspace”用背景色填充选区。 于是我们就为图像添加了一个黑色的渐变边框。这看起来有点太过了，下一步我们会将它处理一下。

（知道这一步更快捷的做法吗？“D”复位色板后，点击“Alt+Backspace”，用前景色填充。）

第十三步

点击图层面板左上方的下拉菜单，改变该图层的混合模式为“柔光”。我建议你在此也添加一个暂停动作，因为改变图层的混合模式可以产生丰富的效果变化。图像的明亮程度也会影响各种混合模式的最终效果。

最终效果

如下图：

动作的应用

以下是使用刚才新建的动作处理的其他图片。

结语

Photoshop的动作是个很强大的功能，可以节省许多重复性劳动。本实例都是一些很基本的简单操作，最终效果却不同凡响，可见，对PS功能恰当地组合运用正是用PS进行“设计”创作的精髓所在。

本教程编译自MyInkBlog.com。版权归原作者Andrew Houle所有。翻译者笨活儿保留翻译文本的版权。允许自由转载，但请注明出处，并保留此声明。

©2009 笨活儿 | 永久链接 | 已经有5条评论了 | 推荐到豆瓣