网页背景设计实例与最佳做法（上）

在网页设计演化的漫长路程中，网页风格的变化尤其明显。比较一下10年前的网页与现在的网页，差异是相当显著的。最容易注意到的一个主要变化，就是背景。今天，背景已经成为决定网站的视觉效果如何的核心特征之一。背景决定了网站的主题，网站背景的设计，有着无尽的可能。本文将总结一些现阶段创意网页设计中网页背景的最佳做法与趋势。

基本背景结构

在讨论如何设计出好的背景之前，我们要首先回顾一些基本的背景方案。背景的基本结构不止一种，其中有3种比较常用。

主背景

主背景是最为底层的背景，经常是图片、图案、材质或者其他图形元素。

内容背景

结构中的另一层是内容背景。这是文本、图案以及其它基本数据或信息的背景。

方案1：内容与主背景分层

第一种结构是多层背景。在最底部是主背景，内容背景在最上层。

如下是一个例子。背景是一张大的图片，内容的容器在背景的最顶层。内容核心采用实心背景，而头部背景则是半透明的。

上面的设计展示了内容的各个元素互相分离时的布局。下面的设计则是更常规情况下的层状结构。包装与内容有着固定宽度的背景，在这背景之后可以看到最底层。

方案2：内容与主背景的图案或纹理直接结合

另外一种结构是直接把内容放在背景上。当主背景由图案、材质和图片构成时，通常采用这种方式。这种技巧的运用很棘手，特别是采用图片作为背景的时候。但只要注意颜色的平衡，还是能够取得很好的效果的。要保证背景与文字之间的对比度，才能获得较好的可读性。

下面的网站直接把文字与图片内容放在图案背景上。白色文字与蓝色背景之间的对比清晰，内容易读。图片有粗边框，将图片与背景分离并突现出来。

方案3：内容与主体共用背景

最简单最基础的结构，便是主背景同时也是内容的背景。通常采用单色或者少数几种颜色，不会太复杂。

下面的网站是这种结构的单色方案。

包装/头部背景

网站中有太多的地方可以用于实现好的背景设计，其中有两个地方就是头部以及包装的顶部的后面。以下就如何处理两个部分给出了几点提示。

标准头部背景

图案、图片、材质以及颜色都适用于头部背景。可以通过简单的方法使得网站富有生机，同时不会对整体效果造成影响。

提供流畅的分割

当需要头部与布局中的其他部分分割开的时候，你需要提供一个良好的过渡。有时候头部与正文背景之间颜色或风格的适当对比便可以达成目的，其他情况下，应该尽量使者两者达成和谐，不能格格不入。

这里展示一个头部与内容之间过渡良好的例子。图片采用了淡出的效果，避免了从形状直接跳转到图片上：

下面这个例子则采用了不同的方法，同样也有良好的效果。大量的未使用的空间看似毫无意义，但实际上却形成了顶部导航栏与内容之间的良好分割。

流畅的包装图案

使用图案或者其它合适的图形元素，是提升网站个性与感官感受的一个很好的技巧。除此之外，它能使设计深入人心，并在网站主题中起到重要作用。在标准布局的包装背景中使用图案，并使其流畅的过渡，是一种很美好的技巧。

使图片与主题颜色一致

包装图案与主背景之间的过渡相当的重要，使图案的背景与主背景一致是至关重要的。

保证风格与设计的其余部分一致

网页设计中经常提到一致性，因为它是网页设计具有的重要特征之一。在为一个网站设计包装图案时，应该传达出与网站设计中其余部分一致的风格，调色板也应该相似。

例如，如果你在排版、边框这样的元素中采用了手绘风格，那么图案也应该采用相同的手绘风格。如下的网站展示了这一点，采用了手绘插画与手绘字体。

允许一些图案融入内容区域

要创建一个平滑的布局，你应该允许一些图案流入内容容器。以下网站是一个良好的示范。

将图案拓展到整个布局中

仅仅采用包装背景也许已经足够了，有的时候也需要考虑将图案延续到背景的其余部分。参见如下这个例子，图案不仅仅在包装的顶部之后出现，同样也出现在了背景的其它部分。

同样，头部的图案在包装的底部也继续采用，使得这个主题在整个页面都保持活力。

整体背景

整体背景的运用有一点棘手，如果运用不当，可以很容易的废掉整个设计。以下给出了一些技巧，可以帮助解决整体背景设计中的各种问题，并提高视觉体验。

不要影响到内容

如上所述，设计背景的时候有很多可能性，但是必然有一条明显的界限，区分出优秀的的背景与严重影响内容的背景。

你仅仅需要注意背景的对比与图形元素的数量。如果主背景过于繁杂，看起来的效果肯定不好。如果主背景过于显眼，则会使用户对核心内容的注意力偏移。

使用高亮或斜角来分割颜色

Web2.0中被频繁使用的技巧便是通过高亮来分割背景或元素中的不同颜色。

