你不得不关注的2015年网页设计趋势(上)

这篇文章我们讨论的是2015年新兴的设计趋势。作为设计师的你,你可以通过这篇文章发现新的灵感。

1.大屏幕体验

1422935855Big_Really_Big

大屏幕的体验是如今网页设计必不可少的一个部分。尽管对于很多人来说,很难接受主页只有零星几个词,取而代之的是图片和视频。有的时候,甚至导航都被隐藏成了一个小小的图标。

这两种类型的网页设计可以被标签为“影院效果”和“杂志效果”。前者常常是受到了电影和电视广告的启发,而后者往往是从书本或者页面的提炼出了传统精华。

1422935927book1

这种趋势形成的缘由可以从两方面来分析:一是视觉性,而是实用性。当用户登陆上你的页面时,PC端也好,移动端也好,你应当给用户最大的视觉冲击。

大屏幕的的图片从去年(2014年)开始流行,随着图片品质的大大提升和页面速度的不断优化,我们可以看到那些采用杂志效果的页面给人的整体感觉提升到了一个新的高度。

1422936007Use_of_Java_Script_snow

现在这种趋势流行的很快,很多大型网站比如Paypal都用起了这样的背景。

2.多媒体体验

1422936120jack_daniels

多媒体这个概念因为被滥用,所以它听上去似乎已经过时了。在如今,多媒体一词也需要被重新定义。越来越多的设计师和程序员在增加多媒体体验这一条道路上前赴后继。

在这之前,Flash是这些体验的平台。而如今HTML5的CANVAS元素慢慢取代了原来网页上Flash的地位。

1422938330street_view_inspire2

另一个值得一提的用HTML5的例子是音乐家Jonathan Dagan的项目DNA-PROJECT。一打开页面就是就是一个视频作为网站的背景,Dagan通过这样的表现形式,用他的个人经历来讲述他的个人音乐专辑的故事。

1422938418Navigation

Raise the river是另一个很棒的项目。不仅仅是因为它的视觉隐喻,更在它的多媒体展现上。页面滚动的速度和页面右边小河流淌的速度一致,暗示了每张图片之间的联系,也给了整个页面更丰富的表现效果。

我们在做页面设计的时候,我们做的所有事情就是增强用户的可用性。这个网页反其道而行之,它限制了你的滚动,反而会给页面带来更好的视觉效果。

3.视差滚动

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。完美的展示了一个复杂的过程,让你犹如置身其中。厌倦了千篇一律,呆板网页设计的你不防一试。感受一下下面的Mint Design Company这个网站。
1422938480Use_of_Java_Script

Mint Design Company这个网站巧妙地运用了CSS技术,效果简单但是视觉效果很棒。

4.有趣的故事

1422938590akso3

Boldking的页面中,和第一个例子类似,当你的滚轮滚到一个特定的位置的时候,就展现出了特殊的页面效果。通常情况下,一般都是一些页面元素采用淡进和淡出的效果。

这种轻量级的SVG和Java script的运用可以很好地达成这种效果。不仅仅因为带来的效果很出众,而且它们的运用才使整个页面大小为1.5MB。

Colin and Dewi的婚礼这个页面可以让用户专注于阅读他们的故事。你当前仅仅展示了他们故事中的一个部分,如果你需要看下个部分,往下滚动就可以了。

看上去有点像视差滚动的效果,但是3D CSS就完全可以做到隐藏和显示文字部分的效果。

5.扁平化设计

在过去三年中,扁平化设计一直占据着主导地位。就目前看来,这种趋势还将继续延续下去,尤其是一些更小的元素,比如图标、菜单和图片。比如Colin and Dewi这个网站。

1422938763Flat_Dsign

扁平化元素看上去非常简洁,而且大小可控。icomoon.io是一个免费的生成ICON的的网站,非常好用。

1422938815lab21s

Lab 21把扁平化设计转化为“手工设计”。

如果你的页面元素不全都是扁平化的,那也没有关系。设计师经常通过看上去与页面那么协调的元素来创造出惊人的效果。扁平化设计通过不同元素的拼接合成,来形成很好的视觉效果,并且适应不同大小的页面。

1422938686HABITAT

我想这种趋势会和更多的视觉元素混合发展,就像HábitatWeb这个网站一样。(未完待续)

 


文章转载请注明出处,并保留应酷设计博客地址完整露出,谢谢!

微信:iEnqoo,欢迎订阅每日最新设计咨询。

2 条评论

  1. Pingback: UI设计那点事

发表评论

您的电子邮箱地址不会被公开。