总结|2017年的5个网页设计趋势

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


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

总结|2017年的5个网页设计趋势

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

总结|2017年的5个网页设计趋势

总结|2017年的5个网页设计趋势

总结|2017年的5个网页设计趋势

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

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

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

02. 灰色的运用

总结|2017年的5个网页设计趋势

总结|2017年的5个网页设计趋势

总结|2017年的5个网页设计趋势

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

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

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

03. 重叠鲜艳的色彩

总结|2017年的5个网页设计趋势

总结|2017年的5个网页设计趋势

总结|2017年的5个网页设计趋势

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

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

04. 采用非对称的设计

总结|2017年的5个网页设计趋势

总结|2017年的5个网页设计趋势

总结|2017年的5个网页设计趋势

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

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

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

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

总结|2017年的5个网页设计趋势

总结|2017年的5个网页设计趋势

总结|2017年的5个网页设计趋势

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

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

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

后记

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

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

 

作者: 丧心病狂十六夜猫

来源:优设

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24254/

(0)
CatherineCatherine
上一篇 2017-05-08 03:17
下一篇 2017-05-08 05:18

相关推荐

  • 来自腾讯ISUX的交互微动效设计指南

    本设计指南适用于UI界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率。

    2017-04-28
  • 设计实战|城市指南网站着陆页是这样设计出来的

    今天咱们要聊的是“城市指南”(Big City Guide)网站这一概念设计案例研究。

    2017-06-06
  • 如何做好新领域下的产品交互设计

    我所在的大数据部,是百度技术体系中一个极具技术与产品创新的部门。因此,作为交互设计师会设计各种行业的产品,已经接触过的行业有网站统计分析、旅游、金融、广告营销、医疗、房地产、零售O2O、彩票、体育、汽车…

    2016-05-10
  • UE网APP现已发布:UE小组,致力于自学UE。

    UE小组是为:ue自学者提供一个自学UE的渠道和平台,希望能帮助到大家 UE小组的官网:UE小组 豌豆荚、360市场也可直接搜索“UE小组” 进行下载 现在支持安卓版本,稍晚些支持IOS,请广大苹果用户持续关注。 IOS和安卓…

    2015-05-27
  • 译文 | 交互设计的5大支柱

    文中提到的《交互设计最佳实践:卷1》/《用户体验设计文档指南》/《2014年Web UI模式》可在此处下载,建议先保存到网盘~

    2017-05-27
  • 手游《纪念碑谷》交互设计特点分析

    关键词: 1. 节奏的控制 2. UI的APP化 1、节奏的控制 1) 纪念碑谷为什么慢节奏? 首先解释下本游戏的玩法:玩家探索建筑(迷宫)的路径,走到终点即可通关。玩家需要寻找并使用机关、旋转建筑、移动人物、运用NPC。这…

    IxD案例 2015-08-27
  • 2018年交互设计的6大趋势

    ♝点击上方“交互设计学堂”关注我们,送电子书设计是围绕人解决问题,因此对2018年交互趋势的预测,我们将目光聚焦在细腻的情感体验打磨、达成目标的交互介质、解决问题的效率、发生交互行为的场景这几个方面,探究出了以下6大趋势:全感官体验All-sense experience趋势简述人有五感,强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态,而更真切的感知信息是用户体验升级的客观诉求,全感官体验能更好的打造“身临其境的沉...

    2018-02-07
  • 搜索结果页优化的10条最佳实践方法【UXRen译#175】

    作者:Nick Babich   |  翻译:猫猫DE爪,校审:兔兔瑶   搜索就像是用户和系统之间的对话:用户键入他们的信息需求作为问询关键词,系统则展现出它的回答作为一组结果。搜索结果页是搜索体验的一个重要部分:它提…

    交互专题 2023-03-03
  • 交互系统和设计目标

    交互设计:是针对用户与产品之间的“交互行为”来进行设计。可以理解为对交互系统的设计。系统的概念系统可以类比为自然间的生态系统、人体的生物循环系统、公司也是一个系统。他主要有一下几个基本概念:1、系统是一个有机的整体,各个元素之间不可分割,相互作用构成系统。2、这个系统定具备明确的功能,可以用来完成某项任务或支持某些行为。3、系统的功能是由所有的要素共同支持的。4、系统的功能应是稳定的,在各种使用场景下,都能提供功能。5、系统的功能应具备...

    微信热点 2018-02-11
  • 一个精美的手机的原型怎么产生的第一集

    阿西录了下视屏尝试下最直接的方式 ,你看着我怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-1 在线播放! 第一集: 第一集下载地址:点我点我 第二集下载地址:点我点我

    交互设计 2014-09-05