导读

2017年从事网络项目的设计师在某些方面面临着比以往任何时候都更多的挑战。他们必须创建具有吸引力的网站，应用和服务，可在所有设备上无缝工作，并以全球受众群体的速度工作，这似乎每年都在加速。观众也更加科技敏锐，有更高的期望，更有设计素养比以往任何时候，期望近乎完…

2017年从事网络项目的设计师在某些方面面临着比以往任何时候都更多的挑战。他们必须创建具有吸引力的网站，应用和服务，可在所有设备上无缝工作，并以全球受众群体的速度工作，这似乎每年都在加速。观众也更加科技敏锐，有更高的期望，更有设计素养比以往任何时候，期望近乎完美。面对这些挑战，设计师必须意识到新兴趋势，解决方案和模式比以往更重要，这些新兴趋势，解决方案和模式可以帮助他们解决常见问题，抓住观众的全部注意力并提供令人惊叹的体验。

在ZURB，我们已经帮助数百家公司提供最佳解决方案，并利用其网站和产品中的新模式。我们创造了17个设计和发展趋势的列表，我们认为每个设计师都应该熟悉这些设计和发展趋势，以塑造2017年和更远的。

（没有特定的顺序…）

残酷

它的名字来自60年代和70年代的建筑风格，设计中的残酷主义包括文字和图像的大胆的，面对面的拼贴画，任何东西。从过去的网页回应，Brutalist网站经常采用简单的标记，内联样式，粗糙的颜色和渐变。有些人甚至认为，Instagram的新（渐变）渐变标志可以归类为野兽派，它的90年代的霓虹灯的颜色和渐变的设计。

 

帕斯卡尔德维尔，在粗犷趋势的权威，和创始人brutalistwebsites.com运动定义为这样的：

“野蛮主义在其坚固性和缺乏关注看起来舒适或容易，可以被看作是一个年轻一代的反应，轻松，乐观和今天的网页设计的轻浮。

但并不是所有的野兽派网站都是对眼睛的全面攻击。一些网站，如彭博新闻和TheOutline.com借鉴的审美，而添加一个水平的波兰在大多数网站通常不见。

我们认为设计师可以使用野蛮主义来设置他们的网站与其他的大胆的颜色选择，大字体和布局，脱离共同的英雄形象然后3模式。

• 野兽派美学充分利用排版，所以选择正确的字体是至关重要的。查看这些提示，以传达正确的排版声音。
• 野兽派网站运行的范围从温和到野生。获得启发这些例子。
• Spotify已经调情了这种风格一段时间。看看他们如何使用大胆的颜色，强排版和拼贴灵感布局。

2.大屏幕设计

当大多数人想到响应式网页设计时，他们认为网站从桌面缩小到平板电脑或手机上看起来不错的网站。但这是忽略了一个越来越多的用户，那些有大规模的监视器。是的，虽然移动在过去十年中有一定爆炸性的普及，所以有超大的显示器，不断增加的像素密度。问题是，大多数重点似乎都在较小的一边，几乎没有网站真正适应他们的大屏幕用户。通过查看您的数据，您可能会发现大多数用户，或者至少您正在转化用户，都是在1920×1080或更高的显示器上。有很多很酷的和创造性的方式使用那种屏幕房地产和聪明的设计师不害怕去大。

 

我们认为设计师应该熟悉数据，并确切知道他们的受众是谁，他们是什么设备。通过使用像分辨率独立的SVG，粗体排版以及使用JavaScript提供高分辨率或低分辨率照片的技术，他们可以为每个人提供丰富的体验，即使是那些具有大屏幕的人。

• SVG是完美的大屏幕设计，因为它们是可扩展，独立于分辨率，具有小文件大小，并被大多数浏览器支持。这里有10个资源，了解更多。
• 使用CSS定位SVG允许您做一些很酷的事情，例如使用媒体查询根据屏幕大小隐藏和显示图像的部分。查看我们的课程，了解基础知识。
• Foundation中的交换组件使用媒体查询来加载适合用户浏览器的图像，从而使响应式图片更加快速。它减少了移动用户的加载时间，同时仍以更高的屏幕分辨率为您的访问者提供更大的内容。了解如何使用它。

