到目前为止，2011年已经在设计和互联网技术方面带来了惊人的变化。 Web开发已成为进入学习领域的一个流畅得多的主题，更不用说无数个对简化流程有用的开源库了。 然而，似乎全球设计界还远远没有投入。

我想介绍15个在过去一年中发展Swift的想法。 这些趋势包括Web和图形设计技术，这些技术可能会在2012年发挥重要作用。您可能已经在许多自己喜欢的网站上看到了其中的一些。

幸运的是，实现这些功能的方法变得更容易理解，并且代码更苗条。

1.响应式界面设计

在设计网站时，普通用户的体验可能是要考虑的最重要方面。 您希望页面元素快速响应键盘/鼠标输入并表现出预期的效果。 一些示例可能包括侧面弹出菜单，下拉框和弹出窗口。

包括著名JavaScript库（例如MooTools和jQuery），动画化这些功能变得更加容易，甚至更多。 大多数现代浏览器都支持此代码，并且在脚本不可用时会优雅地降级。 最终，您希望使用户在与设计中的任何位置进行交互时感到舒适。

同样，您应考虑表单输入和数据检查。 在每个注册区域中，当您在许多注册页面上工作时 ，都会收到少量答复。 您可以自动检查有效的电子邮件地址，重复的用户名，甚至可以再次检查密码输入。 这样可以节省用户时间，并在整个注册过程中提供方便的指导。

2.触摸屏移动设备

在过去的几年中，很明显，即使非技术爱好者也开始获得智能手机的支持。 但是仅从2011年以来，我们看到了移动网站和特定于移动设备的模板的爆炸式增长。

iPhone和iPad设备以及Android驱动的电话的普及意味着您将使访问者通过触摸命令与您的页面进行完全交互。 对于每个设计模型，这都必须成为现实的考虑。 移动Web设计的 趋势表明，构建完全独立的移动主题通常可以提供最佳效果。 这样，您可以将所有动态内容保留在主布局中，同时为移动用户提供网站的精简版。

3.大量赠品！

谁能说他们真的不喜欢免费下载？ Web设计师已经在线共享他们的内容多年了，但是直到最近，这才成为数字艺术家中非常流行的趋势。 有一些社区专门为网站和图形设计师提供免费下载而建立。

我个人最喜欢的两个是Download PSD和Designmoo ，它们都由顶级会员经常更新。 此外， Hongkiat Freebies存档中还包含许多甜品供您查看。 在任何时代之前，从未如此轻松地下载免费的Web界面，布局，徽标，横幅以及几乎任何其他类型的PSD / AI文件！

一些整洁的下载

以下是从2011年初开始退房的一些不错的免费赠品。 如果您认为此列表中有一些不错的文件，请等到2012年发布！

4. HTML5和CSS3标准

这两种新的设计原型在2011年的整个过程中都在不断增长。语义Web设计师一直在等待多年才推出仅CSS的设计，从而呈现圆角和阴影。 此外，W3C在获得最受欢迎浏览器的支持方面取得了很大进展。

我只能看到HTML5 / CSS3网络开发的美好前景。 在当今领域，前端设计师经常被忽视，但是他们在整个合成过程中起着至关重要的作用。 尽量不要根据自己每天掌握和练习的技术将自己挤入任何一套“标签”中。 如果您觉得有需要，我们可以提供HTML5 / CSS3编码的入门指南 。

坚持这些新标准也将使使用JavaScript和jQuery进行开发变得更加容易。 开发人员已经在线上发布和共享他们HTML5 / CSS3项目代码，如果事情继续下去，我们肯定会在明年看到更多此类内容。

5.丝带和横幅

尽管这种设计技术并不是完全“新的”，但直到最近才真正突破主流。 您可能已经看到了角色带，横幅导航栏和小色带徽章的示例。 由于大量详细教程的积累，这些趋势很可能激增了，这些教程都可以通过Google找到。

如今，Web设计师在发布自己的博客以共享信息方面更具能力。 现在，可以轻松地在设计人员之间传递简单的技术，以复制最受欢迎的效果。 您甚至可以下载 免费的PSD ，以节省您的工作量。

6.高级WordPress主题

WordPress 3.0的最终版本包括许多期待已久的功能，例如自定义帖子类型和独特的文章图像。 但是我见过的最深刻的变化来自专门从事高级WP主题的 WordPress开发商店。

购买此类主题之后，安装过程将与其他任何过程相似。 现在，就可以在主题内包含自定义插件功能，子主题，新的管理菜单以及其他功能！ WooThemes， ElegantThemes和Rocket Themes是少数几个在我眼中脱颖而出的品牌。 他们的质量是无可挑剔的，我觉得他们的开发人员超越了他们，创造了最好的模板和最直观的管理菜单。

进入2012年，我只能想象WordPress将变得更加易于使用。 这意味着将发布更多高质量的主题，并发布更多令人惊叹的博客。

7.在线杂志

在谈到WordPress主题时，我们还应该使在线杂志Swift获得成功 。 除了一般的结构和页面布局外，这些网站与任何一般的WordPress博客都没有太大不同。 您可以通过其主页的纯粹介绍以及为该站点撰写的作者集合来发现这些较大的杂志。

随着杂志开始在线发展，它们将成为许多作家的收入来源。 授予诸如“网页设计”之类的主题的目标是比游戏或经济学小的市场。 但是，我们在网上看到的设计杂志比印刷杂志更多的事实表明，未来几年世界可能会走向何方。

8.简易阴影

作为CSS3的一个方面，设计人员现在比以往任何时候都更容易在页面上的任何地方实现投影。 框文本和框样式元素具有各自的属性，以呈现清晰的阴影效果。

