网页的背景设计 精选实例与最佳做法（下）

无缝的拼接或重复背景

制作好的背景的最简单的办法就是使用重复，这样可以不需要大幅面的图片。但是在创建重复背景的时候，需要了解一些要素。为了便于理解，这里将采用Brad Colbow的网站作为案例研究，这个网站中运用了无缝图片拼接。

使用大图片来重复

要获得良好的背景，你需要使用大图片。Brad Colbow的背景图片大约每1000像素重复一次，见下图。红线部分为图片重复的边界。

完美的对齐边缘

使图片的边缘完美的对其，比任何事情都重要。图片链接的区域的颜色必须一致，即当你在创建背景图片的时候，图片的左边缘必须和右边缘对应连接。如果使用了形状，他们也必须完美的连接。

看下面这个例子。第一个截屏是用在网站背景中的原图，在它下面的截屏展示了图片被设置为重复时，图片之间是如何连接的。背景的边缘完美的连接，注意云朵之间没有任何的间断，左右两边水的颜色也完全一致。

除去重复后很明显的物体

用重复图片作为背景时，如果有的物体在图片重复后很显眼，那么就应该除掉它。因为你希望你的背景流畅没有间断，看起来像一张图片而不是好几张。这一条对于Brad Colbow的网站而言，不是特别重要，因为它采用了大图片，重复的物体在重复的图片很大的情况下，不是那么显眼。当重复的图片较小时，就应该引起高度的警觉了。

将某些图片放到独立区域中

另外一种掩盖图片重复痕迹的方法，就是把某个元素放到另一个背景区域中去。如何理解这句话呢？以Brad Colbow的网站为例分析。

下图是Brad加入到背景中的一个岛屿，岛屿的图案并没有和背景一起重复。这样背景就显得多变，使人难以注意到背景是由重复图片组成的。

内容/包装背景技巧

内容背景在一定程度上也很具挑战性。它不能喧宾夺主，不然会毁掉整个内容部分。以下是几条提示。

简单的渐变

不管你是否相信，网页设计中，细节可以决定成败。经常用于布局中的一个小细节，便是渐变。渐变非常简单，但如果运用得当，可以使一个枯燥无趣的设计变得生气勃勃。

看下图，想像它如果没有运用渐变，将会变得何其无趣与平淡。

细微的材质

材质是另一种很赞的背景技巧。材质有助于展现出网站的主题，例如，要表现摇滚音乐的主题，可以采用颓废的材质风格。当采用材质作为背景时，很重要的一点是不能超过顶端，材质应该足够细微，不至于影响文字的可读性。

如下是材质的得体运用。主背景的材质比重很大，内容背景继续了这一风格，但材质不如主背景的明显。

包装与背景融合

这一点也许刚开始听起来令人迷惑，但实际上这是个相对简单的技巧，如果运用得当，将会获得很好的视觉效果。下面是ZenSender的截屏。在顶部，采用了层状包装背景浮在主背景之上，下来约一半的位置，包装背景淡出与主背景融合。这个技巧值得考虑。

风格化包装/模块的边框

如果风格化包装背景的主体，很难保证不会占据太多的内容。但是可以通过风格化包装的边界，来保持其与主背景的一致性。下图的网站采用了良好的材质与图案，内容元素也有风格化的边缘。

在层状设计中使用半透明内容背景

最后一个在层状结构中风格化内容包装背景的技巧，是采用透明。透明可以在将背景与文字分割的同时，获得一定的背景可见性。很重要的一点是，文字颜色与背景颜色的对比度要好，并且背景不要太过透明。

下图中的网站在半透明背景这一点上找到了良好的平衡点。主背景的图片可以清晰的看到，同时也文字的可读性。

实例展示

365 Days of Astronomy

有着别致包装背景图案的漂亮背景。

TN Vacation

图片拼贴与颓废风格的良好结合。

Squared Eye

良好的背景图案、配色以及头部设计。

 

 

Grace of Alexandria

将图纹加入到了主题设计中。

 

 

IconDock

除了漂亮的图案之外，这个网站采用了很好的木质纹理，材质图案是静态的，没有滚动的问题。

 

 

Old Loft

这是一个非常好的把文字内容直接放在图案上的例子。

 

 

Studiobanks

很好的背景图案与完美的配色。

 

 

HutchHouse

有趣的图案背景可以吸引用户的注意。

 

 

280 Slides

良好的配色与渐变。

 

 

JUNECLOUD

插画头部，采用图案来分割。

 

 

Andrew Greig

多彩的头部，斜角的良好运用。

 

 

GOTOCHINA

采用图片淡出以及半透明元素。

 

 

eWedding

主背景中的地对比度图形很好的补充了设计。

 

 

Bellingham Real Estate

漂亮的头部图形与材质化的包装背景。

 

Duplika

醒目的背景。

 

 

ANidea

时髦有力的主背景，采用包装风格。

 

 

Flash Gaming Summit

多彩的静态主背景。

 

 

Twiistup

相互分离的元素，鲜明热情的背景。

 

 

Design Disease

轻快的设计，内容直接放在背景上。

 

 

RapidWeaver

漂亮的包装背景淡出与白色背景融合。

 

 

Sony CES 2009

有力的背景与分离的模块。

 

 

Mediocore

维度的良好运用。

 

 

Chris Merritt

顶部的光照特效与独特花纹。

 

 

Robyn

背景采用插画与柔和的颜色创造出良好的视觉体验。

 

 

Advanced Wellness

导航区的背景能立即吸引用户的注意力，又不会破坏整体设计。

 

 

August

背景不至于分散注意力，淡出得很好。

 

 

关于作者

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

标签：

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

上一篇：小建议：让您的网站在谷歌浏览器里更出色

下一篇：Topify让你通过Email轻松玩转Twitter

相关文章

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