那如何运用斜角？仅仅需要用到两条1像素的线条来分割颜色。注意看下面这张图，你会注意到当背景颜色转换的时候，用到了细微的高光。在向网站中添加维度的时候，可以采用这种简洁明快的布局。

 

 

下图是高光部分的放大。顶部容器的背景色比底部容器要暗，要在这两者之间过渡而增加了两条线，顶部比底部要暗，形成了效果良好的斜角风格。

 

 

斜角不仅适用于对比度不大的颜色，同样也可用于相反的情况，如果斜角的暗色调与背景的亮色调接近。另外一点就是高亮，主要运用在高对比度的情况下，采用一条1像素的线条作为过渡。

这个技巧保被运用在了Blog Action Day网站上，用于分割绿色、灰色与更暗的颜色。如下图，注意在各个色块之间，都有一条1像素的线条作为分割。

 

 

固定与浮动图形的混合运用：视差效果

大多数网站仅仅使用固定的背景，没有采用层叠的图案。如果你真的想要更进一步，你应该同时使用固定与浮动的图案层。

下图的网站采用了这个技巧。背景远处的大块浅蓝色的云距左面的距离是固定的，所以当窗口大小变化的时候，云层会移动，而在前景的房屋和树木则固定不动。

 

 

用这个技巧几乎就实现了视差效果，之所以说”几乎”，是因为视差特效往往需要多个图层来实现运动的效果。最有名的通过CSS实现视差效果的网站是Silverback。

Silverback网站大约有3个图层，每个图层都会移动，但是他们的滚动百分比不同，因此当浏览器窗口调整的时候，他们移动的位移不同。注意各层之间颜色与形状的差异，顶层采用了模糊的效果，获得了更大的景深。

 

 

使用低对比度的花样或材质

细微到需要近距离观察才能注意到的纹理，可以为设计增添更多细节。低对比度的花样，即颜色范围很小的花样，就可以获得这种效果。其视觉效果很好，并且不会分散用户对其他元素的注意力。

Creattica Daily使用了这种技巧。背景采用了细微的重复花纹，并把颜色严格控制在了一个很小的范围内。

 

 

另外一个简洁的设计来自于Product Planner网站，同样采用了类似的图案来展现细微对比的技巧。这些材质提供了显著的视觉体验，有助于吸引用户。

 

 

结合材质与图案

一些网站仅仅采用某种技巧，其实多种技巧的组合使用又何尝不可？这样可以产生更加吸引人更加独特的视觉体验。下面的网站，将图案与木质纹理混合，尽管图案并不明显。

 

 

增加维度

还有另一种很赞的方法，可以使网页设计跟更进一步，这种方法便是通过光照与图案来增加维度。维度可以提高视觉体验，并且展示真正的技巧。

这个采用3D光照效果的网站看起来很漂亮，维度在背景与元素中的出色运用，能够真正的吸引用户的眼球。这种等级的维度运用，显然能够留下一个良好的印象，并让网站深入人心。

 

 

整体图片

使用固定的图片与内容背景

使用图片背景要小心，因为设计不可重复。因此，你必须找到另外的方法，将图片引入布局中。

下面这个例子来自Nike。它采用了大幅面的图片作为背景，主背景是固定的，容器与内容背景则可以滚动。另外，它采用了适用于所有分辨率的图片，图片的大小没有固定。

 

 

运用少量虚光效果

另外一个很好的技巧，就是虚光效果。它有助于将焦点集中到中心，用于大幅面的图片背景时尤为有效。很重要的一点，是只适用很少的虚光效果。一个采用了些许虚光效果背景的网站，更能吸引起你的注意。

如下是另外一个例子。虚光效果将实现推到内容上，同时也增强了图片自身的效果。

 

 

找到对比度的平衡点

使用图片是很好，但是当图片比内容及内容背景更深的时候就会出现问题。用户的眼球将会被背景吸引，显然会引起可读性问题。

这里再次使用Kraft的例子。如果你仔细看，你会注意到图片的色彩并不丰富，这并不是因为图片不好，而是因为需要不那么鲜明。。。

另外，注意这张图片的焦点在圣代冰淇淋上，内容围绕在圣代旁边，在这个区域图片失去了焦点，这样有助于将视线从背景集中到前景的内容上。这个过程是由摄影师来实现的，但是也可也很轻易的通过Photshop的透镜模糊滤镜来实现。

 

 

关于作者

Matt Cronin是一位自由职业者，从事网页、图形设计与开发。他是Spoonfed Design的作者与所有者，提供关于设计的提示与指导。

相关阅读：网页的背景设计 精选实例与最佳做法（下）

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：企业网站想做好网络推广必看!

下一篇：把对某些网站怨恨转储一下 关于用户体验

相关文章

• 如何设计出一个有灵魂的「签到功能」？ 2021-05-04
• 优惠券发放策略设计 2019-07-18
• 如何才能达到以用户为中心的网站设计模式？ 2019-04-10
• 如何设计移动端搜索？来看我总结的这四个部分！ 2019-04-10
• 网页秒开，留住用户快人一步 | 白皮书 4.0 专题解读 2019-04-10