文本阴影的语法很容易记住，并且跟box-shadow一样 。 由于现在不需要图像来渲染这些效果，因此Web开发人员可以集中精力进一步扩展这些基本概念。

9.动态排版

字体是包含Web设计传统的领域的重要组成部分。 包括Arial，Helvetica，Georgia和Trebuchet MS在内的最著名的字体已经存在多年了。 尽管它们在Web标准中继续发挥着深远的作用，但对于高级网页排版 ，还有许多替代选择。

例如， Typekit仅需要在文档头中包含几行代码。 之后，您可以指定要包括的字体名称，并将其附加到CSS中。 关于此技术的最好之处在于，它主要依赖JavaScript，因此最终用户不需要安装字体。

另一个选择是Google Web字体 ，其行为与Typekit相似。 我建议有兴趣的设计师检查CSS3的@ font-face媒体查询，因为您将获得更多的创造力。 此代码可用于从Web服务器导入.ttf或.otf字体文件，并将其作为可用的样式表字体！ 我期望有太多用于构建动态字体的备用系统，我希望2012年在这一领域拥有大量创新和设计人才。

10.图片库幻灯片放映

随着jQuery的随后流行，我发现越来越多的图像幻灯片放到Web布局中。 画廊非常适合演示内部页面内容。 这可能是一组投资组合条目，照片，带有特色图像的博客帖子 ，演示屏幕截图等。

考虑许多独特的滑动和淡入淡出动画时，为您的主页构建快速幻灯片放映从未如此简单。 我有信心在2012年将看到这些趋势的增长，而不仅仅是设计师之间。 在线Web应用程序和软件公司一直在使用幻灯片作为指导教程来显示屏幕截图和独特功能。

11.模态弹出框

考虑到模态框已经出现在桌面软件和移动应用程序中多年了，我觉得模态框对于Internet来说还是相当新的。 模态窗口的目的是在当前页面顶部提供框内容（例如用户注册或登录），而无需加载到新页面上。

许多开源图像库脚本都使用一种灯箱效果，其中背景比弹出框变暗。 尽管尚未被许多人所接受，但我一看到它便真的很喜欢它。 而且，尽管模态框性感而时尚，但它们也很难编码并无法正常工作。

要获得自己网站的想法，请查看一些更流行的社交新闻共享社区。 Reddit和Digg是最先想到的两个，因为它们都具有具有典型布局的注册/登录模式框。 此外，Google +的UI效果拥有大量的模式功能。

12.励志名单

从Web设计的早期开始就出现了列表项的集合。 进入新世纪后，设计师开始使用HTML有序列表和无序列表来放置导航菜单。 但是如今，列表可以并且正在使用更多的列表。

在大多数博客主题中，我发现整个侧栏都装有列表！ 更不用说为文章条目中的列表精心设计了CSS样式的设计师。 我们在今年早些时候的另一篇文章中介绍了鼓舞人心的列表样式 ，这可能使您对该问题有更多的了解。 展望2012年，我期待一些真正有创意的示例，这些示例可能与Flowapp的任务和待办事项自定义布局相提并论。

13.生成的图像缩略图

在网络世界中，我们可以同意内容为王。 但是大多数设计人员也会同意，空白文本页面很快就会变得无聊。 如果您知道如何轻轻地将图像洒入图像，则图像可以添加额外的香料。 一种这样的方法是使用动态缩略图为每个页面或文章提供预览。

当今的博客正在继续采用特色图片趋势，那么为什么不将生成的缩略图也应用到主题中呢？ 这些通常会引起我对文章标题的关注，并有助于拆分一个充满文本链接的页面。

作为另一个示例， Dribbble为每个设计图提供了缩略图的整个画廊列表。 在这种表行样式的布局中，一目了然地浏览每个缩略图并滚动浏览以查找所需内容非常容易。 事实证明，这种策略吸引了整个设计社区的注意力！ 嗯，至少是Dribbble的成员最多。 我只能期望在过去的这些例子的基础上，2012年这些想法将得到进一步的运用。

14.超大图标

这种独特的趋势源于Mac OS X图标设计的流行。 当程序员开始为他们的Mac应用程序启动网站时，我们经常看到品牌所代表的巨大规模。 因此，iOS开发人员也意识到了这一趋势，现在轻松地融入了现代设计文化。

很难预测随着我​​们进入2012年，这些趋势将如何变化。一方面，这些图标可能很笨拙，并且占用了不必要的空间。 然而，我们甚至还差一点就赶不上iOS / OSX应用程序的短缺，而设计师们仍在不断完善像素完美的图标规格。 更不用说网页设计师现在几乎在所有页面品牌中都包含超大图标！ 这是一种吸引访客直接注意力并为您的公司树立名声的好方法。

15.夸大的超链接

锚链接无疑是任何网站的前五个最重要元素。 自1990年代以来，这些技术显然已经走了很长一段路，流行的设计趋势也只是呈指数增长。 看来我们正在进入一个以夸张的设计为主的时代。

查看Patterntap的一些链接示例 ，看看是否有任何跳转出并引起您的注意。 无论是标准效果还是悬停效果，超链接设计都有很多令人难以置信的想法。 CSS3圆角，文本阴影和自定义字体系列为组合添加了更多很棒的主意！ 我最喜欢的示例之一是SimpleBits ，它在每个博客条目永久链接上使用了简短的动态动画。

结论

这些想法只是我在2011年全年发现的流行趋势中的一些。出色的Web设计始终将重点放在首位，并始终将用户的意图放在首位。 这些理念在2012年之前不太可能会有所不同，但是我们如何构建布局和显示数据始终在变化。 在评论讨论区中让我们知道您的想法或问题。

翻译自: https://www.hongkiat.com/blog/web-design-trend-2012/