2016年网页前端设计趋势案例推荐

2015年已经过去,网页设计的世界出现了很多新变化。2016年,在网页设计领域必将出现更为令人惊奇的革新。与以往不同的是,今年的变化将更为重大,更为有利。事实上,很多业内专家都预言:2016年将是真正属于网页设计的一年。

技术变日新月异,设计潮流也是如此。不同类型的公司都在设法赋予自己的网站更为时尚的外观,并致力于提高网站的响应性和互动性。

正如人们常会通过一本书的封面来评判该书的好坏一样,一个网站的审美,设计和功能往往决定了拥有该网站的公司的声誉。不仅网站的外观需要不断改进,网站的功能,呈现方式,加载速度以及更新方式同样需要注意。

在2016年,网页设计领域将迎来许多值得期待的新变化。网页设计潮流将摆脱夸张的阴影效果,复杂的材质和严格的分层,整体风格会变得更为简洁和扁平化。使用图片和互动元素将提升网站的吸引力,这一事实已得到广泛认可。

2016年,你的目标应该是设计出令用户着迷的,一再返回的网站。为了帮助你抓住先机,站在设计潮流的尖端,我们在这篇文章中列出了一些详尽的2016年网页设计趋势。绝对值得你一看!

新颖的滚动方式

由于智能手机的流行,今天每个用户都已经习惯了滚动式的长网页。根据UX Movement最近所做的一份研究,多数用户更为偏爱纵向滚动的网页设计,而非靠点击导航元素才能完成的网页切换。2016年,我们将看到不同以往的网页滚动方式。它可能是纵向的,也可能是横向的。可能是触控式的,也可能是动画滚动。总之,别忘了在你的设计中融合新的滚动功能来吸引用户。这同样可以为网站用户提供更多的乐趣和便利。NASA Prospect的页面就是创新式网页滚动方式的一个范例。该网站的网页滚动方式永远不会使用户感到无聊或无趣。不信的话,你可以自己去看看!

示例网址:http://nasaprospect.com/

根据Chartbeat.com上的一篇文章,70%的用户在该网站的网页还未加载完成时就已经迫不及待地滚动网页了。

标题和页面的平行视差

2016年的另一个重要网页设计趋势会是网页平衡视差运动。它将在用户向下滚动页面时营造出3D效果,从而为用户带来更多视觉乐趣。为了做到锦上添花,你还可以设法使用户每一次移动鼠标时,都能启动标题和网页的平行视差运动。

网页中平行视差的好处在于,用户每一次移动鼠标,都能看到不一样的东西。它也能让你用更为简便,更为有趣的方式将信息传达给用户。当然,任何事情过了头都会变坏,所以这种方式也不能过度使用。示例中The Royal British Legion网站就采用了平行视图的网页设计,它以极富娱乐性的方式传达了明确的信息。

示例网址:http://poppyspend.britishlegion.org.uk/

半扁平化(Semi-flat)的设计

这种设计手段已经存在多年,只是近些年才开始流行。如今,扁平化的设计风格随处可见,无论是在个人博客还是最著名的国际品牌网站中。扁平化的设计易于创建和管理。但潮流是永远变化的,越来越多的设计师都愿意在图标,目录和插画中增加一些元素以使网站更为丰富。

在需要创建使实用,独特和富有创意的网站时,很多网页设计师会毫不犹豫地选用扁平化设计风格。Vine网站就是半扁平化设计风格的一个典型。该网站将实时展示的图片与扁平化设计无缝融合,很多网页设计者甚至认为这个网站是半扁平化设计的最佳代表。

示例网址:https://vine.co/

突破思维框架的设计

这是去年最重要的网页设计趋势之一,可以预见,今年它依然会是网页设计的潮流。长期以来,长方形的网页布局一直是网页设计师们的第一选择。但在2016年,我们将见到更多的网页设计师精心的设计的,长方形之外的网页布局方式。

事实上已经有很多其他的几何形状被用于网页布局中了。不论是在体育网站,健身网站还是别的网站,长方形之外的几何布局都能收到不错的效果。这种设计手段不仅能帮助用户更好地利用网站的导航元素,也更能吸引用户的注意力。这类网站中一个极佳的范例就是Full Stop。这个网站醒目的圆形LOGO将用户的目光引向公司名称。其他一些著名的体育品牌如阿迪达斯和Columbia Sportswear也在各自的网站中融入了很多几何形状。

示例网址:http://www.fullstopinteractive.com/

全屏布局

我们现在要谈谈用一张图片布满整个网页(当然会有少量文字)的设计手段。俗话说一图胜过千言万语。这句话用在网页设计中最为适合不过。在网页中使用一张全屏图片或一段视频无疑能有效地从开始就抓住用户的吸引力。我们相信这一设计潮流在2016年会席卷网页设计界。

