一、 网页设计中的对比原则

一件网页设计作品由许多元素构成，它们的重要性各不相同，其中一些元素的重要性要高于其它元素。一些相互关联，而另一些则没有任何联系。棘手的是如何有效地和可视化地表达这些元素，这正是对比原则发挥作用之处。

对比产生在两个或多个元素之间，设计者可以利用对比对用户产生直接的视觉吸引。想象一下，如果页面上所有的元素都是同样的样式，那么整个页面将是无序的，页面结构也没有流动性和层级性。内容阅读起来将变得非常困难。这使得对比原则成为页面web设计中一个必要的方法。

这篇文章中我们将看看如何使用对比在颜色、大小和对齐方式三个方面创建一些不同之处。

颜色对比

许多人一想到对比便立刻想到颜色。尽管对比原则并不仅仅限于颜色对比，但它对于用户识别各种元素的确大有帮助。

现在几乎所有的页面一般都包括头部、内容区域和底部。这三部分是完全不同的，它们在视觉上应当区分明确，使用背景颜色产生对比是一个不错的方法。

站点Church Media Group就是一个非常好的例子。它的头部和底部均采用了深色背景，而内容区则采用白色背景。这使内容区域和其他部分截然分开，并且使其重要性更加突出。如果仔细观察，我们会发现在内容区还有另外一层的背景对比。内容区上半部分的特色产品区用了亮蓝色的背景，而它和内容区其他部分的对比则并不强烈，这就告诉我们这两部分是相互关联的。

Phil Renaud's portfolio 使用了一个独特的布局和色系。他使用了金黄色来使左侧的导航和其他部分的棕色产生对比。

文字也可以使用颜色产生对比。Billy Tamplin 在这方面有一个非常棒的作品，它分别给页面标题、副标题和段落文本使用不同的颜色。对于博客风格的布局，在文章标题和内容文本之间创建对比是非常重要的。它可以使用户在拖动滚动条时很容易地看到文章的起始部分。

大小对比

在Web设计中另一种创建对比的方法就是让元素的大小产生不同，是其中一些元素的尺寸比其它的大。

当你无法使用颜色对比时，可以考虑使用大小对比。Taxi在布局上做了很多而只使用了很少的颜色。所以为了在三个栏目之间创建出层次，设计者为中间一栏使用了比左右两栏大了很多的宽度，这使得用户很明显地认为中间一栏是整个页面最重要的部分。

正如可为文字标题应用颜色来创建对比一样，使用大小也可以。用Big headings为站点内容创建层次是一个很好的方法，Imaginaria Creative使用了大标题来吸引访问者的注意，并且吸引他们阅读下面字号稍小的一些段落。

对齐方式对比

好的对齐方式在高质量的web设计中发挥着很大的作用。当把东西对齐放置时，它们看起来会很舒服。但我认为这恰恰是用不同的对齐方式创建对比的困难之处，并且应谨慎使用。不过如果使用得当则能创建非常有效的分割效果。

LegiStyles在每个标题下面的内容块应用了很大的外边距，和大字号的标题一起创建了明显的对比。如果要采用这种方式，务必要使对比显得明显一些，否则就会看起来像是错误地进行了设计。

把大段的内容居中放置是排版布局中的禁忌，它使内容很难阅读。然而不要怕把居中的标题和左对齐的内容段落放在一起，因为这是应用对齐方式创建对比的另一种很好的方式。如果和衬线字体一起放置，可以使你的布局呈现一个非常经典的外观。

Simon Collison为每个内容块使用居中标题和左对齐的段落，标题的字号相对于段落字号不是很大，但这使两者截然分开。

A List Apart 是采用这种方式的另一个很好的例子。

Now Go and Be Different

学习在设计作品中创建合适的对比和掌握其他设计原则的一样的，都需要实践。花点时间来学习优秀的设计作品，并看看他们是如何运用对比原则的。记住对比是关于事物之间的区别的。如果两个元素在其性质上区别很大，那么一定要使其外观的区别也很明显。

二、 网页设计中的接近性原则

