2017年网页背景设计的五个趋势!

小编:@丧心病狂十六夜猫:几何图案与全屏背景图结合、灰色背景的应用、鲜艳色彩的重叠使用、非对称设计以及抽象效果设计这5个网页设计趋势,早在2016年就被大胆使用,2017年它们被大范围运用几乎是势在必行。

​作为代替网页设计中一般常用的白色背景,为什么不试试更具现代风格的图片呢。

因为大多数简约风格依然具有人气,设计师们作为白色的代替,也开始选择使用鲜艳的色彩和灰色的组合。在背景效果中,不论是酷炫的几何图形、左右不对称的图案还是使用抽象图像。各种各样的技术你都可以大胆的尝试,创造出更新奇的提案。

这一次,让我们来一起看看2017年可供参考的网页制背景设计趋势吧。

详细从以下开始。

​01. 几何图案与照片相结合

​使用英雄形象和插图的设计,是最受欢迎的背景风格之一。利用大图将用户的视线集中是最合适不过的了。

在多数情况下,利用全尺寸图像作为主页的背景,文字和导航菜单,CTA按钮或信息等会布置在图像的顶部。

英雄图像新的使用方法,为了实现更有趣的视觉效果,我们可以使用在图像上重叠几何图案的技术。漩涡或长方形等,设计师可以添加各种各样简单的样式和形状。(在这里插一句,这里所说的英雄图像并不是我们所熟知的印着超人猎空克里斯的图片,而是指:在网站首页上使用的大尺寸图片。在日本,作为视觉的关键,也被称为主视觉。在Bootstrap中也有命名为「Hero unit」的组件而被大家广泛使用着。资料来源:ヒーローイメージ)

做好这项工作,就要记住目的是利用几何图案。视线集中的几何图案重叠的部分,如果能促使用户进行特定的行为就更好了。如果在黑色或黑暗系等沉重的背景之中加上颜色,将会起到非常棒的引导视线的作用。利用图形,还能够提升品牌价值。特别是在使用相同形状作为LOGO的场合中,谁能给用户带来更强调信息性,谁就能更好的与用户相关联。

02. 利用灰色

​加入少许灰色,你可以很轻松的在网页上实现简约风格。作为平凡的白色背景的代替,在背景上加入淡灰色的网页正在逐渐增加。

灰色背景最棒的地方就是:不管色彩多么丰富,不管是暖色还是冷色的图片都能很好的表现出来,在品牌颜色或图像周围使用灰色与之调和也能给人留下不错的印象。还有,在平面的色彩上使用淡黑的灰色作为阴影也是很不错的。(如图2)

不管你选择怎样的颜色与灰色配合,你都要记住在其周围所环绕的要素,他们的工作都是帮助用户去感受颜色。例如上述中的例子 Paul Valentine ,与淡粉色相组合给人一种柔和的印象,而投资组合网站 S.Dallyn 则表现出一种现代的氛围。

03. 重叠鲜艳的色彩

​在图层上重叠几何图案作为背景,使用色彩元素也可以实现相同的效果。选择鲜艳的配色,对于背景设计来说可是非常大胆而又独特的。

通过这些颜色的背景,将用户引导至设计全体,添加了具有视觉效果点的同时没有图像和别的设计要素创造出了留白空间,能够达成一举多得的效果。

这种趋势的根源,是因为各种各样的设计趋势已经影响到了色彩的领域。许许多多的色彩或层,能够表现出材料设计(又或是从平面设计风格衍生出来的东西)的氛围。这样的趋势组合是设计自然进化的结果,他既能完全的更新调整我们现在的网站,又能很轻松的采用。

04. 采用非对称的设计

​让我们不使用网格来布局吧。(或者至少尝试一下调整为左右不对称。)

背景设计并不需要完全的对齐每一个要素、图案。此外,他也没有必要是纯色或者图案。

将网页设计所需要的要素组合起来,围绕左右不对称来平衡的配置他们吧。例如在上述案例 Nap Luxury GuestHouse 中,画面被整个英雄图像所充满,仅在右侧留有少许留白。还有在 CMMNTY 中,文字文本破坏了空白空间的平衡,将用户的视线强制性的转移到文字上来了。还有在 vase 这个案例中,在特大的商品图案上,仔细斟酌文字文本放置的位置使得设计整体十分出众。

