⛩️ 🐶 🔩 2016年最光明的网页设计趋势 🆓 🛀 👿

网页设计的世界是灿烂而多样的。每年这里都不会发生大的变化。技术的快速增长证实了这一点，在过去的几年中，这表明网页设计的重要趋势在不久的将来将集中于改善现有的开发。

平面设计将变得更加纹理化，“电影体验”将变得更加普遍，并且使用JavaScript库将允许更多的实验。我们相信WebGL和虚拟现实的日益普及将使我们能够将我们知道的网站转变为具有有趣的交互功能的新网站。

在本文中，我们将研究今年11种最大的预期Web设计趋势。因此，请开始阅读吧！

1. WebGL（Web图形库）

最新成就包括引人注目的技术WebGL（Web图形库）。她使用了许多最近才出现的令人惊叹的网站。

简而言之，WebGL是一种无需任何插件即可在硬件加速的浏览器中呈现交互式3D和2D图形的方法。

1.1 WebGL交互式3D应用程序

体验好奇心（NASA）

WebGL是2015 SIGGRAPH会议的主题之一。您可以在此 YouTube频道上观看有关3D图形和WebGL的演示。

从一个半小时的视频中，您将了解NASA的“ 体验好奇心 ” 网络应用程序，该应用程序的创建标志着“好奇心”漫游者登陆火星三周年。该应用程序允许用户在火星表面上“滚动”三维NASA漫游车并“控制”操纵臂。

为了创建此资源，使用了Blend4Web（用于创建基于浏览器的3D应用程序的框架）和Blender（用于三维建模和动画的程序包）。

Beloola网站使用three.js（JavaScript库）

Beloola是第一个以三维世界形式设计的社交网络。它类似于《第二人生》中的Linden Lab，但除浏览器本身外，不需要任何特殊软件。

1.2 3D“视频” WEBGL

愤怒的妻子（Disp。Madeo）

WebGL中的另一种3D类型是“ 愤怒的妻子”游戏促销。乍一看，它看起来像是普通视频，但根本不是。实际上，集成到网页中的3D场景使用three.js JavaScript库。

SBS TV的“船”项目（澳大利亚）

澳大利亚SSB电视将越南作家Nam Le“ The Boat”的故事转变为使用WebGL 的互动视频故事。该应用程序由几部分组成，这些部分具有出色的动画和手动绘制的插图。像前面的示例一样，这里也使用Three.js。

因为

在应用中回忆因为回忆起创建一种时间机器的想法，但仅与音乐有关。大量的声音效果与屏幕上发生的事情密切相关，并取决于用户的操作。该项目是使用PIXI制作的，其形式为一系列剪辑的形式，这些剪辑由各种交互式元素激活。

1.3使用WebGL进行数据可视化

直方图（Matan Stauber）

直方图在交互式时间轴上展示了Wikipedia的历史事件（译者注。需要运行Chrome浏览器）。它可能看起来并不有趣，但是您自己尝试一下，您可能会惊讶于如何将如此大量的数据转换为简单而响应迅速的工具。

“世界博物馆”（由大英博物馆和Google开发）

类似的想法在大英博物馆的收藏中以略有不同的方式实施。 “ 世界博物馆 ” 项目是大英博物馆与Google文化学院之间合作的结果。使用WebGL以3D制作的“时间轴”上显示了博物馆藏品中的历史文物。

您可以使用X轴在Z轴或Y轴和大洲上在时间上向前和向后移动。通过菜单，您可以为按关键主题（贸易，冲突等）分组的对象选择标签。

1.4基于WebGL的2D动画

FranceTV

的Nouvelles Ecritures法国电视频道FranceTV的项目“ Nouvelles Ecritures ” （大约翻译为“现代卷轴”）是一个在浏览器中非常有趣地实现WebGL 2D动画的网站。您正在阅读的插图丰富，可以平滑地垂直滚动的感觉。该项目是使用Pixi.js JavaScript库实现的。

从技术角度来看，它是在伪3D空间中运行的连续二维动画。看起来非常令人印象深刻！

2. VR（虚拟现实）

虚拟现实（VR）是一项相关技术，可以在2016年撼动小工具的世界。也许很快一切都会变得更加有趣。

