网页设计：2014年值得关注的20个最热门趋势
不断发展的W3C规范以及现代的Web浏览器为数字设计的新时代打开了大门。
多年来，我撰写了有关不断变化的趋势的文章，特别是在网站布局和Web应用程序领域。
在不同的网站上花费了数小时的时间后，您往往会发现明显的设计趋势。
在2014年浏览网站时，请注意所有这些实际的UI / UX趋势。
查看新趋势很有趣，看看它们能坚持多久 。
许多已经启动，而其他一些才刚刚开始。
在这篇文章中，我想分享20种增长趋势，希望在2014年内开花 。
1.网格样式的布局
如今，甚至许多Facebook页面都分散了时间轴更新，使其看起来像网格。
社交新闻提要一直以简化的方式进行，例如Twitter或Tumblr。
我对网格设计的第一个主流认可是在Pinterest上 。
一切都是可略读的，但仍然连贯，并且在页面上不需要太多空间。
在使用缩略图或文本更新的情况下，网格布局会将所有内容压缩为易于阅读的格式 。
需要有一个目标， 用户体验 始终是第一位的。
这不是您可以强制进入任何旧网站的内容。
使用该功能的网站并不多，但那些网站经常使人感到愉悦 。
开源JS库（例如Masonry）可以为您完成很多艰苦的工作。
2.狡猾的图像字幕
使用CSS3，您可以依靠自然的浏览器资源而不会产生任何JavaScript效果。
许多网站使用图片库来展示作品集项目，照片，文章缩略图等。使用文本标题可帮助访问者将更多信息连接到图片 。
过去，我们介绍了一些独特的CSS3图像字幕效果 。
您可以构建标题样式的标签，这些标签会自动附加到每页的图像（或图形 ）上。
我从Codrops欣赏的另一个教程是CSS3的图形编号 。
每个网站应具有自己的设计，以使读者受益。
3.扩展表单元素
免费的开源jQuery插件已经进入了自己的市场-目前，它们的需求量很大。
它可以帮助您以更少的行和更少的混乱编写更流畅JavaScript代码 。
大多数前端开发人员都熟悉jQuery的用途。
看看Unheap表单库 ，其中列出了开源jQuery插件，您可以在新项目中下载和测试这些插件。
这些效果可能包括浮动标签，输入验证，指导的工具提示，以及您可能想像的几乎所有内容。
围绕jQuery表单插件有一种特别的热情，可以增强用户体验 。
4.重点关注的着陆页
这些应用程序甚至都有自己的伴侣网站。
几年过去了，我们拥有数百万个适用于Android + iOS设备的应用程序。
我记得当iOS App Store推出时，开发人员大声疾呼发布他们的下一个好主意。
这些着陆页对于鼓励潜在客户购买前更多地了解产品至关重要。
此后，这个想法已经扩展到封装手机游戏，开源脚本，智能手机应用程序，甚至可以想象到的任何数字产品 。
软件开发人员经常购买域名并启动网站作为营销工具。
5. HTML5视频播放器
幸运的是，HTML5媒体和新兴JavaScript库正在Swift改变时代。
花了几个月的时间，最好的播放解决方案是FLV视频。
我记得2004年，我自学了基本的ActionScript来为我的网站创建自定义视频播放器。
第一个要简单得多，但受基本功能的限制。
我强烈推荐的两个脚本是Video.js和MediaElement.js 。
Flash在必要时仍有其目的，但是大多数Web开发人员都同意Internet视频的未来是HTML5。
当您在以后的任何项目中需要自托管视频时，请记住这些。
这两个脚本都提供了文档以及API，它们都是出色的库。
您也可以尝试使用相同的代码构建音乐/音频播放器 。
Media Element提供了一些默认外观以及用于构建自己的播放器设计的更多文档。
6. 3D过渡效果
尽管CSS3一直在追赶，但可以使用jQuery创建3D效果。
这些通常内置在页面中，用于动画画廊，导航菜单和元素 。
在过去的一年中，我在更多的网站中发现了许多创意3D动画。
但是，如果您想尝试新事物，我强烈建议您在网络上搜寻3D动画代码示例以供试用。
自然，并非所有浏览器都完全支持动画，因此设计人员应警惕在一页上使用太多动画。
7.平面设计元素
这种扁平的UI模式已经超越了表单输入，甚至导航菜单。
CSS3允许设计人员使用自然的框阴影，文本阴影或圆角创建更扁平的按钮 。
我该如何讨论Web设计趋势，而不必提及平面UI 元素的广泛使用。
地铁样式的布局也已从Microsoft的Windows OS和Windows Mobile Phone普及。
在我的平面网页设计指南中，您可以找到大量免费下载的PSD / AI图形。
但是我觉得在不久的将来我们可以期待更多。
8.个人肖像
最好的方法之一是在页面上的某处包含自己的样本照片。
但是，要使人们真正感兴趣，就需要建立人与人之间的联系。
您想传达一些关于您自己，去过的地方的信息，并展示您的工作样本。
简单的投资组合网站通常是我的最爱。
甚至在您的主页或关于页面中的一张小照片，访问者也可以一眼看出您的身份。
尽管您不需要在网站上使用大型背景肖像 ，但它看起来很棒。
这也将融合到较暗的背景中，并重新着色为黑白阴影。
安德里亚·曼（Andrea Mann）使用的照片封装了大部分首页。
9. SVG图像和图标
SVG图像就像矢量，从某种意义上说，它们可以很容易地进行操作而不会造成质量损失。
各个形状由数学方程式组织，这使您可以将向量拉伸到任意大小。
基于矢量的图形不是围绕像素构建的，而是线和坐标。
这种巨大的趋势将在未来几年席卷互联网（如果还没有的话）。
许多人仍在使用旧版本的Internet Explorer和其他旧标题。
最大的问题是所有Web浏览器中对这些图像的支持。
这是一个比较详细的主题，但是如果您好奇的话，值得研究。
Snap.svg是一个JavaScript库，专用于在具有自然SVG图像的多个浏览器中提供支持。
您会对质量感到惊讶。
如果您真的想入门，我建议您使用Codepen ，这是一个开放的社区驱动的IDE，供开发人员在线共享其工作。
10.独特的网络副本
这些字体是在CSS中定义的，您可以将它们写到font-family属性中以设置网页文本的样式。
您可以导入本地或其他服务器上托管的字体文件。
@ font-face声明是Web开发中最酷的新功能之一。
然而，仅具有自定义页面上任何字体的能力就是一项强大的技术，可帮助您的网站脱颖而出。
与可以包含多种不同颜色的真实图形相比，这些图标的设计欠佳。
它已经成长为包括基于字体的图标 ，其中灵活的图标在页面上以文本形式呈现。
11.延迟加载动画
这些元素的行为与延迟加载的图像相似，不同之处在于它们已被加载到页面中并且不可见。
有一天，在浏览ThemeForest时，我遇到了许多WordPress主题，这些主题已将过渡效果应用到元素上，但是只有在将它们滚动到视图中时它们才会动画。
使用JavaScript可以很容易地检测到何时可见元素，然后使用CSS3过渡或JavaScript进行动画处理。
它更多地是关于页面美学，并为访问者提供了一个时尚的界面。
除非您有目的地等待加载内容，否则这种趋势可能不会节省带宽。
如果向下滚动Chart.js上的页面，您将看到内容块+图像开始逐渐淡入视图。
12.定制的图库
进入2014年，我们可能希望看到更多针对动态轮播和图像灯箱的解决方案。
图像画廊是数十年来一直存在的一种趋势。
JavaScript和CSS的日益集成使开发人员能够开发出出色的新项目。
这在某种程度上是试验性的，但是您可以看到开发人员如何突破界限并看到可能的方法。
为了提供一个小例子，请看一下有关Codrops的最新画廊教程，该教程使用弹性拖动效果在照片之间切换 。
13.超级导航菜单
我注意到大型导航菜单的发展趋势是小的，但仍在增长，它可以容纳较大的内容和链接 。
与HTML5 / CSS3规范一起，移动响应式网络对此起了很大作用 。
近年来，各种新型花式导航已经过测试和采用。
它的确在页面上占用了一些空间，但也为读者提供了浏览网站的更多选择。
立即想到在线杂志或网络论坛。
这些是在大量发布大量独特内容的网站上最常见的。
概念相似，对于任何对此趋势感兴趣的人，提供的示例都是一个很好的起点。
我偶然发现了Smashing Magazine上的一篇相关文章，谈论有关大型站点的导航菜单 。
14.扩展搜索栏
用户单击放大镜图标或单击表单本身，然后将其扩展为允许更多文本输入。
但是，在您的布局中构建半隐藏或扩展搜索栏的流行度越来越高。
回顾过去，我不确定这个概念什么时候兴起。
这种技术在响应式布局中很突出，但是更大，更完整的设计都包含了这些适应性强的搜索字段。
您甚至可以将表单隐藏在最顶部，然后像导航菜单一样向上/向下切换表单。
首先， 隐藏的搜索字段用于节省页面空间。
Codrops为此主题撰写了出色的教程 ，对于任何开发人员来说都是一本好书。
15.特色清单
通常情况下，细节上会加上一些图标，以帮助您更简洁地说明要点。
这些是面向列表的详细信息，说明有关公司或产品的信息。
图标就像在快速滚动时引起人们注意的糖霜一样。
它使您对您提供给客户的东西以及它们如何工作有一些见解。
有关任何产品或服务的信息收集为访问者提供了留下来的理由。
我注意到这些详细信息列表已成为许多主页的主要内容。
16.移动优先设计
消除所有多余的绒毛，仅保留必需品。
但其想法是首先模拟您的网站在移动屏幕上应如何显示为自适应布局。
浏览网站时，很难区分设计过程的方式。
卢克·沃布洛夫斯基 （ Luke Wroblewski ）所著的《 移动优先》一书在一段时间前就给了我这个主意。
我喜欢这个概念，希望设计师会尝试实现这一点，以了解它如何影响工作流程和最终结果。
以移动为先的设计将移动体验放在更高的优先级，然后将其作为整个布局的基线。
导航菜单变得更宽，内容以及可能的边栏也被加长。
从这个角度来看， 将设计扩展到更大的屏幕要容易得多。
17. HTML5画布
我什至看过用于用鼠标收集签名的canvas元素 。
使用JavaScript，可以在HTML5内直接创建游戏或绘制应用程序。
关于画布元素 ，有很多要说的东西，这是一个相当多的研究主题。
可能性正在Swift增长，我个人很高兴看到2-3年后的画布会是什么样。
另一个示例是基于HTML5 canvas和JavaScript构建的小型水平加载栏 。
有人在Dribbble上贴了一个光滑的加载圆圈，这支笔是使用canvas元素的复制品。
上面的示例来自一个简单的Codepen条目。
18.像素精灵和浏览器游戏
但是JavaScript已成为社区的立足点，许多开发人员很高兴为这些类型的项目发布开源代码。
与经典视频播放器非常相似， 浏览器游戏过去通常是在Adobe Flash中制作的。
因此，构建自己的浏览器内置Sprite游戏将是一个更大的挑战。
制作如此精美的像素艺术品需要大量的设计才能。
这些设计并不常见，但确实引起了您的注意。
不久前，我写了一篇文章，详细介绍了也可以使用动画的以像素为中心的网站 。
关于此过程，您需要了解很多东西，但值得庆幸的是，您可以在Google网上找到数百本教程。
该网站列出了许多免费JavaScript库，用于创建您自己的浏览器游戏。
HTML5 Game Engine可以找到入门的最佳资源之一。
19.快速用户注册
在这个快节奏的世界中，冗长而详尽的注册表格令人反感。
实际上，许多服务要求您先注册才能开始使用该网站。
越来越多的全新初创公司和Web应用程序允许用户注册。
您可能对该策略如何有效地吸引新用户感到震惊。
当新访客对您的产品感到好奇，看到表单只有2-4个字段并决定购买时，就会发生这种情况。
许多较新的Web应用程序都在其主页上包括注册表单，以捕获尽可能多的访问者。
尽量保持所有注册表的准确性 。
20. CSS3动画关键帧
直到最近CSS3才成为主流，开发人员可以使用@keyframe构建自己的动画效果。
自从千年以来，JavaScript一直是浏览器动画的主要选择。
最新CSS3规范为您提供了足够的工具来以几乎任何您喜欢的样式对元素进行动画处理。
您可以在0％-100％之间设置帧百分比值，并定义随时间变化的属性 。
还有一种使用过渡属性进行动画处理的方法，尽管过渡属性仅具有一种动画状态，而关键帧的行为与Adobe Flash非常相似。
闭幕
此外，如果您对我可能已经忘记的2014年设计趋势有任何想法，请随时在下面的评论区域中与我们分享。
我希望本文能够阐明一些我们在未来项目中会特别注意的设计趋势。
但是正是这些较小的口音才使生活变得更加聪明。
较小的接口概念并不是我们每天都会考虑的事情。