05. 抽象效果与抽象艺术设计

​在做背景设计时想法有时也会不切实际。在那种时候就来试试抽象设计吧。颜色、形状、和一些小花样而组合起来,表现出与别人不一样的有趣的视觉效果。

在做网页设计的时候,与其他的作品有着视觉上的差异是非常重要的,引起用户的兴趣抱着“这是什么?”这样的想法来点开网页是必要的。设计与别人相似的情况下,用户也没有什么理由来访问你的网站了。

将看起来漂亮的设计时刻挂在心上。将有魅力的文字一起组合起来,去享受设计的乐趣吧。大胆的将尝试别人所有没有使用过的有趣的想法运用到实践中吧。

最后

你的网站是否使用了老旧的,过时的背景风格呢?(因为每个人都会出现这样的问题,所以承认也没什么大不了的。)

那个时候,重新设计一个更具现代感的背景风格会让你的网站变得更棒。参考介绍的这些案例,让每一次设计都变得不同,多尝试一些具有创意的风格吧。

photoshopvip

译文地址:微博

译者:喪心病狂十六夜貓​

(0)

相关推荐

  • 网页背景设计技巧大全

    网页中的背景设计是相当重要的,尤其是对于个人主页来说,一个主页的背景就相当于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接受程度,还能影响访问者对整个网站的印象.如果你经常注意别人的 ...

  • 2017年十个UI设计趋势

    UI 设计越来越重要,它在直观塑造企业形象的同时,也成为留住用户的关键.与此同时,UI 的设计风格每一年都在发生变化.就像是扁平化.手势.微交互.卡片式成为过去两年中的关键词一样.总有一些好的设计总是 ...

  • 如何修改手机版360浏览器的网页背景

    今天,小编给大家分享修改手机版360浏览器网页背景的方法,希望对大家有所帮助.具体如下:1. 首先,请大家在自己的手机中找到"360浏览器"图标,点击进入主界面.2. 第二步,我们 ...

  • 如何更改手机版UC浏览器中的浏览网页背景

    今天,小编给大家介绍更改手机版UC浏览器中浏览网页背景的方法,希望对大家有所帮助.具体如下:1. 第一步,请大家在自己的手机中找到[UC浏览器]图标,点击进入主界面.2. 第二步,接下来,我们需要选择 ...

  • 如何调整手机uc浏览器中的网页背景颜色

    当我们在使用手机的时候,可以下载uc浏览器来浏览网页,如果不喜欢系统默认的纯白色网页背景的话,是否可以对网页背景色进行调整呢?接下来就由小编来告诉大家.具体如下:1. 第一步,打开手机中的uc浏览器, ...

  • 一个环保主题页面(网页版面设计过程)

    今天推荐的页面设计中,作者为贴近主题使用了大量的图片合成技术制作了两张环保类的网页背景图片,并且将一些导航信息巧妙的加载在其中. 原文作者:jimz_wu 相关文章推荐:

  • 20个炫酷好玩儿的网页导航设计

    小编:简单有效的导航栏设计能够极大的提高用户体验,不仅能让用户更快找到他们想要的内容,还能适当分担搜索引擎的压力.今天为大家分享20个炫酷好玩儿的网页导航设计,比起传统的导航会相对更复杂一些,但是绝对 ...

  • 2018网页UI设计:轻松搞定视觉层次感

    众所周知,相较于平淡无奇,毫无重点的网页UI设计,具有良好视觉层次结构的网页UI设计更受用户青睐.为什么呢?答案其实很简单.极赋视觉层次感的页面设计不仅极具设计美感,取悦用户身心.而且还建立了清晰直观 ...

  • win7系统设置网页背景颜色如绿色和豆绿色来保护眼睛

    当我们长时间使用电脑浏览网页的时候会发现眼睛酸涩等现象吧,因为网页背景是白色的,相对于容易产生刺眼,长期下去也会影响我们的正常视力的,所以为网页设置一个保护色是必不可少的吧,大家都知道绿色和豆绿色会对 ...