2017网页设计趋势分析

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

1.大屏幕体验

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

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


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

大屏幕的的图片从去年（2014年）开始流行，随着图片品质的大大提拔和页面速度的赓续优化，我们可以看到那些采用杂志结果的页面给人的团体感觉提拔到了一个新的高度。


如今这种趋势流行的很快，许多大型网站比如Paypal都用起了如许的背景。

2.多媒体体验

多媒体这个概念由于被滥用，所以它听上去好像已经过时了。在现在，多媒体一词也必要被重新定义。越来越多的设计师和程序员在增长多媒体体验这一条道路上前赴后继。

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


另一个值得一提的用HTML5的例子是音乐家Jonathan Dagan的项目DNA-PROJECT。一打开页面就是就是一个视频作为网站的背景，Dagan通过如许的体现情势，用他的小我经历来讲述他的小我音乐专辑的故事。

Raise the river是另一个很棒的项目。不仅仅是由于它的视觉隐喻，更在它的多媒体显现上。页面滚动的速度和页面边小河流淌的速度同等，暗示了每张图片之间的联系，也给了整个页面更雄厚的体现结果。

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

3.视差滚动
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的活动结果，带来特别很是出色的视觉体验。完善的展示了一个复杂的过程，让你犹如置身其中。厌倦了一模一样，呆板网页设计的你不防

一试。感受一下下面的Mint Design Company这个网站。

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

4.风趣的故事

在Boldking的页面中，和第一个例子类似，当你的滚轮滚到一个特定的位置的时候，就显现出了特别的页面结果。通常情况下，一样平常都是一些页面元素采用淡进和淡出的结果。

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

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

看上去有点像视差滚动的结果，但是3D CSS就完全可以做到隐蔽和表现笔墨部分的结果。

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


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

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

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


我想这种趋势会和更多的视觉元素混合发展，就像HábitatWeb这个网站一样。

6.方框削减
网页设计师总是喜好夸耀本身的思维能够跳出框框，而且能以不止一种体例跳出方框。姑且称之为“画一个框框然后证实你能打破它”理论。矩形表现器自己就是对网页设计师的约束（别说你见过圆形表现器）。网

页上的每个HTML元素也是方形的。

但是跟大多数人一样，设计师不喜好被约束。下面提供据我判断目前处于上升期的几个趋势，可以作为证实你不是矩形奴隶的长期战略计划。

就像不存在矩形边框一样去设计布局


详情点DAN Paris.  DAN的instagram photo由圆形组成菜单导航.

协调元素：圆形，六边形，不规则外形，甚至菱形。


详情点Lorenzo Bocchi

以轴测图的视角展示的水平倾斜视角和网站布局预览，给人空间和活动的感觉。


详情点The Rosa
在罗萨餐厅主页你的感官会被骗到–你几乎可以闻到饼干的香味。其实不是新技巧，它是一个当代版的以百年老技术trompe-l’œIL,模仿镜头下的真实桌面。例如，把木桌作为背景，然后把所有的布景物体放置在上

面。


详情点Swiss Airlines

否定矩形的根本方法是将用户置于一个无穷的空间里，滚动页面就可以遨游飞翔，呃，滚起来。
瑞士航空公司的挑衅了你的网站导航的理解。欣赏他们的页面，你会感触我们对文档空间的理解是多么常规和局限。在这里，不是鼠标在向上或向下，而是我们在云里自由穿梭。

7.贴瓷砖

假如你和矩形相处得很融洽，那么有一个很酷的体例来组织你的内容：贴瓷砖。不知为何瓷砖在网页设计这块比在Windows 8 Metro界面这块更为流行。瓷砖特别很是适用于相应式布局，同时是一个形成令人印象深刻的布

局元素。

假如贴瓷砖变得太无聊，可以尝试进一步把边缘锯齿化，然后把对象或者文本推出锯齿边缘。

8.导航控件


Daily Beast网站导航控件把滚动方向表现在文章内部。

导航设计一向是网页设计师最喜好的游乐场。“玩”导航达到巅峰的时候，网站是纯粹的Flash设计。Flash消散后菜单
变得恬静了，没有了动画或夸张的交互。

但尖锐导航趋势又一向在上升，部分是因为新的网页设计趋势和现有的导航模式的低效。因为Java的赓续演化和当代CSS在各个欣赏器中更频繁的被阐释，Java Script脚本的更广泛的应用（通过框架和插件），因此

尖锐导航设计的实现变得更为容易。

这里有几个导航设计试验和趋势的几个例子。其中部分想法已得到了广泛的应用，而其余的作为一种复活力量在推动网页设计
走向。