您听说过Google Cardboard吗？借助Android手机和一块硬纸板，您可以在家中感受到虚拟现实的感觉。Google在临时眼镜中添加了一个特殊的Android应用程序-Cardboard Camera，可让您查看虚拟照片。根据《卫报》 2016年1月的报道，此应用程序是最好的应用程序之一。

但是，如果您想要更好的“虚拟现实”，则可以预订Rift VR套件来自Oculus（约600美元）。Google Cardboard和Oculus之间有一个交叉点-它是三星的
VR GEAR （100美元）。
它对网页设计有什么影响吗？尚未，但请看一下WebVR（提供对VR设备的访问的JavaScript API）和一些使用此技术的项目。工作示例可以在Mozilla VR网站上找到。开发人员自己说的是：“我们想为站点创建一个开放的，高性能的虚拟现实系统。”

2.1 VR视频

标致的《捉龙记》（“ Catch the Dragon”）

标致208促销是虚拟现实设备与视频交互的一个很好的例子。建议在启动时选择所需的观看选项：VR（用于Google Cardboard）或360全景视频。如果您将设备与陀螺仪一起使用，则必须主动转动头部以“抓住巨龙”。

3.粒子系统

自80年代以来，就开始使用三维图形中的Deutser粒子系统来模拟一些自然现象，例如雾，烟，火，水，草和云。现在，随着WebGL的出现，它已可用于浏览器。

粒子使用的一个有趣示例是Deutser网页。观察元素如何飞散并以图形和符号的形式返回，以响应鼠标的移动。结果真是令人着迷。

4.全景

Regnskogfondet的雨林（Rainforest）

雨林不仅仅是一幅全景图。每一步，您都可以360度全方位欣赏丛林。

在这里，可获得高质量的三维风景，全屏全景图。但是，将导航元素集成到“世界”的结构中看起来更加有趣。

5.具有互动场景和元素的全屏视频

米尔卡（Milka）的圣诞节快车（Christmas Express）使用了一组由交互式场景分隔的视频片段。

网站圣诞快车还经营一个全屏幕视频的想法，但据我所知，没有什么做的WebGL。

您将完成创建圣诞节信件的步骤。撰写邮件需要10分钟，每天要交付。一切看起来都很真实，细节完美，甚至笔的动画也完全按照字母图案排列。提供圣诞节气氛！

6.动画故事

通过动画转播来传播想法并不是什么新鲜事。但是仍然存在着随着时间不断发展的趋势。有趣的是，这些转换不仅与视觉或技术方面有关。

要创建一个好的动画故事，仅开发设计并寻找一名艺术家是不够的。勇于克服公司的陈规定型观念和版权持有者的局限性。结果看起来很不寻常，但是使用此技术的网站显然会在公司网页的世界中脱颖而出。

丹麦皇冠（欧洲最大的猪肉生产国）的

年度报告在过去的一年中，来自欧洲食品制造商Danish Crown的产品并不是每个人都习惯的无聊的图表。报告页面以简单而大胆的视觉语言吸引了投资者，该语言积极使用抽象幽默和有趣的插图。文本的样式也以简单生动的表达方式设计。

这就是公司代表说的：“这看起来并不深刻。不表达某人的观点，不传达任务，不散布条件。这与平均核心价值观无关-尊重和主动。因此，我们这样做。我们表示尊重和主动。”

世界上最简单的决策

这种故事在非政府组织的网页上更为普遍。因此，气候现实项目网站“《世界上最容易的决定》是关于气候变化的互动漫画。访客回答简单的问题，并根据他的回答放映电影或提议签署请愿书。

该示例完美地说明了平面设计与纹理的结合程度。

7.线性导航

几年前，设计人员和开发人员竭尽所能避免线性导航。主要重点在于菜单的便利性以及浏览资源页面的简便性。

现在，无法想象曾经在站点上进行滚动被认为是不成功的（是的）。尽管您仍然可以从一些开发人员，客户或设计师那里听到神话般的“折页之上” （请注意翻译。“折页之上”是页面的一部分，用户无需滚动即可看到）。

在本文中，我们不会重点介绍年度最佳名片网站。让我们尝试找到设计人员用于在网站上创建线性导航的一些新颖有趣的方法。

来自朱利安·贝尔蒙特

电影制片人网站的作品集视频朱利安·贝尔蒙特（Julien Belmonte）收录了他所有的电影，并且以非常成功的方式对它们进行导航。影片从左到右水平移动，然后依次突出显示。在这种情况下，将使用类似于临时标记的移动红线。

