Hi,我是优设小编

cyRotel

浏览全部 4158 篇文章

到我的微博瞧瞧

2017年,这5个网页设计风格可能会成为主流趋势

2017-website-design-5-trends-1

丧心病狂十六夜猫:几何图案与全屏背景图结合、灰色的高级用法、色彩叠加… 这篇总结的这5个网页设计趋势,其实在年底就初现端倪,所以2017年大面积运用几乎势在必行,想不落人后记得打开阅读哟。

最全面的设计风格:《没灵感?这里是最全的15个设计风格总结!》

趋势系列:

  1. UX设计丨《2017年即将流行的9大UX设计趋势》
  2. 前端技术丨《腾讯工程师:2017年前端领域可能迎来的6个发展趋势》
  3. UI设计丨《趋势丨8个你需要知道的2017年UI设计流行趋势》
  4. 硅谷设计师的预言丨《2017年,这五条设计趋势将惊艳整个设计圈》
  5. 为什么你不适合看趋势文丨《自学丨从零基础新手到高级UI/UX设计师的阶段心路分享》

​01. 几何图案与全屏背景图相结合

uisdc-web-20170212-1 uisdc-web-20170212-2 uisdc-web-20170212-3

全屏背景图的设计,是最受欢迎的背景风格之一,利用大图将用户的视线集中是最合适不过的了。在多数情况下,利用全尺寸图像作为主页的背景,文字和导航菜单,CTA按钮或信息等会布置在图像的顶部。

如果想实现更有趣的视觉效果,我们可以在图上使用重叠几何图案的技术。设计师可以添加各种各样简单的样式和形状。

做好这项工作,就要记住目的是利用几何图案。视线集中的几何图案重叠的部分,如果能促使用户进行特定的行为就更好了。在黑色或黑暗系等沉重的背景之中加上颜色,将会起到非常棒的引导视线的作用。

02. 灰色的运用

uisdc-web-20170212-4 uisdc-web-20170212-5 uisdc-web-20170212-6

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

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

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

03. 重叠鲜艳的色彩

uisdc-web-20170212-7 uisdc-web-20170212-8 uisdc-web-20170212-9

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

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

04. 采用非对称的设计

uisdc-web-20170212-10 uisdc-web-20170212-11 uisdc-web-20170212-12

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

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

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

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

uisdc-web-20170212-13 uisdc-web-20170212-14 uisdc-web-20170212-15

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

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

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

后记

你的网站是否使用了老旧的,过时的背景风格呢?

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

趋势系列:

  1. UX设计丨《2017年即将流行的9大UX设计趋势》
  2. 前端技术丨《腾讯工程师:2017年前端领域可能迎来的6个发展趋势》
  3. UI设计丨《趋势丨8个你需要知道的2017年UI设计流行趋势》
  4. 硅谷设计师的预言丨《2017年,这五条设计趋势将惊艳整个设计圈》
  5. 为什么你不适合看趋势文丨《自学丨从零基础新手到高级UI/UX设计师的阶段心路分享》

2016uisdc-classroom-new

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/2017-website-design-5-trends