全屏布局最有趣的一点在于,用户可以更轻松地找到并理解自己所需的信息。这种设计允许你使用产品和服务的图片/视频来更有效地与用户互动。Jobs Is Free就是一个采用全屏布局的网站。它的简洁和迷人都使它成为一个趣味盎然的站点。

示例网址:http://www.jobsisfree.com/

互动式的叙事方式

视觉叙事——在所有处于上升地位的设计潮流中,这是最流行,最受欢迎的一种。它在2015年已登上舞台中央,在2016年也必将继续赢得关注。所以在今年,你应该勇敢地穿上讲故事者的装束,在设计中与用户分享一个故事。此外,还要确保你的故事是互动式的,这样能更能吸引你的听众积极参与故事,并促使他们在网站上停留更长时间。

你可以通过在全站点中设置谜题,调查,视频,图像,音频等来传达你的信息。下面的MoMA Century of the Child就是互动叙事型网站中的一个绝佳范例——它的确有让用户一直向下滚动网页的魔力!

示例网址:http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/

更少的网页数量

这个时代,更少就是更多(Less is more)!这句话同样适用于网站的网页数量。网站中采用单网页设计或简化的多网页设计,反而能吸引来更多的用户。记住,内容庞杂的网站往往会令用户不胜厌烦。

今天的用户已经不愿去打开多个网页了。随着移动设备的盛行,单网页设计成为更为简便的浏览方式。当你设计单页面站点时,通常浏览体验也更为新奇有趣。单网页站点Kocha将会告诉你,不用增加网页数量也可以成为最优秀的站点。

示例网址:http://www.kocha.com.au/

可缩放的矢量图形 (SVG)

SVG图形已经被使用了很多年,现在依然有着极其重要的作用。SVG图形在任何设备上都能保持清晰度和锐利度。它能将所有关键的网页元素与设计元素连接起来,使其适应各种尺寸的屏幕。W3techs.com的分析认为,目前只有1.3% 的网站使用了SVG图形。但我们相信2016年SVG图形将会成为创意网页设计的主流。下面就是一个采用了SVG图形的网站。

示例网址:http://snapsvg.io/demos/#coffee

响应式网页设计

如果你依然没有采用响应式网页设计的话,以下的惊人数据或许会促使你早做决定:

超过20亿人通过移动设备浏览网页

61%的用户对能提供良好移动浏览体验的品牌有正面评价

移动设备用户的消费额超过PC用户的50%

每五个用户中就有四个使用智能手机购物

Designhill.com发布的一篇文章透露,谷歌将响应式网页视为更优质的移动参数。响应式设计为用户带来了更好的用户体验,有助于提升网站转化率。如果你还未在响应式站点设计上有任何投入,现在就立即开始吧,现在开始总比不做好。Sparkbox网站就通过采用响应式设计实现了网页在不同设备上的无缝转换。

示例网址:http://seesparkbox.com/

幽灵按钮

使用大而花哨的按钮的时代已经结束。幽灵按钮,或透明按钮的使用,将成为2016年的另一主流。幽灵按钮也常被成为空按钮(hollow buttons),它的特点是仅包含按钮的边缘和位于按钮中央的简洁字体。这一特点使它看起来往往更有吸引力。World in My Lens站点中的幽灵按钮就非常有代表性。

示例网址:http://www.worldinmylens.com/

动态背景

动态背景可以采取多种形式,可以是效果强烈的图片,也可以是3D背景,甚至可以是一段视频。在背景中放置视频可以立即抓住用户的注意力,因为人的视线本能地会趋向运动。我们确信,在今年将会有更多的网站采用动态背景。Yanagiu Kamiko网站的背景是浸入式的,而且十分迷人。它让用户忍不住想去了解更多背景图片之后的故事。

示例网址:http://yanagiukamiko.strikingly.com/

分离式屏幕布局

分离式布局在2016年也会继续流行。这意味着网页将会分为两个或更多部分。这种设计方式使设计师能以干净利落的布局呈献给用户双倍的内容。在想要展示产品和服务的不同角度时,这种方式尤其有用。分离式的布局还可以用于比较两种不同的事物。例如,标志汽车的网站就在其主页上使用了分离式布局,将汽车的人性元素与汽车的技术元素并列在一起。

示例网址:http://www.peugeot.com/en

伴随着技术的快速革新,每年都会涌现出新的网页设计潮流。我们希望上面所列举的一些潮流能为设计师提供一些灵感,并帮助他们设计出更为独一无二的网页。

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部