主页 > 新闻动态 > 技术分享 >

网站制作 解决背景纹理的办法

2018-04-13

  

虽然网页制做正在设想中纹理的利用方式有良多,可是想要营制现代的设想,只需要遵照一些相对简单的,就能够获得相对不错的结果,下面的7个设想小技巧就是帮你做到这个工作的。

  

1. 利用图片来建立纹理

  

  

布景纹理并不必然非得是那种细心制做的小图案,有些细节丰硕的图片同样能够做为布景纹理,它可以大概添加视觉条理,提拔吸引力。

  

这种设想的诀窍正在于,图片需要淡入到布景傍边。

  

正在的案例傍边,Oxeva 这个网坐通过两种体例来做到融入布景的设想,设想师一方面让图片的明度降低了,让用户可以大概看到景不雅的轮廓,然后设想师正在前景叠加上了一个渐变色彩层,这使得整个布景显得极为富有视觉表示力。图片所供给的细节并不多,可是正在视觉上仍然能够分辩。

  

2. 利用色彩变化来创制纹理

  

  

利用分歧明暗饱和度的同系色彩能够建立出外形或者文字,同样可以大概达到结果。色彩的变化同样可以大概创制出有深度的视觉结果。

  

Types of Type 这个网坐就利用带有色彩变化的庞大字母正在布景中做为纹理,即便没有用到渐变和暗影如许的技巧,同样也有深度,也脚够均衡。如许的设想让整个页面显得活跃而不乏味,对比使得整个设想从次分明。

  

3. 利用渐变来制制纹理结果

  

  

现现在的渐变几乎成了时髦的代名词,渐变色彩能够正在布景中替代纹理存正在,也能连系图片和其他的元从来利用。

  

几乎所有的色彩组合都可以大概创制出渐变结果,想要借帮渐变创制出视觉深度和纹理的体验并不难,若是你还没有成型的配色方案,你能够间接从 WebGradients 中找你喜好的配色方案。

  

Mobipad 这个网坐正在布景中利用了多个分歧的渐变色来创制结果,合理的对比度让前景的动画很是的较着,深色的部门有着优良的可读性,一目了然。

  

4. 让布景动起来

  

  

绝大大都的布景纹理的技巧都是静态布景的设想技巧,可是布景和纹理同样能够是动态的。

  

为了避免喧宾夺从,动态的布景纹理该当是很微妙的,不然会影响前景次要消息的传达。配色该当是温和的,就像这个名为 Latvian Alphabet 的网坐一样。

  

动态的网坐布景纹理能够是动态的图片或者被调整过的视频。动态的布景是吸援用户留意力的好法子,只不外要适度就好了。

  

5. 简单易懂的纹理

  

  

实正优良的布景纹理,正在绝大大都时候以至是不会被用户留意到的。它该当是一个几乎不成见的元素,而且有帮于提高全体的可读性和可用性,同时供给脚够的视觉深度。

  

简单而低调的布景纹理是提拔整个设想的可用性的最佳体例。正在客岁的 Github 会议的页面上,设想师就采用了简单的黑色布景加上白色圆点的纹理设想,营制出夜空的结果。正在夜空的映托之下,多彩的 LOGO 和渐变的按钮有着优良的可识别度。

  

简单的布景纹理凡是有着小而慎密的反复的图案,它能够是任何颜色,这个思让布景纹理不会做为核心存正在,而是做为陪衬其他元素的主要东西。

  

6. 纹理能够更大,更斗胆

  

  

纹理能够很微妙,很小,可是也同样能够很大。斗胆一点,选择更大的纹理或者说图案,同样可以大概发生不错的结果。

  

这种超大的图案所形成的纹理可以大概做为布景来利用,前景该当有更沉的元素,好比必然数量的文本,或者是图片等相对较沉的视觉内容。如许的布景纹理/图案其实总体处置起来会比力棘手,由于它有必然的机率会让用户留意到而且分离留意力。

  

为了确保这种超大的纹理图案不影响一般的结果,最好是留意阐发用户习惯,而且婚配全体的内容,若是页面的流量或者率下降那么必然是用户没有获取到此中的消息。

  

7. 连系当前设想趋向的纹理

  

  

连系时行的设想趋向来设想纹理,往往可以大概让整个设想呈现出富有时代感的体验。

  

几何图形元素是时行的设想元素之一,将几何图形融入到布景傍边,毫无疑问能够很是吸惹人。看看 Apacio 这个网坐的设想,深色的布景之上夹杂色彩鲜艳的几何图案,建立出富有深度且眼球的视觉,通过对比让用户将留意力集在较大的文本和 CTA 元素上。文字采用了简约的非衬线体,这使得它们能够从黑色和绿色的布景中脱颖而出。

  

纹理的条理对于全体的结果是有所支持的。值得留意的是,布景中的纹理和图案、布景以及前景元素之间的对比。