返回  

2017年,值得继续关注和借鉴的网页设计趋势(Part 1)

2017/2/17 11:15:42 来源:

每年,我们总能从网页的设计中学到一些新的东西(不管是技巧、方法,还是其他的一些Blabla…),2016年也一样。

基于去年的相关文章获得不小的认可和成功之后,我们决定对2017年可能流行和大篇幅运用的设计风格和方法做一些预测,让我们开始吧!


总所周知,设计趋势受到媒体、技术、时尚业以及时下可用性的影响。 变化的趋势逐渐缓慢,同时逐渐地进入所有设计分支,然后以完全相同的方式消失。 基本上设计趋势的生命不超过一两年。 2017年的设计趋势将继续在2016年实现的基础上变化成长,同时势必也会增加一些新的影响,但感觉可能是大同小异或者说有些似曾相识,你可能已经看到它在过去几年在网页设计上面已经有所应用。 Google的Material Design依然延续它主要影响者的地位,不过不可避免的,还是受到了一些影响而变化。


01.半扁平化设计

在过去几年中,扁平化设计统治了网页设计市场,但现在,受到Material Design的影响,它的尺寸越来越大。 这种过渡从一些光影开始,使其成为半扁平化设计。 半扁平化设计从简约风格的演变适应新的发展技术。 不过,扁平化设计还在,但它已经经历了一些改进。

平滑的阴影增加了深度和复杂性,而不破坏扁平化设计的感觉。 这是一个新的功能添加到扁平化的趋势,并将在2017年继续发展。

Project: Resourсe | UI/UX Tool for Web Services     Author: Ruslan Latypov; LS Graphics; Anton Mishin; Valery Gurkov

Project: Listener's Playlist     Author: Anzi .


02.Cinemagraphs

Cinemagraphs不是我们在一版网页设计中看到的常规GIF。 Cinemagraphs是静止图像,但是吸睛的地方在于有少量元素在其中移动。 这种技术使一个简单的照片更逼真,把它带到生活。

03.更多的3D元素

3D绝对是设计演进变化趋势前进的方向,我们将看到它在所有设计领域的影响。 尤其随着VR / AR正值势头强劲之时,该设计趋势的发展将会更快。

Project: LUV.IT     Author:  AARON MARTINEZ

Project: Open Annual Awards     Author: TAVO

Project: Air Max '17     Author: Berd -; Lukas Vojir; mark haley; Oliver Harris; Jeff Thomson

Project: NIKE F.C. | 3D Golden balls in the real world     Author: TAVO

Project: Better You Brand     Author: Craig Minchington; Satellite Office; Brand Nu

04.动态效果的引入(动效

动效在网页设计中的运用越来越频繁,也越来越广泛,它们可以是gif,SVG,WebGL CSS或视频。动画肯定是去年网络设计趋势中最大的一个,所以不要犹豫使用它们。

Project: Nickelodeon Kids Pick The President     Author: JeanPierre Le Roux

Project: AR Virtual Fitness Coach App | AR 虚拟健身教练     Author: 曲 植Daz_Qu

Project: UI Collection in Motion     Author: Minh Pham

Project: ZH OURO- Rio 2016     Author: Leo Natsume; Guilherme Maron

05.登入页面

在2017年,我们会看到登入页面由于其在营销目的的潜力以及能更好地瞄准访问者的能力而义军突起。


06. 几何形状,样式,线和面(点、线、面)

这个趋势开始于2016年,一定会在2017年继续延续他的风格。他独特的风格在于,设计师可以通过添加一些简单的现代形状,平面或用柔和的阴影来使网站更具个性化和独特性。

Project: Pfizer - Active and 50+ for The New York Times     Author: justyna stasik; Vladimir Marchukov

Project: DRAP.agency Branding     Mireldy Design; Filip Gjurin

07.大胆的配色

使用大胆的颜色是自己的风格独树一帜。 不可否认,仅仅添加一些大胆的配色就能使得实物化设计和平面设计呈现的更加完美和大气。 如果同学们对配色一时没有太多的想法或思路,建议使用Google提供的调色板来选择和配对所需的颜色。

Project: Edris - Logo Designed by MiLo     Author: Loredana Papp-Dinea; Mihai Baldean; Milo Themes

Project: Rendered — Responsive Demo Website for Adobe     Author:Serge Vasil

Project: b2mach     Authors: Natalia Żerko; Kuba Enzowski; Kommunikat Studio

08.创意的滚动形式和视觉差效果

这个对视觉所做调整的想法或者说点子简直可以说是伟大的,你可以添加一个唯一的元素到任何网站。从多层视差到视频视差,使得在网页上面呈现任何东西都成为可能并且极富活力。

你可以搜索D.ex Multilayer Parallax这款视差产品。 该产品完全由Milothemes在Loredana Papp和Mihai Baldean的领导下开发。它是一个WordPress插件,允许您创建对于一层的美丽的视差效果。 极具创造性和并且能以任何你想要的风格组合图层。 

Purchase D.ex Multilayer Parallax for WordPress

09.渐变色的应用

渐变色的应用是目前最大的趋势之一。 它始于2016年,并成长速度惊人,使得像Instagram这样的大品牌决定将他们的标志和图像从平面颜色更改为多颜色过渡。 从标志,按钮或图片叠加,这个趋势无处不在。

10. 移动端浏览(响应式设计)

2015年至2016年是网站移动端浏览极为强盛的一个阶段,移动端的浏览量取得了相当大的增长。 甚至于平板电脑和智能手机现在浏览网站的数据超越了台式机,成为除了笔记本电脑和平板电脑的第一选择,并且这种趋势将继续。可以说任何目前不专注于响应式网页设计的网站都面临着升级!


----图文来自:Behance 由Clh编辑整理翻译