最近我看了一本闲置已久的关于设计的书(Non-Designer's Design Book, The (3rd Edition) )，让我想起了我们潜意识地使用的一些设计原则。这本书是关于印刷设计的，但我认为对网页设计也很有益处。

接近性原则说的是，要把相关联的项在视觉上进行分组，减少干扰因素，并创造一个有秩序的布局。互不相关的项应当被隔离开，以强调它们是没有关系的。

我想谈一些有效实现接近原则的细节和方法，但这对于我们这篇文章的讨论来说已经足够了。

正确地使用接近原则和其它设计原则对用户体验有重大影响，最终会影响到一个站点的成败。

大胆使用留白

要恰当地运用接近原则，第一步就是要理解空白在设计中的重要作用。

业余设计作品的一个常见问题就是缺少留白。设计是交流信息的一种手段，业余者在通过设计传达信息时，很自然地倾向与把内容填满整个空间，而没有考虑给组织布局留出足够的空白余地。

留白对用户的行为有很大的影响，甚至比页面上的内容还要大。留白可以引导用户视线，创建对比，并创造持久的印象。

在W3Avenue的站点上，尽管有非常多的内容（像任何一个博客网站一样有很多的分类和文章）和一系列的侧栏广告，但它在视觉上并未让用户感到压抑。这要归功于页面头部、内容区和侧栏间的适当的留白。W3Avenue的内容并没有什么特别之处，但它的设计在短时间内带来了非常大的浏览量(Alexa)。

所以不要为设计中的空白部分感到不安。适当地使用留白是实现接近原则的第一步，从而使设计在视觉上更加吸引人。

把关联项在视觉上进行分组

留白只是实现接近原则的一方面。一件设计作品中可以有很多的留白，但如果没有将其正确地分组，就会效果甚微，看看下面的两张名片：

左面那张有很多的留白，并不显得杂乱。但因为没有将个元素进行逻辑上的分组，使留白的效果很不明显，读者不得不看上好几遍。右面那张则在视觉上更加友好，读者一眼就能看明白。

右面那张名片中各元素的分组也更有逻辑性。上半部分包含了大字体的公司名称，其后跟着是公司地址。下半部分告诉我们如何联系他们以获得他们的服务（如：电话号码和站点地址）。

这个例子说明了接近原则在印刷设计中的重要性，它对于Web设计也同样适用，正如下面的截图。

Arora Designs 的站点尽管不怎么复杂也没有包含那么多的信息，但它却很有效地使用留白对元素进行了逻辑分组。这里要注意的是所谓“留白”并不一定是白色，留白可以是元素间的任何空白区域，而不考虑其颜色。

在Arora Designs这个例子中，尽管留白不是白色，但它仍然起到了将头部、导航和内容区分离的作用。

创建视觉层次

有效地使用留白和逻辑分组可以给站点一个清晰的视觉层次。当然，站点的信息架构是有效地使用接近原则的基础。

层次是靠把元素分成有继承关系的组来表达的。层次让用户明白他们在什么地方、要到什么地方去，从而实现站点的交流，目的。列表是视觉上表达层次关系的很好的例子，如下图：

上面的图不看内容，只要瞥一眼就可以看出左面的列表在表示各项之间的关系时更加有层次感（缩进的项是主项的子类）。

层次离不开留白（包括各种大小的留白）。右面的列表则仅仅是一些元素的随机排列，它们之间看起来也没有联系和层次。

要在站点上用简单的HTML列表实现这个原则是很简单的。挑战之处在于从开始构建一个站点到整个设计过程中都贯穿这一原则。

容易查找和阅读的布局

有层次关系和逻辑分组的内容是容易阅读和查找的。

拿标题来说，应该让用户一目了然。段落则应当在一开始就表达视觉上的层次关系，上面的列表的缩进项目就很糟糕，因为它与视觉层次不相匹配。

一个在架构和设计中应用接近原则的站点不会对用户阅读信息产生压迫感。所以尽管在内容清淡的站点上实现接近原则相对容易，在内容丰富的站点应用这一原则就更加重要。

新闻网站就是研究使用这一原则的好案例。下面是Los Angeles Times 和Globe and Mail的对比。

总的来说，字体排印和颜色的选择使洛杉矶时报的站点的设计更加友好。它有一个整洁的外观，特别是页面的头部。

徽标很大而且突出，有效地展示了站点的品牌名称。靠近徽标的组件的是下面的一组水平导航栏，导航栏的暗色与徽标形成对比。徽标上方的链接排列整齐，并且链接之间的空白也足够大。头部左对齐的内容也使外观看起来很清爽。LA Times头部把所有关联项进行了分组，以凸显其徽标的地位。使你毫无疑问地清楚这些信息来自何处。

而Globe and Mail的站点又如何呢？

Globe and Mail的站点头部很复杂，没有实现接近原则。

页面中部徽标旁边那块仅有的重要留白并没有达到任何目的。头部的两则广告很乱，也许是商业需要吧，但这很成问题。最大的问题是巨大的banner广告上面那糟糕的部分，其中的元素没有明显的区别。三个点状的分割线试图把头部那块区域分成四部分，但第一条分割线并未起到任何作用。事实上，把分割线去掉的话或许看起来会更友好些。

使用网格

恰当地应用留白和分组关联项的一个方法就是使用网格。

粗略地看看LA Times和Globe and Mail，只有LA Times似乎使用了网格，或者只是在计划阶段就应用了基于网格的原则。Globe and Mail则没有表现出使用网格的任何痕迹。

基于网格的布局，加上合适的分割，使各部分间保持足够的留白，在许多情况下能促使设计中自觉地实现接近性原则。

下面是使用了960 grid system.的两个站点。它们都很简单（不像前面讨论的新闻网站那样有很多的内容），但它们都给页面元素以呼吸的空间，各部分都有视觉上的归宿。

正确引导用户浏览视线

接近性原则的另一个大的好处在于它能帮助用户在站点内导航，而无需多余的停留。当主导航和其他部分明显地区别开来时，它就可以很快地被发现而且令人印象深刻。

使用接近性原则建立的视觉层次关系使用户愿意深入研究你的站点，而不必担心他们在其中迷路。他们会感到舒适，并且能很快地找到他们想要的重要的那部分内容。

印刷设计者在web时代之前就已经在开始实践中应用了各种设计原则，对于没有印刷设计经验的Web设计者来说，可以从中学习到很多有用的东西。

接近性原则仅仅是让我们的站点更加友好的各种设计原则中的一种，但是就我们刚刚讨论的许多原因来说，它无疑是重要的一环。