几乎没有其他导航。除非在“关于”部分中，文字看起来像是任何电影的最终作品。

Francesco Bertelli在线CSV

Francesco Bertelli为她的在线CSV提出了一种创新方法。使用的交互式日历在美学上看起来令人愉悦，并且是证明自己的职业发展的有效工具。

该界面使您可以快速轻松地导航，从而有助于划掉已经浏览的日期。当您选择所需的项目时，带有信息的屏幕将在整个浏览器中打开。这种方法仅将站点访问者的注意力集中在他需要的主题上。

8.页面导航

这种类型的导航已经使用了很长时间。在上一篇文章“ 2013年趋势 ”中，Bagiga网站就是这种导航类型的示例：“屏幕后屏幕”或“ 上一个/下一个 ”。
在阅读普通书籍时，我们一页一页地翻页，一些设计师尝试使用这种习惯。

杰作

制造商珠宝制造商Imperiali Geneve使用与Francesco Bertelli类似的方法，当用户的注意力集中在每个单独的屏幕上，从而讲述自己的故事。该站点是线性的，但是没有自由滚动。您从一个屏幕移到另一个屏幕，没有任何中介。

它使用幻灯片导航，并在每个屏幕的开头和结尾带有界面元素。与滚动名片站点相比，所有这些看起来都更像电影场景之间的过渡。

阿姆斯特丹的梵高博物馆阿姆斯特丹的梵高博物馆

的网站上使用了类似的导航。页码及其编号，箭头与屏幕之间的幻灯片过渡结合在一起-就像您正在阅读传统书籍一样。

设计师努力使我们接近使用传统信息源的常规解决方案。那么未来的网页设计是什么？因此，页面周围的框架是一个古老的技巧，但是仍然经常使用。

9.框架页面

研究表明，这种趋势变得比我们一开始就认为的流行。网页设计中的类似想法已经发展了很长一段时间，但是从来没有像这样具有品味和优雅。

PNC金融服务集团有限公司姜面包分公司

该网站致力于第一个用真正的姜饼制成的全尺寸广口瓶。它也很有趣，可以作为经济学教学的指南。在此资源上，不仅使用浏览器窗口内的框架，而且使用页面导航。

wloks

网站Wloks提供图形化的资产别致而独特的方式。该站点使用了有趣的印刷目录和伪造壁画样式，而不是通常的股票照片电子界面。，并在屏幕的角落放置框架和元素菜单。

啤酒34个

啤酒厂家啤酒34发现他们控制在不同分辨率屏幕独特的解决方案，从历史和信息图表中汲取灵感。同时，保留了旧标签的外观。一切都非常简单，这是本集中最迷人的例子。

10.了解CSS转换

Stand4humanrights

Stand4HumanRights邀请您通过将照片添加到看起来像巨大曲面的社交墙上来加入社区。然后，您可以在社交网络上发布。可以拖动“社交墙”，它基于CSS变换。看起来很有趣，但是它需要强大的计算能力，并且不像人们期望的那么敏感。

“碎片中的

物种”“ 碎片中的物种”在其交互式展览中使用CSS动画，其中包含来自世界各地的30种濒危物种的探索。动物模型由分开的部分组成，这些部分从一个物体移到另一个物体时加在一起（请注意翻译者。要工作，需要使用Chrome浏览器）。

11. SVG动画

holohalo

实际上，使用经典的可伸缩矢量图形（SVG）技术的页面很少，比用于不同分辨率的可伸缩图标显示的内容有趣的多，这似乎很奇怪。Holo Halo是该规则的例外，可以作为设计师的灵感来源，展示SVG可以完成的工作。

总结

毫无疑问，2016年Web设计的主要趋势是WebGL的所有表现形式：交互式视频，游戏，动画和数据可视化。虚拟现实有望拥有美好的未来，但很大程度上取决于VR设备的可用性。

另一个普遍的趋势是对标准媒体的重视。这适用于手绘，染色和扫描的元素，例如The Boat项目。创建类似于印刷书籍，杂志，贴纸，海报和漫画的网页的趋势也很明显。这是通过逐页导航，使用框架并尝试将监视器屏幕视为“页面”而不是熟悉的“窗口”来实现的。

而且，如果您设法掌握了这篇大文章，您将获得少量奖金-乘坐Delahaye 165：

网站timeshift165

2016年最光明的网页设计趋势