返回  

在网站设计中使用纹理背景的7个技巧

2018/4/11 10:35:56 来源:深圳网站建设公司Clh

今天的这个分享并不是你印象中的那种典型的网页背景纹理。如果你正在寻找一个特定的纹理,你可以通过google或百度获得大量的素材,但是如果你想创建你自己的,或者希望找到一个方式来定制一个完全适合你的设计项目的纹理,那么,你可以跟着我们的思路来看看今天你可以获得哪些知识点。


尽管在网站设计中使用纹理的方法有很多,但如果你希望采用更符合现代的方法,并遵循一些简单的规则,你将获得更多有关背景的知识。这里有七个技巧可以帮助你更好地只你的网页设计中使用纹理背景(以及2018年相关设计模式和趋势的知识点)。


1.去繁存简

Go Simple and Understated

一个恰到好处的背景纹理可能甚至不会引起用户的过多关注。它应该是一个几乎无形的元素,但是有助于整体的可读性和可用性,同时提供深度或视觉参考点。

对于这一点,使用简单而低调的背景纹理是完美的方式。去年年底,GitHub在其Universe Conference的网站设计中使用了一个简单的黑色背景并搭配以白色的圆点。营造出夜晚的星空效果不仅符合主题,而且有趣的梯度变化使得Logo和事件的信息都很容易找到。

简单的背景纹理往往会使用一些小或紧凑的重复图案,在颜色的选择上并没有过多的做限制。其主要的思想是这些背景纹理并不是作为焦点,它们有助于将注意力转移到设计的其余部分。


2.大而大胆

Go Big and Bold

或许保持低调并不适合你目前正在工作的项目。如果是这样的话,选择一个大而大胆的背景纹理或模式可能更加符合你现在的需求。

这些反常规方式的设计,偏向于使用前景更大的文本或用户界面元素。使用这种类型的背景纹理可能会变得棘手,因为创建一个几乎不可见的平铺模式,使用户不会把过多的精力放在背景上,不使其变为整个设计的焦点,在这点上可能需要考虑很多的因素。

为了确保你的超大背景纹理能够更好的发挥效果,请留意分析用户的习惯,并作出相应的改变。流量或转换率的急剧减少表明你的视觉表达形式并不能很好的让用户接受。


3.结合趋势

Incorporate a Trend

带有流行设计趋势的背景纹理可以让你的设计感觉超现代和新鲜。

用几何图形的使用几乎成为现在网页设计中的主流视觉表现,这也解释了为什么Apacio的网站如此有吸引力。在深色背景下,颜色鲜艳的几何图形即便是混合在一起,也能创建一个很好的纹理效果和深度,帮助用户专注于大文本并调用操作,因为这些元素与背景形成对比。文字-简单的无衬线字体-似乎远远优于绿色的形状。

纹理的分层也有助于这个整体效果。请注意,背景中的黑暗元素通过两层不同的元素将明亮的元素区别出来。


4.使用图像

Use an Image

背景纹理不必是从素材站点下载下来的通用元素。一些好的背景纹理可以与品牌或主消息相关的图像像结合,以增加视觉兴趣和参与度。

诀窍是如何有效地将图像淡入到背景中(这并不一定意味着使用淡入淡出的表现效果)。

在上面的例子中,Oxeva在其网站设计中采用了一种很有效的方式:它通过减低照片的明暗,使之背景图片只有大致的轮廓可见,通过使用大胆的色彩和特殊的字体处理,是图像在前景中展示的部分更加自然和吸引人。这张照片的整体做了模糊处理,但在一些重要的细节上,有赋予了清晰可辨的细节,这样主次层级就出来了。


5.用颜色强调变化

Use Color Variations

这是一种通过相似的颜色混合或匹配相应色彩和色调来创建字体或形状的一个大胆的纹理元素。颜色的变化,即使是在很相似的一个范围内,都可以创造深度和视觉层次感。

字体的使用以一种有趣的视觉组合并与颜色搭配来创建一个宏大的背景纹理。即使没有使用过多的技术如梯度或阴影,从字形建立深度和平衡的同时帮助吸引眼球,背景中的颜色会衬托主标题,以起到强调的作用。


6.梯度变化(渐变使用)

Grab a Gradient

渐变是时尚的,并且在视觉上足够吸引人。当使用渐变作为背景纹理时,你可以单独使用它或者通过使用一张照片来起到分层的效果。

几乎所有的颜色组合都是如此,所以使用渐变来创建纹理和深度并不困难。你可以在webgradients中找到一个你喜欢的渐变组合,如果你已经空不出时间在规划渐变组合选项的时候。

Mobipad在其网站设计中使用了多红渐变模式的搭配,微妙的背景渐变来创建深度和纹理。前景中的插图动画几乎会从渐变中消失,而深色的动作调用使它们很容易被看到,渐变纹理中较亮和较暗的空间有助于用户在设计中移动。


7.动态化

Animate It

虽然许多技巧都集中在静态背景元素上,但没有一条规则说背景不能是动态的。

为了充分利用这种背景纹理,运动应该是微妙的,这样它不会影响主图像或消息传递。包括更简约或微妙的调色板,如上面的Latvian Alphabet案例,也样处理也是一种很好的选择。

动态效果可以是移动、扭曲、旋转或视频元素。移动是吸引用户注意力的好方法,充分利用动画背景纹理,确保这个动作不会干扰设计的前景元素。


总结

一个好的背景纹理可以帮助网页设计的整体添加深度和视觉兴趣点。虽然许多设计师仍然使用更平坦的背景-如单一的颜色-添加纹理的提示可以使你的项目脱颖而出。

使用纹理的最关键的一个技巧是,它们必须是微妙的,实际上落入背景中,以便前景元素易于阅读和理解。这可能是微妙的平衡,记住要在背景纹理和前景图像、用户界面元素和文本之间建立大量的对比,以最大限度地影响整体设计的效果。




----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务