响应组件

自从Ethan Marcotte向全世界推出响应式网页设计的概念已经将近8年了，我们已经看到它以令人难以置信的速度发展。虽然有新的技术和技术，这将大大简化响应元素的写作，并使今天的响应网站看起来简单和幼稚。一些示例是元素查询和即将到来的CSS网格规范。这两项技术将使网页设计师和开发人员能够创建真正适合每种设备尺寸的体验。元素查询将允许创建响应基于分配给他们的空间而不是全屏幕大小的组件，而CSS网格允许我们基于媒体查询大大改变布局。

在两者之间，我们相信我们将看到设计师和前端开发人员容易获得的响应模式的多样性的显着增加。

• 元素查询和容器查询为响应组件打开了新的视野，这里有10个资源要了解更多。
• 基金会团队打破了响应组件的工作原理，以及近期的新功能。

4.设备特异性微交互

到目前为止，移动优先方法意味着为小屏幕创建光滑和可用的体验，然后在桌面上分层更复杂的交互和动画。但随着移动网络工具的成熟和移动流量的日益增长，在桌面上，我们认为有很多机会利用本机范例的不同设备的移动为中心的互动。随着触摸和手势相关的JavaScript库的兴起，对于响应手势（例如，Twitter移动应用的推特刷新交互）的微妙动画有许多机会使它们进入越来越多的web应用。

正如Nick Babich在最近一篇关于Medium的文章中指出的，微交互为用户提供了他们的渴望。像Slack这样的热门应用程序在整个体验中巧妙地编织它们，让用户感到愉快，并使应用程序感觉更直观。

通过利用他们可用的任何东西，设备特定的微交互只会使微交互更具吸引力和个人。

• 学习微交互的基础知识，为什么它们是重要的，以及如何使用它们。
• 玩CSS动画和过渡可以帮助你建立和测试一些整洁的微交互。这里有几个技巧。

5.分屏设计

一个简单的方式来突出对比，平衡文本与图像，或共享两个不同的产品，分屏设计已经越来越受欢迎与许多设计师。易于实施，分屏设计是一种以一种感觉新鲜和平衡的方式呈现内容的好方法。对于需要比较的产品或网站，分屏设计是一个没有脑子。

 

我们已经看到了一些非常有创意的使用分屏设计，我们认为人们只是开始刮伤表面。我们期待这种模式可以用来说明一个独特的故事和指导用户的新方法。

• 获得灵感的一些伟大的例子分裂屏幕设计上模式水龙头。
• 还需要灵感吗？这20个例子展示了这种趋势的一些真正创造性的应用。
• Nick Babich提供了一些清晰的分屏设计最佳实践，您应该坚持下去。
• 只是因为他们很简单并不意味着他们很容易。构建分割屏幕布局时，请注意以下三点。

6.反应动画

本地移动应用程序的爆炸在这个十年使人们集中的设计的焦点。苹果的iPhone和iOS是突破，部分是因为他们使用设计模仿人类和吸引情感的方式。现在的设计看起来现在播放第二个小调的方式感觉。虽然移动应用一直是这些突破的驱动力，但桌面体验仍然感到笨重和不直观。但是，桌面浏览器，JavaScript和CSS变量的进步，使得有可能以真正引人注目的方式添加这些以人为本的互动。

我们认为我们很快会看到更多的技术，推动在浏览器中的可能性，由动画重重的交互。

• 我们的反应式监听器操作区块是一个很好的例子，如何使用反应动画来突出内容给用户，甚至在他们采取行动之前。
• 通过利用JS和一些CSS的强大功能，结合现代浏览器的功能，我们可以提供响应，流畅，对用户输入做出反应的体验，并为本地移动应用程序提供运行资金。这里有10个资源开始。

7.刷新基于卡的接口

虽然卡已经存在多年，它们是一个解决方案，不会很快就会消失。用于响应式网页设计的图案裁剪，它们使得以容易浏览和易于实施的方式显示大量信息变得容易。在最近几个月，我们已经看到他们用于超过文本和链接，成为各种富媒体的中心。设计师们正在玩卡牌内部丰富的微交互，并且正在寻找使这个旧模式再次新的方法。