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