粘性菜单


菜单在鼠标滚动时赓续扩展相干项目。它适用于有许多内容的单页网站。The LESS的菜单是一个少有的特别很是舒适的使用“手动”的网页。

粘性菜单是当鼠标滚动时菜单仍停顿在屏幕的顶部或边缘。不管你喜不喜好，它正在成为单页网站的标准。

偶然它结合scrollspy脚本创建一个部件能正确表现欣赏者在页面详细位置，这在是有长长条理关系菜单的网页里尤其实用。

贴在屏幕四角的粘连导航


详情点Hum

街景视角导航条


详情点Oh Dear Games

谷歌地图，分外是街景，启发了这个网站开发者创建类似通过谷歌街景步行的导航。时间会告诉我们它是否能成为一种趋势。

9.结合谷歌地图


把这个特点作为2015一大趋势，不仅由于它已经在近几年渐渐崛起（而且我们看它几乎无处不在），而且它正变得越来越风趣，这得益于谷歌提供的易用定制选项。

按这个特点做的最风趣的网站是在一个地图概念图四周进行功能区和视觉上的创意构造。当然，它使用的是定制的谷歌地图以优秀地配合页面的表面和感觉。

10.混搭界面


详情点Necotrans

对单页网站持续的偏爱所带来的挑衅是可以解决的，而且是以一种创造性的，用户友爱的且直观有吸引力的体例解决。面临的挑
战是要在一个页面上包容许多信息，实现许多功能。所以页面必须有一个整齐，当代的表面和易用的导航。

该解决方案可以称为混搭界面：一个布局包括很多“层”，适应所需的功能或内容。现实这不是新概念，它本质上很类似于桌面应用程序，却没有在主流的互联网上广受迎接。最近，这种界面的使用率在增大，他们

变得越来越细腻，功能多样。

Necotrans网站在网页上方好像没有什么内容，仅仅在全屏背景上打上一行字。但是侧菜单许可访问所有需要的功能，为用户提供站点搜索工具，定制的谷歌地图，消息版块和联系体例表单。

11.极简化


详情点Maemo

20世纪60年代以来，经典的KISS原则（“Keep It Simple, Stupid”的首字母）已被用于军事，企业和当局。然而，即使你可能已经很努力的简化你的设计了，它大概还有进一步简化的可能。

Maemo餐厅用不可抗拒的口吻，最精炼的语言讲述本身的故事，冷雾萦绕的峡湾上悬着餐厅的名字。欣赏者只面临一个去勾引——举措（订一个餐位）。

向下滚动会看见随意布置的几张照片，很难说是水平照旧垂直对齐。照片的主题看起来也很随意。然而，欣赏网页会给人强烈的感官体验。

苦行僧的情势提拔了照片的质量，而这种极简主义让你很乐意去读照片下方的几句禅语。

从这里能学到什么？你可以在网页上保持视觉上的沉静，同时实现震撼的视觉结果！尽量削减笔墨、表格和色彩的同时，要添加大幅真切的视频来营造趣味性。

12.加载网页设计


我们能曩昔所未有的快速度创建网站，如使用高清视频网站后台。但每一步都是有代价的，在这种情况下，代价是加载时间。

如今我们可以看到一个大逆转的视觉魅力的加载页面，而不像在Flash时代小游戏式的加载网页。

13.设计主动化


详情点grid.io

截图的是表现有错误的一个页面，没有人会去做如许的东西：在阴郁的背景放上不易读的黑色文本。

本文假如不提“grid”的话就不算一篇完备的文章–“grid”是由最近经常搞出动作的“折中的设计师”提出的一个吸睛的想法。它试图以人工智能庖代设计师和程序员的位置。将来网页设计师会变成多余的？有待

观察。

如今仍然无法测试这个假想体系，所以很难判断其可用性。这个体系做出的网站好像是其理论的唯一依据，这个网站对大多数题目应对优秀，但试图创造完全人工艺术好像是这个时代做不到的。例如，绘画傻瓜创意

软件还没有清除掉绘画艺术画廊。

 

结语
这13个网页设计的趋势已经蔓延在曩昔一年，也很可能会极大影响2015年的网站建设样貌。然而，假如我们用一句话来概括今年的建站趋势，就是“内容为上”。

这条定律一向很准。但现在，网页设计越来越强调美感，可以赓续指出很多在前期设计中所犯的错误：概念，导航流程规划，线框，文案写作等等。所以扩大视野和学习新技术的同时，要确保本身不要忘掉最基本的

东西。