Scroll
2018-07-23  承德网站建设

在网页设计中使用背景纹理的7个提示

这不是您用于网站背景的典型纹理综述。如果你正在寻找一个特定的纹理,我们在这里有。但是如果你想创建你自己的呢?或者找到一种方法来定制纹理以适合您的项目?这就是我们今天要关注的。




虽然在网页设计中使用纹理有很多种方法,但如果采取现代化的方法,并且遵循一些简单的规则,您会从这些背景中获得更多的里程碑。以下是七个提示,可帮助您在网页设计中使用背景纹理(并符合2018年设计模式和趋势)。


1.简单易懂


一个伟大的背景纹理可能甚至不会被许多用户注意到。它应该是一个几乎不可见的元素,有助于提高整体的可读性和可用性,同时提供深度或视觉利益。


简单而低调的背景纹理是完成此操作的最佳方式。对于去年年底的一个活动,Github的宇宙会议采用了包含简单的黑色背景和白色圆点的设计。夜空效果确实会落入背景中,因此很容易找到有趣的渐变标识和事件信息。


简单的背景纹理倾向于具有小的或紧密的重复图案,几乎可以是任何颜色。这个想法是这些背景纹理不是焦点; 它们有助于引起对设计其余部分的关注。



2.大胆大胆


也许微妙不是你的事。如果是这种情况,请选择大而粗的背景纹理或图案。


这些大于生活的风格适用于前景更为文字或用户界面元素沉重的设计,并且没有其他竞争图像需要处理。使用这种类型的背景纹理可能会变得棘手,从创建用户无法看到的平铺图案到避免背景无意成为整个设计的主要焦点。


为确保您的超大尺寸背景纹理正常运行,请注意一次分析和用户习惯以进行更改。流量或转化率急剧下降是您视觉和用户可能未连接的一个信号。



3.结合趋势


带有潮流的背景纹理可以让您的设计感受到超现代和新鲜感。


随着现在所有的愤怒几何形状,难怪阿帕西奥的网站是吸引人的。通过在深色背景上混合使用鲜艳的几何图案,该图案可创建出色的纹理和深度,从而帮助用户将注意力集中在较大的文本和呼叫行为上,因为这些元素与背景形成鲜明对比。文字 - 简单的无衬线字体 - 似乎可以从绿色的形状中解脱出来。


纹理的分层也有助于这种整体效果。请注意,颜色会将“背后”较亮元素的较暗元素分成两层背景。



4.使用图像


背景纹理不一定是您从下载网站获取的重复模式。一些最好的背景纹理是与品牌或主要信息相关的图像,以增加另一层级的视觉兴趣和参与度。


诀窍是有效地将图像淡入背景中。(这并不一定意味着使用淡入淡出技术。)淡入淡出图像意味着它从主图像区域脱离并进入距离。


在上面的例子中,Oxeva通过两种方式做到这一点:它使照片变暗,以便只能看到城市景观的轮廓,并且在前景中使用大胆的颜色处理来自然地绘制眼睛。这张照片也有点模糊,所以图像是可以辨认的,但是不能提供使照片的细节更为重要的详细程度。



5.使用颜色变化


混合并匹配来自相同调色板的色调和色调,从文字或形状创建粗体纹理。颜色的变化,即使是在同一个家庭中,也会产生深度和视觉上的兴趣。


类型的类型使用颜色与巨大字母的有趣组合来创建背景纹理。即使没有诸如渐变或阴影等技术,来自字形的线条也会建立深度和平衡,同时帮助将眼睛吸引到背景中的颜色与主要标题所在的位置。



6.抓一个渐变



渐变是时尚和视觉吸引力。当使用渐变作为背景纹理时,您可以单独使用或使用照片对其进行分层。


几乎所有的颜色组合都会去,所以使用渐变创建纹理和深度并不困难。如果您尚未有想要处理的色板,可以从WebGradients中找到您喜欢的渐变色组合。https://webgradients.com/


Mobipad使用多个微妙的渐变在背景中创建深度和纹理。前景中的插图动画几乎从渐变中弹出,而深色的动作很容易看到。渐变纹理中较亮和较暗的空间有助于移动用户在设计中移动一目了然。



7.动画它


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


为了充分利用这种类型的背景纹理,运动应该很细微,以免影响主图像或消息传递。包括一个柔和或微妙的调色板,如上面的拉脱维亚语字母,也是一个不错的选择。


此动画可以包含移动或扭曲或旋转或视频的元素。运动是吸引用户注意力的好方法。通过确保此议案不会压倒设计的前景,充分利用动画背景纹理。


结论

一个伟大的背景纹理可以增加您的整体网站设计的深度和视觉兴趣。尽管许多设计师仍在使用更平坦的背景 - 例如单色 - 添加一些纹理可以让您的项目脱颖而出。


使用纹理的诀窍是它们必须微妙且实际上落入背景中,以便前景元素易于阅读和理解。这可能是一个相当微妙的平衡。记住要在背景纹理和前景图像,用户界面元素和文字之间建立充分的对比,以最大限度地发挥整体设计的影响力。





标签:公司网站制作,承德建设网站,官网建设,网页制作公司,建网站公司,企业建站,承德网站建设公司,承德网页设计公司,承德网站设计公司,承德企业网站建设

 




上一篇:创建承德网站内容的8点建议
下一篇:建设网站时可以为用户添加哪些便捷性功能